feat: [#1441] Adds support for the CSS font-face rule (#1474)

* feat: [#1441] Support font-face * chore: [#1441] Adds unit test and support for CSSFontFaceRule.cssText * chore: [#1441] Linting --------- Co-authored-by: David Ortner <[email protected]>
capricorn86 · Aug 29, 2024 · 99639e5 · 99639e5
1 parent 343dfd2
commit 99639e5
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 3 deletions.
diff --git a/...es/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertySetParser.ts b/...es/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertySetParser.ts
@@ -3170,6 +3170,8 @@ export default class CSSStyleDeclarationPropertySetParser {
 				} else if (trimmedPart[0] !== '"' && trimmedPart[trimmedPart.length - 1] !== '"') {
 					trimmedPart = `"${trimmedPart}"`;
 				}
+			} else {
+				trimmedPart = trimmedPart.replace(/"/g, '');
 			}
 
 			if (i > 0) {

diff --git a/packages/happy-dom/src/css/rules/CSSFontFaceRule.ts b/packages/happy-dom/src/css/rules/CSSFontFaceRule.ts
@@ -8,7 +8,7 @@ import CSSStyleDeclaration from '../declaration/CSSStyleDeclaration.js';
 export default class CSSFontFaceRule extends CSSRule {
 	public readonly type = CSSRule.FONT_FACE_RULE;
 	public [PropertySymbol.cssText] = '';
-	#style: CSSStyleDeclaration = null;
+	#style: CSSStyleDeclaration | null = null;
 
 	/**
 	 * Returns style.
@@ -23,4 +23,13 @@ export default class CSSFontFaceRule extends CSSRule {
 		}
 		return this.#style;
 	}
+
+	/**
+	 * Returns css text.
+	 *
+	 * @returns CSS text.
+	 */
+	public get cssText(): string {
+		return `@font-face { ${this.style.cssText} }`;
+	}
 }
diff --git a/packages/happy-dom/src/css/rules/CSSKeyframeRule.ts b/packages/happy-dom/src/css/rules/CSSKeyframeRule.ts
@@ -9,7 +9,7 @@ export default class CSSKeyframeRule extends CSSRule {
 	public readonly type = CSSRule.KEYFRAME_RULE;
 	public readonly keyText: string;
 	public [PropertySymbol.cssText] = '';
-	#style: CSSStyleDeclaration = null;
+	#style: CSSStyleDeclaration | null = null;
 
 	/**
 	 * Returns style.

diff --git a/packages/happy-dom/src/css/rules/CSSStyleRule.ts b/packages/happy-dom/src/css/rules/CSSStyleRule.ts
@@ -10,7 +10,7 @@ export default class CSSStyleRule extends CSSRule {
 	public readonly selectorText = '';
 	public readonly styleMap = new Map();
 	public [PropertySymbol.cssText] = '';
-	#style: CSSStyleDeclaration = null;
+	#style: CSSStyleDeclaration | null = null;
 
 	/**
 	 * Returns style.

diff --git a/packages/happy-dom/src/css/utilities/CSSParser.ts b/packages/happy-dom/src/css/utilities/CSSParser.ts
@@ -7,6 +7,7 @@ import CSSKeyframesRule from '../rules/CSSKeyframesRule.js';
 import CSSMediaRule from '../rules/CSSMediaRule.js';
 import CSSContainerRule from '../rules/CSSContainerRule.js';
 import CSSSupportsRule from '../rules/CSSSupportsRule.js';
+import CSSFontFaceRule from '../rules/CSSFontFaceRule.js';
 import SelectorParser from '../../query-selector/SelectorParser.js';
 
 const COMMENT_REGEXP = /\/\*[\s\S]*?\*\//gm;
@@ -78,6 +79,14 @@ export default class CSSParser {
 					newRule.parentStyleSheet = parentStyleSheet;
 					cssRules.push(newRule);
 					parentRule = newRule;
+				} else if (selectorText.startsWith('@font-face')) {
+					const conditionText = selectorText.replace('@font-face', '');
+					const newRule = new CSSFontFaceRule();
+
+					newRule[PropertySymbol.cssText] = conditionText;
+					newRule.parentStyleSheet = parentStyleSheet;
+					cssRules.push(newRule);
+					parentRule = newRule;
 				} else if (selectorText.startsWith('@')) {
 					// Unknown rule.
 					// We will create a new rule to let it grab its content, but we will not add it to the cssRules array.

diff --git a/packages/happy-dom/test/css/CSSParser.test.ts b/packages/happy-dom/test/css/CSSParser.test.ts
@@ -219,5 +219,25 @@ describe('CSSParser', () => {
 			expect((<CSSStyleRule>cssRules[10]).style.length).toBe(1);
 			expect((<CSSStyleRule>cssRules[10]).style.cssText).toBe('color: pink;');
 		});
+
+		it('Supports @font-face.', () => {
+			const css = `
+                @font-face {
+                    font-family: "Ionicons";
+                    src: url("~react-native-vector-icons/Fonts/Ionicons.ttf");
+                }
+            `;
+			const cssStyleSheet = new CSSStyleSheet();
+			const cssRules = CSSParser.parseFromString(cssStyleSheet, css);
+
+			expect(cssRules.length).toBe(1);
+			expect((<CSSStyleRule>cssRules[0]).cssText).toBe(
+				'@font-face { font-family: Ionicons; src: url("~react-native-vector-icons/Fonts/Ionicons.ttf"); }'
+			);
+			expect((<CSSStyleRule>cssRules[0]).style.fontFamily).toBe('Ionicons');
+			expect((<CSSStyleRule>cssRules[0]).style.src).toBe(
+				'url("~react-native-vector-icons/Fonts/Ionicons.ttf")'
+			);
+		});
 	});
 });