search

capricorn86 / happy-dom

A JavaScript implementation of a web browser without its graphical user interface
MIT License
3.08k stars 185 forks source link

Invalid CSS rule error when using @font-face #1441

Open yuki2006 opened 1 month ago

yuki2006 commented 1 month ago

Describe the bug When attempting to add a @font-face CSS rule using happy-dom, I encounter a HierarchyRequestError indicating that the CSS rule is invalid. The issue occurs when running the following code:

To Reproduce

index.js

import { Window } from 'happy-dom';

const window = new Window({
  url: 'https://localhost:8080',
});
const document = window.document;

const styleEl = document.createElement('style');

// Append <style> element to <head>
document.head.appendChild(styleEl);

const styles = `
@font-face {
  font-family: "Ionicons";
  src: url("~react-native-vector-icons/Fonts/Ionicons.ttf");
`;
styleEl.sheet?.insertRule(styles, 0);

// Close window
await window.happyDOM.close();

package.json

{
  "type": "module",
  "dependencies": {
    "happy-dom": "^14.11.0"
  }
}

Run node index.js

Expected behavior The @font-face rule should be successfully added to the document's stylesheet without any errors.

Actual Behavior:

The following error is thrown:

DOMException [HierarchyRequestError]: Invalid CSS rule.
    at CSSStyleSheet.insertRule (file:///Users/xxxx/happy/node_modules/happy-dom/lib/css/CSSStyleSheet.js:54:19)

Device:

Additional context

Personally, I don't care about font issues on happy-dom.