gajus / babel-plugin-react-css-modules

Transforms styleName to className using compile time CSS module resolution.
Other
2.05k stars 162 forks source link

Using aliases with composes and babel-plugin-module-resolver does not works #280

Open pstenstrm opened 4 years ago

pstenstrm commented 4 years ago

I'm trying to replace react-css-modules with this plugin. Most things work or have a simple solution, except for our use of aliases when composing classes. Previously we've used webpack and postcss-import to resolve the aliases, I don't expect that to work with a babel plugin.

@imports still work with aliases, even if I can't compose classes from a file loaded with @import. I can still do composes: button from '../button.css as long as the path is relative.

I've tried to set up the babel module-resolver by this comment https://github.com/gajus/babel-plugin-react-css-modules/issues/46#issuecomment-414130223

My config in .babelrc looks like this:

{
    "presets": [
        "@babel/preset-react"
    ],
    "plugins": [
        [
            "module-resolver",
            {
                "root": [
                    "../apps"
                ],
                "alias": {
                    "@constants": "../shared/constants",
                    "@shared": "../shared",
                    "@common": "./common",
                }
            }
        ],
        ["react-css-modules", {
            "exclude": "node_modules",
            "handleMissingStyleName": "warn",
            "filetypes": {
                ".pcss": {
                    "syntax": ""
                }
            }
        }],
    ],

If I compose a class like this:

.button {
    composes: reset-button from '@common/styles/elements/button.css';
}

I get this error, as it tries to load the path as relative.

ERROR in ./src/app/components/Panel/Participants/Participant/Participant.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open '/[rootpath]/apps/src/app/components/Panel/Participants/Participant/@common/styles/elements/button.css'
    at Object.openSync (fs.js:443:3)
    at readFileSync (fs.js:343:35)
    at getTokens (/[rootpath]/apps/node_modules/babel-plugin-react-css-modules/dist/requireCssModule.js:74:58)
    at fetch (/[rootpath]/apps/node_modules/babel-plugin-react-css-modules/dist/requireCssModule.js:100:12)
    at /[rootpath]/apps/node_modules/postcss-modules-parser/lib/index.js:74:20

Am I mistaken when I expect babel-plugin-react-css-modules to respect rules set with babel-plugin-module-resolver in compose statements?