Allow selectors replacements and disallow with . or #

Author: TrySound

src/replaceSymbols.js

@@ -1,13 +1,15 @@
-import replaceValueSymbols from './replaceValueSymbols.js'
+import replaceValueSymbols from "./replaceValueSymbols.js";
 
 const replaceSymbols = (css, replacements) => {
-  css.walkDecls(
-    decl => (decl.value = replaceValueSymbols(decl.value, replacements))
-  )
-  css.walkAtRules(
-    'media',
-    atRule => (atRule.params = replaceValueSymbols(atRule.params, replacements))
-  )
-}
+  css.walk(node => {
+    if (node.type === "decl") {
+      node.value = replaceValueSymbols(node.value, replacements);
+    } else if (node.type === "rule") {
+      node.selector = replaceValueSymbols(node.selector, replacements);
+    } else if (node.type === "atrule" && node.name === "media") {
+      node.params = replaceValueSymbols(node.params, replacements);
+    }
+  });
+};
 
-export default replaceSymbols
+export default replaceSymbols;

src/replaceValueSymbols.js

@@ -1,4 +1,4 @@
-const matchValueName = /[$]?[\w-]+[\w.]*/g;
+const matchValueName = /[$]?[\w-]+/g;
 
 const replaceValueSymbols = (value, replacements) => {
   let matches;

test/replaceSymbols.test.js

@@ -12,18 +12,16 @@ test("return empty CSS unchanged", () => {
   expect(replace("", {})).toEqual("");
 });
 
-test("not change class names", () => {
-  expect(replace(".foo { color: red }", { foo: "bar" })).toEqual(
-    ".foo { color: red }"
-  );
-});
-
 test("not change property names", () => {
   expect(replace(".foo { color: red }", { color: "background" })).toEqual(
     ".foo { color: red }"
   );
 });
 
+test("not change non-media at-rules", () => {
+  expect(replace("@import url;", { url: "otherUrl" })).toEqual("@import url;");
+});
+
 test("change declaration values", () => {
   expect(replace(".foo { color: red }", { red: "blue" })).toEqual(
     ".foo { color: blue }"
@@ -37,3 +35,14 @@ test("should change media queries", () => {
     })
   ).toEqual("@media (max-width: 599px) { .foo { color: red } }");
 });
+
+test("should replace class names and id in selectors", () => {
+  expect(
+    replace(".className1.className2 #id1#id2 { color: red }", {
+      className1: "__className",
+      id1: "__id",
+      "className1.className2": "__badClass",
+      "id1#id2": "__badId"
+    })
+  ).toEqual(".__className.className2 #__id#id2 { color: red }");
+});

test/replaceValueSymbols.test.js

@@ -27,13 +27,12 @@ test("change multiple symbols within values", () => {
 
 test("change complex symbols, if you feel like trolling yourself", () => {
   expect(
-    replace("1px 0.5em 3px $sass-a", {
+    replace("1px 3px $sass-a", {
       "1px": "1rem",
-      "0.5em": "10px",
       "3px": "$sass-b",
       "$sass-a": "4px"
     })
-  ).toEqual("1rem 10px $sass-b 4px");
+  ).toEqual("1rem $sass-b 4px");
 });
 
 test("rewrite custom properties", () => {
@@ -42,12 +41,11 @@ test("rewrite custom properties", () => {
 
 test("not replace half a variable", () => {
   expect(
-    replace("colors.red red.blue", {
-      red: "green",
-      blue: "white",
-      colors: "weights"
+    replace("colors red", {
+      re: "green",
+      color: "weights"
     })
-  ).toEqual("colors.red red.blue");
+  ).toEqual("colors red");
 });
 
 test("not replace a replacement", () => {
@@ -56,13 +54,13 @@ test("not replace a replacement", () => {
   );
 });
 
-test("replace selectors identifiers started with . or #", () => {
+test("replace selectors identifiers contained . or #", () => {
   expect(
     replace(".className #id", { className: "otherClassName", id: "otherId" })
   ).toEqual(".otherClassName #otherId");
 });
 
-test("not replace with values started with . or #", () => {
+test("not replace with values contained . or #", () => {
   expect(
     replace(".className #id", {
       ".className": "otherClassName",