Parcel: 🙋 Add styleName for React projects using css modules

[barabadzhi]

This is a 🙋 feature request.

It will be really nice to have styleName feature working out-of-the-box or with minimal configuration for React projects like it is done in babel-plugin-react-css-modules which is not working with Parcel.

🤔 Expected Behavior

Code like this should work fine too:

import './App.css'

const App = () => {
    return (
        <div styleName="app">
            Hello World!
        </div>
    )
}

😯 Current Behavior

Only this one is working:

import styles from './App.css'

const App = () => {
    return (
        <div className={styles.app}>
            Hello World!
        </div>
    )
}

It will be a bit nicer: save typing and more React-ish.

💁 Possible Solution

I'm not sure here, but I think it can be done same way as in babel-plugin-react-css-modules

[davidnagli]

Does it work when you put react-css-modules as a plugin in your .babelrc?

[barabadzhi]

I have react-css-modules in my .babelrc already.

It's trying to work, kind of.
Everything builds and runs.
Style names come processed fine, but style definitions themselves are missing. :o:

[davidnagli]

Not sure if this is a bug or a feature 😒

[devongovett]

Can you please post an example repo that isn't working, or your full .babelrc and .postcssrc files here so we can debug?

[barabadzhi]

Hi, sure! 🗃
.babelrc:

{
    "plugins": [
        ["import", {
            "libraryName": "antd",
            "style": true
        }],
        ["react-css-modules", {
            "handleMissingStyleName": "warn"
        }]
    ],
    "presets": [
        ["env", {
            "targets": {
                "browsers": [
                    ">1%",
                    "last 4 versions",
                    "Firefox ESR",
                    "not ie < 11"
                ]
            }
        }],
        "stage-2",
        "react"
    ]
}

and .postcssrc:

{
    "modules": true,
    "plugins": {
        "autoprefixer": {
            "browsers": [
                ">1%",
                "last 4 versions",
                "Firefox ESR",
                "not ie < 11"
            ],
            "flexbox": "no-2009"
        },
        "css-declaration-sorter": {
            "order": "smacss"
        },
        "doiuse": {
            "browsers": [
                ">1%",
                "last 4 versions",
                "Firefox ESR",
                "not ie < 11"
            ]
        },
        "postcss-font-magician": {
            "hosted": [
                "./src/assets/fonts"
            ]
        },
        "postcss-nested": {},
        "postcss-pxtorem": {},
        "postcss-simple-vars": {}
    }
}

[pselden]

I was able to fix this by setting both .babelrc and .postcssrc to use the same generateScopeName:

{
  "plugins": [
    [
      "react-css-modules",
      {
        "generateScopedName": "[path]__[name]__[local]__[hash:base64:5]",
        "handleMissingStyleName": "warn"
      }
    ]
  ],
  "presets": ["env", "react"]
}

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    },
    "postcss-modules": {
      "generateScopedName": "[path]__[name]__[local]__[hash:base64:5]"
    }
  }
}

[kawamurakazushi]

Can this work using typescript?

[tacc-wbomar]

I have tried to use react-css-modules with Parcel, also, but have failed.

I tried @pselden 's configuration, but my results were less successful:

1. with no changes to the configuration suggestion

Server running at http://localhost:1234 
⠹ Building scheduler-tracing.development.js...Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.27, but parser uses 5.2.18. Perhaps this is the source of the error below.
🚨  /[...]/src/index.js: Plugin/Preset files are not allowed to export objects, only functions. In /[...]/node_modules/babel-preset-react/lib/index.js

1. after removing the "presets": ["env", "react"], which have not been necessary, from .babelrc
Server running at http://localhost:1234 ⠹ Building scheduler-tracing.development.js...Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.27, but parser uses 5.2.18. Perhaps this is the source of the error below. ⠹ Building ReactPropTypesSecret.js...Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.27, but parser uses 5.2.18. Perhaps this is the source of the error below. 🚨 /[...]/src/components/Nav/Nav.js: /[...]/src/components/Nav/Nav.js: ENOENT: no such file or directory, open '/src/styles/components/c-nav.css'

The second error is the same error I have received with all prior attempts to use babel-plugin-react-css-modules (which is what react-css-modules—deprecated—will install instead).

The parser mentioned at version 5.2.18 is postcss-modules-parser, which has been renamed to postcss-icss, and does indeed use PostCSS at version 5.x.

An issue has been filed with postcss-icss: https://github.com/css-modules/postcss-icss/issues/11