Webpack Loader Adds Double Escape to Single Escaped Selectors

[ryanfitzer]

Do you want to request a feature or report a bug?

Bug.

What is the current behavior?

The webpack loader is double-escaping each single-escaped selector.

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

1. Import (and add to your <style jsx/> tag) a css file that contains the following rule:

.focus\:bg-transparent:focus {
    background-color: transparent
}

What is the expected behavior?

This rule will be inserted into the DOM.

What is the actual behavior?

Another escape is added to the original escape:

.focus\\:bg-transparent:focus {
    background-color: transparent
}

Which results in the rule not being inserted into the DOM and the following browser warning:

StyleSheet: illegal rule: 

.focus\\:bg-transparent:focus {background-color: transparent}

Environment (include versions)

• OS: macOS 10.14.6
• Browser: Chrome 78 | Safari 13
• styled-jsx (version): 3.2.4

Did this work in previous versions?

Never attempted, but I expect it did not. The issue is introduced at this line in src/webpack.js, which was in the original commit.

Based on the link in the comment above that line and the related issue, this is meant to handle escapes in property values. In my quick tests, single-escaped property values (ex. content: '\0026';) should not be double-escaped. Doing so makes the value invalid.

[giuseppeg]

@ryanfitzer thanks for reporting this issue and looking into shit. Can you submit a PR with a fix?

[ryanfitzer]

I started looking through the tests to find a spot to add the new ones, but wasn’t able to figure out where the loader is being tested. Does the loader have any tests?

[vacas5]

I am currently running into this issue trying to upgrade Next to the latest version. Many of the Tailwind classes I depend on have escapes like this. Any way to disable it per file?

[lenigmaus]

Here is a very ugly solution specifically for tailwind: <style jsx global>{` ${`${tailwind}`.replace(/\\\\:/g, "\\:")} `}</style>