diff --git a/src/index.spec.ts b/src/index.spec.ts index 86ec7ab..760d209 100644 --- a/src/index.spec.ts +++ b/src/index.spec.ts @@ -368,23 +368,23 @@ describe("free style", () => { expect(Style.getStyles()).toEqual("@media print{body{color:red}}"); }); - it("should de-dupe across styles and rules", () => { + it("should create a different hash for nested css rules", () => { const Style = create(); - let changeId = Style.changeId; const className1 = Style.registerStyle({ color: "red", }); - expect(Style.changeId).not.toEqual(changeId); - changeId = Style.changeId; - - Style.registerRule(".test", { - color: "red", + const className2 = Style.registerStyle({ + "&:first-child": { + color: "red", + }, }); - expect(Style.changeId).not.toEqual(changeId); - expect(Style.getStyles()).toEqual(`.${className1},.test{color:red}`); + expect(className1).not.toEqual(className2); + expect(Style.getStyles()).toEqual( + `.${className1}{color:red}.${className2}:first-child{color:red}` + ); }); it("should retain insertion order", () => { diff --git a/src/index.ts b/src/index.ts index 67db8de..c9c8fbd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -181,7 +181,7 @@ type StylizeRule = { function stylize( rulesList: StylizeRule[], stylesList: StylizeStyle[], - className: string, + key: string, styles: Styles, parentClassName: string ) { @@ -207,35 +207,38 @@ function stylize( const style = stringifyProperties(sortTuples(properties)); let pid = style; - if (className.charCodeAt(0) === 64 /* @ */) { + if (key.charCodeAt(0) === 64 /* @ */) { const childRules: StylizeRule[] = []; const childStyles: StylizeStyle[] = []; // Nested styles support (e.g. `.foo > @media`). if (parent && style) { + pid += `:${parent}`; childStyles.push({ selector: parent, style, isUnique }); } for (const [name, value] of nested) { - pid += stylize(childRules, childStyles, name, value, parent); + pid += `:${stylize(childRules, childStyles, name, value, parent)}`; } // Add new rule to parent. rulesList.push({ - selector: className, + selector: key, rules: childRules, styles: childStyles, style: parent ? "" : style, }); } else { - const selector = parent ? child(className, parent) : className; + const selector = parent ? child(key, parent) : key; + + pid += `:${selector}`; if (style) { stylesList.push({ selector, style, isUnique }); } for (const [name, value] of nested) { - pid += stylize(rulesList, stylesList, name, value, selector); + pid += `:${stylize(rulesList, stylesList, name, value, selector)}`; } }