I'm creating a CSS library and I'd like to support subpackages the same way RxJS does. For example with RxJS we can import the entire kitchen sink like this (Taken from https://www.npmjs.com/package/rxjs):
var Rx = require('rxjs/Rx');
Rx.Observable.of(1,2,3); // etc
Or individual operators like this:
var Observable = require('rxjs/Observable').Observable;
// patch Observable with appropriate methods
require('rxjs/add/observable/of');
require('rxjs/add/operator/map');
My initial observation is that this may be as simple as just packaging the modules in subfolders of the root module. For example RxJS node_modules install folder has the subfolder rxjs/add/observable which contains all the observable extensions like zip.js, throw.js..., etc.
So following this pattern postcss-import could be extended to resolve imports in submodule folders the same way. For example:
@import @superflycss/utilities-layout/marginsWould import node_modules/superflycss/utilities-layout/margins.css and if that does not exist it would look for node_modules/superflycss/utilities-layout/margins/index.css, and if that does not it exist it would thrown an error.
@import @superflycss/utilities-layout/margins/Would import node_modules/superflycss/utilities-layout/margins/index.css only.
The modules I'm producing have have the kitchen sink packaged in the directory target/main/css/index.css. This exposes all the css utilities or components (Depending on what type of module it is).
The problem is, as with RxJS, this can be a very heavy file (For instance contain imports to all Google Fonts).
So I'm hoping that by following the RxJS approach the entire thing becomes more flexible and standardized by following the same rules that NodeJS require.resolv() algorithm uses. Thoughts?
PostCSS does support importing submodules the same way RxJS does. I added a pull request with test cases that illustrates how it's done here.