SCSS modules does not work with inject:true

[Lorenzo De Francesco]

Hi everyone,
I have a problem with postCSS: it works with extract: true and not with extract: false; inject:true

Here is my rollup.config.js

import commonjs from "@rollup/plugin-commonjs"
import peerDepsExternal from "rollup-plugin-peer-deps-external"
import typescript from "rollup-plugin-typescript2"
import postcss from "rollup-plugin-postcss"
import packageJson from "./package.json"
import { terser } from "rollup-plugin-terser"
import progress from "rollup-plugin-progress"
import { visualizer } from "rollup-plugin-visualizer"

export default [
  {
    input: ["src/index.ts", "src/inputs/index.ts"],
    output: [
      {
        dir: "dist",
        format: "cjs",
        exports: "auto",
        sourcemap: false
      }
    ],
    preserveModules: true,
    plugins: [
      progress(),
      peerDepsExternal(),
      commonjs(),
      typescript({ useTsconfigDeclarationDir: true }),
      postcss({
        extract: true,
        minimize: true,
        modules: true
      }),
      terser(),
      visualizer({})
    ],
    external: [...Object.keys(packageJson.peerDependencies || {}), ...Object.keys(packageJson.dependencies || {})]
  }
]

Here is my TextField.tsx

import React from "react"
import classnames from "classnames"
import ITextFieldProps from "./TextField.types"
import style from "./TextField.module.scss"

const TextField: React.FC<ITextFieldProps> = (props: ITextFieldProps) => {
  return <div className={classnames("text-field", style.textField)}>{props.name}</div>
}

export default TextField

Here is my TextField.module.scss

@import "../../style/variables.scss";

.textField {
  background-color: $color;
}

Here are my devDependencies

"devDependencies": {
    "@rollup/plugin-commonjs": "^19.0.1",
    "@rollup/plugin-node-resolve": "^13.0.2",
    "@rollup/plugin-typescript": "^8.2.3",
    "@storybook/addon-actions": "^6.3.4",
    "@storybook/addon-essentials": "^6.3.4",
    "@storybook/addon-links": "^6.3.4",
    "@storybook/addon-storyshots": "^6.3.4",
    "@storybook/node-logger": "^6.3.4",
    "@storybook/preset-create-react-app": "^3.2.0",
    "@storybook/react": "^6.3.4",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/react": "^17.0.14",
    "@types/react-dom": "^17.0.9",
    "node-sass": "^6.0.1",
    "postcss": "^8.3.6",
    "rollup": "^2.53.2",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.0",
    "rollup-plugin-progress": "^1.1.2",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.30.0",
    "rollup-plugin-visualizer": "^5.5.2",
    "sass": "^1.35.2",
    "tsconfig-paths-webpack-plugin": "^3.5.1"
  },

[Michael Paccione]

Also doesn't work for me!

[muyi]

Also doesn't work for me!

[Muhammad Hanif]

any update on this?