diff --git a/packages/happy-dom/src/css/CSSParser.ts b/packages/happy-dom/src/css/CSSParser.ts index 0d099f725..adb5a5be0 100644 --- a/packages/happy-dom/src/css/CSSParser.ts +++ b/packages/happy-dom/src/css/CSSParser.ts @@ -39,7 +39,7 @@ export default class CSSParser { ) { const newRule = new CSSKeyframesRule(); - (newRule.name) = selectorText.replace('@keyframes ', ''); + (newRule.name) = selectorText.replace(/@(-webkit-){0,1}keyframes +/, ''); newRule.parentStyleSheet = parentStyleSheet; cssRules.push(newRule); parentRule = newRule; @@ -58,7 +58,7 @@ export default class CSSParser { selectorText.startsWith('@container') || selectorText.startsWith('@-webkit-container') ) { - const conditionText = selectorText.replace(/@container */, ''); + const conditionText = selectorText.replace(/@(-webkit-){0,1}container +/, ''); const newRule = new CSSContainerRule(); (newRule.conditionText) = conditionText; @@ -69,7 +69,7 @@ export default class CSSParser { selectorText.startsWith('@supports') || selectorText.startsWith('@-webkit-supports') ) { - const conditionText = selectorText.replace(/@supports */, ''); + const conditionText = selectorText.replace(/@(-webkit-){0,1}supports +/, ''); const newRule = new CSSSupportsRule(); (newRule.conditionText) = conditionText; @@ -78,7 +78,10 @@ export default class CSSParser { parentRule = newRule; } else if (selectorText.startsWith('@')) { // Unknown rule. - // Ignore. + // We will create a new rule to let it grab its content, but we will not add it to the cssRules array. + const newRule = new CSSRule(); + newRule.parentStyleSheet = parentStyleSheet; + parentRule = newRule; } else if (parentRule && parentRule.type === CSSRule.KEYFRAMES_RULE) { const newRule = new CSSKeyframeRule(); (newRule.keyText) = selectorText.trim(); diff --git a/packages/happy-dom/test/css/data/CSSParserInput.ts b/packages/happy-dom/test/css/data/CSSParserInput.ts index f2d6bdb68..797e6764d 100644 --- a/packages/happy-dom/test/css/data/CSSParserInput.ts +++ b/packages/happy-dom/test/css/data/CSSParserInput.ts @@ -31,7 +31,7 @@ export default ` } } - @keyframes keyframes2 { + @-webkit-keyframes keyframes2 { 0% { transform: rotate(0deg); } @@ -41,6 +41,12 @@ export default ` } } + @unknown-rule { + .unknown-class { + text-spacing: 1px; + } + } + @container (min-width: 36rem) { .container { color: red;