diff --git a/packages/core/src/parser/model/BrowserParserCss.ts b/packages/core/src/parser/model/BrowserParserCss.ts index 00ea3b60a1..ba26284994 100644 --- a/packages/core/src/parser/model/BrowserParserCss.ts +++ b/packages/core/src/parser/model/BrowserParserCss.ts @@ -215,7 +215,7 @@ export const parseNode = (el: CSSStyleSheet | CSSRule) => { singleAtRule = true; atRuleType = AT_RULE_NAMES[type]; condition = parseCondition(node); - } else if (AT_RULE_KEYS.indexOf(`${type}`) >= 0 || (!type && getNestableAtRule(node))) { + } else if (AT_RULE_KEYS.indexOf(`${type}`) >= 0 || getNestableAtRule(node)) { const subRules = parseNode(node); const subAtRuleType = AT_RULE_NAMES[type] || getNestableAtRule(node); condition = parseCondition(node); diff --git a/packages/core/test/specs/css_composer/model/CssModels.ts b/packages/core/test/specs/css_composer/model/CssModels.ts index 10632f2208..febf03735c 100644 --- a/packages/core/test/specs/css_composer/model/CssModels.ts +++ b/packages/core/test/specs/css_composer/model/CssModels.ts @@ -97,6 +97,16 @@ describe('CssRule', () => { expect(obj.toCSS()).toEqual(`@media ${media}{.test1{color:red;}}`); }); + test('toCSS keeps the space in a named container rule', () => { + const containerText = 'somename (min-width: 300px)'; + obj.set('atRuleType', 'container'); + obj.set('mediaText', containerText); + obj.getSelectors().add({ name: 'test1' }); + obj.setStyle({ height: '100px' }); + expect(obj.getAtRule()).toEqual(`@container ${containerText}`); + expect(obj.toCSS()).toEqual(`@container ${containerText}{.test1{height:100px;}}`); + }); + test('toCSS with a generic at-rule', () => { obj.set('atRuleType', 'supports'); obj.getSelectors().add({ name: 'test1' }); diff --git a/packages/core/test/specs/parser/model/ParserCss.ts b/packages/core/test/specs/parser/model/ParserCss.ts index a81e2e47d8..46a3cb3820 100644 --- a/packages/core/test/specs/parser/model/ParserCss.ts +++ b/packages/core/test/specs/parser/model/ParserCss.ts @@ -375,8 +375,7 @@ describe('ParserCss', () => { expect(obj.parse(str)).toEqual([result]); }); - // Unsupported by CSSOM parser - test.skip('Parse rule with @container at-rule', () => { + test('Parse rule with @container at-rule', () => { const atRuleType = 'container'; const atRuleText = 'somename (min-width: 300px)'; const input = `@${atRuleType} ${atRuleText} { @@ -386,14 +385,12 @@ describe('ParserCss', () => { const output = [ { selectors: ['cls1'], - selectorsAdd: '', atRuleType, mediaText: atRuleText, style: { height: '100px' }, }, { selectors: ['cls2'], - selectorsAdd: '', atRuleType, mediaText: atRuleText, style: { height: '200px' }, @@ -402,6 +399,23 @@ describe('ParserCss', () => { expect(obj.parse(input)).toEqual(output); }); + test('Parse rule with anonymous @container at-rule', () => { + const atRuleType = 'container'; + const atRuleText = '(min-width: 300px)'; + const input = `@${atRuleType} ${atRuleText} { + .cls1{ height: 100px } + }`; + const output = [ + { + selectors: ['cls1'], + atRuleType, + mediaText: atRuleText, + style: { height: '100px' }, + }, + ]; + expect(obj.parse(input)).toEqual(output); + }); + test('Parses multiple font-face at-rules', () => { const str = ` @font-face {