diff --git a/packages/engine/src/identifiers/propertyValueIDGenerator.ts b/packages/engine/src/identifiers/propertyValueIDGenerator.ts index 2640806..301303e 100644 --- a/packages/engine/src/identifiers/propertyValueIDGenerator.ts +++ b/packages/engine/src/identifiers/propertyValueIDGenerator.ts @@ -10,7 +10,7 @@ export class PropertyValueIDGenerator implements IdentifierGenerator }> = {}; next({ property, media = '', support = '', container = '', pseudo = '', value }: StyleBlock) { - const propertyKey = `${media}${support}${container}${pseudo}${property}`; + const propertyKey = `m${media}s${support}c${container}ps${pseudo}p${property}`; if (this.cache[propertyKey] === undefined) { this.cache[propertyKey] = { diff --git a/packages/engine/tests/src/printers/printStyleBlock.test.ts b/packages/engine/tests/src/printers/printStyleBlock.test.ts index 48169c3..4d20395 100644 --- a/packages/engine/tests/src/printers/printStyleBlock.test.ts +++ b/packages/engine/tests/src/printers/printStyleBlock.test.ts @@ -174,7 +174,7 @@ describe('printStyleBlock', () => { const result = printStyleBlocks(blocks); expect(result).toMatchInlineSnapshot( - `"@media (min-width: 100px){.a1{background:green}@container (min-width: 100px){.c1{color:green}@supports (display: grid){.b1{color:green}}}.a1{background:green}}"`, + `"@media (min-width: 100px){@container (min-width: 100px){.d1{color:green}@supports (display: grid){.b1{color:green}}}.a1{background:green}}@container (min-width: 100px){.c1{background:green}}"`, ); }); });