Is there any way to use both PostCSS and CSS-Modules in my project

I’ve started a new project and my idea was to use
this


and this
https://github.com/juliancwirko/meteor-postcss.

Modules for keep my styling with my react components(and then use classnames), PostCSS for obvious reasons.

I’ve tried with package.json:
> “dependencies”: {

        "meteor-node-stubs": "~0.2.0",
        "react": "^15.0.1",
        "react-dom": "^15.0.1"
      },
      "postcss": {
        "plugins": {
          "autoprefixer": {"browsers": ["last 2 versions"]},
          "sugarss"
        }
      },
      "cssModules": {
        "extensions": [
          "mss"
        ]
      }

and I failed with:

 While loading plugin `mss` from package `nathantreid:css-modules`:
 <anonymous>: Unexpected token '}' at 16:5
 } 

Can anybody me help with examples or links?

Here is a problem with parsing .mss files. Because you use sugarss syntax in .mss files so in this case postcss will fire after css modules package, and css modules package will not be able to parse that file.

Also I don’t know if you need my package when using CSS Modules. Because CSS Modules package allows you to use postCSS plugins: https://github.com/nathantreid/meteor-css-modules#postcss-plugins .
I have not tested it so far, so probably @nathantreid will be able to explain it better.

oh, and if you want to use sugarss with my PostCSS package you should have something like:

{
  "name": "postcs-and-css-modules-test",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "meteor-node-stubs": "~0.2.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "sugarss": "^0.1.2"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {"browsers": ["last 2 versions"]}
    },
    "parser": "sugarss"
  }
}

so you need to use parser option, not plugins. I am afraid that it will not work with nathantreid:css-modules You can try to use PostCSS from that package and not from juliancwirko:postcss but I don’t know if there is an option to configure parser.

@juliancwirko Thank you a lot, glad to see package maintainers here :blush: , have tried to use cssModules only, clone css-modules-demo meteor , install npm deps by hands - failed again :frowning: with package.json

{
  "name": "mss-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Nathan Reid",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.8",
    "react-dom": "^0.14.8"
  },
  "devDependencies": {
    "postcss-modules-extract-imports": "1.0.0",
    "postcss-modules-local-by-default": "1.0.1",
    "postcss-modules-scope": "1.0.0",
    "postcss-modules-values": "1.1.2",
    "postcss-nested": "1.0.0",
    "postcss-simple-vars": "1.2.0",
  },
  "cssModules": {
    "postcssPlugins": {
      "postcss-simple-vars": {
        "inlineOptions": {
          "variables": {
            "orange": "orange"
          }
        },
        "fileOptions": [
          "client/colors.mss",
          "client/fonts.json"
        ]
      },
      "postcss-modules-values": {},
      "postcss-nested": {},
      "postcss-modules-local-by-default": {},
      "postcss-modules-extract-imports": {},
      "postcss-modules-scope": {}
    }
  }
}

and Error message like this:

   While loading plugin `mss` from package `nathantreid:css-modules`:
   <anonymous>: Trailing comma in object at 22:3
   },
   ^
   File: "C:\Users\Janis\Documents\Code\css-modules-demo-meteor-1.3\package.json"
   at SyntaxError (<anonymous>)
   at Object.parseJSON
   (C:\Users\Janis\AppData\Local\.meteor\packages\nathantreid_css-modules\1.0.3\plugin.mss.os.windows.x86_32\npm\node_modules\meteor\mss\node_modules\c
json\node_modules\json-parse-helpfulerror\node_modules\jju\lib\parse.js:745:13)
   at Object.parse
   (C:\Users\Janis\AppData\Local\.meteor\packages\nathantreid_css-modules\1.0.3\plugin.mss.os.windows.x86_32\npm\node_modules\meteor\mss\node_modules\c
json\node_modules\json-parse-helpfulerror\index.js:10:13)
   at Object.exports.parse
   (C:\Users\Janis\AppData\Local\.meteor\packages\nathantreid_css-modules\1.0.3\plugin.mss.os.windows.x86_32\npm\node_modules\meteor\mss\node_modules\c
json\index.js:90:28)
   at Object.load
   (C:\Users\Janis\AppData\Local\.meteor\packages\nathantreid_css-modules\1.0.3\plugin.mss.os.windows.x86_32\npm\node_modules\meteor\mss\node_modules\c
json\index.js:223:24)
   at loadOptions (packages/mss/options.js:27:19)
   at meteorInstall.node_modules.meteor.mss.options.js (packages/mss/options.js:7:1)
   at fileEvaluate (packages/modules-runtime.js:158:9)
   at require (packages/modules-runtime.js:92:16)
   at <runJavaScript-7>:3224:1
   at <runJavaScript-7>:3235:3

Issue with demo is resolved :slight_smile:

I think this is just because you have a coma left in the last item postcss-simple-vars

Yes, It’s true, thank you :smile:

@yanis: as @juliancwirko mentioned, my css modules plugin currently doesn’t support the parser option, although I’ll definitely look into adding it. :slight_smile:

Feel free to tag me if you have other questions!