Using css-modules in meteor package

[helitack]

When using css modules in a package:

myapp/packages/mypackage/package.js

Package.describe({
  name: 'me:mypackage',
});
Package.onUse(function(api) {
  api.versionsFrom('1.3.2.4');
  api.use('ecmascript');
  api.use('nathantreid:css-modules');

  api.mainModule('mypackage.js');
});

Where is it getting it's package options from? the root project's package.json file? Could it be possible to define different package options such as extensions or ignorePaths that apply only to the package?

[akanix42]

The options are pulled from the project's package.json file. The Meteor build process does supply the ability to detect when it is being run in a package, so I'd need introduce a new setting (probably packageOptions: { yourPackage: { someSetting: true; } }.
I'm thinking it would merge your package-specific settings with your global settings so you would only need to specify the settings that are different.
How does that sound?

[helitack]

That sounds great! I assume that would all be in the app's package.json file?
It would be nice to keep config for a package inside of the package itself in case the package is used in multiple apps. Is it possible to stick the packageOptions for a specific package somewhere in the package? perhaps a package.json file or preferably, right in the package.js file?

[akanix42]

From what I know of package.js, the answer is no, but handling a package.json file inside the package should be doable.

If no css modules config is found inside the package, should it default to the default options or to the options specified in the app's package.json? I'm currently leaning strongly towards the latter, since all the package author would have to is define the following in order to prevent that:

"cssModules": {}

[helitack]

I thought the package.js would be a reach. package.json is just as good.

I fully agree, I like your idea of merging the two as you mentioned above. I feel it would be excess config to do otherwise, and if it's easy enough to prevent with "cssModules": {} as you mentioned, then it should be totally fine.

Big +1.

[hisayan]

I try to make my own package with 'nathantreid:css-modules'.

$ meteor add my:package

 => Errors while adding packages:             

While determining active plugins:
error: conflict: two packages included in my:package (nathantreid:css-modules and meteor) are both trying to handle *.css

While determining active plugins:
error: conflict: two packages included in my:package (nathantreid:css-modules and meteor) are both trying to handle *.css

What should I do to use css-modules in own package ?

[akanix42]

@hisayan I'll publish the fix for that error later today.

[akanix42]

@hisayan you should be good now with v2.2.1.

[hisayan]

Thanks. It was solved.

[hisayan]

I have a problem.

It is ok that the css file in my own package. thanks.
but the css file in npm_modules in my own package doesn't work well.

This is my simple sample code.
https://github.com/hisayan/rfgtest

$ git clone https://github.com/hisayan/rfgtest.git
$ meteor

it works fine.

but interrupt this process ([ctrl]+c) and restart.

$ meteor

The css file 'flexboxgrid' in node_modules in my package is not load with your css-loader.
The css file is imported as a plane text.

but

$ meteor reset
$ meteor

It works fine.

Is there any mistake in my code ?
or some problem in my environment ?

and I want to use react-flexbox-grid in my own package finally.
https://github.com/roylee0704/react-flexbox-grid

[akanix42]

@hisayan I should have time to look at that this weekend.

[akanix42]

@hisayan This may be due to the way Meteor is hardcoding CSS support. in npm packages. I'll do some more digging but right now it's not looking too good until Meteor opens up the .css extension.

[hisayan]

I appreciate it.
I pick up the CSS file from npm package and use it outside of npm package for now.

[PolGuixe]

Is this related to why this package is not working in Meteor? https://github.com/roylee0704/react-flexbox-grid