Skip to content

Commit d62f49b

Browse files
soranoosoranoo
committed
Automatically Remove Original CSS after Full Obfuscation #6 
1 parent 50ce7bf commit d62f49b

File tree

3 files changed

+63
-62
lines changed

3 files changed

+63
-62
lines changed

‎src/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ function obfuscate(options: Options) {
4040
classSuffix: options.classSuffix,
4141
classIgnore: options.classIgnore,
4242

43-
enableObfuscateMarkers: options.enableMarkers,
43+
enableObfuscateMarkerClasses: options.enableMarkers,
4444
});
4545
log("success", "Obfuscation", "Class conversion JSON created/updated");
4646

‎src/utils.test.ts

+21-42
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import css from "css";
33
import {
44
copyCssData, findContentBetweenMarker,
55
findHtmlTagContentsByClass, getFilenameFromPath,
6-
extractClassFromSelector, searchForwardComponent
6+
extractClassFromSelector, searchForwardComponent,
7+
renameCssSelector
78
} from "./utils";
89

910
const testCss = `
@@ -72,27 +73,6 @@ const testCss = `
7273
// }
7374
// return recursive(cssObj.stylesheet.rules) || [];
7475
// }
75-
// function renameCssSelector(oldSelector: string, newSelector: string, cssObj: any): any[] {
76-
// function recursive(rules: any[]): any[] {
77-
// return rules.map((item: any) => {
78-
// if (item.rules) {
79-
// return { ...item, rules: recursive(item.rules) };
80-
// } else if (item.selectors) {
81-
// // remove empty selectors
82-
// item.selectors = item.selectors.filter((selector: any) => selector !== "");
83-
84-
// let updatedSelectors = item.selectors.map((selector: any) =>
85-
// selector === oldSelector ? newSelector : selector
86-
// );
87-
88-
// return { ...item, selectors: updatedSelectors };
89-
// } else {
90-
// return item;
91-
// }
92-
// });
93-
// }
94-
// return recursive(cssObj.stylesheet.rules);
95-
// }
9676

9777
// describe("getCssRulesIncludedSelector", () => {
9878
// it("should return the correct CSS rules (single selector, no nested rule)", () => {
@@ -136,30 +116,29 @@ const testCss = `
136116
// });
137117
// });
138118

139-
// describe("renameCssSelector", () => {
140-
// it("should rename the CSS selector (single selector, no nested rule)", () => {
141-
// const cssObj = css.parse(testCss);
119+
describe("renameCssSelector", () => {
120+
it("should rename the CSS selector (single selector, no nested rule)", () => {
121+
const cssObj = css.parse(testCss);
142122

143-
// const oldSelector = ".s1-1";
144-
// const newSelector = ".s1-1-new";
145-
// const expectedOutput = [{ "type": "rule", "selectors": [".s0-1"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181810", "position": { "start": { "line": 3, "column": 5 }, "end": { "line": 3, "column": 24 } } }, { "type": "declaration", "property": "color", "value": "#181811", "position": { "start": { "line": 4, "column": 5 }, "end": { "line": 4, "column": 19 } } }], "position": { "start": { "line": 2, "column": 1 }, "end": { "line": 5, "column": 2 } } }, { "type": "media", "media": "(min-width: 640px)", "rules": [{ "type": "rule", "selectors": [".s1-1-new"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181812", "position": { "start": { "line": 11, "column": 9 }, "end": { "line": 11, "column": 28 } } }, { "type": "declaration", "property": "color", "value": "#181813", "position": { "start": { "line": 12, "column": 9 }, "end": { "line": 12, "column": 23 } } }], "position": { "start": { "line": 9, "column": 5 }, "end": { "line": 13, "column": 6 } } }, { "type": "media", "media": "(min-width: 768px)", "rules": [{ "type": "rule", "selectors": [".s2-1", ".s2-1-1"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181814", "position": { "start": { "line": 18, "column": 13 }, "end": { "line": 18, "column": 32 } } }, { "type": "declaration", "property": "color", "value": "#181815", "position": { "start": { "line": 19, "column": 13 }, "end": { "line": 19, "column": 27 } } }], "position": { "start": { "line": 17, "column": 9 }, "end": { "line": 20, "column": 10 } } }, { "type": "rule", "selectors": [".s2-2", ".s2-2-2"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181816", "position": { "start": { "line": 22, "column": 13 }, "end": { "line": 22, "column": 32 } } }, { "type": "declaration", "property": "color", "value": "#181817", "position": { "start": { "line": 23, "column": 13 }, "end": { "line": 23, "column": 27 } } }], "position": { "start": { "line": 20, "column": 10 }, "end": { "line": 24, "column": 10 } } }, { "type": "rule", "selectors": [".s2-3"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181818", "position": { "start": { "line": 26, "column": 13 }, "end": { "line": 26, "column": 32 } } }, { "type": "declaration", "property": "color", "value": "#181819", "position": { "start": { "line": 27, "column": 13 }, "end": { "line": 27, "column": 27 } } }], "position": { "start": { "line": 24, "column": 10 }, "end": { "line": 28, "column": 10 } } }], "position": { "start": { "line": 15, "column": 5 }, "end": { "line": 29, "column": 6 } } }, { "type": "rule", "selectors": [".s1-2"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181820", "position": { "start": { "line": 33, "column": 9 }, "end": { "line": 33, "column": 28 } } }, { "type": "declaration", "property": "color", "value": "#181821", "position": { "start": { "line": 34, "column": 9 }, "end": { "line": 34, "column": 23 } } }], "position": { "start": { "line": 31, "column": 5 }, "end": { "line": 35, "column": 6 } } }], "position": { "start": { "line": 7, "column": 1 }, "end": { "line": 36, "column": 2 } } }, { "type": "rule", "selectors": [".s0-2"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181822", "position": { "start": { "line": 39, "column": 5 }, "end": { "line": 39, "column": 24 } } }, { "type": "declaration", "property": "color", "value": "#181823", "position": { "start": { "line": 40, "column": 5 }, "end": { "line": 40, "column": 19 } } }], "position": { "start": { "line": 38, "column": 1 }, "end": { "line": 41, "column": 2 } } }];
123+
const oldSelector = ".s1-1";
124+
const newSelector = ".s1-1-new";
125+
const expectedOutput = [{ "type": "rule", "selectors": [".s0-1"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181810", "position": { "start": { "line": 3, "column": 5 }, "end": { "line": 3, "column": 24 } } }, { "type": "declaration", "property": "color", "value": "#181811", "position": { "start": { "line": 4, "column": 5 }, "end": { "line": 4, "column": 19 } } }], "position": { "start": { "line": 2, "column": 1 }, "end": { "line": 5, "column": 2 } } }, { "type": "media", "media": "(min-width: 640px)", "rules": [{ "type": "rule", "selectors": [".s1-1-new"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181812", "position": { "start": { "line": 11, "column": 9 }, "end": { "line": 11, "column": 28 } } }, { "type": "declaration", "property": "color", "value": "#181813", "position": { "start": { "line": 12, "column": 9 }, "end": { "line": 12, "column": 23 } } }], "position": { "start": { "line": 9, "column": 5 }, "end": { "line": 13, "column": 6 } } }, { "type": "media", "media": "(min-width: 768px)", "rules": [{ "type": "rule", "selectors": [".s2-1", ".s2-1-1"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181814", "position": { "start": { "line": 18, "column": 13 }, "end": { "line": 18, "column": 32 } } }, { "type": "declaration", "property": "color", "value": "#181815", "position": { "start": { "line": 19, "column": 13 }, "end": { "line": 19, "column": 27 } } }], "position": { "start": { "line": 17, "column": 9 }, "end": { "line": 20, "column": 10 } } }, { "type": "rule", "selectors": [".s2-1", ".s2-1-1"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181814", "position": { "start": { "line": 22, "column": 13 }, "end": { "line": 22, "column": 32 } } }, { "type": "declaration", "property": "color", "value": "#181815", "position": { "start": { "line": 23, "column": 13 }, "end": { "line": 23, "column": 27 } } }], "position": { "start": { "line": 20, "column": 10 }, "end": { "line": 24, "column": 10 } } }, { "type": "rule", "selectors": [".s2-2", ".s2-2-2"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181816", "position": { "start": { "line": 26, "column": 13 }, "end": { "line": 26, "column": 32 } } }, { "type": "declaration", "property": "color", "value": "#181817", "position": { "start": { "line": 27, "column": 13 }, "end": { "line": 27, "column": 27 } } }], "position": { "start": { "line": 24, "column": 10 }, "end": { "line": 28, "column": 10 } } }, { "type": "rule", "selectors": [".s2-3"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181818", "position": { "start": { "line": 30, "column": 13 }, "end": { "line": 30, "column": 32 } } }, { "type": "declaration", "property": "color", "value": "#181819", "position": { "start": { "line": 31, "column": 13 }, "end": { "line": 31, "column": 27 } } }], "position": { "start": { "line": 28, "column": 10 }, "end": { "line": 32, "column": 10 } } }], "position": { "start": { "line": 15, "column": 5 }, "end": { "line": 33, "column": 6 } } }, { "type": "rule", "selectors": [".s1-2"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181820", "position": { "start": { "line": 37, "column": 9 }, "end": { "line": 37, "column": 28 } } }, { "type": "declaration", "property": "color", "value": "#181821", "position": { "start": { "line": 38, "column": 9 }, "end": { "line": 38, "column": 23 } } }], "position": { "start": { "line": 35, "column": 5 }, "end": { "line": 39, "column": 6 } } }], "position": { "start": { "line": 7, "column": 1 }, "end": { "line": 40, "column": 2 } } }, { "type": "rule", "selectors": [".s0-2"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181822", "position": { "start": { "line": 43, "column": 5 }, "end": { "line": 43, "column": 24 } } }, { "type": "declaration", "property": "color", "value": "#181823", "position": { "start": { "line": 44, "column": 5 }, "end": { "line": 44, "column": 19 } } }], "position": { "start": { "line": 42, "column": 1 }, "end": { "line": 45, "column": 2 } } }];
146126

147-
// const result = renameCssSelector(oldSelector, newSelector, cssObj);
148-
// expect(result).toEqual(expectedOutput);
149-
// });
127+
const result = renameCssSelector(oldSelector, newSelector, cssObj);
128+
expect(result.stylesheet.rules).toEqual(expectedOutput);
129+
});
150130

151-
// // it("should rename the CSS selector (multiple nested media queries)", () => {
152-
// // const cssObj = css.parse(testCss);
131+
it("should rename the CSS selector (multiple nested media queries)", () => {
132+
const cssObj = css.parse(testCss);
153133

154-
// // const oldSelector = ".s2-2";
155-
// // const newSelector = ".s2-2-new";
156-
// // const expectedOutput = [{ "type": "rule", "selectors": [".s0"], "declarations": [{ "type": "declaration", "property": "background", "value": "#eee", "position": { "start": { "line": 3, "column": 5 }, "end": { "line": 3, "column": 21 } } }, { "type": "declaration", "property": "color", "value": "#888", "position": { "start": { "line": 4, "column": 5 }, "end": { "line": 4, "column": 16 } } }], "position": { "start": { "line": 2, "column": 1 }, "end": { "line": 5, "column": 2 } } }, { "type": "media", "media": "(min-width: 640px)", "rules": [{ "type": "rule", "selectors": [".s1"], "declarations": [{ "type": "declaration", "property": "background", "value": "#eee", "position": { "start": { "line": 11, "column": 9 }, "end": { "line": 11, "column": 25 } } }, { "type": "declaration", "property": "color", "value": "#888", "position": { "start": { "line": 12, "column": 9 }, "end": { "line": 12, "column": 20 } } }], "position": { "start": { "line": 9, "column": 5 }, "end": { "line": 13, "column": 6 } } }, { "type": "media", "media": "(min-width: 768px)", "rules": [{ "type": "rule", "selectors": [".s2-1"], "declarations": [{ "type": "declaration", "property": "background", "value": "#eee", "position": { "start": { "line": 18, "column": 13 }, "end": { "line": 18, "column": 29 } } }, { "type": "declaration", "property": "color", "value": "#888", "position": { "start": { "line": 19, "column": 13 }, "end": { "line": 19, "column": 24 } } }], "position": { "start": { "line": 17, "column": 9 }, "end": { "line": 20, "column": 10 } } }, { "type": "rule", "selectors": [".s2-2-new"], "declarations": [{ "type": "declaration", "property": "background", "value": "#eee", "position": { "start": { "line": 22, "column": 13 }, "end": { "line": 22, "column": 29 } } }, { "type": "declaration", "property": "color", "value": "#888", "position": { "start": { "line": 23, "column": 13 }, "end": { "line": 23, "column": 24 } } }], "position": { "start": { "line": 20, "column": 10 }, "end": { "line": 24, "column": 10 } } }, { "type": "rule", "selectors": [".s2-3"], "declarations": [{ "type": "declaration", "property": "background", "value": "#eee", "position": { "start": { "line": 26, "column": 13 }, "end": { "line": 26, "column": 29 } } }, { "type": "declaration", "property": "color", "value": "#888", "position": { "start": { "line": 27, "column": 13 }, "end": { "line": 27, "column": 24 } } }], "position": { "start": { "line": 24, "column": 10 }, "end": { "line": 28, "column": 10 } } }], "position": { "start": { "line": 15, "column": 5 }, "end": { "line": 29, "column": 6 } } }], "position": { "start": { "line": 7, "column": 1 }, "end": { "line": 30, "column": 2 } } }];
134+
const oldSelector = ".s2-2";
135+
const newSelector = ".s2-2-new";
136+
const expectedOutput = [{ "type": "rule", "selectors": [".s0-1"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181810", "position": { "start": { "line": 3, "column": 5 }, "end": { "line": 3, "column": 24 } } }, { "type": "declaration", "property": "color", "value": "#181811", "position": { "start": { "line": 4, "column": 5 }, "end": { "line": 4, "column": 19 } } }], "position": { "start": { "line": 2, "column": 1 }, "end": { "line": 5, "column": 2 } } }, { "type": "media", "media": "(min-width: 640px)", "rules": [{ "type": "rule", "selectors": [".s1-1"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181812", "position": { "start": { "line": 11, "column": 9 }, "end": { "line": 11, "column": 28 } } }, { "type": "declaration", "property": "color", "value": "#181813", "position": { "start": { "line": 12, "column": 9 }, "end": { "line": 12, "column": 23 } } }], "position": { "start": { "line": 9, "column": 5 }, "end": { "line": 13, "column": 6 } } }, { "type": "media", "media": "(min-width: 768px)", "rules": [{ "type": "rule", "selectors": [".s2-1", ".s2-1-1"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181814", "position": { "start": { "line": 18, "column": 13 }, "end": { "line": 18, "column": 32 } } }, { "type": "declaration", "property": "color", "value": "#181815", "position": { "start": { "line": 19, "column": 13 }, "end": { "line": 19, "column": 27 } } }], "position": { "start": { "line": 17, "column": 9 }, "end": { "line": 20, "column": 10 } } }, { "type": "rule", "selectors": [".s2-1", ".s2-1-1"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181814", "position": { "start": { "line": 22, "column": 13 }, "end": { "line": 22, "column": 32 } } }, { "type": "declaration", "property": "color", "value": "#181815", "position": { "start": { "line": 23, "column": 13 }, "end": { "line": 23, "column": 27 } } }], "position": { "start": { "line": 20, "column": 10 }, "end": { "line": 24, "column": 10 } } }, { "type": "rule", "selectors": [".s2-2-new", ".s2-2-2"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181816", "position": { "start": { "line": 26, "column": 13 }, "end": { "line": 26, "column": 32 } } }, { "type": "declaration", "property": "color", "value": "#181817", "position": { "start": { "line": 27, "column": 13 }, "end": { "line": 27, "column": 27 } } }], "position": { "start": { "line": 24, "column": 10 }, "end": { "line": 28, "column": 10 } } }, { "type": "rule", "selectors": [".s2-3"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181818", "position": { "start": { "line": 30, "column": 13 }, "end": { "line": 30, "column": 32 } } }, { "type": "declaration", "property": "color", "value": "#181819", "position": { "start": { "line": 31, "column": 13 }, "end": { "line": 31, "column": 27 } } }], "position": { "start": { "line": 28, "column": 10 }, "end": { "line": 32, "column": 10 } } }], "position": { "start": { "line": 15, "column": 5 }, "end": { "line": 33, "column": 6 } } }, { "type": "rule", "selectors": [".s1-2"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181820", "position": { "start": { "line": 37, "column": 9 }, "end": { "line": 37, "column": 28 } } }, { "type": "declaration", "property": "color", "value": "#181821", "position": { "start": { "line": 38, "column": 9 }, "end": { "line": 38, "column": 23 } } }], "position": { "start": { "line": 35, "column": 5 }, "end": { "line": 39, "column": 6 } } }], "position": { "start": { "line": 7, "column": 1 }, "end": { "line": 40, "column": 2 } } }, { "type": "rule", "selectors": [".s0-2"], "declarations": [{ "type": "declaration", "property": "background", "value": "#181822", "position": { "start": { "line": 43, "column": 5 }, "end": { "line": 43, "column": 24 } } }, { "type": "declaration", "property": "color", "value": "#181823", "position": { "start": { "line": 44, "column": 5 }, "end": { "line": 44, "column": 19 } } }], "position": { "start": { "line": 42, "column": 1 }, "end": { "line": 45, "column": 2 } } }];
157137

158-
// // const result = renameCssSelector(oldSelector, newSelector, cssObj);
159-
// // console.log(JSON.stringify(result));
160-
// // expect(result).toEqual(expectedOutput);
161-
// // });
162-
// });
138+
const result = renameCssSelector(oldSelector, newSelector, cssObj);
139+
expect(result.stylesheet.rules).toEqual(expectedOutput);
140+
});
141+
});
163142

164143
//! ================================
165144
//! copyCssData
@@ -591,7 +570,7 @@ describe("extractClassFromSelector", () => {
591570
extractedClasses: ["class-1\\/2"]
592571
})
593572
});
594-
573+
595574
test("should handle Tailwind CSS universal selector", () => {
596575
const sample = ".\\*\\:class1 .class2\\*\\:class3";
597576

0 commit comments

Comments
 (0)