fix: rewriting selectors in escaped css string sources

Author: cossssmin

lib/postcssSafeCss.js

@@ -1,15 +1,18 @@
 import cssEscape from 'css.escape'
 
-const headCSSRegex = needle => new RegExp(`\\\\[${needle}]`, 'g')
+function unescapeRegExp(string) {
+  return string.replace(/\\(.)/g, '$1')
+}
 
 export default (options = {}) => root => {
-  root.walkDecls(decl => {
-    if (decl.parent.selector) {
-      Object.entries(options.replacements).forEach(([from, to]) => {
-        decl.parent.selector = decl.parent.selector
-          .replace(headCSSRegex(cssEscape(from)), to)
-          .replace('\\2c ', '_')
+  const replacementsRegex = new RegExp('\\\\(' + Object.keys(options.replacements).map(cssEscape).join('|') + ')', 'g')
+
+  root.walkRules(rule => {
+    rule.selector = rule.selector
+      .replace(replacementsRegex, matched => {
+        return options.replacements[unescapeRegExp(matched)]
       })
-    }
+      // Replace escaped commas with underscores
+      .replaceAll('\\2c ', '_')
   })
 }

test/index.test.js

@@ -81,3 +81,40 @@ test('Ignores known class name patterns', t => {
     ],
   })
 })
+
+test('Works with escaped selectors in string sources', async () => {
+  const html = `
+    <style>
+      .sm\\:text-left {
+        text-align: left;
+      }
+      .w-1\\.5 {
+        width: 1.5rem;
+      }
+    </style>
+    <div class="sm:text-left w-1.5">foo</div>
+  `
+
+  const result = await posthtml([
+    plugin({
+      replacements: {
+        ':': '__',
+        '.': '_dot_',
+      }
+    })
+  ])
+    .process(html)
+    .then(result => result.html)
+
+  expect(result).toBe(`
+    <style>
+      .sm__text-left {
+        text-align: left;
+      }
+      .w-1_dot_5 {
+        width: 1.5rem;
+      }
+    </style>
+    <div class="sm__text-left w-1_dot_5">foo</div>
+  `)
+})