+1

Yes, It'd be helpful

You can achieve resolve aliases except for composes via this method of using a PostCSS import plugin which supports aliases.

Haven't looked into trying to get composes working with the same aliases though (i.e. so those still have to ../be/relative/imported.css)

You can just use postcss plugin 'postcss-import' and configure it for resolving your modules in postcss.config.js:

const path = require('path')

const importLoader = require('postcss-import')({
  extension: '.scss', // default is '.css'
  resolve: (id) => {
    if (id === 'MyCSSVariables') return path.resolve(__dirname, './path/to/your/file.scss');
    return id;
  },
});

module.exports = {
  plugins: [importLoader],
};

and then use it like that:

@import "MyCSSVariables"

in every file that needs access to the variables

Hope it helps!

Is there any plan to work on this? I'd love to use this plugin over react-css-modules but I use a lot of webpack aliases. Is it possible to use the babel module resolver instead of require.resolve? If so, I could potentially use another babel-resolver plugin to set up the aliases.

No plans to support custom resolve paths.

bit of a terrible blocker to be honest... what's it take for a contributor to add support for this? is it feasible/possible?

@moimikey I'd recommend switching over to using css-modules directly via the https://github.com/webpack-contrib/css-loader. It works fine with webpack aliases.

I'd like support for this as well if possible.

@danny-andrews went right above my head. thanks.

+1

Is there any plan to support this?

@gajus you wrote "No plans to support custom resolve paths". Does this just mean you don't plan to support the webpack resolve aliases (which I could totally understand), or do you even mean you don't plan to add an alias option for babel-plugin-react-css-modules on its own?

Does this just mean you don't plan to support the webpack resolve aliases (which I could totally understand)

This.

Don't understand the second part of the question.

I mean you could feature a resolve option like this for config in babelrc:
['babel-plugin-react-css-modules', { 'generateScopedName': '[name]---[local]---[hash:base64:5]', 'resolve': { '@styles': path.resolve(__dirname, 'src/styles') } }]

Currently, I have a lot of imports like this:
import colors from '../../../../../../styles/colors.css'
and I'd be really happy to somehow replace them by e.g.:
import colors from '@styles/colors.css'

Currently, I have a lot of imports like this:
import colors from '../../../../../../styles/colors.css'
and I'd be really happy to somehow replace them by e.g.:
import colors from '@styles/colors.css'

I would not support this either.

Doing this is just asking for a trouble.

It is perfectly normal to have multiple levels of nesting in a project. The particular example (../../../../../../) seems a bit excessive, but thats a problem with the project's file tree structure. Adding aliases is just a workaround disguising the underlying problem.

Besides, you can easily add the suggested feature with a separate babel plugin. It does not need to be part of babel-plugin-react-css-modules.

Just add babel-plugin-module-resolver and you can easily achieve this feature.

module.exports = {
  ...
  "plugins": [
    ...
    ["module-resolver", {
      "alias": {
        "@": path.join(__dirname, 'src'),
      }
    }]
  ],
};