Composing from another file results in undefined

[NogsMPLS]

given some css like this:

.base {
  composes: inline-block from '../styles.css';
  color: red;
}

.babelrc like this:

"plugins": [
        ["css-modules-transform", { "generateScopedName": "test_[name]__[local]" }]
    ]

the plugin outputs this:

var _button = {
    'base': 'test_component__base undefined',
}

[NogsMPLS]

this is confusing for me, because the repo's test works. with style composing from parent...

I wonder if it has something to do with the babelrc config...i'll keep looking into it, if it ends up being with this repo I'll try and fix and submit a PR.

[NogsMPLS]

Ah, it's because those classes were being imported into the css file via @import, which is outside the scope of this project I believe. I'll close this now.

[NogsMPLS]

Thought I'd post this here, as I got it working for me and it might be beneficial for future users that want to have a little more customization re: postcss plugins.

It's pretty simple really. just fork the repo and add the plugins you need to the src/index.js file, and add the prepend option to the css-modules-require-hook.

+ import cssnext from 'postcss-cssnext';
+ import postcssImport from 'postcss-import';
//stuff
- require('css-modules-require-hook')({ ...defaultOptions, ...opts })
+ require('css-modules-require-hook')({ ...defaultOptions, ...opts, prepend: [postcssImport(), cssnext() ]});

then just build, and take the outputted file and use that in your app/project.

[michalkvasnicak]

I think, we can handle that with configuration of this plugin too. We just need to check if options contains prepend prop and require all module names added to it.

Something like this:

{
    "plugins": [
        ["css-modules-transform", { "prepend": ["postcss-cssnext", "postcss-import"] }]
    ]
}

There is only one question @NogsMPLS: are cssnext and postcssImport from your example always a functions? If they are, we can call them in this plugin and pass results to prepend.

[NogsMPLS]

well, i just followed these instructions:

https://github.com/css-modules/css-modules-require-hook#adding-custom-postcss-plugins

However, if we really wanted to extend the usage of this plugin, then you would also want to have pre-processing support as described here: https://github.com/css-modules/css-modules-require-hook#using-stylus-as-a-preprocessor and here https://github.com/css-modules/css-modules-require-hook#preprocesscss-function

That way there could even be SASS/LESS/etc. support if we provide good enough documentation

[michalkvasnicak]

It isn't a problem because we can specify js files to load in options. So one will do something like this:

.babelrc

{
    "plugins": [
        ["css-modules-transform", { "preprocessCss": "./preprocess.js" }]
    ]
}

preprocess.js

var stylus = require('stylus');

export default function (css, filename) {
    return stylus(css)
      .set('filename', filename)
      .render();
}

[michalkvasnicak]

@NogsMPLS now you can specify functions in cofiguration, see README

[NogsMPLS]

This is awesome by the way, thanks for your hard work!