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 (#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)