Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doesn't work with webpack 2 #92

Closed
lavezzi1 opened this issue Aug 21, 2016 · 67 comments
Closed

Doesn't work with webpack 2 #92

lavezzi1 opened this issue Aug 21, 2016 · 67 comments

Comments

@lavezzi1
Copy link

lavezzi1 commented Aug 21, 2016

Hello guys. Looks like it doesn't works with the latest webpack 2 beta.

        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!postcss-loader' })
            },

Then I ran webpack-dev-server and it doesn't finish.

Some guys have trouble too here webpack/webpack#2812

@ai
Copy link
Contributor

ai commented Aug 21, 2016

Do you have any docs of API changes in loaders?

@lavezzi1
Copy link
Author

No docs, it's webpack you know. Anyway I found this, take a look please at loaders section https://gist.github.com/sokra/27b24881210b56bbaff7

@jantimon
Copy link
Contributor

jantimon commented Aug 24, 2016

ExtractTextPlugin 1 doesn't work with Webpack 2 - maybe that's the issue not the postcss-loader

@lavezzi1
Copy link
Author

@jantimon I use extract-text-webpack-plugin@^2.0.0-beta

@agileago
Copy link

same with me .

@soyuka
Copy link

soyuka commented Sep 7, 2016

Maybe this stack can help:

ERROR in ./~/postcss-loader!./~/css-loader!./~/sass-loader?{"includePaths":["/home/abluchet/angular2-electron/~/foundation-sites/scss"]}!./scss/app.scss
Module build failed: Unknown word (1:1)

> 1 | exports = module.exports = require("./../node_modules/css-loader/lib/css-base.js")();
    | ^
  2 | // imports
  3 |
  4 |

 @ ./scss/app.scss 4:14-249
 @ ./src/app.js

ERROR in ./scss/app.scss
Module build failed: ModuleBuildError: Module build failed: Unknown word (1:1)

> 1 | exports = module.exports = require("./../node_modules/css-loader/lib/css-base.js")();
    | ^
  2 | // imports
  3 |
  4 |

    at /home/abluchet/angular2-electron/node_modules/webpack/lib/NormalModule.js:137:35
    at /home/abluchet/angular2-electron/node_modules/loader-runner/lib/LoaderRunner.js:328:11
    at /home/abluchet/angular2-electron/node_modules/loader-runner/lib/LoaderRunner.js:201:18
    at context.callback (/home/abluchet/angular2-electron/node_modules/loader-runner/lib/LoaderRunner.js:87:13)
    at /home/abluchet/angular2-electron/node_modules/postcss-loader/index.js:105:17

ERROR in /home/abluchet/angular2-electron/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!/home/abluchet/angular2-electron/node_modules/style-loader/index.js!/home/abluchet/angular2-electron/node_modules/postcss-loader/index.js!/home/abluchet/angular2-electron/node_modules/css-loader/index.js!/home/abluchet/angular2-electron/node_modules/sass-loader/index.js?{"includePaths":["/home/abluchet/angular2-electron/node_modules/foundation-sites/scss"]}!/home/abluchet/angular2-electron/scss/app.scss doesn't export content
Child extract-text-webpack-plugin:
        + 1 hidden modules

    ERROR in ./~/postcss-loader!./~/css-loader!./~/sass-loader?{"includePaths":["/home/abluchet/angular2-electron/~/foundation-sites/scss"]}!./scss/app.scss
    Module build failed: Unknown word (1:1)

    > 1 | exports = module.exports = require("./../node_modules/css-loader/lib/css-base.js")();
        | ^
      2 | // imports
      3 |
      4 |

Looks like the css loader exports javascript.

Logging console.log(plugins, source) in this plugin shows:

(master ✗)❯ ./node_modules/.bin/webpack
[ { [Function]
    options: { browsers: [Object] },
    info: [Function],
    postcssPlugin: 'autoprefixer',
    postcssVersion: '5.2.0' } ] 
'exports = module.exports = require("./../node_modules/css-loader/lib/css-base.js")();\n// imports\n\n\n// module\nexports.push([module.id, "/**\\n * Foundation for Sites by ZURB\\n * Version 6.2.3\\n * foundation.zurb.com\\n * Licensed under MIT Open Source\\n */\\n/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */\\n/**\\

I tried postcss-js but had font import path issue Module build failed: Error: Cannot find module '../font/xxx.eot?85062211'.

@eugene1g
Copy link

eugene1g commented Sep 8, 2016

FWIW, I'm using postcss-loader and webpack2 with no issues, but I don't have sass-loader in the stack. I've had issues with combining the setup with other magic loader, like postcss-import etc.

@soyuka
Copy link

soyuka commented Sep 8, 2016

Are you using css loader?
On Thu, 8 Sep 2016 at 06:09, Eugene notifications@github.com wrote:

FWIW, I'm using postcss-loader and webpack2 with no issues, but I don't
have sass-loader in the stack


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#92 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABQr80V0QhGtZHBtrN2ZK3HMAY1b_rr9ks5qn4qBgaJpZM4JpN_3
.

@eugene1g
Copy link

eugene1g commented Sep 8, 2016

Yep, and the config structure is the same:

ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap!postcss-loader'})

@eugene1g
Copy link

eugene1g commented Sep 8, 2016

Ah I see the execution order is different - for me postcss runs first, css-loader second. Maybe that's causing an issue on your end if css-loader is producing JS, and later post-css loader is expecting css input?

@soyuka
Copy link

soyuka commented Sep 8, 2016

Indeed, I'm trying this later and'll let you know thx!

@akrawchyk
Copy link

@eugene1g I'm having issues using webpack2 with postcss-import as well. My use case is with SUITCSS preprocessor, here's the stack trace:

ERROR in ./client/client.css
Module build failed: TypeError: Path must be a string. Received { raws: { semicolon: true, after: '\n' },
  type: 'root',
  nodes:
   [ AtRule {
       raws: [Object],
       type: 'atrule',
       name: 'import',
       parent: [Object],
       source: [Object],
       params: '\'suitcss\'' } ],
  source:
   { input:
      { css: '@import \'suitcss\';\n',
        file: '/Users/andrew/Developer/sc-comms/client/client.css' },
     start: { line: 1, column: 1 } } }
    at assertPath (path.js:7:11)
    at Object.resolve (path.js:1148:7)
    at AtImport (/Users/andrew/Developer/sc-comms/node_modules/postcss-import/index.js:19:23)
    at creator (/Users/andrew/Developer/sc-comms/node_modules/postcss/lib/postcss.js:150:35)
    at /Users/andrew/Developer/sc-comms/node_modules/postcss-easy-import/index.js:41:21
    at creator (/Users/andrew/Developer/sc-comms/node_modules/postcss/lib/postcss.js:150:35)
    at /Users/andrew/Developer/sc-comms/node_modules/suitcss-preprocessor/lib/index.js:69:23
    at Array.map (native)
    at preprocessor (/Users/andrew/Developer/sc-comms/node_modules/suitcss-preprocessor/lib/index.js:65:29)
    at LazyResult.run (/Users/andrew/Developer/sc-comms/node_modules/postcss/lib/lazy-result.js:286:20)
    at /Users/andrew/Developer/sc-comms/node_modules/postcss/lib/lazy-result.js:200:37
    at LazyResult.asyncTick (/Users/andrew/Developer/sc-comms/node_modules/postcss/lib/lazy-result.js:214:15)
    at processing.Promise.then._this2.processed (/Users/andrew/Developer/sc-comms/node_modules/postcss/lib/lazy-result.js:240:20)
    at LazyResult.async (/Users/andrew/Developer/sc-comms/node_modules/postcss/lib/lazy-result.js:237:27)
    at LazyResult.then (/Users/andrew/Developer/sc-comms/node_modules/postcss/lib/lazy-result.js:141:21)
    at Object.module.exports (/Users/andrew/Developer/sc-comms/node_modules/postcss-loader/index.js:93:10)
 @ ./client/client.js 9:0-23

@panjiesw
Copy link

panjiesw commented Oct 4, 2016

The loader configuration in webpack 2 itself has changed, which, i think, requires you to set the loader name without the query string.

So maybe you should change the config to this (untested):

ExtractTextPlugin.extract({
  fallbackLoader: "style-loader",
  loader: [
    { loader: 'css-loader', query: {sourceMap: true} },
    { loader: 'postcss-loader' }
  ]
})

I'm not so sure about the order, but you get the idea.

@rozzzly
Copy link

rozzzly commented Oct 4, 2016

@panjiesw You've pretty much got it. Here's an excerpt from my webpack.config.js. Hopefully anyone else looking for how to get webpack@2 to play nice with postcss-loader will see this because I had to spend several hours crawling github seeing as webpack@2 is in beta there's no documentation. I have tested this, and at of the time I'm posting this, using the latest releases, it works, but may require some tweaking to fit into your setup.

const filePath = require('./paths');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    devtool: 'source-map',
    resolve: {
        modules: [ 'node_modules', filePaths.SRC ],
        extensions: [ '.css', '.ts', '.tsx', '.js', '.jsx' ]
    },
    output: {
        path: filePaths.DIST,
        publicPath: '/',
        filename: '[name].js'
    },
    module: {
        loaders: [
            // .... other loaders
            {
                test: /\.css$/,
                include: [ filePaths.src ],
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: [
                        { loader: 'css-loader', query: { modules: true, sourceMaps: true } },
                        'postcss-loader'
                    ]
                })
            }
        ]
    },
    plugins: [ // https://github.com/webpack/webpack/issues/3018#issuecomment-248633498
        new webpack.LoaderOptionsPlugin({
            options: {
                context: filePaths.root,
                postcss: [ // <---- postcss configs go here under LoadOptionsPlugin({ options: { ??? } })
                    require('postcss-cssnext'),
                    require('lost')(),
                    require('postcss-reporter')()
                ]
                // ...other configs that used to directly on `modules.exports`
            }
        }),
        new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true })
    ]
};

@ai
Copy link
Contributor

ai commented Oct 7, 2016

Fixed in #104

@svnm
Copy link

svnm commented Dec 13, 2016

I am using the following setup for postcss-loader with webpack 2 🔽
The important part is new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer ] } }) in plugins and !postcss-loader in css-loader.

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer')

module.exports = {
  entry: './index.js',
  devtool: 'inline-source-map',
  output: {
    filename: 'bundle.js',
    publicPath: ''
  },
  module: {
    loaders: [
      { 
        test: /\.css$/, 
        loader: 'style-loader!css-loader?modules&importLoaders=1!postcss-loader' 
      },
      { 
        test: /\.js$/, exclude: /node_modules/, 
        loader: 'babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-2' 
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ title: 'Example', template: './index.html' }),
    new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer ] } })
  ],
}

@michael-ciniawsky
Copy link
Member

michael-ciniawsky commented Dec 14, 2016

@StevenIseki

...
module: {
    rules: [
      { 
        test: /\.css$/, 
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
          { loader: 'postcss-loader', options: { plugins: () => [...plugins] } },
        ]
      },
      { 
        test: /\.js$/,
        use:  [
           { loader: 'babel-loader', options: { presets: ['es2015', 'react', 'stage-2'] } }
        ],
        exclude: /node_modules/, 
      }
    ]
  }
...

loaders -> rules, loader -> use, LoaderOptionsPlugin was a 'polyfill' required in webpack =< 2.1.0-beta.24and is unnessecary beginning from 2.1.0-beta.25. This is the final syntax for webpack@2

@svnm
Copy link

svnm commented Dec 14, 2016

@michael-ciniawsky What is [...plugins] ?
I get the error PostCSS Config could not be loaded. Please check your PostCSS Config

Here is my config...

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer')

module.exports = {
  entry: './index.js',
  devtool: 'inline-source-map',
  output: { filename: 'bundle.js', publicPath: '' },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
          { loader: 'postcss-loader', options: { plugins: () => [...plugins] } },
        ]
      },
      {
        test: /\.js$/,
        use: [ { loader: 'babel-loader', options: { presets: ['es2015', 'react', 'stage-2'] } } ],
        exclude: /node_modules/,
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ title: 'Example', template: './index.html' })
  ],
}

@yhaiovyi
Copy link

Absolutely the same here

@andykenward
Copy link

@StevenIseki if you aren't using any postcss plugins then just remove it to get it to work.

use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
          'postcss-loader'
        ]

FYI
For some reason I have to use query instead of options for a production build for me. using "webpack": "2.1.0-beta.25",

@andykenward
Copy link

Just spent some time fixing this issue in my react boilerplate.

Check this commit

I had to move my postcss plugins to a postcss.config.js. Also had to return an object in that file to get postcss-cssnext to work with browser settings.

Then had a weird issue with a production build if I use options instead of query for my .css files.

  "engines": {
    "node": "6.9.1",
    "npm": "3.10.8"
  },
"webpack": "2.1.0-beta.25",
"css-loader": "0.26.1",
"postcss": "5.2.6",
"postcss-browser-reporter": "0.5.0",
"postcss-cssnext": "2.9.0",
"postcss-focus": "1.0.0",
"postcss-load-config": "1.0.0",
"postcss-loader": "1.2.1",
"postcss-reporter": "3.0.0",
"postcss-simple-vars": "3.0.0",
"postcss-smart-import": "0.6.3",

@svnm
Copy link

svnm commented Dec 14, 2016

@andykenward I am using just the 1 plugin autoprefixer
If I change it to { loader: 'postcss-loader', options: { plugins: () => [autoprefixer] } }, it still doesn't work.

@andykenward
Copy link

@StevenIseki do you have a repo i can look at?

@svnm
Copy link

svnm commented Dec 15, 2016

The repo I am testing this on is https://github.com/vacenz/last-draft
Here is the webpack.config

Once I get the setup working I will port it over to my boilerplate projects as well
e.g. react-webpack-example and react-router-redux-example, react-webpack-static-site-example

@andykenward
Copy link

andykenward commented Dec 15, 2016

@StevenIseki the latest commit ld-x/last-draft@a0f1bb2 worked for me.

Saw it autoprefixing this css when i changed it to display: flex

I suggest you add localIdentName: '[name]__[local]__[hash:base64:5] to the css-loader to make it easier to read the classnames while in development mode

'style-loader',
{ loader: 'css-loader', options: { modules: true,localIdentName: '[name]__[local]__[hash:base64:5]', importLoaders: 1 } },
'postcss-loader',

@francoisromain
Copy link

francoisromain commented Feb 2, 2017

Finally I had something working (with webpack 2.2.1. and extract text plugin @2.0.0-beta). I'll put it here:

    test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallbackLoader: 'style-loader',
        loader: [{
          loader: 'css-loader?sourceMap',
        }, {
          loader: 'postcss-loader?sourceMap',
          options: {
            plugins: () => [
              postcssImport({ addDependencyTo: webpack }),
              postcssCssnext({
                browsers: ['last 2 versions', 'ie >= 9'],
                compress: true,
              }),
              postcssInlineSvg,
            ],
          },
        }],
      })

@michael-ciniawsky
Copy link
Member

@francoisromain Yep webpack 2.2.1 ships with ident removed so loader.options finally work correctly now and extract-text-webpack-plugin v2 is also nearly finished. Be aware that extract-text-plugin v2 final will have an API change fallbackLoader => fallback && loader => use

@francoisromain
Copy link

francoisromain commented Feb 2, 2017

@michael-ciniawsky thanks for the info. Could you please show what will be the equivalent of the code above with webpack 2 and extract-text-webpack-plugin 2?

@edmundo096
Copy link

@michael-ciniawsky Nice! I didn't saw your reply when I posted my reply to ai.
When I first replied about the use of ident I had just installed Webpack 2.2.0 (seems that it 2.2.1 was published just after I updated my Webpack install & config from 1.x to 2.2.0, lucky me...).

So it's more of waiting for it to be fixed by Webpack 2.3 (although seems that on 2.2.1 it's already fixed/removed, but haven't tested it yet).
Thanks for clarifying it out!

(I will edit my first reply after testing it out on 2.2.1)

@michael-ciniawsky
Copy link
Member

@francoisromain

    test: /\.css$/,
      use: ExtractTextPlugin.extract({
-       fallbackLoader: 'style-loader',
+       fallback: 'style-loader',
-        loader: [{
+        use: [{
-         loader: 'css-loader?sourceMap',
+         loader: 'css-loader',
+         options: { sourceMap: true, importLoaders: 1 }
        }, {
-        loader: 'postcss-loader?sourceMap',
+        loader: 'postcss-loader',
          options: {
+          sourceMap: true
            plugins: () => [
              postcssImport({ addDependencyTo: webpack }),
              postcssCssnext({
                browsers: ['last 2 versions', 'ie >= 9'],
                compress: true,
              }),
              postcssInlineSvg,
            ],
          },
        }],
      })

but not atm 😛 (v2-rc*), wait until v2@latest is out

@edmundo096 webpack v2.2.1 ships the ident fix, it's finally working now

@francoisromain
Copy link

@michael-ciniawsky cool, thank you!

@koutsenko
Copy link

I don't understand a simple thing.
My webpack 2.2.1 rule:

 { 
        test: /\.less$/, 
        use: [
          "style-loader",
          "css-loader",
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('autoprefixer')
                ];
              }
            }
          },
          "less-loader"
        ]
      },

It works, but where must I add an option to support only 2 latest browser versions?
In Webpack 1 things was simple:

      { test: /\.less$/, loader: 'style!css!autoprefixer?browsers=last 2 version!less' },

Please dont suggest LoaderOptionsPlugin, or postcss.config.js, or another bloatware.
Thanks.

@michael-ciniawsky
Copy link
Member

@koutsenko

- require('autoprefixer')
+ require('autoprefixer')({ browsers: 'last 2 versions' })

@gazpachu
Copy link

gazpachu commented Mar 7, 2017

What am I doing wrong? I don't get any build errors but I don't see the CSS rules prefixed. The autoprefixer was working fine when I was using webpack 1.

const ExtractSASS = new ExtractTextPlugin(`/commit/styles/${options.cssFileName}`);
...
inside isProduction condition:

webpackConfig.plugins.push(
  ExtractSASS
);

webpackConfig.module.rules.push({
      test: /\.scss$/,
      use: ExtractSASS.extract([
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            plugins: () => [
              Autoprefixer({ browsers: 'last 2 versions' })
            ]
          }
        },
        'sass-loader'
      ])
    });

If I use the propossed configuration in the readme:

webpackConfig.module.rules.push({
      test: /\.scss$/,
      use: ExtractSASS.extract([
        'css-loader?importLoaders=1',
        'postcss-loader',
        'sass-loader'
      ])
    });

I get this error:

ERROR in ./src/app/components/bundle.scss
Module build failed: Error: No PostCSS Config found in: /Users/martosj/Dev/Webs/commit-frontend/src/app/components
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/postcss-load-config/index.js:51:26
 @ ./src/app/index.jsx 51:0-35

ERROR in ./src/app/components/bundle.scss
Module build failed: Error
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/webpack/lib/NormalModule.js:141:35
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/martosj/Dev/Webs/commit-frontend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/postcss-loader/index.js:148:13

ERROR in /Users/martosj/Dev/Webs/commit-frontend/node_modules/extract-text-webpack-plugin/loader.js??ref--4-0!/Users/martosj/Dev/Webs/commit-frontend/node_modules/css-loader/index.js?importLoaders=1!/Users/martosj/Dev/Webs/commit-frontend/node_modules/postcss-loader/index.js!/Users/martosj/Dev/Webs/commit-frontend/node_modules/sass-loader/lib/loader.js!/Users/martosj/Dev/Webs/commit-frontend/src/app/components/bundle.scss doesn't export content

I'm using this postcss.config.js:

const AutoPrefixer = require('autoprefixer');

module.exports = {
  plugins: [
    AutoPrefixer({ browsers: ['last 2 versions'] })
  ]
};

@michael-ciniawsky
Copy link
Member

@gazpachu Webpack Version >= v2.2.1? Are you trying to set PostCSS options in both webpack.config.js and postcss.config.js? Where in you directory structure is postcss.config.js located?

@gazpachu
Copy link

gazpachu commented Mar 8, 2017

@michael-ciniawsky it turned out to be that I had to specify the location of the config file. I thought it would automatically read the same folder level where the webpack.config.js file is located but that was not the case.

'postcss-loader?config=webpack/postcss.config.js'

On the other hand, I've noticed that the autoprefixer is not adding -moz nor -ms nor -o prefixes. Aren't they required anymore?

@andykenward
Copy link

@gazpachu dependant on what browsers you have defined. Add some older browsers and it should prefix as required

@edmundo096
Copy link

edmundo096 commented Mar 8, 2017

@gazpachu I got the same issue. After some research, I concluded how the loading of postcss.config.js worked.

I recommend you read my suggestions in the comment above #92 (comment). Summed up, if you use postcss.config.js, it must be "anywhere down the file tree" where Webpack matches a file (in your case, of /src/app/components/bundle.scss file, postcss.config.js must be anywhere inside that path; using the same folder level where the webpack.config.js file is located, as you said, wouldn't work).

Otherwise, you should pass the options by any of other ways used by cosmiconfig, or indicate its location by the query params ?config as you have used, which I believe is processed at https://github.com/postcss/postcss-loader/blob/master/index.js#L54

For the prefixes, Autoprefixer applies it depending the current browser use. See the README first lines of https://github.com/postcss/autoprefixer.

@milewski
Copy link

as webpack 2.4.1 i could only get it working using the ident: 'postcss' as mentioned here #92 (comment)

@michael-ciniawsky
Copy link
Member

michael-ciniawsky commented Apr 23, 2017

@milewski Hmm that's weird I need to check that, got a similiar issue @extract-text-webpack-plugin maybe it's a bug :/ introduced recently again, please post your webpack.config.js here 😛

@milewski
Copy link

const options = {
    sourceMap: true,
    ident: 'postcss', //<-- without this doesnt work.. says postcss couldnt be found in the dir.......
    plugins: () => {
        return [
            require('autoprefixer')({
                browsers: [
                    "> 5%",
                    "last 2 versions"
                ]
            })
        ]
    }
}
...
{
    test: /\.s?css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },
            { loader: 'postcss-loader', options: options },
            { loader: 'resolve-url-loader' },
            { loader: 'sass-loader', query: { sourceMap: true } }
        ]
    })
},

@michael-ciniawsky
Copy link
Member

michael-ciniawsky commented Apr 23, 2017

According to Tobias (sokra) there weren't any changes in webpack, could you please try

  1. PostCSS Options inside the rule
  2. With and without ETWP
  3. With and without resolve-url-loader
  4. Without { sourceMap: true }in postcss-loader

The Error sounds unrelated to what was bug before, when the ident is missing ({Function}/ require() not stringified correctly => plugins: {})

@michael-ciniawsky
Copy link
Member

- { loader: 'sass-loader', query: { sourceMap: true } }
+ { loader: 'sass-loader', options: { sourceMap: true } }

@milewski
Copy link

milewski commented Apr 23, 2017

Okay here we go

Changing query to options fails

{ loader: 'sass-loader', options: { sourceMap: true } }

removing resolve-url-loader fails

// { loader: 'resolve-url-loader' },

PostCSS options inside. also fails

{
    loader: 'postcss-loader',
    options: {
        plugins: () => {
            return [
                require('autoprefixer')({
                    browsers: [
                        "> 5%",
                        "last 2 versions"
                    ]
                })
            ]
        }
    }
},

without ETWP also fails

{
    test: /\.s?css$/,
    use: [
        { loader: 'style-loader' },
        { loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },
        {
            loader: 'postcss-loader',
            options: {
                plugins: () => {
                    return [
                        require('autoprefixer')({
                            browsers: [
                                "> 5%",
                                "last 2 versions"
                            ]
                        })
                    ]
                }
            }
        },
        // { loader: 'resolve-url-loader' },
        { loader: 'sass-loader', options: { sourceMap: true } }
    ]
},

without ETWP + ident = Works

{
    test: /\.s?css$/,
    use: [
        { loader: 'style-loader' },
        { loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },
        {
            loader: 'postcss-loader',
            options: {
                ident: 'postcss',
                plugins: () => {
                    return [
                        require('autoprefixer')({
                            browsers: [
                                "> 5%",
                                "last 2 versions"
                            ]
                        })
                    ]
                }
            }
        },
        // { loader: 'resolve-url-loader' },
        { loader: 'sass-loader', options: { sourceMap: true } }
    ]
},

You can have a look at this with the real files i am using here: https://github.com/milewski/portfolio

@milewski
Copy link

oh..

this works

// { loader: 'style-loader' },
   { loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },

and this also works

   { loader: 'style-loader' },
   { loader: 'css-loader', options: { minimize: true } },

but together both fail (unless ident is set)

so the problem might be in style-loader and css-loader->importLoaders

@AndreKR
Copy link

AndreKR commented May 10, 2017

I also find that I have to give ident: 'something' to make @import work:

{
  entry: './src/css/test.css',
  output: {
    path: __dirname,
    filename: 'assets/dummy.css'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            {
              loader: 'postcss-loader',
              options: {
//                    ident: 'remove-this-and-it-fails',
                plugins: [ require('postcss-cssnext')() ]
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("assets/bundle.css")
  ]
}

with test.css:

@import url('inner.css');

body {
  & div {
    color: red;
  }
}

leads to:

Module build failed: ModuleBuildError: Module build failed: TypeError: plugin is not a function

With ident: 'remove-this-and-it-fails' uncommented it works.

Here's a complete example:
https://github.com/AndreKR/issue-webpack-postcss-ident

@kroko
Copy link

kroko commented Jun 6, 2017

I can confirm behaviour.

There is site.global.scss (imported as entry point intro entry javascript file)
And site.global.scss has @import "site.legacy.css"; in it. Note the vanilla CSS.
And PostCSS plugins are defined within webpack config, say

webpack.config.js

// ...

// ----------------
// PostCSS plugins

const postCssPlugins = function () {
  let postPluginConf = [];
  postPluginConf.push(
    require('autoprefixer')({
      browsers: ['> 0.0001%'],
      cascade: true,
      remove: true
    })
  );
  postPluginConf.push(
    require('css-mqpacker')()
  );
  postPluginConf.push(
    require('cssnano')({
      discardComments: {
        removeAll: true
      },
      autoprefixer: false,
      zindex: false,
      normalizeUrl: false
    })
  );
  return postPluginConf;
};

// ...


// ----------------
// MODULE RULES

config.module = {
  rules: [
    {
      test: /\.(css)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: postCssPlugins,
              sourceMap: true
            }
          }
        ]
      })
    },
    {
      test: /\.(scss)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              // ident: 'remove-this-and-it-fails',
              plugins: postCssPlugins,
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      })
    }
  ]
};

// ...

The build will fail.

It can be resolved either by adding indent key, or moving PostCSS plugins in plugin conf file (as it actually should be done).

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')({
      cascade: true,
      remove: true
    }),
    require('css-mqpacker')(),
    require('cssnano')({
      discardComments: {
        removeAll: true
      },
      autoprefixer: false,
      zindex: false,
      normalizeUrl: false
    })
  ]
};

webpack.config.js

// ----------------
// MODULE RULES

config.module = {
  rules: [
    {
      test: /\.(css)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      })
    },
    {
      test: /\.(scss)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      })
    }
  ]
};

// ...

@inthegarage
Copy link

Sadly none of these suggestions worked for me, still getting postcss error. Oh well, reverting to angular-cli for the moment.

@DanDvoracek
Copy link

Same here... Nothing worked in my case. However I have a slightly different setup regarding css as I use sass:

{ // for css stuff...
        test: /\.sass$/,
        use: extractSass.extract({
          fallback: "style-loader",
          use: [
            { loader: "css-loader" },
            { loader: "sass-loader" }
          ]
        })
      }

I have tried all the things I have been reading about. The only thing that changes for me is that I use sass where most of the people use pure css (in the examples I see).. I wonder if I have any issue because of this as none of the solution provided here is working for me. Any hint?

I'm basically slowly giving up on the autoprefixer thing... It becomes very annoying. No doc matches, it's unclear whether the plugins are for webpack 1 or 2.. I start to get lost. Any ideas, suggestions would be very welcome. Thanks for reading!

@kroko
Copy link

kroko commented Jun 13, 2017

@DanDvoracek try this

webpack config
.postcssrc.js

build without any scripts definition in package.json

rm -rf public/assets/** && NODE_ENV=development ./node_modules/webpack/bin/webpack.js --config=$(pwd)/webpack.front.config.js --progress

@michael-ciniawsky
Copy link
Member

@kroko https://github.com/WARP-LAB/WARP-GUIDES-WEBPACK-2/blob/master/01-webpack-guide-basic/webpacktest-basic/.postcssrc.js#L20

- .filter((e) => e !== null)

null => false && postcss-load-config filters {Boolean} by default 😉

@DanDvoracek Yes this config and don't forget to actually add postcss-loader

{ // for css stuff...
        test: /\.sass$/,
        use: extractSass.extract({
          fallback: "style-loader",
          use: [
            { loader: "css-loader" },
+           'postcss-loader',
            { loader: "sass-loader" }
          ]
        })
      }

@kroko
Copy link

kroko commented Jun 13, 2017

@michael-ciniawsky i haven't checked it. i remember that some time ago that was not the case (see my ticket), so it has stuck as a habit to clear out nulls from plugins, rules and entries arrays. actually, for all arrays :)

@michael-ciniawsky
Copy link
Member

I don't know for webpack.config.js, but for postcss.config.js I'm nearly 💯 certain 😛 It's just cosmetics anyways, all good :D

@DanDvoracek
Copy link

DanDvoracek commented Jun 14, 2017

Thanks a lot @kroko and @michael-ciniawsky 👍 I will give it a try and let you know :D

EDIT: tested.Thanks @kroko , your file put me on the track for what I was doing wrong. All good now!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests