css-modulesify does not play well with cssnext

[ryngonzalez]

I've tried with a bunch of configurations, and none seem to be working:

1. In --use declaration

  .plugin('css-modulesify', {
    rootDir: __dirname,
    output: `${dirs.dest.styles}/compiled.css`,
    use: [
      "postcss-modules-extract-imports",
      "postcss-modules-local-by-default",
      "postcss-modules-scope",
      'autoprefixer',
      'cssnext'
    ],
    'postcss-modules-scope': {
      generateScopedName: createClassName
    },
    after: [
    ]
  })

2. In --after declaration

  .plugin('css-modulesify', {
    rootDir: __dirname,
    output: `${dirs.dest.styles}/compiled.css`,
    use: [
      "postcss-modules-extract-imports",
      "postcss-modules-local-by-default",
      "postcss-modules-scope",
      'autoprefixer'
    ],
    'postcss-modules-scope': {
      generateScopedName: createClassName
    },
    after: [
      'cssnext'
    ]
  })

3. Required and used in --use declaration

  .plugin('css-modulesify', {
    rootDir: __dirname,
    output: `${dirs.dest.styles}/compiled.css`,
    use: [
      "postcss-modules-extract-imports",
      "postcss-modules-local-by-default",
      "postcss-modules-scope",
      'autoprefixer',
      require('cssnext')
    ],
    'postcss-modules-scope': {
      generateScopedName: createClassName
    },
    after: [
    ]
  })

4. Required and used in --after declaration

  .plugin('css-modulesify', {
    rootDir: __dirname,
    output: `${dirs.dest.styles}/compiled.css`,
    use: [
      "postcss-modules-extract-imports",
      "postcss-modules-local-by-default",
      "postcss-modules-scope",
      'autoprefixer'
    ],
    'postcss-modules-scope': {
      generateScopedName: createClassName
    },
    after: [
      require('cssnext')
    ]
  })

5. Required and used in --use declaration, initialized with options

  .plugin('css-modulesify', {
    rootDir: __dirname,
    output: `${dirs.dest.styles}/compiled.css`,
    use: [
      "postcss-modules-extract-imports",
      "postcss-modules-local-by-default",
      "postcss-modules-scope",
      'autoprefixer',
      require('cssnext')({})
    ],
    'postcss-modules-scope': {
      generateScopedName: createClassName
    },
    after: [
    ]
  })

6. Required and used in --after declaration, initialized with options

  .plugin('css-modulesify', {
    rootDir: __dirname,
    output: `${dirs.dest.styles}/compiled.css`,
    use: [
      "postcss-modules-extract-imports",
      "postcss-modules-local-by-default",
      "postcss-modules-scope",
      'autoprefixer'
    ],
    'postcss-modules-scope': {
      generateScopedName: createClassName
    },
    after: [
      require('cssnext')({})
    ]
  })

Am I just missing fundamental, or is there some for of issue with how we're adding additional PostCSS plugins to the css-modulesify pipeline?

[joshwnj]

HI @ryngonzalez do you have a repo somewhere that we can get a better look at what's going on?

[azevedo]

@ryngonzalez have you tried loading cssnext first, then autoprefixer, and finally the others?
cssnext includes the plugin postcss-import which recommends loading it as the first plugin in the list.

[izeau]

Using postcss-cssnext instead of cssnext works wonders for me!

[ianstormtaylor]

@izeau where'd you put postcss-cssnext in your case? Can't see to get it working with --after. Also, is it working for globally defined CSS variables by any chance?

[jedrichards]

It's working alright for me in the cli:

browserify -t babelify -p [css-modulesify --after postcss-cssnext -o main.css] -o bundle.js src/index.js

[pixelass]

Here's a boilerplate that supports cssnext with this library. https://github.com/pixelass/npm-boilerplate

Here's a react/redux boilerplate with more config: https://github.com/pixelass/redux-react-boilerplate

Both work out of the box and need no config. I simply added it in the after array.