meteor-css-modules icon indicating copy to clipboard operation
meteor-css-modules copied to clipboard

Usage with postcss-nested-vars plugin

Open neoromantic opened this issue 8 years ago • 2 comments

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?

neoromantic avatar Nov 08 '17 02:11 neoromantic

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?

neoromantic avatar Nov 08 '17 03:11 neoromantic

i just understood that nested-vars wont help me :(

neoromantic avatar Nov 08 '17 03:11 neoromantic