Css-loader: broken escaping

[eeve]

What is the current behavior?
The escape symbol \ was lost

.grid            { display: flex; flex-wrap: wrap; }
.grid.\-top      { align-items: flex-start; }
.grid.\-middle   { align-items: center; }
.grid.\-bottom   { align-items: flex-end; }

=>

.grid            { display: flex; flex-wrap: wrap; }\n.grid.-top      { align-items: flex-start; }\n.grid.-middle   { align-items: center; }\n.grid.-bottom   { align-items: flex-end; }\n

What is the expected behavior?
Keep the escape symbol \

https://github.com/eeve/test.v1

[alexander-akait]

@eeve btw, why your use \ in selectors?

[jschlieber]

I'm running into the exact same issue. In my case escape sequences are used in Predix-UI CSS Modules, e.g:

https://github.com/PredixDev/px-spacing-design/blob/db32341b44fee68cace50d5d236306f768bbed26/_trumps.spacing.scss#L175-L181

So that basically means I can't use those u-m+ and u-m++ classes.

Any ideas for a quick workaround?

[alexander-akait]

@jschlieber unfortunately no, try to found and fix problem today

[jschlieber]

@evilebottnawi Any news on this issue?

[alexander-akait]

@jschlieber I was on vacation, in the near future I will take care of this, thanks for waiting

[alexander-akait]

@jschlieber u-m+ and u-m++ are invalid css classes (https://jigsaw.w3.org/css-validator/#validate_by_input), your should use u-m\+ and u-m\+\+

[alexander-akait]

@jschlieber also .\-top {} and .-top {} are valid class selectors and mean the same thing.

[alexander-akait]

Bug inside postcss-modules-local-by-default and postcss-modules-scope, they remove \ character. But i wonder use case.

@jschlieber .u-m\+ and etc selectors work good (https://github.com/webpack-contrib/css-loader/pull/584).

@TrySound what do your think about this?

[jschlieber]

@evilebottnawi Ok, but what you're telling me is that i can't define my css selector as:

.u-m++{
  ...
}

and I'm totally fine with that. But still, if classes are defined like this

.u-m\00002b{
  ...
}

as in the PredixUi CSS library (which btw is valid css). I can't use it like it is intended, e.g.

<div class="u-m+">
  ...
</div>

because it ends up as

.u-m00002b{
  ...
}

so I would have to use it like this

<div class="u-m00002b">
  ...
</div>

[alexander-akait]

@jschlieber don't understand your. Your can use .u-m\00002b in your css and css-loader works fine. (Test failed)
Test:

test("selector with unicode", ".u-m\\00002b { a: b c d; }", [
  [1, ".u-m\\00002b { a: b c d; }", ""]
]);

Input:

.u-m\00002b {
    border: 10px solid black;
}

Output:

.u-m\00002b {
  border: 10px solid black;
}

Just try to test in your project.
I agree what css-loader should not remove \, but it is happens only with selector where escaped is not necessary (example if your have \.-top {}, your can use .-top {}, because \.-top {} and .-top {} are mean the same thing).

[alexander-akait]

@jschlieber Thanks for issue, confirmed. Let's wait what says @TrySound (he has access for postcss-* plugins for css-loader)

[jschlieber]

@evilebottnawi Thanks for your efforts. Any news on this one?

[alexander-akait]

@jschlieber no :disappointed:
@TrySound friendly ping

[TrySound]

I guess it's something in selector tokenizer. Patch release will help. However I don't have access yet.

[TrySound]

https://github.com/css-modules/css-selector-tokenizer

[6palace]

+1 from us as well

[RoopGuron]

+1 This fix is needed.

[EvanLovely]

I've got a workaround detailed here

[EvanLovely]

I found where this is being caused: ./lib/getLocalIndent.js has a .replace() function that replaces a big RegEx with - (if you change that character and run you can see it being used).

[EvanLovely]

It appears that by the time it hits this file, classes like .u-hide\@large are already u-hide@large, and then after that line become u-hide-large.

[EvanLovely]

Hmm... also turning CSS modules off with options.modules = false "fixes" it.

[alexander-akait]

Just infromation:

.icon-caret-left:before {
   content: '"\\f10c"'
}

Also broken

[alexander-akait]

Also

body {
  font-family: '微软雅黑'; /* some chinese font name */
}

[martin-minovski]

+1

[themoch]

I'm having a slightly different issue.

Loader

{
          loader: "css-loader",
          options: {
            sourceMap: true,
            camelCase: "dashes",
            importLoaders: 1,
            modules: true,
            localIdentName: "[name]__[local]___[hash:base64:5]"
          }
        },

input.css

.myStyle {
    content: '\e901';
}

transforms to:

output.css

styles__myStyle___1LKpi {
    content: '\E901';
}

☝️ notice the uppercasing of E. This breaks the unicode used in the font icon

[pitgrap]

Another similar bug:

input.css

.glyphicon-search:before {
  content: "\e003 \fe0e";
}

output.css

.glyphicon-search:before {
  content: "\E003   \FE0E";
}

1. Transform to uppercase like @themoch described
2. Instead of one space there are now 3 spaces between the characters!

[jihb]

Another similar bug:

input.css

.glyphicon-search:before {
  content: "\e003 \fe0e";
}

output.css

.glyphicon-search:before {
  content: "\E003   \FE0E";
}

1. Transform to uppercase like @themoch described
2. Instead of one space there are now 3 spaces between the characters!

same problem.

[jihb]

Another similar bug:
input.css

.glyphicon-search:before {
  content: "\e003 \fe0e";
}

output.css

.glyphicon-search:before {
  content: "\E003   \FE0E";
}

1. Transform to uppercase like @themoch described
2. Instead of one space there are now 3 spaces between the characters!

same problem.

delete space fix this problem

[alexander-akait]

All fixed in master exclude selectors, it is very hard, workaround use .u-m\+ instead .u-m\00002b

[alexander-akait]

Broken also (when modules enable):

:root {
  --title-align: center;
  --sr-only: {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
  };
}

[dulakm]

Hello,
please, is there any update on the issue? I can confirm another problem with escaping similar to the one mentioned in https://github.com/webpack-contrib/css-loader/issues/752.

When using CSS modules and @custom-selector functionality, even the most basic example escaping goes wrong:

@custom-selector :--heading h1, h2, h3;
article :--heading + p {
    margin-top: 0;
}

=>

@custom-selector :--heading h1, h2, h3;
article :\--heading + p {
    margin-top: 0;
}

[alexander-akait]

@dulakm problem in css modules plugins (for postcss), feel free investigate and send a PR

[Lynn-cc]

my base64 image：data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==

escaped to：
data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH/UETgHHO8S44KbfXgAAAABJRU5ErkJggg==

notice the //U in the last line，was escaped to /U, and the image was broken.How to solve this ?

[alexander-akait]

@Lynn-cc can't reproduce (https://github.com/webpack-contrib/css-loader/pull/888), see snapshots, maybe you use old version of css-loader?