Idea: support submodules.

[trusktr]

I'd like to require a css file from a module inside of node_modules, but it doesn't seem to work. It'd be nice if it did! Is this possible, or does browserify limit this?

[cheton]

Hi trusktr,

May I check if you're using the directory structure like below?

Directory structure:

app.js
node_modules/
    foo/
        foo.css

app.js:

require('foo/foo.css');

[trusktr]

Yep, exactly!

[cheton]

See also: Recursive transforms (https://github.com/substack/node-browserify/issues/501)

[cheton]

I found two ways to resolve this issue:

1. Use the global transform option to transform all files in a node_modules directory.

   You can use the --global-transform or -g flag on the command line:

   $ browserify -g browserify-css app.js > bundle.js 

   or use the API directly:

   var browserify = require('browserify');
   var b = browserify('./app.js');
   b.transform('browserify-css', {global: true});
   b.bundle().pipe(process.stdout);

   See transform options: https://github.com/substack/node-browserify#btransformtr-opts

2. Put browserify transform option into a submodule's package.json file inside the node_modules directory on a per-module basis.

   node_modules/foo/package.json:

   {
    "browserify": {
      "transform": ["browserify-css"]
    }
   }

   Then, run browserify transform on the command line:

   $ browserify -t browserify-css app.js > bundle.js 

Please let me know if this works for you. Thanks.

[cheton]

In addition to the above, you can use CSS @import to work around this issue.

app.js:

require('./app.css');

app.css:

/* Use CSS from your node_modules folder */
@import "node_modules/foo/foo.css";

/* Or your own relative files */
@import "styles/common.css";

[trusktr]

Aha!! This 3rd @import might just be the proper immediate solution. I tried global transforms already (they work at the top level project, but sometimes mess up the submodules that also depend on the same transform) and I thought about manually editing submodule package.json (but that's a lot of extra overhead since submodules may not always be at the top level of node_modules, and it means having to maintain forks of each submodule, waiting for people to accept PRs, etc).

Thanks for the @import suggestion, it worked!

[trusktr]

In case other people stumble on this: even using @import could break if the top-level project doesn't have the dependency in it's package.json, but if your project does have the dependency in it's package.json, then it'll work since then the dependency can be found in the immediate node_modules folder.