fix(storybook): wire Tailwind v4 theme into Storybook preview
Some checks failed
CI / typecheck + lint + boundaries + test + build (push) Has been cancelled
CI / Playwright e2e (push) Has been cancelled
CI / Storybook smoke tests + visual regression (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
Coverage snapshot / snapshot (push) Has been cancelled
Release Please / release-please (push) Has been cancelled
Sentry PII guard (R31) / pii-guard (push) Has been cancelled
Some checks failed
CI / typecheck + lint + boundaries + test + build (push) Has been cancelled
CI / Playwright e2e (push) Has been cancelled
CI / Storybook smoke tests + visual regression (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
Coverage snapshot / snapshot (push) Has been cancelled
Release Please / release-please (push) Has been cancelled
Sentry PII guard (R31) / pii-guard (push) Has been cancelled
- Split globals.css into globals.css + theme.css so Storybook can import design tokens without the @import "tailwindcss" directive that breaks Vite's preview module loading - Prepend @tailwindcss/vite plugin for correct processing order - Add @source to scan core-ui components for utility class generation
This commit is contained in:
1
apps/storybook/.storybook/css.d.ts
vendored
Normal file
1
apps/storybook/.storybook/css.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
declare module "*.css";
|
||||
@@ -8,12 +8,9 @@ const config: StorybookConfig = {
|
||||
autodocs: "tag",
|
||||
},
|
||||
async viteFinal(config) {
|
||||
const { mergeConfig } = await import("vite");
|
||||
const tailwindPlugin = await import("@tailwindcss/vite");
|
||||
|
||||
return mergeConfig(config, {
|
||||
plugins: [tailwindPlugin.default()],
|
||||
});
|
||||
config.plugins = [tailwindPlugin.default(), ...(config.plugins || [])];
|
||||
return config;
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import "./storybook.css";
|
||||
import type { Preview } from "@storybook/react";
|
||||
|
||||
const preview: Preview = {
|
||||
|
||||
4
apps/storybook/.storybook/storybook.css
Normal file
4
apps/storybook/.storybook/storybook.css
Normal file
@@ -0,0 +1,4 @@
|
||||
@import "tailwindcss";
|
||||
@source "../../../packages/core-ui/src";
|
||||
|
||||
@import "../../../packages/core-ui/src/styles/theme.css";
|
||||
Reference in New Issue
Block a user