Disallow . and # replacements and allow class name and id replacement

Author: TrySound

src/replaceValueSymbols.js

@@ -1,18 +1,18 @@
-const matchValueName = /[$#]?[\w-\.]+/g
+const matchValueName = /[$]?[\w-]+[\w.]*/g;
 
 const replaceValueSymbols = (value, replacements) => {
-  let matches
+  let matches;
   while ((matches = matchValueName.exec(value))) {
-    const replacement = replacements[matches[0]]
+    const replacement = replacements[matches[0]];
     if (replacement) {
       value =
         value.slice(0, matches.index) +
         replacement +
-        value.slice(matchValueName.lastIndex)
-      matchValueName.lastIndex -= matches[0].length - replacement.length
+        value.slice(matchValueName.lastIndex);
+      matchValueName.lastIndex -= matches[0].length - replacement.length;
     }
   }
-  return value
-}
+  return value;
+};
 
-export default replaceValueSymbols
+export default replaceValueSymbols;

test/replaceValueSymbols.test.js

@@ -27,14 +27,13 @@ test("change multiple symbols within values", () => {
 
 test("change complex symbols, if you feel like trolling yourself", () => {
   expect(
-    replace("1px 0.5em 3px $sass-a #f00", {
+    replace("1px 0.5em 3px $sass-a", {
       "1px": "1rem",
       "0.5em": "10px",
       "3px": "$sass-b",
-      "$sass-a": "4px",
-      "#f00": "green"
+      "$sass-a": "4px"
     })
-  ).toEqual("1rem 10px $sass-b 4px green");
+  ).toEqual("1rem 10px $sass-b 4px");
 });
 
 test("rewrite custom properties", () => {
@@ -56,3 +55,18 @@ test("not replace a replacement", () => {
     "green blue"
   );
 });
+
+test("replace selectors identifiers started with . or #", () => {
+  expect(
+    replace(".className #id", { className: "otherClassName", id: "otherId" })
+  ).toEqual(".otherClassName #otherId");
+});
+
+test("not replace with values started with . or #", () => {
+  expect(
+    replace(".className #id", {
+      ".className": "otherClassName",
+      "#id": "otherId"
+    })
+  ).toEqual(".className #id");
+});