Open tnrich opened 8 years ago
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.
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/
I think it should be auto-enabled, but it doesn't work
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];
},
...
Has anyone had any luck using this with the css-modules/webpack-demo?
I feel like this should be straightforward... :(
@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 :)
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)
It would be great to include basic getting started instructions in the README before diving into explicit usage.
@apennell Sure. I'm working on new version right now. Would be great somebody help to describe cases according current tests.
I'm working on new docs already :) (soon), but the plugin will get an overhaul update first as @TrySound already mentioned 😛
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.
If you use create-react-app, then you can plug this in by adding require('postcss-icss-values')
to the postcss' plugins
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
:(
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