css-modules / postcss-modules-values

Pass arbitrary constants between your module files
ISC License
38 stars 6 forks source link

Should it works with dash symbol in name? #27

Closed SanichKotikov closed 8 months ago

SanichKotikov commented 2 years ago

Hi,

For example, I have next code:

/* values.css */
@value test-t: 40px;
@value test_q: 36px;
@value test-t, test_q from "values.css";

.root {
  height: test-t;
  height: test_q;
}

Result I've got:

.Comp__root__wrlsR {
  height: undefined;
  height: 36px;
}

Webpack rule I use:

{
    test: /\.css$/,
    exclude: /node_modules/,
    sideEffects: true,
    use: [
        isProd ? MiniCssExtractPlugin.loader : 'style-loader',
        {
            loader: 'css-loader',
            options: {
                importLoaders: 1,
                modules: {
                    mode: 'local',
                    exportLocalsConvention: 'dashesOnly',
                    localIdentName: isProd ? '[hash:base64:5]' : '[name]__[local]__[hash:base64:5]',
                },
            },
        },
        {
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    plugins: {
                        'postcss-nesting': {},
                        'postcss-modules-values': {},
                        ...(isProd && { autoprefixer: { flexbox: 'no-2009' } }),
                    },
                },
            },
        },
    ],
},

Is there something I've missed?

alexander-akait commented 2 years ago

Should work, can you provide full repo to reproduce?