css-modules / css-modulesify

A browserify plugin to load CSS Modules
MIT License
403 stars 47 forks source link

css-modulesify does not play well with cssnext #44

Open ryngonzalez opened 9 years ago

ryngonzalez commented 9 years ago

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 commented 9 years ago

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

azevedo commented 9 years ago

@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 commented 8 years ago

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

ianstormtaylor commented 8 years ago

@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 commented 8 years ago

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 commented 7 years ago

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.