Hotloading imported css styles

[0nn0]

At the moment it seems that the post-css loader combined with ReactHotLoader and the postcss-import plugin does not auto-reload any stylesheets that get imported in a main css file.

I've created an example case in the following repo:
https://github.com/0nn0/hotloader-postcss-imports/tree/postcss-import-plugin

You can produce the problem using the following steps.

1. Check out Branch postcss-import-plugin
2. Run npm install
3. Run npm run start
4. Open http://localhost:3000/
5. Change background-color in styles.css (change will be directly visible)
6. Change background-color in component.css (change will NOT be visible until you restart the app)

Is there a way that this can be solved?

@MoOx offered a suggestion here that the postcss-loader perhaps can make use of onImport like here if postcss-import is detected?

postcss/postcss-import#40

[ai]

Sorry, but I am not webpack user anymore, so I have no skills to fix hotloading.

@0nn0 maybe you can ask somebody in webpack team?

[0nn0]

Hi @gaearon, do you by any chance have an idea how solve solve this problem?

I've checked other repo's like react-hot-postcss-boilerplate, but haven't found one that has this workflow with webpack, postcss and react hotloader working...

[gaearon]

I checked it out but I can't figure out what exactly postcss-import plugin does and how it's different from running without it :-(.

Does it make a real difference, or is it an optimization? Do you need it enabled in development?

[ai]

@0nn0 I think postcss-import is a bad way to use postcss-loader. Webpack already has good dependency system. So it is better to load CSS dependencies by webpack.

[gaearon]

I think the problem is that Webpack is ignorant of PostCSS dependencies. Generally loaders should tell Webpack what files the processed file depends on, so that when dependant files change, the parent is recompiled. addDependency might (or might not :-) be the API for this.

I don't know if PostCSS exposes the dependency tree after compiling a file. If not, there's no way to make postcss-import work with hot reloading because Webpack is unaware of internal dependencies.

[ai]

Maybe we can ask postcss-import team for some config to set addDependency, but it seems like to complicated. I really doesn’t see a point of using postcss-import when you have webpack to concat files.

[gaearon]

Agreed, this seems like overcomplication.

[ai]

I will add some notice about postcss-import to this project README.md

[MoOx]

Don't do that. postcss-import can already handle this. Like said in the description or the linked issue, cssnext-loader already handle this using postcss-import onImport option.
css-loader (which handle import) is using an old and deprecated parser and break in a multitudes of cases if it is run before postcss/cssnext-loader.
So, since this can be handled here (like cssnext-loader does) you should totally handle it in this loader.

[ai]

@MoOx yeap, css-loader is one of the reason why I migrated away from webpack. But postcss-import will not fix issue, because anyway some files will be processed by css-loader.

@MoOx can you set a PR with recommendations for postcss-import users? What onImport they need to set?

[ai]

@gaearon BTW, why webpack uses so bad parser in css-loader and not PostCSS parser?

For example, PostCSS parser has a safe mode to load legacy CSS with any mistakes.

Also PostCSS parser is one of the fastest JS parsers. There are only CSSOm faster that PostCSS, but only because it has mistakes in parsing.

[gaearon]

@gaearon BTW, why webpack uses so bad parser in css-loader and not PostCSS parser?

I can't speak for @sokra but I'm sure that it is only for historical reasons? If you port it to use a better parser, I think that would be awesome.

[MoOx]

This has already been mentioned here webpack-contrib/css-loader#36

@ai I don't really know what they should put in onImport, probably something like this https://github.com/cssnext/cssnext-loader/blob/c7b79f5281a5e63adca933fc4ec434f965e686e3/index.js#L25-L27 and chaging this by webpack. This need some work to try and check it works.

[0nn0]

Without the use of the postcss-import plugin the reloading does work, however then the PostCSS plugins get applied solely to the main stylesheet (styles.css) but to none of the css files that get imported in there (component.css). You can see that in the postcss branch.

[MoOx]

Indeed. And you cannot use postcss after css-loader since this one return js code. So this must be handled when calling postcss-loader.

[ai]

Released in 0.5

[faergeek]

Seems like you forgot to publish new version to npm.

[ai]

@faergeek oops :) fixed

[matthewmueller]

Did anyone test that this worked? I don't think it's working for me.

[ai]

@matthewmueller do you use postcss-import? Do you add hook for it from docs?

[matthewmueller]

do you use postcss-import? Do you add hook for it from docs?

yep following the docs

correction: it works, sort of. if there's no syntax errors, it will reload. if there's a syntax error, it stops compiling and you have to restart the webpack server.

[ai]

Open a new issue with all output and plugin list

[luisfontes]

I'm having a bit of trouble getting webpack to watch the imported css files. They're being processed on the first run, but webpack does not recompile when I modify these files.

I have a colors.css with some vars (w/ postcss-simple-vars) that I want to import in my other css files to use the $vars. Like in a SCSS project. So I set up my webpack config with postcss and postcss-import and everything is working as expected, except for the file watch on my color.css.

Here is my postcss config:

  config.postcss = function(webp) {
    let cssnanoOpt = {
      discardUnused: false,
      zindex: false
    };
    let rucksackOpt = { autoprefixer: true };

    let devPlugins = [
      postcssImport({ addDependencyTo: webp }),
      mixins,
      nested,
      simpleVars,
      rucksack(rucksackOpt),
      cssnext
    ];
    let prodPlugins = [cssnano(cssnanoOpt)];

    let plugins;
    if (BUILD) {
      plugins = devPlugins;
    } else {
      plugins = devPlugins.concat(prodPlugins);
    }

    return plugins;
  };

Any hints on what I'm doing wrong?

[MoOx]

Do you use style-loader?

[luisfontes]

Yes, with extract-text-webpack-plugin. But I disable the extract-text plugin in development for hot loading.

  const cssLoader = {
    test: /\.css$/,
    // Reference: https://github.com/webpack/extract-text-webpack-plugin
    // Extract css files in production builds
    //
    // Reference: https://github.com/webpack/style-loader
    // Use style-loader in development for hot-loading
    loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss'),
  };

[MoOx]

Can you show how you disable the ExtractTextPlugin ?

[luisfontes]

I've set up a repo where you can reproduce this behavior: https://github.com/luisfontes/webpack-postcss-import-hotload

Just npm install and npm run dev. Thanks for the help 👍

[timaschew]

@luisfontes I had also issues and I realized that it only works if this line postcssImport({addDependencyTo: webpack}), is the first in the array of

postcss: function(webpack) {
    return []

In my case I use cssnext and autoprefixer and the postcssImport need to be the first entry!

[MoOx]

Reminders:

• it's mentionned as the first note in bold https://github.com/postcss/postcss-import#readme
• cssnext includes autoprefixer.

[timaschew]

@MoOx
Oh, you're right about the first note in bold.
I meant cssnext and precss, not autoprefixer, thanks :)

@luisfontes
I checked out the repo, there are really lot of plugins, It think you need to turn some of them off to figure out which is not working in combination with postcss/potscss-import

[mummybot]

For those new to Webpack and coming to this thread and going "wah?!?" the exact code is:

    //webpack.config.js
    var postcssImport = require('postcss-import');
    ...
    postcss: function(webpack) {
        return [
            postcssImport({ addDependencyTo: webpack }), // Must be first item in list
            precss,
            autoprefixer
        ];
    },

Hopefully precss will support this soon, so we won't need to use the postcss-import plugin as well.

[ghost]

+6 months and precss still does not support this. Ridiculous 😠

[ZeeCoder]

Use postcss-import@8.1.0. (postcss/postcss-import#207)

[hustcer]

@mummybot It does not work for me, I'm using webpack@2.1.0-beta.21 and postcss-import@8.1.0, does this matter?

[ai]

@hustcer yeap, webpack 2 issue is here #92

[hustcer]

@ai Thanks, maybe I have to wait.