webpack css-loader escaping issue

Question

I'm using

macOS Mojave 10.14 (18A391)
Node.js 11.13.0
npm 6.7.0
webpack 4.29.6
css-loader 2.1.1
sass 1.17.3
sass-loader 7.1.0
mini-css-extract-plugin 0.5.0

Expected Behavior

Rendered HTML

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

CSS class is rendered as I wanted

Actual Behavior

Source code

SCSS

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

JSX

/*
 * @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;

Rendered HTML

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

CSS class is rendered as I do not wanted

Instead of m_x_@ I got m_x_----wB9u (bad escaped)

webpack.config.js

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: '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,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer'),
              ],
            },
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: sass,
            },
          },
        ],
      },
    ],
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'public'),
  },
  plugins: [
    new MiniCssExtractPlugin(),
  ],
};

Vlad Shepshuk Vlad Shepshuk · Accepted Answer · 2019-04-03T12:00:40

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. 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”.

Source: http://www.w3.org/TR/CSS21/syndata.html#characters

webpack css-loader escaping issue

Expected Behavior

Actual Behavior

webpack.config.js

1 Answers