Regression with - Hotloading imported css styles issue 8

[kvnlnt]

Watch/hotloading not working for @import'd css files.

Here's my webpack.config.js

entry: {
    app: [
        "es5-shim",
        "es5-shim/es5-sham",
        "babel-polyfill",
        "webpack/hot/only-dev-server",
        "./src/main.js"
    ]
},
devtool: 'source-map',
output: {
    path: "./dev",
    filename: "[name].[hash].bundle.js"
},
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
        title: 'Custom template',
        template: 'src/index.html',
        inject: 'body'
    })
],

module: {
    loaders: [{
        test: /\.css$/,
        loaders: ['style-loader','css-loader','postcss-loader'],
        include: path.join(__dirname, 'src')
    }]
},

postcss: function (webpack) {
    return [
        require("postcss-import")({ addDependencyTo: webpack }), 
        require("postcss-url")(),
        require('postcss-cssnext')()
    ];
}

I'm starting my dev server with:

webpack-dev-server

My CSS file looks like this

@import url("./css/base.css");
...

Any changes to base.css results in nothing. It also appears to have been an issue in the past (#8). Is there some kind of incompatibility with webpack-dev-server, postcss-loader, postcss-import, etc? Starting here since my previous configuration which relied on cssnext-loader worked.

[MoOx]

it's supposed to work (and it's working for me). What is your version of postcss-import? If v8, can you try v7 please?

[kvnlnt]

installing postcss-import@7.1.3 did not resolve the issue.

To expand a little

I have a main.js file which includes a main.css file:

var Css = require('./main.css');

I have a main.css file which imports all my styles:

@import url("./css/base.css");
...

Facts so far:

1. Change to javascript files results in hotreloading working correctly
2. Change to the main.css file directly results in hotreloading correctly
3. Change to any imported css file in main.cs results in nothing happening
4. This process worked in cssnext-loader
5. Tried both @import "./css/base.css" and @import url("./css/base.css") syntaxes
6. Tried different IDE's (sublime, intelliJ)
7. Tried different version of postcss-import (7.1.3)

[kvnlnt]

@MoOx could you post a "working" webpack.config.js file with it's companion package.json that utilizes the webpack-dev-server? I've been fiddling with these configurations for over a week now but can't seem to get the right combination down to recreate the workflow I had with cssnext and cssnext-loader.

[MoOx]

The only thing that is required is require("postcss-import")({ addDependencyTo: webpack }),. addDependencyTo is the key to declare dependency to webpack, and so handle the rebuild that will trigger the hot loading. Does updating base.css trigger a rebuild?

[kvnlnt]

updating base.css does not trigger a reload (Fact 3). Updating main.css which includes base.css does (Fact 2). Therefore the processing and hotreloading pipeline for imported css files seems to be the suspect. More confusing: I copied my entire project and 1. deleted all source files except the main.js, main.css and base.css files. 2. Kept my package.json and webpack.config.js files the exact same and everything works! My app has no compilation errors, etc so I'm left to wonder if there is some kind of issue related to module loading with more complex applications.

[kvnlnt]

Found something interesting in postcss-import/index.js at line ~95

console.log(opts);

{
...
addDependencyTo: undefined,
from: '/<path>/src/main.css'
}

and console.log(Object.keys(state.importedFiles)) seems to show that it is aware of my base.css file:

[ '/<path>/src/main.css', '/<path>/src/css/base.css', ]

Shouldn't addDependencyTo be an object?

[MoOx]

addDependencyTo is what you passed to postcss-import. So it looks like a problem with your config or runtime env.

[vabruzzo]

@kvnlnt did you ever figure out the culprit? i'm having the same issue in my setup.

[paulyoung]

I'm also seeing this behavior.

[buob]

@MoOx I created the following repo to show the problem exists in a super simple reproduction -- https://github.com/buob/postcss-import-issue (despite the fact I'm passing in addDependencyTo)

The hot reloading works when you edit "required-file", but it doesn't when editing "imported-file".

Hopefully this helps, let me know if I'm making a stupid mistake, totally possible.

[MoOx]

postcss/postcss-import#210

[buob]

Dang, well it was a stupid mistake -- I was using precss which (obviously) didn't play well with postcss-import; there were duplicate intentions. There's a very low chance of that helping someone else, but just in case, worth the pride hit.

I hope a maintainer is found! I appreciate the work on these plugins! 🌠

[davidcalhoun]

@MoOx Dang, appreciate the help, but adding addDependencyTo didn't seem to have any effect for me.

    "postcss-cssnext": "2.9.0",
    "postcss-import": "8.1.0",
    "postcss-loader": "1.2.2",
    "webpack": "2.2.0",
    "webpack-dev-server": "2.2.0",

[michael-ciniawsky]

@davidcalhoun webpack.config.js / postcss.config.js and update to postcss-import >= v9.x please :D