Parcel: Importing a CSS Module returns an empty object.

[pietmichal]

Choose one: is this a 🐛 bug report or 🙋 feature request?
🐛 bug report

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

package.json

{
  "scripts": {
    "start": "parcel ./src/index.html",
    "build": "parcel build ./src/index.html --public-url ./"
  },
  "dependencies": {
    "@types/react": "16.0.40",
    "@types/react-dom": "16.0.4",
    "@types/react-router": "4.0.22",
    "@types/react-router-dom": "4.2.4",
    "autoprefixer": "^8.1.0",
    "axios": "0.18.0",
    "express": "4.16.2",
    "fontawesome": "4.7.2",
    "parcel-bundler": "1.6.2",
    "postcss-modules": "^1.1.0",
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "react-hot-loader": "4.0.0",
    "react-router": "4.2.0",
    "react-router-dom": "4.2.2",
    "react-transition-group": "2.2.1",
    "typescript": "2.7.2"
  },
  "devDependencies": {
    "@types/jest": "22.1.4",
    "jest": "22.4.2",
    "prettier": "1.11.1",
    "ts-jest": "22.4.1"
  },
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json"]
  },
  "browserslist": ["last 2 Chrome versions"]
}

postcss.config.js

module.export = {
  modules: true,
  plugins: {
    autoprefixer: {
      grid: true
    }
  }
};

🤔 Expected Behavior

Both development and production builds logging an object with prefixed css class.

😯 Current Behavior

Both development and production builds are logging an empty object ({}) into the console.

💁 Possible Solution

🤷

🔦 Context

I'm just trying to add CSS modules into my app based on information from your documentation.

💻 Code Sample

My index.tsx script requires a css module.

const style = require("./index.css");
console.log(style);

index.css

.test {
  margin-top: 200px;
}

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.6.2
| Node | 9.2.0
| npm/Yarn | yarn 1.3.2
| Operating System | Windows 10

[fathyb]

Does it work if you remove postcss.config.js and add a .postcssrc with the code below?

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

[pietmichal]

It worked after making a .postcssrc file instead. But I had to remove the .cache folder.

The documentation states that you can use one of three formats.

postcss.config.js and postcssrc.js aren't working.

[ForestBeaver]

Ran into this, was really frustrating till I realized I needed to clear the cache.

[liuwuyue]

delete the .cache directory. it will work

[cinhcet]

for me this is not working. I tripple checked that I have a .postcssrc file with modules: true and deleted the cache. The console shows an empty object.

Furthermore, if I enable modules, then normal css import in html do not work anymore?

[DeMoorJasper]

@cinhcet if the css modules you’re importing is a node_module you should create the .postcssrc file in that node_module. It’s kinda strange but prevents some potential side-effects if a node_module is not intended to be using css modules

_{Sent with GitHawk}

[cinhcet]

thank you, now the object is not empty anymore!
I have to admit that after knowing that I have to put a .postcssrc file a node_module (that is downloaded from npm) I understand the documentation saying "For CSS Modules to work properly with existing modules they need to specify this support in their own .postcssrc."