diff --git a/src/replaceSymbols.js b/src/replaceSymbols.js index 07069e1..5b51b43 100644 --- a/src/replaceSymbols.js +++ b/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; diff --git a/src/replaceValueSymbols.js b/src/replaceValueSymbols.js index 4f5f949..c4634f1 100644 --- a/src/replaceValueSymbols.js +++ b/src/replaceValueSymbols.js @@ -1,4 +1,4 @@ -const matchValueName = /[$]?[\w-]+[\w.]*/g; +const matchValueName = /[$]?[\w-]+/g; const replaceValueSymbols = (value, replacements) => { let matches; diff --git a/test/replaceSymbols.test.js b/test/replaceSymbols.test.js index bd0316f..8b0f489 100644 --- a/test/replaceSymbols.test.js +++ b/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 }"); +}); diff --git a/test/replaceValueSymbols.test.js b/test/replaceValueSymbols.test.js index 6fe8385..cd08983 100644 --- a/test/replaceValueSymbols.test.js +++ b/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",