Parcel: Empty object importing from node_modules css module

[krokofant]

I've been trying to import tachyons like a css module without success.

import styles from "tachyons/css/tachyons.css"
console.log(styles)

Outputs {} while moving the file and importing locally ./ works. The path is correct and changing the path produces an error.

I've tried importing with path ../node_modules/tachyons/css/tachyons.css

🎛 Configuration (.babelrc, package.json, cli command)

  "devDependencies": {
    "autoprefixer": "7.2.3",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1",
    "parcel-bundler": "1.2.1",
    "postcss-modules": "1.1.0"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "tachyons": "4.9.0"
  }

.postcssrc

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

🤔 Expected Behavior

I'm expecting the import to work like a css module when importing from node_modules or a relative path like ../node_modules/tachyons/css/tachyons.css.

😯 Current Behavior

Outputs {}.

💁 Possible Solution

🔦 Context

🌍 Your Environment

node v9.3.0
macOS High Sierra

[devongovett]

This is because parcel scopes configuration to a module level, so your .postcssrc does not apply to node_modules. In order to get this working, the module will also need a .postcssrc supporting css modules, e.g. node_modules/tachyons/.postcssrc.

[shtanton]

This isn't really a great solution as adding a postcssrc very time I update the library is pretty inconvenient. Is there another way of doing this?

[krokofant]

@devongovett Any reason for this not to be handled automatically by parcel?

[devongovett]

This type of global configuration is dangerous. If the library you are importing from wasn't designed to use CSS modules, then if you overrode that in your application the original class names wouldn't be there and things probably wouldn't work correctly since the markup/javascript would still have the original classes not the css module ones.

[shtanton]

@devongovett That makes sense, but there still isn't a solution to the problem other than adding a .postcssrc to a library that may be overwritten by updates.

[krokofant]

Perhaps this should at least be mentioned on the Parcel site when mentioning PostCSS https://parceljs.org/transforms.html#postcss

Since Parcel should be easy to setup this brings with a lump of confusion for those wanting to just explore the technology.

[mlewando]

Any change that it should be done somehow without putting .postcssrc into another libraries (eg. some parameter/configuration in parcel)?

First of all it feels rather wrong to me that I should put some file into library that I installed in my project. Secondly - this seems to just not work. I created .postcssrc file with modules set to true in the root of react-toolbox in my project and it still didn't import css modules correctly.

If I could create some plugin for parcel or add some parameter/configuration for it in order to process css modules from modules imported from node_modules, it would be awesome is someone could point me to a place in code when I should start investigation.

[Overbryd]

Has this been solved?

I am trying to get react-toolbox version 2.0 setup with parcel, adding {"modules": true} to .postcssrc did not help.

React and stuff works fine, but an unstyled page looks back at me.

How do I get react-toolbox (that is built upon postcss and cssnext) working with parcel-bundler ?

[krokofant]

@Overbryd It's ugly but it works (on unix-like systems at least...)
Add this as a npm script

{
"scripts":{
"support-postcss-modules-react-toolbox":
      "echo '{\"modules\": true}' > node_modules/react-toolbox/.postcssrc",
}
}

[andyfangdz]

@devongovett Perhaps there can be an option to completely skip any transformations if a .postcssrc does not exist? :smile:

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.