\@ in CSS Selector

[marekkobida]

• macOS Mojave 10.14 (18A391)
• Node.js 11.13.0
• npm 6.7.0
• webpack 4.29.6
• css-loader 2.1.1

Expected Behavior

<div class="m_x_@"></div>

Actual Behavior

.m_x_\@ {
  margin-left: auto !important;
  margin-right: auto !important;
}

/*
 * @flow
 */

import * as React from 'react';

import design from './design.scss';

class Test extends React.Component<P: {

}> {
  render () {
    return <div className={design['m_x_@']} />;
  }
}

export default Test;

<div class="m_x_----wB9u"></div>

Code

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const sass = require('sass');

const isProduction = process.env.NODE_ENV === 'production';

const js = {
  exclude: /node_modules/,
  test: /\.js$/,
  use: [
    {
      loader: 'babel-loader',
    },
  ],
};

module.exports = {
  devtool: isProduction ? '' : 'source-map',
  entry: {
    index: path.resolve(__dirname, 'private/index.js'),
  },
  mode: isProduction ? 'production' : 'development',
  module: {
    rules: [
      js,
      {
        exclude: /node_modules/,
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              localIdentName: isProduction ? '[hash:base64:8]' : '[local]--[hash:base64:4]',
              modules: true,
              sourceMap: !isProduction,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer'),
              ],
              sourceMap: !isProduction,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: sass,
              outputStyle: isProduction ? 'compressed' : 'expanded',
              sourceMap: !isProduction,
            },
          },
        ],
      },
    ],
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'public'),
  },
  plugins: [
    new MiniCssExtractPlugin(),
  ],
};

[alexander-akait]

@ is not valid characters for classes in css so we strip this for css modules

[alexander-akait]

What you expected? No hash or not strip @?

[marekkobida]

@ is allowed

W3C says

Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B&W?" or "B\26 W\3F".

but css-loader modified \@ into -- (nothing)

[alexander-akait]

Please provide minimum reproducible test repo, thanks

[alexander-akait]

No @ is not allowed, and should be escaped in # (id selector) and . (class selector)

[alexander-akait]

Looks i find problem @ is disappear from locals, yep it is bug, we need fix, feel free to send a PR