meteor-css-modules
meteor-css-modules copied to clipboard
Usage with postcss-nested-vars plugin
So, I grew over postcss-simple-vars and need something more capable, and turned to postcss-nested-vars plugin.
However, when I try to enable it with this package, I get error:
=> Errors prevented startup:
While processing files with nathantreid:css-modules (for target web.browser):
vm.js:53:16: Unexpected token =
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Module.Mp.load (/tools/tool-env/install-runtime.js:30:27)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.require (/tools/isobuild/bundler.js:1915:22)
at makeInstallerOptions.fallback (packages/modules-runtime.js:641:18)
at require (packages/modules-runtime.js:234:16)
at packages/mss/postcss-plugins.js:70:46
at forEach
(/Users/sergey.petrov/.meteor/packages/nathantreid_css-modules/.2.7.4.95d3rs++os+web.browser+web.cordova/plugin.mss.os/npm/node_modules/meteor/mss/node_modules/ramda/dist/ramda.js:1874:13)
at /Users/sergey.petrov/.meteor/packages/nathantreid_css-modules/.2.7.4.95d3rs++os+web.browser+web.cordova/plugin.mss.os/npm/node_modules/meteor/mss/node_modules/ramda/dist/ramda.js:390:80
at Object.f2
(/Users/sergey.petrov/.meteor/packages/nathantreid_css-modules/.2.7.4.95d3rs++os+web.browser+web.cordova/plugin.mss.os/npm/node_modules/meteor/mss/node_modules/ramda/dist/ramda.js:434:22)
at loadPlugins (packages/mss/postcss-plugins.js:68:5)
at new CssModulesProcessor (packages/mss/css-modules-processor.js:28:27)
at CssModulesBuildPlugin.processFilesForTarget (packages/mss/css-modules-build-plugin.js:75:32)```
Here's my configuration:
"cssModules": { "postcssPlugins": { "postcss-import": {}, "postcss-mixins": {}, "postcss-each": {}, "postcss-cssnext": {}, "postcss-responsive-type": {}, "postcss-modules-local-by-default": {}, "postcss-modules-extract-imports": {}, "postcss-modules-scope": {}, "postcss-simple-vars": { "fileOptions": ["style-globals.json"] } }, "ignorePaths": ["node_modules/(?!react-toolbox/lib)"], "extensions": ["scss", "css"] }
Any ideas?
I needed nested-vars to conditionally set sass variable to theme colors for different clients.
Suppose, I have my theme in some sass common file (colors.scss) that I include wherever I need it.
How could I redefine some variable conditionally? Only thing I have in mind, is to have these redefinements scoped by some global classname, and then just set this class on root element. But for that I need nested-vars. Is there any other way?
i just understood that nested-vars wont help me :(