From b7cf022c1059e11a3ee8399c9a4555f2ac27cdb8 Mon Sep 17 00:00:00 2001
From: "kshitij.sobti" <kshitij@sobti.in>
Date: Thu, 7 May 2026 19:45:11 +0530
Subject: [PATCH] feat: add support for :host pseudo-class in style-dictionary
 output

Enhanced the CSS output to include `:host` alongside `:root` for better compatibility with web components.

When using the stylesheets inside a shadow DOM, the `:root` selector doesn't match, and we need to use `:host` instead.
---
 tokens/style-dictionary.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js
index 1e6e400370..e877a0d9ed 100644
--- a/tokens/style-dictionary.js
+++ b/tokens/style-dictionary.js
@@ -158,7 +158,7 @@ const createCustomCSSVariables = async ({ formatterArgs }) => {
     usesDtcg: true,
   });
   const header = await fileHeader({ file, formatting });
-  return `${header}:root {\n${variables}\n}\n`;
+  return `${header}:root, :host {\n${variables}\n}\n`;
 };
 
 /**