chialab · edoardocavazza · Jan 13, 2026 · Jan 13, 2026 · Jan 13, 2026 · Jan 13, 2026
diff --git a/.changeset/odd-months-happen.md b/.changeset/odd-months-happen.md
@@ -0,0 +1,5 @@
+---
+"@chialab/dna": minor
+---
+
+Add support for importing `globalStyles`.
diff --git a/.github/workflows/lint_build_test.yml b/.github/workflows/lint_build_test.yml
@@ -106,43 +106,3 @@ jobs:
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           file: coverage/clover.xml
-
-  test-browserstack:
-    name: Test Browserstack
-    runs-on: ubuntu-latest
-    concurrency: browserstack
-    strategy:
-      max-parallel: 2
-      matrix:
-        browser:
-          - 'chrome-latest'
-          - 'chrome-latest-1'
-          - 'chrome-latest-2'
-          - 'chrome-87'
-          - 'firefox-latest'
-          - 'firefox-latest-1'
-          - 'firefox-latest-2'
-          - 'firefox-90'
-          - 'safari-latest'
-          - 'safari-16'
-          - 'safari-15'
-          - 'edge-latest'
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v6
-
-      - name: Setup Node
-        uses: actions/setup-node@v6
-        with:
-          cache: yarn
-
-      - name: Install project dependencies
-        run: yarn install
-        env:
-          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: true
-
-      - name: Run tests
-        run: yarn test:browserstack --browser browserstack:${{ matrix.browser }}
-        env:
-          BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
-          BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -10,3 +10,43 @@ jobs:
   lint-build-test:
     uses: ./.github/workflows/lint_build_test.yml
     secrets: inherit
+
+  test-browserstack:
+    name: Test Browserstack
+    runs-on: ubuntu-latest
+    concurrency: browserstack
+    strategy:
+      max-parallel: 2
+      matrix:
+        browser:
+          - 'chrome-latest'
+          - 'chrome-latest-1'
+          - 'chrome-latest-2'
+          - 'chrome-87'
+          - 'firefox-latest'
+          - 'firefox-latest-1'
+          - 'firefox-latest-2'
+          - 'firefox-90'
+          - 'safari-latest'
+          - 'safari-16'
+          - 'safari-15'
+          - 'edge-latest'
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v6
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          cache: yarn
+
+      - name: Install project dependencies
+        run: yarn install
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: true
+
+      - name: Run tests
+        run: yarn test:browserstack --browser browserstack:${{ matrix.browser }}
+        env:
+          BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
+          BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
diff --git a/biome.json b/biome.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.0/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
   "files": {
     "includes": [
       "**",

diff --git a/docs/guide/styling.md b/docs/guide/styling.md
@@ -1,4 +1,46 @@
-# Styles
+# Styling
+
+## Global styles
+
+You can define global styles for your components using the static `globalStyles` property. This property can be a string, an array of strings or a `CSSStyleSheet` instance.
+
+::: warning
+
+Be careful when using global styles, as they will affect the entire document and may lead to unexpected results if not managed properly.
+Always use a [style technique](#other-styling-techniques) that scopes your CSS rules to avoid collisions.
+
+:::
+
+When a component is defined, its global styles are injected into the document `<head>` inside a `<style>` tag (or adopted if a `CSSStyleSheet` is used).
+
+```tsx
+import { Component, customElement } from '@chialab/dna';
+
+@customElement('x-card')
+class Card extends Component {
+    static globalStyles = `
+        x-card {
+            display: block;
+        }
+    `;
+}
+```
+
+### Importing CSS modules
+
+You can also import CSS as `CSSStyleSheet` instances if your bundler supports it.
+
+```tsx
+import { Component, customElement } from '@chialab/dna';
+import styles from './x-card.css' with { type: 'css' };
+
+@customElement('x-card')
+class Card extends Component {
+    static globalStyles = styles;
+}
+```
+
+## Scoped styles
 
 DNA can render plain `<style>` tags in a template, but what about style encapsulation?
 
@@ -10,8 +52,6 @@ You may don't need to use DNA's scoped style if you are already using a styling
 
 :::
 
-## Scoped styles
-
 Every `<style>` tag rendered to a component is scoped.
 
 ```tsx

diff --git a/package.json b/package.json
@@ -86,8 +86,8 @@
     "playwright": "^1.50.0",
     "preact": "beta",
     "publint": "^0.3.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "~19.1.0",
+    "react-dom": "~19.1.0",
     "rimraf": "^6.0.0",
     "rxjs": "^7.8.2",
     "svelte": "^5.33.1",

diff --git a/src/Component.ts b/src/Component.ts
@@ -116,6 +116,11 @@ export const extend = <T extends HTMLElement, C extends Constructor<HTMLElement>
             return attributes;
         }
 
+        /**
+         * Component global stylesheets.
+         */
+        static readonly globalStyles?: string | CSSStyleSheet | (CSSStyleSheet | string)[];
+
         /**
          * Define component properties.
          */
@@ -801,6 +806,11 @@ export interface BaseComponentConstructor<T extends HTMLElement = HTMLElement> {
      */
     readonly observedAttributes?: string[];
 
+    /**
+     * Component stylesheets.
+     */
+    readonly globalStyles?: string | CSSStyleSheet | (CSSStyleSheet | string)[];
+
     /**
      * Define component properties.
      */