CSS Modules classes get removed in production build even when used

[typeofweb]

The same problem occurs even when I run parcel build with --no-cache --no-scope-hoist --no-optimize

package.json

{
  "name": "project",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "build:client": "cd ./client && parcel build ./src/index.html --dist-dir ../dist/client",
    "postinstall": "husky install"
  },
  "devDependencies": {
    "@babel/preset-typescript": "7.13.0",
    "@parcel/babel-plugin-transform-runtime": "2.0.0-nightly.2247",
    "@parcel/transformer-less": "2.0.0-nightly.625",
    "@parcel/transformer-postcss": "2.0.0-nightly.625",
    "@testing-library/jest-dom": "5.11.9",
    "@testing-library/react": "11.2.5",
    "@testing-library/user-event": "12.8.3",
    "@types/body-parser": "1.19.0",
    "@types/express": "4.17.11",
    "@types/jest": "26.0.20",
    "@types/node": "14.14.33",
    "@types/react": "17.0.3",
    "@types/react-dom": "17.0.2",
    "@types/react-router-dom": "5.1.7",
    "@types/stoppable": "1.1.0",
    "@typescript-eslint/eslint-plugin": "4.17.0",
    "@typescript-eslint/parser": "4.17.0",
    "babel-plugin-import": "1.13.3",
    "concurrently": "6.0.0",
    "eslint": "7.21.0",
    "eslint-config-react-app": "6.0.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jest": "24.2.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.22.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "eslint-plugin-testing-library": "3.10.1",
    "husky": "5.1.3",
    "identity-obj-proxy": "3.0.0",
    "jest": "26.6.3",
    "lint-staged": "10.5.4",
    "parcel": "2.0.0-nightly.623",
    "postcss": "8.2.8",
    "postcss-modules": "4.0.0",
    "prettier": "2.2.1",
    "ts-jest": "26.5.3",
    "ts-node-dev": "1.1.6",
    "typescript": "4.2.3",
    "typescript-plugin-css-modules": "3.2.0"
  },
  "dependencies": {
    "antd": "4.13.1",
    "axios": "0.21.1",
    "body-parser": "1.19.0",
    "clsx": "1.1.1",
    "dotenv": "8.2.0",
    "express": "4.17.1",
    "helmet": "4.4.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-query": "3.12.1",
    "react-router-dom": "5.2.0",
    "stoppable": "1.1.0",
    "web-vitals": "1.1.0"
  },
  "engines": {
    "node": "14.x.x",
    "npm": "7.x.x"
  },
  "alias": {
    "shared": "./shared"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

.babelrc

{
  "presets": [
    "@parcel/babel-preset-env",
    "@babel/preset-typescript",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ],
  "plugins": [
    "@babel/plugin-transform-typescript",
    "@parcel/babel-plugin-transform-runtime",
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": false
      }
    ]
  ]
}

🤔 Expected Behavior

All styles are preserved in production build.

😯 Current Behavior

Styles in the built CSS file:

._item_f92a62:after,
._item_f92a62:first-child:before,
._item_f92a62:last-child:before {
  content: "";
}
._item_f92a62:first-child:before {
  left: 0;
}
._item_f92a62:last-child:before {
  right: 0;
}
._itemCurrent_f92a62:after {
  background-color: #00f;
}
._itemFuture_f92a62:after {
  color: #c2d1d9;
}
._keyActivitiesList_957e58 li {
  margin-bottom: 12px;
}

(notice how most of the styles are missing)

💻 Code Sample

Example file:

.list {
  list-style-type: none;
}

.item {
  flex: 1;
}
.item::after {
  content: "";
}

.item:first-child::before,
.item:last-child::before {
  content: "";
}

.item:first-child::before {
  left: 0;
}
.item:last-child::before {
  right: 0;
}

.itemCurrent {
  background-color: red;
}
.itemCurrent::after {
  background-color: blue;
}
.itemFuture {
  border-bottom: 1px solid #c2d1d9;
}
.itemFuture::after {
  color: #c2d1d9;
}

.itemTitle {
  text-align: center;
}

Component:

import clsx from "clsx";

import * as styles from "./myComponent.module.css";

export const MyComponent = ({
  items,
  currentItemId,
}: {
  items: { id: string | number; title: string }[];
  currentItemId: string;
}) => {
  const currentItemIndex = items.findIndex((phase) => phase.id === currentItemId);

  return (
    <ol className={styles.list}>
      {items.map((phase, index) => (
        <li
          key={phase.id}
          className={clsx(styles.item, {
            [styles.itemCurrent]: index === currentItemIndex,
            [styles.itemFuture]: index > currentItemIndex,
          })}
        >
          <span className={styles.itemTitle}>{phase.title}</span>
        </li>
      ))}
    </ol>
  );
};

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-nightly.623+7eb2b163
Node	v14.15.5
npm/Yarn	7.5.4
Operating System	macOS 11.2.3 (20D91)

[typeofweb]

Looks like @parcel/packager-css is failing to get usedSymbols.

let usedSymbols = bundleGraph.getUsedSymbols(asset);
console.log({usedSymbols}); // always returns `{usedSymbols: Set(0) {}}`

[mischnic]

(notice how most of the styles are missing)

For me, this only happens with --no-scope-hoist. Do you also see this without that flag?

Related: #5728

[typeofweb]

Impossible to test without the flag because of #5985

[mischnic]

(A workaround would be import styles from "./myComponent.module.css";)

[typeofweb]

Unfortunately, the workaround doesn't work when --no-scope-hoist is used :(

[ghost]

Looks like @parcel/packager-css is failing to get usedSymbols.

let usedSymbols = bundleGraph.getUsedSymbols(asset);
console.log({usedSymbols}); // always returns `{usedSymbols: Set(0) {}}`

This happens with any modular style, same happens with sass modules when --no-scope-hoist is used.

Also even when only the target module file is being compiled; the following will also result in an empty CSS bundle:
parcel build --no-scope-hoist styles.module.sass

[MalgoBlock]

This is by no means a solution but I found a temporary workaround when you need to build with --no-scope-hoist - wrapping all the classes to add a second selector (the css classes getting dropped are those with a single selector)
So for example this classes will not get dropped:

html {
.myClass1 {
color: red
}
.myClass2 {
color: blue
}
}

Whereas this ones will:

.myClass {
color: red
}

.myClass2 {
color: blue
}

[cedeber]

Although this is a weird issue, the solution from @MalgoBlock works as temporary fix.

[zouloux]

I can confirm I encountered this issue today on a project with CSS modules enabled, when updating from Parcel beta2 to Parcel RC. Wrapping with html like @MalgoBlock seems to work as a temp fix.