How to use css-modules?

[comerc]

Please help me. It is does not work:

const sugarss = require('sugarss');
postcss(plugins, { parser: sugarss })

Error: is not a PostCSS plugin

[TrySound]

@comerc Please show full stacktrace or build code.

[ai]

@comerc show your full config

[ai]

Sorry, I don’t now meteor and all other code there. You should ask better guys :).

Or maybe you can simplify your config by using postcss-modules? It brings CSS Modules back to PostCSS pipeline, so you don’t need a lot of code like in that example.

[ben-eb]

The parser option needs to be set in the process call, as the second argument.

[lagden]

@ai or @outpunk or @markdalgleish

I am using sugarss + postcss-modules! The problem is when I try use composes with sss

You can see on example below that xxx is not composed correctly... -> undefined

Is there any way for this to work?

Example

// theme.sss
.xxx
    border-radius: 5px

// home.sss
@import '../../shared/vars.sss'

.root
    composes: xxx from '../../shared/theme.sss'
    background: green
    color: niceGray
    &_big
        width: 50em
        @media (--mobile)
            width: auto

/* home.css */
.xxx: 5px;
._root_1hilm_3 {
    background: green;
    color: #777;
}
._root_big_1hilm_1 {
    width: 50em;
}
@media (max-width: 640px) {
    ._root_big_1hilm_1 {
        width: auto;
    }
}

// home.json
{"niceGray":"#777","root":"_root_1hilm_3 undefined","root_big":"_root_big_1hilm_1"}

[lagden]

I making a workaround using @import, but is staying dirty!!

The useless comes to inflate!! 😞

// vars.sss
@value niceGray: #777
@custom-media --mobile (max-width: 640px)

.fromImport
    border: 1px solid red

.useless
    color: blue

// home.sss
.root
    composes: fromImport
    background: green
    color: niceGray
    &_big
        width: 50em
        @media (--mobile)
            width: auto

/* home.css */
._fromImport_f2hie_1 {
    border: 1px solid red;
}
._useless_f2hie_1 {
    color: blue;
}
._root_f2hie_3 {
    background: green;
    color: #777;
}
._root_big_f2hie_1 {
    width: 50em;
}
@media (max-width: 640px) {
    ._root_big_f2hie_1 {
        width: auto;
    }
}

[ai]

Sorry, you need to open issue in css-modules repo. I could not fix it in SugarSS.

[lagden]

no problems... I will... Thanks anyway