Add css-modules

[razor-x]

This addresses https://github.com/brunch/css-brunch/issues/11

Don't merge this yet as it's appears to be working, but is emitting warnings like

21 Sep 10:48:31 - warn: node_modules/sanitize.css/sanitize.css compiled, but not written. Check your javascripts.joinTo config
21 Sep 10:48:31 - warn: app/styles/main.css compiled, but not written. Check your javascripts.joinTo config

If someone is able to test this and check that source-maps still work correctly as well, that would be great.

[razor-x]

Looks like the same warnings are emitted by css-brunch when using modules. Really what's happening is if I want to use something like

  npm: {
    styles: {
      'sanitize.css': ['sanitize.css']
    }

then it will get added to the css output correctly, but a warning is emitted since the "corresponding" js module is never explicitly required anywhere in the JS. I suppose a workaround is to just add

import 'sanitize.css/sanitize.css'

to a top-level js file. This removes the warning, but unfortunately this generates a console error in the browser as the module is required via require('sanitize.css/sanitize.css'); but the module sanitize.css/sanitize.css never gets defined in the output js (perhaps because it contains no classes?).

Ideally either the warning would be suppressed for things defined under npm.styles or importing global libs via postcss imports could be used instead (I'm looking into the second option now).

Anyway, this issue is not specific to this PR as I just implemented it the same way as in css-brunch and sass-brunch. It appears source maps are also working fine.

[razor-x]

Ok, confirmed using https://github.com/postcss/postcss-import will work, but it doesn't give a source map to the original sanitize.css/sanitize.css file like using npm.styles would.

I'd say merge this if it looks good, and we can work out how to handle npm.styles correctly and apply it here and to sass-brunch and css-brunch.

[natecox]

@razor-x Seems like I'm still having an issue with imports. I can confirm that the modules themselves are getting compiled, and :root elements are being styled properly; however, I'm still unable to import the styles into my React component.

See: https://github.com/natecox/css-modules-test/tree/feature/postcss-modules-pr-test

[razor-x]

@natecox Can you make sure you are pointing at the css-modules branch? It looks like you may be pointing at rxfork:master.

[natecox]

Whoops, you're right, it was pointing at the master branch. Updated the test repo, and modules are working as expected now.

+1 for merge.

[natecox]

Hey guys, I think something has broken this pull request since it was merged in. Using the master branch I can no longer get CSS modules to work, but specifying "postcss-brunch": "git+ssh://git@github.com:brunch/postcss-brunch.git#b361e97", works fine.

Maybe something with the preprocessor merge?

[razor-x]

@natecox Yes, see my comment: https://github.com/brunch/postcss-brunch/pull/24#issuecomment-249923802

[natecox]

Ah, I missed that. Thanks.

[kockok]

Hello, any update on CSSmodules support? As of now I still cannot integrate with React-toolbox!

"devDependencies": {
    "auto-reload-brunch": "^2",
    "autoprefixer": "^6.7",
    "babel-brunch": "~6.1.1",
    "babel-preset-latest": "^6",
    "babel-preset-react": "~6.24",
    "brunch": "^2",
    "postcss-brunch": "^2.0.5",
    "clean-css-brunch": "^2",
    "csswring": "^5.1",
    "hmr-brunch": "^0.1",
    "uglify-js-brunch": "^2"
  }

exports.plugins = {
  babel: { presets: ['latest', 'react'] },
  postcss: {
    modules: true,
    processors: [
      require('autoprefixer')(['last 8 versions']),
      require('csswring')()
    ]
  }
};

# Any suggestions?

[razor-x]

@kockok I am using react toolbox v2 with brunch. I use cssnext which I think may be required.

[kockok]

@razor-x With this new package.json, still not working. Could you just post your package.json?

"dependencies": {
    "postcss-cssnext": "^2.10.0",
    "react": "^15.4",
    "react-dom": "^15.4",
    "react-redux": "~4.3.0",
    "react-toolbox": "^2.0.0-beta.8",
    "redux": "~3.2.1"
  },
  "devDependencies": {
    "auto-reload-brunch": "^2",
    "babel-brunch": "~6.0.0",
    "babel-preset-latest": "^6",
    "babel-preset-react": "~6.22",
    "brunch": "^2",
    "clean-css-brunch": "^2",
    "hmr-brunch": "^0.1",
    "postcss-brunch": "^2.0.5",
    "postcss-loader": "^1.3.3",
    "uglify-js-brunch": "^2"
  }

[razor-x]

It's more then just the package.json. The way I'm doing it now is to use postcss-import to import each component I'm using into a css file. I then import those files as CSS modules and inject them into the context using react CSS theamr.

[kockok]

@razor-x Oh, will future update of postcss-brunch integrate seamlessly with react-toolbox? Or further work required no matter what. Coz I would switch back to material-ui if further setup required. Thanks.

[razor-x]

@kockok I can't speak to the future of this project, but I think the only "missing" integration is that css imports in 3rd party dependencies are not processed by postcss-brunch (unlike webpack?). Thus you must use the methods described in their docs here: https://github.com/react-toolbox/react-toolbox#customizing-components.