Question: Does brunch support npm packages with css modules?

Description

Sample repo: https://github.com/tony-g/brunch-npm-cssmodules

I’m trying to use an npm module that imports its own bundled css modules. e.g.

/* their-module/css/styles.css */
.some-styles {
  color: red;
}

/* their-module/js/app.js */
import '../css/styles.css';

I turned on css modules in the brunch config (see config below or in the sample repo).

Expected behavior

Would be nice if brunch require.register’d [npm-package]/css/styles.css with the css modules info.

Actual behavior

• brunch is appending module.exports = { [cssModulesInfo ... ]}
• but it’s not wrapping it in require.register
• so module isn’t defined when the statement executes, and you get js errors.

I was thinking about working around it with a plugin - the plugin has the file path so I could conditionally wrap npm packages styles in require.register - but I’m not super familiar with the brunch internals so I wasn’t sure just how bad of an idea that was! 😃

Environment

1. Brunch: 2.8.2
2. Node: 4.4.7
3. NPM: 3.3.6
4. Operating system: OSX 10.11.6

package.json contents

{
  "name": "brunch-app",
  "description": "Description",
  "author": "Your Name",
  "version": "0.1.0",
  "repository": {
    "type": "git",
    "url": ""
  },
  "scripts": {
    "start": "brunch watch --server",
    "build": "brunch build --production"
  },
  "dependencies": {
    "react": "^15.3.0",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2",
    "redux-notifications": "^2.1.1"
  },
  "devDependencies": {
    "auto-reload-brunch": "^2.0.0",
    "babel-brunch": "^6.0.5",
    "babel-preset-react": "^6.11.1",
    "brunch": "^2.8.2",
    "clean-css-brunch": "^2.0.0",
    "css-brunch": "../css-brunch",
    "javascript-brunch": "^2.0.0"
  }
}

brunch config contents

module.exports = {
  // See http://brunch.io for documentation.
  files: {
    javascripts: {joinTo: 'app.js'},
    stylesheets: {joinTo: 'app.css'},
    templates: {joinTo: 'app.js'}
  },
  plugins: {
    babel: {
      presets: ['es2015', 'es2016', 'react']
    },
    css: {
      modules: true
    }
  }
}

[paulmillr]

No support for now.

[ijcd]

I was struggling with this as well. The thing that fixed it for me was realizing (mostly accidentally, but with some help from this: https://gist.github.com/taiansu/c68e7aefe8163637998acdf532d15da4), that the npm.styles paths seem to be relative to the node_modules/<package>/ directory, not to node_modules/ like the globals seem to be?:

  npm: {
    enabled: true,
    styles: {
      unpoly: ["dist/unpoly.css"]
    }
  },
  files: {
    stylesheets: {
      joinTo: {
        "css/app.css": /^css/,
        "css/vendor.css": /^(?!css)/
      }
    },
    ...

I hope it helps someone.