feat: add <StyleDictionaryStyle> component

.changeset/light-tables-pretend.md

@@ -0,0 +1,5 @@
+---
+"@nl-design-system-unstable/theme-toolkit": minor
+---
+
+Add `<StyleDictionaryStyle>` component.

packages/theme-toolkit/package.json

@@ -47,6 +47,7 @@
     "@amsterdam/design-system-react": "0.11.0",
     "@babel/plugin-transform-runtime": "7.24.7",
     "@babel/preset-react": "7.24.7",
+    "@bundled-es-modules/memfs": "4.9.4",
     "@dynamize/color-utilities": "1.0.11",
     "@jest/globals": "29.7.0",
     "@rollup/plugin-babel": "6.0.4",
@@ -154,6 +155,7 @@
     "rimraf": "6.0.1",
     "rollup": "4.19.2",
     "rollup-plugin-peer-deps-external": "2.2.4",
+    "style-dictionary": "4.0.1",
     "ts-jest": "29.2.4",
     "tsx": "4.17.0",
     "typescript": "5.5.4"

packages/theme-toolkit/src/StyleDictionaryStyle.test.tsx

@@ -0,0 +1,36 @@
+/* eslint-env jest */
+
+import { describe, expect, it } from '@jest/globals';
+import { StyleDictionaryStyle } from './StyleDictionaryStyle';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+describe('StyleDictionaryStyle', () => {
+  const simpleTree = {
+    example: {
+      button: {
+        color: {
+          value: 'red',
+        },
+      },
+    },
+  };
+
+  it('renders a HTML style element', () => {
+    const { container } = render(<StyleDictionaryStyle tokens={simpleTree}></StyleDictionaryStyle>);
+
+    const style = container.querySelector('style');
+
+    expect(style).toBeInTheDocument();
+  });
+
+  it('renders a class name selector', () => {
+    const { container } = render(
+      <StyleDictionaryStyle tokens={simpleTree} selector=".my-theme"></StyleDictionaryStyle>,
+    );
+
+    const style = container.querySelector('style');
+
+    expect(style).toContain('.my-theme');
+  });
+});

packages/theme-toolkit/src/StyleDictionaryStyle.tsx

@@ -0,0 +1,60 @@
+import StyleDictionary from 'style-dictionary';
+import memfs from '@bundled-es-modules/memfs';
+import type { PropsWithChildren } from 'react';
+import { useState, useEffect } from 'react';
+
+const styleDictionaryConversion = async (tokens: any, selector?: string): Promise<string> => {
+  const { Volume } = memfs;
+  const vol = new Volume();
+  const sd = new StyleDictionary(
+    {
+      tokens,
+      platforms: {
+        css: {
+          transforms: ['name/kebab'],
+          transformGroup: 'css',
+          files: [
+            {
+              destination: 'variables.css',
+              format: 'css/variables',
+              options: {
+                selector,
+                outputReferences: true,
+              },
+            },
+          ],
+        },
+      },
+    },
+    // typeof process !== 'undefined' ? { volume: vol } : {},
+  );
+
+  let css = '';
+
+  await sd.buildAllPlatforms();
+
+  try {
+    css = vol.readFileSync('/variables.css').toString('utf-8');
+  } catch (e) {
+    console.error(e);
+  }
+
+  return css;
+};
+
+export interface StyleDictionaryStyleProps {
+  tokens: any;
+  selector?: string;
+}
+
+export const StyleDictionaryStyle = ({ tokens, selector = ':root' }: PropsWithChildren<StyleDictionaryStyleProps>) => {
+  const [css, setCss] = useState('');
+
+  useEffect(() => {
+    styleDictionaryConversion(tokens, selector).then((css) => {
+      setCss(css);
+    }, console.error);
+  }, [tokens]);
+
+  return <style dangerouslySetInnerHTML={{ __html: css }}></style>;
+};

packages/theme-toolkit/src/style-dictionary.d.ts

@@ -0,0 +1,5 @@
+// TODO: Make `"moduleResolution": "Bundler"` work in `tsconfig.json`
+declare module 'style-dictionary' {
+  declare const StyleDictionary: any;
+  export default StyleDictionary;
+}