Webpack-cli: Bug: css bundle file not used / applied

[DanielRuf]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?
The supplied bundle file for CSS is not used.

If the current behavior is a bug, please provide the steps to reproduce.

Create a project with PostCSS and provide a value to If you want to bundle your CSS files, what will you name the bundle? (press enter to skip

What is the expected behavior?
The bundle name should be used in the generated config.

If this is a feature request, what is motivation or use case for changing the behavior?

Please paste the results of webpack-cli info here, and mention other relevant information such as programming language.

  System:
    OS: macOS High Sierra 10.13.4
    CPU: x64 Intel(R) Core(TM) i7-3740QM CPU @ 2.70GHz
  Binaries:
    Node: 8.9.0
    Yarn: Not Found
    npm: 6.0.0
  Browsers:
    Chrome: 66.0.3359.139
    Firefox: Not Found
    Safari: 11.1
  npmGlobalPackages:
    webpack-cli: 2.1.2

[PlayMa256]

The entire plugins property is not being declared because we have a plugins inside the loader, that is what is causing the transformer to skip that property. I'm having a look at that.

[evenstensberg]

This is skipped if you're not in production

[DanielRuf]

This is skipped if you're not in production

Not sure if I understand correctly. We use prod using webpack-cli (webpack-cli init) and the config for the extract text plugin and so on is not correct. No css file is generated.

[evenstensberg]

Alright, let me try to reproduce and get back to you. If you have a repo I can debug against that would speed up things

[DanielRuf]

If you have a repo I can debug against that would speed up things

I just ran webpack-cli init and nothing more =)

If it is helpful I will do it again and add the generated files to a new repo.

[evenstensberg]

That would be nice 💯

[buoyantair]

I'd love to take this! 🗡 👊 🍰

[PlayMa256]

@buoyantair go for it. I found that something is messing up when generating the AST based on the config object. That only happens when you select postcss-loader because it has a plugins array, which is also o property.

I found that something is happening around here: https://github.com/webpack/webpack-cli/blob/7c01f3934d81d66487718c6bb7aa0fba9fd03cd7/lib/ast/index.js#L5-L9

[evenstensberg]

No, that's wrong. Only the generator will make sure that everything passed to the AST is correct

[PlayMa256]

Generators are generating correctly, something is happening in between.

{ module: { rules: [ [Object], [Object] ] },
  plugins: 
   [ 'new UglifyJSPlugin()',
     'new MiniCssExtractPlugin({ filename:\'asdasd.[chunkhash].css\' })' ],
  entry: '',
  output: 
   { filename: '\'[name].[chunkhash].js\'',
     chunkFilename: '\'[name].[chunkhash].js\'',
     path: 'path.resolve(__dirname, \'dist\')' },
  mode: '\'production\'',
  optimization: 
   { splitChunks: 
      { chunks: '\'async\'',
        minSize: 30000,
        minChunks: 1,
        name: false,
        cacheGroups: [Object] } } }

The plugins array is there, the config object is being built correctly.

[evenstensberg]

I think the issue is about the css not being used in entry or the CSS plugin not being used.

[buoyantair]

I went through it and I feel like something is going wrong with how the AST is parsed. I mean like the output in the yo-rc.json file seems perfect, so I guess its just how the AST is parsed? I need help with this :/

[dhruvdutt]

@buoyantair Can you try adding test cases to recursive-parser and see the output snapshot?

I would also recommend going through addProperty() function here. This function does the job of generating AST tree for the webpack file.

[buoyantair]

Just noticed there are no tests for addProperty :3 d

[dhruvdutt]

@buoyantair Use tests for recursive-parser with init as last arg inside defineTest() function. Add your own fixtures if you want. This is essentially testing addProperty().

[buoyantair]

All this time I was reading code in master branch!

[dhruvdutt]

Ah! :smile: The contributions guidelines are in process. #247

[buoyantair]

I get this error when I try to run the tests as is... :/

[evenstensberg]

Which branch are you at @buoyantair ?

[dhruvdutt]

@buoyantair Ah! Yes, I get the same error if I don't do the changes done in #462. I thought I was the only one.

[evenstensberg]

Signature shouldn't change. Change the function invocation if you need to fix the bug.

[buoyantair]

@ev1stensberg Im on next branch :/

[buoyantair]

Hmm not sure what you mean by "Signature shouldn't change", because I literally recloned the whole repo and then reinstalled the packages and tried again and I get the same error 🤔 I think I was working just yesterday when I tried to test some changes.

[dhruvdutt]

@buoyantair I think you can try the changes done in #470. That should fix the error.

[evenstensberg]

I think this is fixed in webpack-cli@3, please reopen or message me to do that if you think it's still an issue! 😄

[DanielRuf]

Ok, will test then =)

[buoyantair]

@ev1stensberg Is there any specific commit I can look into? :O

[evenstensberg]

Check out the addProperty function history on master

[DanielRuf]

So far looks good but it does not seem to work with webpack 4 (generated webpack.prod.js is not used).

[evenstensberg]

Could you elaborate on that?

[DanielRuf]

I guess I will do some more testing with my colleague as this seems to be a bit more complicated (several issues combined).