fix: [#1727] Fixes issue where it was not possible to nest media, supports and container rules (#1734)

Author: capricorn86

packages/happy-dom/src/browser/DefaultBrowserSettings.ts

@@ -39,7 +39,8 @@ export default <IBrowserSettings>{
 	device: {
 		prefersColorScheme: 'light',
 		prefersReducedMotion: 'no-preference',
-		mediaType: 'screen'
+		mediaType: 'screen',
+		forcedColors: 'none'
 	},
 	debug: {
 		traceWaitUntilComplete: -1

packages/happy-dom/src/browser/types/IBrowserSettings.ts

@@ -111,6 +111,7 @@ export default interface IBrowserSettings {
 		prefersColorScheme: string;
 		prefersReducedMotion: string;
 		mediaType: string;
+		forcedColors: string;
 	};
 
 	/**

packages/happy-dom/src/browser/types/IOptionalBrowserSettings.ts

@@ -105,6 +105,7 @@ export default interface IOptionalBrowserSettings {
 		prefersColorScheme?: string;
 		prefersReducedMotion?: string;
 		mediaType?: string;
+		forcedColors?: string;
 	};
 
 	/**

packages/happy-dom/src/css/CSSRule.ts

@@ -29,7 +29,7 @@ export default class CSSRule {
 	// Public properties
 	public parentRule: CSSRule = null;
 	public parentStyleSheet: CSSStyleSheet = null;
-	public type: number = null;
+	public type: CSSRuleTypeEnum | null = null;
 
 	/**
 	 * Constructor.

packages/happy-dom/src/css/CSSStyleSheet.ts

@@ -57,26 +57,27 @@ export default class CSSStyleSheet {
 	 * @returns The newly inserterted rule's index.
 	 */
 	public insertRule(rule: string, index?: number): number {
-		const rules = CSSParser.parseFromString(this, rule);
-
-		if (rules.length === 0) {
-			throw new this[PropertySymbol.window].DOMException(
-				'Invalid CSS rule.',
-				DOMExceptionNameEnum.hierarchyRequestError
+		if (arguments.length === 0) {
+			throw new this[PropertySymbol.window].TypeError(
+				`Failed to execute 'insertRule' on 'CSSStyleSheet': 1 argument required, but only 0 present.`
 			);
 		}
 
-		if (rules.length > 1) {
+		const rules = CSSParser.parseFromString(this, rule);
+
+		if (rules.length === 0 || rules.length > 1) {
 			throw new this[PropertySymbol.window].DOMException(
-				'Only one rule is allowed to be added.',
+				`Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '${rule}'.`,
 				DOMExceptionNameEnum.syntaxError
 			);
 		}
 
 		if (index !== undefined) {
 			if (index > this.cssRules.length) {
 				throw new this[PropertySymbol.window].DOMException(
-					'Index is more than the length of CSSRuleList.',
+					`Failed to execute 'insertRule' on 'CSSStyleSheet': The index provided (${index}) is larger than the maximum index (${
+						this.cssRules.length - 1
+					}).`,
 					DOMExceptionNameEnum.indexSizeError
 				);
 			}
@@ -98,7 +99,12 @@ export default class CSSStyleSheet {
 	 * @param index Index.
 	 */
 	public deleteRule(index: number): void {
-		delete this.cssRules[index];
+		if (arguments.length === 0) {
+			throw new this[PropertySymbol.window].TypeError(
+				`Failed to execute 'deleteRule' on 'CSSStyleSheet': 1 argument required, but only 0 present.`
+			);
+		}
+		this.cssRules.splice(index, 1);
 	}
 
 	/**
@@ -109,6 +115,11 @@ export default class CSSStyleSheet {
 	 * @returns Promise.
 	 */
 	public async replace(text: string): Promise<void> {
+		if (arguments.length === 0) {
+			throw new this[PropertySymbol.window].TypeError(
+				`Failed to execute 'replace' on 'CSSStyleSheet': 1 argument required, but only 0 present.`
+			);
+		}
 		this.replaceSync(text);
 	}
 
@@ -119,6 +130,11 @@ export default class CSSStyleSheet {
 	 * @param text CSS text.
 	 */
 	public replaceSync(text: string): void {
+		if (arguments.length === 0) {
+			throw new this[PropertySymbol.window].TypeError(
+				`Failed to execute 'replaceSync' on 'CSSStyleSheet': 1 argument required, but only 0 present.`
+			);
+		}
 		if (this.#currentText !== text) {
 			this.#currentText = text;
 			(<CSSRule[]>this.cssRules) = CSSParser.parseFromString(this, text);

packages/happy-dom/src/css/rules/CSSContainerRule.ts

@@ -1,10 +1,11 @@
 import CSSRule from '../CSSRule.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 
 /**
  * CSSRule interface.
  */
 export default class CSSContainerRule extends CSSRule {
-	public readonly type = CSSRule.CONTAINER_RULE;
+	public readonly type = CSSRuleTypeEnum.containerRule;
 	public readonly cssRules: CSSRule[] = [];
 	public readonly conditionText = '';
 

packages/happy-dom/src/css/rules/CSSFontFaceRule.ts

@@ -1,12 +1,13 @@
 import CSSRule from '../CSSRule.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import CSSStyleDeclaration from '../declaration/CSSStyleDeclaration.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 
 /**
  * CSSRule interface.
  */
 export default class CSSFontFaceRule extends CSSRule {
-	public readonly type = CSSRule.FONT_FACE_RULE;
+	public readonly type = CSSRuleTypeEnum.fontFaceRule;
 	public [PropertySymbol.cssText] = '';
 	#style: CSSStyleDeclaration | null = null;
 

packages/happy-dom/src/css/rules/CSSKeyframeRule.ts

@@ -1,12 +1,13 @@
 import CSSRule from '../CSSRule.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import CSSStyleDeclaration from '../declaration/CSSStyleDeclaration.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 
 /**
  * CSSRule interface.
  */
 export default class CSSKeyframeRule extends CSSRule {
-	public readonly type = CSSRule.KEYFRAME_RULE;
+	public readonly type = CSSRuleTypeEnum.keyframeRule;
 	public readonly keyText: string;
 	public [PropertySymbol.cssText] = '';
 	#style: CSSStyleDeclaration | null = null;

packages/happy-dom/src/css/rules/CSSKeyframesRule.ts

@@ -2,14 +2,15 @@ import CSSRule from '../CSSRule.js';
 import CSSStyleDeclaration from '../declaration/CSSStyleDeclaration.js';
 import CSSKeyframeRule from './CSSKeyframeRule.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 
 const CSS_RULE_REGEXP = /([^{]+){([^}]+)}/;
 
 /**
  * CSSRule interface.
  */
 export default class CSSKeyframesRule extends CSSRule {
-	public readonly type = CSSRule.KEYFRAMES_RULE;
+	public readonly type = CSSRuleTypeEnum.keyframesRule;
 	public readonly cssRules: CSSKeyframeRule[] = [];
 	public readonly name: string = null;
 

packages/happy-dom/src/css/rules/CSSMediaRule.ts

@@ -1,11 +1,12 @@
 import CSSRule from '../CSSRule.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 import MediaList from '../MediaList.js';
 
 /**
  * CSSRule interface.
  */
 export default class CSSMediaRule extends CSSRule {
-	public readonly type = CSSRule.MEDIA_RULE;
+	public readonly type = CSSRuleTypeEnum.mediaRule;
 	public readonly cssRules: CSSRule[] = [];
 	public readonly media = new MediaList();
 

packages/happy-dom/src/css/rules/CSSStyleRule.ts

@@ -1,12 +1,13 @@
 import CSSRule from '../CSSRule.js';
 import * as PropertySymbol from '../../PropertySymbol.js';
 import CSSStyleDeclaration from '../declaration/CSSStyleDeclaration.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 
 /**
  * CSSRule interface.
  */
 export default class CSSStyleRule extends CSSRule {
-	public readonly type = CSSRule.STYLE_RULE;
+	public readonly type = CSSRuleTypeEnum.styleRule;
 	public readonly styleMap = new Map();
 	public selectorText = '';
 	public [PropertySymbol.cssText] = '';

packages/happy-dom/src/css/rules/CSSSupportsRule.ts

@@ -1,10 +1,11 @@
 import CSSRule from '../CSSRule.js';
+import CSSRuleTypeEnum from '../CSSRuleTypeEnum.js';
 
 /**
  * CSSRule interface.
  */
 export default class CSSSupportsRule extends CSSRule {
-	public readonly type = CSSRule.SUPPORTS_RULE;
+	public readonly type = CSSRuleTypeEnum.supportsRule;
 	public readonly cssRules: CSSRule[] = [];
 	public readonly conditionText = '';