diff --git a/.changeset/flat-humans-hammer.md b/.changeset/flat-humans-hammer.md new file mode 100644 index 00000000..4fe3765c --- /dev/null +++ b/.changeset/flat-humans-hammer.md @@ -0,0 +1,7 @@ +--- +'@vanilla-extract/css': patch +--- + +Fixes a bug causing invalid selectors to be generated in some cases + +When transforming selectors containing consective copies of the same classname, e.g: `&&`, if `&` was a substring of another local classname and that classname happened to end with the same character that `&` started with, the generated selector would be invalid. diff --git a/packages/css/src/transformCss.test.ts b/packages/css/src/transformCss.test.ts index fe9fa25c..f152c871 100644 --- a/packages/css/src/transformCss.test.ts +++ b/packages/css/src/transformCss.test.ts @@ -2299,6 +2299,61 @@ describe('transformCss', () => { } `); }); + + it('should handle consecutive references to the same classname that is a substring of another classname with the same start and end character', () => { + const classname1 = 'debugName_hash1'; + const classname2 = 'debugName_hash1d'; + + expect( + transformCss({ + composedClassLists: [], + localClassNames: [classname1, classname2], + + cssObjs: [ + { + type: 'local', + selector: classname1, + rule: { + selectors: { + // Bug reproduction + ['&&']: { + background: 'black', + }, + // Exhaustive tests for combinations of two adjacent classnames + [`${classname2}&`]: { + background: 'orange', + }, + [`&${classname2}&`]: { + background: 'orange', + }, + [`${classname2}${classname2}&`]: { + background: 'orange', + }, + }, + }, + }, + { + type: 'local', + selector: classname2, + rule: {}, + }, + ], + }).join('\n'), + ).toMatchInlineSnapshot(` + .debugName_hash1.debugName_hash1 { + background: black; + } + .debugName_hash1d.debugName_hash1 { + background: orange; + } + .debugName_hash1.debugName_hash1d.debugName_hash1 { + background: orange; + } + .debugName_hash1d.debugName_hash1d.debugName_hash1 { + background: orange; + } + `); + }); }); endFileScope(); diff --git a/packages/css/src/transformCss.ts b/packages/css/src/transformCss.ts index 6b0248ee..0c11a64b 100644 --- a/packages/css/src/transformCss.ts +++ b/packages/css/src/transformCss.ts @@ -317,11 +317,15 @@ class Stylesheet { const [endIndex, [firstMatch]] = results[i]; const startIndex = endIndex - firstMatch.length + 1; - if (startIndex >= lastReplaceIndex) { - // Class names can be substrings of other class names - // e.g. '_1g1ptzo1' and '_1g1ptzo10' - // If the startIndex >= lastReplaceIndex, then - // this is the case and this replace should be skipped + // Class names can be substrings of other class names + // e.g. '_1g1ptzo1' and '_1g1ptzo10' + // Additionally, concatenated classnames can be substrings of other classnames + // 'debugName_18fxj81' and 'debugName_18fxj81d' + // If this is the case then this replace should be skipped + const match = + startIndex >= lastReplaceIndex || endIndex >= lastReplaceIndex; + + if (match) { continue; }