How to plug this in?

[tnrich]

Hey there,

It didn't seem like there was any mention of how to plug this code into css-modules. Do I need to do anything to get it to work?

Thanks

Hey tnrich,

This is a plugin designed to work with PostCSS, so make sure to read up on how it works before you jump into it. To make css-modules work with Webpack, I used css-loader and enabled the modules-property by appending the '?modules' section to css-loader.

This configuration in my webpack.config.js works for me:

...
module: {
    loaders: [
      { test: /\.css$/, exclude: /node_modules/, loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader' }
    ]
  },
...

Keep in mind that the processing of chained loaders happens from right to left, so in this configuration, postcss-loader will be called first considering I also want to make use of postcss-cssnext before css-modules is called and the transformations happen.

[IanVS]

Does anybody have a working example of how to use this with css-modulesify? Everything I've tried so far has failed.

Edit: it seems that this module is now included in the default set of plugins, so attempting to manually run it was causing a failure. The moral of the story is that if you're using css-modulesify, you don't need to do anything to enable values. \o/

[fabiofumarola]

I think it should be auto-enabled, but it doesn't work

[dannyshaw]

I think what is missing is the full webpack usage:

...
var values = require('postcss-modules-values');
...
module: {
    loaders: [
      { test: /\.css$/, exclude: /node_modules/, loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader' }
    ]
  },
...
  postcss: function () {
    return [values];
  },
...

[dominicwhittle]

Has anyone had any luck using this with the css-modules/webpack-demo?

I feel like this should be straightforward... :(

[joshwnj]

@dominicwhittle best option would be to fork webpack-demo and show us what you've tried. Once you've got it working it will be a useful resource for others too :)

[dnlsandiego]

As someone who is so far only somewhat familiar with PostCSS and CSS modules, I interpreted the README on this module in that it was built into CSS modules. Glad I found this issue. Spent a good chunk of time debugging my build process on why examples from this module was not working.

Any reason why there aren't any installation/usage example in the README? Other than no one made a PR yet. (I can do PR on webpack usage if you guys are open for it)

[apennell]

It would be great to include basic getting started instructions in the README before diving into explicit usage.

[TrySound]

@apennell Sure. I'm working on new version right now. Would be great somebody help to describe cases according current tests.

[michael-ciniawsky]

I'm working on new docs already :) (soon), but the plugin will get an overhaul update first as @TrySound already mentioned 😛

[dudv]

I'm getting an Unexpected use case error when trying to import value from css in JS component.
I guess I have an improper configuration but cannot find an exact issue and there's no docs to consult with. Could you please give me some advice here?
Webpack config:
{ test: /\.css$/, loaders: [ 'style-loader?singleton&insertInto=body', 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]', 'postcss-loader' ], exclude: ['node_modules'] }
postcss.config.js
module.exports = { plugins: [ require('postcss-icss-values'), require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }) ] }
theme.js
import { green, blue } from './TYUI/colors.css'
colors.css
@value green: #7cb342; @value blue: #3498db;

P.S. Importing those values in CSS works fine. The issue is only with importing in JS.

[hytromo]

If you use create-react-app, then you can plug this in by adding require('postcss-icss-values') to the postcss' plugins

[misantronic]

I feel like a total idiot.
I'm trying to make this work with fuse-box, still this plugin does nothing.

I have this code:

postcss([
    require("postcss-modules")({
        root: this.options.root || file.info.absDir,
        getJSON: (cssFileName, json) => {
            ...
        },
        generateScopedName: ...
    })
])

So now I try to simply add postcss-icss-values by adding it to postcss:

postcss([
    require("postcss-modules")({
        root: this.options.root || file.info.absDir,
        getJSON: (cssFileName, json) => {
            ...
        },
        generateScopedName: ...
    }),
    require('postcss-icss-values')
])

Still, it does absolutely nothing.

Here is a chunk of my generated post-css:

{
        ....
	css: ':import("color.css") {\n  i__const_palegrey_0: palegrey;\n}\n\n._select___9iHCB {\n    position: relative;\n    width: 240px;\n    height: 44px;\n    max-width: 100%;\n    user-select: none;\n}\n\n._valueContainer___El87d {\n    width: 100%;\n    height: 100%;\n    padding: 0 12px;\n    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);\n    /* todo: add palegrey */\n    border: 1px solid i__const_palegrey_0;\n}\n\n._optionsContainer___1nVwt {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    background: #fff;\n    z-index: 100;\n    \n    border: 1px solid #e9eaec;\n    border-top: none;\n}\n\n._option___22XtN {\n    padding: 12px;\n    cursor: pointer;\n    background: #fff;\n}\n\n._option___22XtN:hover {\n    background: #eee;\n}\n\n._hide___1yjbk {\n    display: none;\n}\n',
    ....
}

Generated from a color.css:

@value palegrey: #e9eaec;

:export {
    palegrey: palegrey;
}

Imported to my index.css:

@value colors: "color.css";
@value palegrey from colors;

.valueContainer {
  ...
  border: 1px solid palegrey;
  ...
}

In this example, I'm trying to replace palegrey :(