[2.0.6] If enable cssnano plugin will throw error.

[someok]

If I rm cssnano, the webpack compile success, but will throw error when enable cssnano, I don't know this is postcss-loader problem or cssnano problem.

Error:

Child extract-text-webpack-plugin:

ERROR in /Users/wjx/MyFolder/Develop/MyWorkspace/blah-projects/~/css-loader?{"sourceMap":true,"modules":true,"importLoaders":2,"localIdentName":"[hash:base64]"}!/Users/wjx/MyFolder/Develop/MyWorkspace/blah-projects/~/postcss-loader/lib?{"sourceMap":true}!/Users/wjx/MyFolder/Develop/MyWorkspace/blah-projects/~/sass-loader/lib/loader.js?{"sourceMap":true,"outputStyle":"nested","sourceComments":true}!./outline/component/panel/panel.scss
Module build failed: Inconsistent rule global/local result in rule ".navbar,.navbar :global .pt-navbar-group" (multiple selectors must result in the same mode for the rule) (29:0)

Child extract-text-webpack-plugin:

ERROR in /Users/wjx/MyFolder/Develop/MyWorkspace/blah-projects/~/css-loader?{"sourceMap":true,"modules":true,"importLoaders":2,"localIdentName":"[hash:base64]"}!/Users/wjx/MyFolder/Develop/MyWorkspace/blah-projects/~/postcss-loader/lib?{"sourceMap":true}!/Users/wjx/MyFolder/Develop/MyWorkspace/blah-projects/~/sass-loader/lib/loader.js?{"sourceMap":true,"outputStyle":"nested","sourceComments":true}!./outline/container/navbar/Icon.scss
Module not found: Error: Can't resolve 'icon/iconfont.eot' in '/Users/wjx/MyFolder/Develop/MyWorkspace/blah-projects/projects/app/outline/container/navbar'
 @ /Users/wjx/MyFolder/Develop/MyWorkspace/blah-projects/~/css-loader?{"sourceMap":true,"modules":true,"importLoaders":2,"localIdentName":"[hash:base64]"}!/Users/wjx/MyFolder/Develop/MyWorkspace/blah-projects/~/postcss-loader/lib?{"sourceMap":true}!/Users/wjx/MyFolder/Develop/MyWorkspace/blah-projects/~/sass-loader/lib/loader.js?{"sourceMap":true,"outputStyle":"nested","sourceComments":true}!./outline/container/navbar/Icon.scss 6:70-98 6:116-144

postcss.config.js:

module.exports = ({env}) => {
    return {
        sourceMap: true,
        plugins: {
            // filterPlugins: false,
            autoprefixer: {},
            cssnano: {discardComments: {removeAll: true}}
            
        }
    }
};

[michael-ciniawsky]

postcss.config.js

module.exports = ({env}) => {
    return {
-       sourceMap: true,
        plugins: {
            // filterPlugins: false,
            autoprefixer: {},
            cssnano: {discardComments: {removeAll: true}}          
        }
    }
};

webpack.config.js

- 'postcss-loader'
+ { loader: 'postcss-loader', options: { sourceMap: true } }

• postcss-loader version ?
• cssnano version ?

css-loader integrates cssnano via the minimize option aswell, if you are using postcss-loader >= v2.0.0 ensure to have cssnano v4.0.0-rc.0 (npm i -D cssnano@next) installed

[someok]

orignal version:

"postcss-loader": "^2.0.6"
"cssnano": "3.10.0"

update cssnano v4.0.0-rc.0 the problem still exist.

css-loader with minimize is correct:

{
loader: 'css-loader',
options: {
            minimize: cssMinimizeOptions(isDev)
}
}

I think this should be a bug?

[michael-ciniawsky]

Module build failed: Inconsistent rule global/local result in rule ".navbar,.navbar :global .pt-navbar-group" (multiple selectors must result in the same mode for the rule) (29:0)

That's css-loader modules (CSSModules) issue

Module not found: Error: Can't resolve 'icon/iconfont.eot' in '/Users/wjx/MyFolder/Develop/MyWorkspace/blah-projects/projects/app/outline/container/navbar'
@ /Users/wjx/MyFolder/Develop/MyWorkspace/blah-projects//css-loader?{"sourceMap":true,"modules":true,"importLoaders":2,"localIdentName":"[hash:base64]"}!/Users/wjx/MyFolder/Develop/MyWorkspace/blah-projects//postcss-loader/lib?{"sourceMap":true}!/Users/wjx/MyFolder/Develop/MyWorkspace/blah-projects/~/sass-loader/lib/loader.js?{"sourceMap":true,"outputStyle":"nested","sourceComments":true}!./outline/container/navbar/Icon.scss 6:70-98 6:116-144

Please show the file and file tree for this, I don't understand why cssnano should cause this and where from the current context provided

Maybe http://cssnano.co/optimisations/normalizeurl/

css-loader seems to disable it by default https://github.com/webpack-contrib/css-loader/blob/master/lib/processCss.js#L189-L192

[someok]

@michael-ciniawsky yes, you are right, normalizeUrl cause of this problem.

I think the best practice is not enable cssnano at postcss-loader, use minimize at css-loader.

[michael-ciniawsky]

I will open an issue in cssnano about this, maybe adding a webpack preset would be accepted :)

[michael-ciniawsky]

cssnano/cssnano#376 Feel free to comment 😛