@db-ux/core-vite-plugin 0.0.0 → 4.6.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @db-ux/core-vite-plugin
+
+## 4.6.0
+
+### Minor Changes
+
+- feat: add vite-plugin to resolve CSS automatically based on detected components and styles - [see commit 5b1b2d8](https://github.com/db-ux-design-system/core-web/commit/5b1b2d811245fe132685171cb497bd5b16f5ff56)

package/README.md

@@ -0,0 +1,215 @@
+# @db-ux/core-vite-plugin
+
+Vite plugin for optimized DB UX Design System CSS imports. Automatically includes only the CSS you need based on components and classes used in your application.
+
+## Installation
+
+```shell
+npm install @db-ux/core-vite-plugin --save-dev
+```
+
+## Usage
+
+### Basic Usage
+
+Add the plugin to your `vite.config.js` or `vite.config.ts`:
+
+```js
+import { defineConfig } from "vite";
+import dbUxPlugin from "@db-ux/core-vite-plugin";
+
+export default defineConfig({
+	plugins: [dbUxPlugin()]
+});
+```
+
+Then import the plugin in your CSS file:
+
+```css
+/* styles.css or main.css */
+@import "@db-ux/core-vite-plugin/index.css";
+```
+
+The plugin handles theme detection, component CSS, and foundation styles automatically.
+
+#### Migration
+
+If you're currently using the manual CSS layer imports, you can replace them with the plugin's single import:
+
+```css
+/* Before */
+@layer whitelabel-theme, db-ux;
+@import "@db-ux/core-foundations/build/styles/theme/rollup.css"
+	layer(whitelabel-theme);
+@import "@db-ux/core-components/build/styles/bundle.css" layer(db-ux);
+```
+
+```css
+/* After */
+@import "@db-ux/core-vite-plugin/index.css";
+```
+
+### Advanced Usage
+
+For more control, you can configure the plugin:
+
+```js
+import { defineConfig } from "vite";
+import dbUxPlugin from "@db-ux/core-vite-plugin";
+
+export default defineConfig({
+	plugins: [
+		dbUxPlugin({
+			include: {
+				components: ["button", "input"], // Force include specific components
+				foundations: ["helpers", "animations", "icons"], // Force include foundation features
+				colors: ["neutral", "brand"], // Force include color schemes
+				densities: ["regular", "functional"], // Force include densities
+				fontSizes: ["body-md", "headline-lg"] // Force include font sizes
+			},
+			exclude: {
+				components: ["tooltip"], // Exclude specific components
+				foundations: ["elevation"], // Exclude foundation features
+				colors: ["critical"], // Exclude color schemes
+				densities: ["expressive"], // Exclude densities
+				fontSizes: ["body-3xs"] // Exclude font sizes
+			},
+			optimize: true, // Remove unused CSS variable declarations to reduce bundle size (default: true).
+			theme: "db-theme", // Specify preferred theme package name (e.g., "db-theme")
+			additionalLayers: { after: ["ri-extension"] }, // Append custom layers to the auto-generated order
+			debug: false // Generate detection report for debugging (default: false)
+		})
+	]
+});
+```
+
+## Configuration
+
+### `include`
+
+- **Type:** `{ components?: Component[], foundations?: FoundationFeature[], colors?: ColorScheme[], densities?: Density[], fontSizes?: FontSize[] }`
+- Force include specific components, foundation features, color schemes, densities, or font sizes
+- **Foundation features:** `icons`, `helpers`, `elevation`, `animations`, `code`
+
+### `exclude`
+
+- **Type:** `{ components?: Component[], foundations?: FoundationFeature[], colors?: ColorScheme[], densities?: Density[], fontSizes?: FontSize[] }`
+- Exclude specific components, foundation features, color schemes, densities, or font sizes
+
+### `optimize`
+
+- **Type:** `boolean`
+- **Default:** `true`
+- Remove unused CSS variable declarations to reduce bundle size
+
+### `theme`
+
+- **Type:** `string`
+- **Default:** `undefined`
+- Specify a preferred theme package name (e.g., `"db-theme"`). The plugin automatically detects installed theme packages from `@db-ux/*-theme` or `@db-ux-inner-source/*-theme`. Use this option to select a specific theme when multiple are available.
+
+### `additionalLayers`
+
+- **Type:** `{ before?: string[], after?: string[] }`
+- **Default:** `undefined`
+- Append custom CSS cascade layers before or after the auto-generated layer order. Useful when your project defines its own layers on top of DB UX.
+
+```js
+// Adds layers around the auto-generated ones
+dbUxPlugin({
+	additionalLayers: {
+		before: ["reset"],
+		after: ["ri-extension"]
+	}
+});
+// → @layer reset, db-theme, db-ux, ri-extension;
+```
+
+### `overrideLayers`
+
+- **Type:** `string[]`
+- **Default:** `undefined`
+- Fully replace the auto-generated `@layer` statement with a custom layer order. When set, `additionalLayers` is ignored.
+
+```js
+dbUxPlugin({
+	overrideLayers: ["db-theme", "db-ux", "ri-extension"]
+});
+// → @layer db-theme, db-ux, ri-extension;
+```
+
+### `debug`
+
+- **Type:** `boolean`
+- **Default:** `false`
+- Generate a `db-ux-detection-report.json` file in the project root directory for debugging purposes. This report contains all detected components, colors, densities, and font sizes. Useful for troubleshooting optimization issues.
+
+## How it works
+
+The plugin analyzes your source files to detect:
+
+- DB UX component usage (e.g., `class="db-button"`)
+- Custom classes using design tokens
+- Explicitly configured includes/excludes
+
+It then generates an optimized CSS bundle containing only:
+
+- Required foundation styles (theme, fonts, icons)
+- Component styles for detected components
+- Optional features based on configuration
+
+## Troubleshooting
+
+### Plugin Order with Tailwind CSS
+
+If you're using Tailwind CSS alongside this plugin, **the order matters**. The `@db-ux/core-vite-plugin` must be placed **before** the Tailwind plugin in your Vite configuration:
+
+```js
+import { defineConfig } from "vite";
+import dbUxPlugin from "@db-ux/core-vite-plugin";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+	plugins: [
+		dbUxPlugin(), // Must come before tailwindcss()
+		tailwindcss()
+	]
+});
+```
+
+And in your CSS file:
+
+```css
+@import "tailwindcss";
+@import "@db-ux/core-vite-plugin/index.css";
+```
+
+**Why?** The DB UX plugin needs to process and replace the `@import "@db-ux/core-vite-plugin/index.css"` statement with actual CSS before Tailwind processes the file. Tailwind will strip out unrecognized imports, so the DB UX plugin must run first to transform the import into valid CSS that Tailwind can then process.
+
+### CSS `@property` Warnings
+
+You may see warnings about "Unknown at rule: @property" in your build output or IDE. These are informational warnings from CSS parsers that don't yet fully support the CSS Houdini `@property` at-rule. These warnings don't affect functionality - the `@property` rule is valid CSS and works correctly in modern browsers. You can safely ignore these warnings or configure your CSS linter to suppress them.
+
+### Styles Not Loading in Dev Mode with `<link>` Tags
+
+If you load your CSS via a `<link>` tag in `index.html`:
+
+```html
+<!-- ❌ This won't work with the plugin in dev mode -->
+<link rel="stylesheet" href="/src/styles.css" />
+```
+
+The plugin's `transform` hook only runs for CSS that is part of Vite's module graph. Static `<link>` tags are served as-is by Vite's dev server, so the `@import "@db-ux/core-vite-plugin/index.css"` inside the CSS file is never processed.
+
+**Solution:** Import the CSS from your JavaScript/TypeScript entry file instead:
+
+```ts
+// main.ts or main.tsx
+import "./styles.css";
+```
+
+This pulls the CSS into Vite's module graph where the plugin can transform it. The production build is not affected by this issue.
+
+## License
+
+This project is licensed under [Apache-2.0](LICENSE).

package/build/detector.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Walk up the directory tree from `root` to locate a package path inside node_modules.
+ * Handles monorepo hoisting where dependencies may live in a parent node_modules.
+ * Returns the resolved absolute path or null if not found.
+ */
+export declare function resolvePackagePath(root: string, packagePath: string): string | null;
+/** Public accessor for the discovery cache. */
+export declare function discoverAll(root: string): {
+    components: Set<string>;
+    colors: string[];
+    densities: string[];
+    fontSizes: string[];
+};
+/**
+ * Scan detected component CSS files for referenced colors, densities, and font sizes
+ * so the optimizer doesn't strip variables that components depend on.
+ */
+export declare function scanComponentDependencies(root: string, components: Set<string>, colors: Set<string>, densities: Set<string>, fontSizes: Set<string>): void;
+/**
+ * Scan all project source files to detect which DB UX components are used.
+ * Supports JSX (<DBButton>), kebab-case (<db-button>), CSS classes (class="db-button"),
+ * and named imports (import { DBButton } from '...').
+ */
+export declare function detectComponents(root: string, forceInclude: string[]): Promise<Set<string>>;
+/** Detect which color schemes are used in the project (e.g. "cyan", "brand"). */
+export declare function detectColors(root: string, forceInclude: string[]): Promise<Set<string>>;
+/** Detect which density variants are used in the project (e.g. "functional", "expressive"). */
+export declare function detectDensities(root: string, forceInclude: string[]): Promise<Set<string>>;
+/** Detect which font size combinations are used in the project (e.g. "body-md", "headline-lg"). */
+export declare function detectFontSizes(root: string, forceInclude: string[]): Promise<Set<string>>;

package/build/detector.js

@@ -0,0 +1,253 @@
+import fg from 'fast-glob';
+import { readFileSync, readdirSync } from 'fs';
+import { resolve } from 'path';
+/**
+ * Walk up the directory tree from `root` to locate a package path inside node_modules.
+ * Handles monorepo hoisting where dependencies may live in a parent node_modules.
+ * Returns the resolved absolute path or null if not found.
+ */
+export function resolvePackagePath(root, packagePath) {
+    let currentDir = root;
+    for (let i = 0; i < 10; i++) {
+        const resolved = resolve(currentDir, 'node_modules', packagePath);
+        try {
+            readdirSync(resolved);
+            return resolved;
+        }
+        catch {
+            // Try parent directory
+        }
+        const parentDir = resolve(currentDir, '..');
+        if (parentDir === currentDir)
+            break;
+        currentDir = parentDir;
+    }
+    return null;
+}
+/** Return subdirectory names (folders only) from the given path. */
+function readDirNames(dirPath) {
+    try {
+        return readdirSync(dirPath, { withFileTypes: true })
+            .filter((e) => e.isDirectory())
+            .map((e) => e.name);
+    }
+    catch {
+        return [];
+    }
+}
+/** Return CSS file stems (without .css extension) from the given path, excluding "all.css". */
+function readCssNames(dirPath) {
+    try {
+        return readdirSync(dirPath)
+            .filter((f) => f.endsWith('.css') && f !== 'all.css')
+            .map((f) => f.replace('.css', ''));
+    }
+    catch {
+        return [];
+    }
+}
+/** Cache of discovered design system values, keyed by project root. */
+const cache = new Map();
+/**
+ * Discover all available components, colors, densities, and font sizes
+ * by reading the installed @db-ux packages from the filesystem.
+ * Results are cached per project root.
+ */
+function discover(root) {
+    if (cache.has(root))
+        return cache.get(root);
+    // Components
+    const compDir = resolvePackagePath(root, '@db-ux/core-components/build/components');
+    const components = new Set(compDir ? readDirNames(compDir) : []);
+    // Colors
+    const colorDir = resolvePackagePath(root, '@db-ux/core-foundations/build/styles/colors/classes');
+    const colors = colorDir ? readCssNames(colorDir) : [];
+    // Densities
+    const densityDir = resolvePackagePath(root, '@db-ux/core-foundations/build/styles/density/classes');
+    const densities = densityDir ? readCssNames(densityDir) : [];
+    // Font sizes: body/<size>.css + headline/<size>.css → "body-sm", "headline-lg"
+    const fontDir = resolvePackagePath(root, '@db-ux/core-foundations/build/styles/fonts/classes');
+    const fontSizes = [];
+    if (fontDir) {
+        for (const category of readDirNames(fontDir)) {
+            for (const size of readCssNames(resolve(fontDir, category))) {
+                fontSizes.push(`${category}-${size}`);
+            }
+        }
+    }
+    const result = { components, colors, densities, fontSizes };
+    cache.set(root, result);
+    return result;
+}
+/** Public accessor for the discovery cache. */
+export function discoverAll(root) {
+    return discover(root);
+}
+/**
+ * Scan detected component CSS files for referenced colors, densities, and font sizes
+ * so the optimizer doesn't strip variables that components depend on.
+ */
+export function scanComponentDependencies(root, components, colors, densities, fontSizes) {
+    const compDir = resolvePackagePath(root, '@db-ux/core-components/build/components');
+    if (!compDir)
+        return;
+    const { colors: validColors, densities: validDensities, fontSizes: validFontSizes } = discover(root);
+    const validFontSizeSet = new Set(validFontSizes);
+    for (const component of components) {
+        const css = readSource(resolve(compDir, component, `${component}.css`));
+        if (!css)
+            continue;
+        for (const color of validColors) {
+            if (css.includes(`--db-${color}-`))
+                colors.add(color);
+        }
+        for (const density of validDensities) {
+            if (css.includes(`-${density}-`))
+                densities.add(density);
+        }
+        for (const m of css.matchAll(/--db-type-(body|headline)-(\w+)/g)) {
+            const fs = `${m[1]}-${m[2]}`;
+            if (validFontSizeSet.has(fs))
+                fontSizes.add(fs);
+        }
+    }
+}
+/** Convert PascalCase to kebab-case: "NavigationItem" → "navigation-item". */
+function toKebabCase(str) {
+    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+/**
+ * Build an array of regex patterns to detect usage of design system values.
+ * Covers CSS classes (e.g. db-color-cyan), data attributes (e.g. data-color="cyan"),
+ * HTML attributes, and JS object notation.
+ */
+function buildPatterns(classPrefix, dataAttr, values) {
+    return [
+        new RegExp(`${classPrefix}(${values})`, 'g'),
+        new RegExp(`\\[${dataAttr}=["']?(${values})["']?\\]`, 'g'),
+        new RegExp(`${dataAttr}=["'](${values})["']`, 'g'),
+        new RegExp(`["']${dataAttr}["']:\\s*["'](${values})["']`, 'g')
+    ];
+}
+/** Matches JSX/TSX component usage: <DBButton>, <DBNavigationItem> */
+const JSX_COMPONENT_PATTERN = /<DB(\w+)[\s>/]/g;
+/** Matches Angular/HTML kebab-case usage: <db-button>, <db-navigation-item> */
+const KEBAB_COMPONENT_PATTERN = /<db-([\w-]+)[\s>/]/g;
+/** Matches CSS class-based usage: class="db-button ...", className="db-card" */
+const CLASS_COMPONENT_PATTERN = /(?:class|className)=(?:"[^"]*|'[^']*|\{[^}]*)db-([\w-]+)/g;
+/** Matches named imports from @db-ux framework packages: import { DBButton, DBCard } from '...' */
+const IMPORT_PATTERN = /import\s+\{([^}]+)}\s+from\s+['"]@db-ux\/(?:react|ngx|v|wc)-core-components['"]/g;
+/** Glob all source files from the project root, excluding node_modules/dist/build. */
+async function scanFiles(root) {
+    return fg(['**/*.{vue,jsx,tsx,ts,html}'], {
+        cwd: root,
+        absolute: true,
+        ignore: ['**/node_modules/**', '**/dist/**', '**/build/**']
+    });
+}
+/** Safely read a file's contents, returning null on failure. */
+function readSource(filePath) {
+    try {
+        return readFileSync(filePath, 'utf-8');
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Scan all project source files to detect which DB UX components are used.
+ * Supports JSX (<DBButton>), kebab-case (<db-button>), CSS classes (class="db-button"),
+ * and named imports (import { DBButton } from '...').
+ */
+export async function detectComponents(root, forceInclude) {
+    const components = new Set(forceInclude);
+    const { components: validComponents } = discover(root);
+    const files = await scanFiles(root);
+    for (const file of files) {
+        const code = readSource(file);
+        if (!code)
+            continue;
+        // Detect JSX usage: <DBButton>, <DBNavigationItem>
+        for (const match of code.matchAll(JSX_COMPONENT_PATTERN)) {
+            const name = toKebabCase(match[1]);
+            if (validComponents.has(name)) {
+                components.add(name);
+            }
+        }
+        // Detect kebab-case usage: <db-button>, <db-navigation-item>
+        for (const match of code.matchAll(KEBAB_COMPONENT_PATTERN)) {
+            if (validComponents.has(match[1])) {
+                components.add(match[1]);
+            }
+        }
+        // Detect class-based usage: class="db-button ..."
+        for (const match of code.matchAll(CLASS_COMPONENT_PATTERN)) {
+            // Extract all db-* names from the matched attribute value
+            const fragment = match[0];
+            for (const inner of fragment.matchAll(/db-([\w-]+)/g)) {
+                if (validComponents.has(inner[1])) {
+                    components.add(inner[1]);
+                }
+            }
+        }
+        // Detect from imports: import { DBButton, DBCard } from '...'
+        for (const match of code.matchAll(IMPORT_PATTERN)) {
+            const importList = match[1];
+            for (const nameMatch of importList.matchAll(/\bDB(\w+)\b/g)) {
+                const name = toKebabCase(nameMatch[1]);
+                if (validComponents.has(name)) {
+                    components.add(name);
+                }
+            }
+        }
+    }
+    return components;
+}
+/**
+ * Shared detection logic for colors, densities, and font sizes.
+ * Scans all project source files for class names and data attributes
+ * matching the given patterns, returning the set of detected values.
+ */
+async function detectByPatterns(root, forceInclude, classPrefix, dataAttr, validValues, mapMatch) {
+    const result = new Set(forceInclude);
+    if (validValues.length === 0)
+        return result;
+    const patterns = buildPatterns(classPrefix, dataAttr, validValues.join('|'));
+    const files = await scanFiles(root);
+    for (const file of files) {
+        const code = readSource(file);
+        if (!code)
+            continue;
+        for (const pattern of patterns) {
+            for (const match of code.matchAll(pattern)) {
+                const value = mapMatch ? mapMatch(match) : match[1];
+                if (value)
+                    result.add(value);
+            }
+        }
+    }
+    return result;
+}
+/** Detect which color schemes are used in the project (e.g. "cyan", "brand"). */
+export async function detectColors(root, forceInclude) {
+    const { colors } = discover(root);
+    return detectByPatterns(root, forceInclude, 'db-color-', 'data-color', colors);
+}
+/** Detect which density variants are used in the project (e.g. "functional", "expressive"). */
+export async function detectDensities(root, forceInclude) {
+    const { densities } = discover(root);
+    return detectByPatterns(root, forceInclude, 'db-density-', 'data-density', densities);
+}
+/** Detect which font size combinations are used in the project (e.g. "body-md", "headline-lg"). */
+export async function detectFontSizes(root, forceInclude) {
+    const { fontSizes: validFontSizes } = discover(root);
+    if (validFontSizes.length === 0)
+        return new Set(forceInclude);
+    const categories = [...new Set(validFontSizes.map((f) => f.split('-')[0]))];
+    const sizes = [...new Set(validFontSizes.map((f) => f.split('-')[1]))];
+    const validSet = new Set(validFontSizes);
+    return detectByPatterns(root, forceInclude, 'db-font-size-', 'data-font-size', [`(${categories.join('|')})-(${sizes.join('|')})`], (match) => {
+        const value = `${match[1]}-${match[2]}`;
+        return validSet.has(value) ? value : null;
+    });
+}

package/build/generator.d.ts

@@ -0,0 +1,7 @@
+import type { GenerateOptions } from './types.js';
+/**
+ * Generate the CSS import statements based on detected/discovered values.
+ * Produces @import rules for theme, foundations, colors, densities,
+ * font sizes, and component styles, all wrapped in @layer declarations.
+ */
+export declare function generateCSS(options: GenerateOptions): string;

package/build/generator.js

@@ -0,0 +1,138 @@
+import { readdirSync } from 'fs';
+import { resolve } from 'path';
+/** Maps foundation feature names to their CSS file paths relative to build/styles/. */
+const FOUNDATION_IMPORTS = {
+    helpers: 'helpers/classes/all.css',
+    elevation: 'defaults/default-elevation.css',
+    animations: 'component-animations.css',
+    icons: 'defaults/default-icons.css',
+    code: 'defaults/default-code.css'
+};
+/** Theme package scopes to search for installed themes. */
+const THEME_SCOPES = ['@db-ux', '@db-ux-inner-source'];
+/**
+ * Auto-detect the installed DB UX theme package (e.g. @db-ux/db-theme).
+ * Walks up from `root` checking each node_modules for *-theme packages
+ * in both @db-ux/* and @db-ux-inner-source/* scopes.
+ * Returns the package specifier or null if no theme is found.
+ */
+function detectTheme(root, preferredTheme) {
+    let currentDir = root;
+    for (let i = 0; i < 10; i++) {
+        for (const scope of THEME_SCOPES) {
+            try {
+                const scopeDir = resolve(currentDir, 'node_modules', scope);
+                const packages = readdirSync(scopeDir);
+                const themePackages = packages.filter((pkg) => pkg.endsWith('-theme'));
+                if (themePackages.length === 0)
+                    continue;
+                const match = preferredTheme && themePackages.includes(preferredTheme)
+                    ? preferredTheme
+                    : themePackages[0];
+                return `${scope}/${match}`;
+            }
+            catch {
+                // Scope not found at this level
+            }
+        }
+        const parentDir = resolve(currentDir, '..');
+        if (parentDir === currentDir)
+            break;
+        currentDir = parentDir;
+    }
+    return null;
+}
+/**
+ * Generate the CSS import statements based on detected/discovered values.
+ * Produces @import rules for theme, foundations, colors, densities,
+ * font sizes, and component styles, all wrapped in @layer declarations.
+ */
+export function generateCSS(options) {
+    const { root, include, exclude, theme: preferredTheme, hasTailwind, overrideLayers, additionalLayers } = options;
+    const { components, foundations, colors, densities, fontSizes } = include;
+    const imports = [];
+    const theme = detectTheme(root, preferredTheme);
+    const themeName = theme ? theme.split('/').pop() : null;
+    // Layer order declaration
+    if (overrideLayers?.length) {
+        imports.push(`@layer ${overrideLayers.join(', ')};`);
+    }
+    else {
+        let autoLayers;
+        if (hasTailwind) {
+            autoLayers = themeName
+                ? [
+                    themeName,
+                    'theme',
+                    'base',
+                    'components',
+                    'db-ux',
+                    'utilities'
+                ]
+                : ['theme', 'base', 'components', 'db-ux', 'utilities'];
+        }
+        else {
+            autoLayers = themeName ? [themeName, 'db-ux'] : ['db-ux'];
+        }
+        if (additionalLayers?.before?.length) {
+            autoLayers = [...additionalLayers.before, ...autoLayers];
+        }
+        if (additionalLayers?.after?.length) {
+            autoLayers = [...autoLayers, ...additionalLayers.after];
+        }
+        imports.push(`@layer ${autoLayers.join(', ')};`);
+    }
+    // Theme or default fallback
+    if (theme) {
+        imports.push(`@import "${theme}/build/styles/rollup.css" layer(${themeName});`);
+        imports.push(`@import "@db-ux/core-foundations/build/styles/defaults/default-container-properties.css" layer(db-ux);`);
+    }
+    else {
+        imports.push(`@import "@db-ux/core-foundations/build/styles/theme/rollup.css" layer(db-ux);`);
+        imports.push(`@import "@db-ux/core-foundations/build/styles/fonts/rollup.css" layer(db-ux);`);
+    }
+    // Tailwind theme
+    if (hasTailwind) {
+        imports.push(`@import "@db-ux/core-foundations/build/tailwind/theme/index.css";`);
+    }
+    // Required foundation styles
+    imports.push(`@import "@db-ux/core-foundations/build/styles/defaults/default-required.css" layer(db-ux);`);
+    imports.push(`@import "@db-ux/core-foundations/build/styles/defaults/default-root.css" layer(db-ux);`);
+    // Optional foundation features
+    for (const [key, path] of Object.entries(FOUNDATION_IMPORTS)) {
+        const feature = key;
+        if (foundations?.includes(feature) &&
+            !exclude.foundations?.includes(feature)) {
+            const basePath = feature === 'animations'
+                ? '@db-ux/core-components'
+                : '@db-ux/core-foundations';
+            imports.push(`@import "${basePath}/build/styles/${path}" layer(db-ux);`);
+        }
+    }
+    // Color schemes
+    for (const color of colors || []) {
+        if (!exclude.colors?.includes(color)) {
+            imports.push(`@import "@db-ux/core-foundations/build/styles/colors/classes/${color}.css" layer(db-ux);`);
+        }
+    }
+    // Densities
+    for (const density of densities || []) {
+        if (!exclude.densities?.includes(density)) {
+            imports.push(`@import "@db-ux/core-foundations/build/styles/density/classes/${density}.css" layer(db-ux);`);
+        }
+    }
+    // Font sizes
+    for (const fontSize of fontSizes || []) {
+        if (!exclude.fontSizes?.includes(fontSize)) {
+            const [category, size] = fontSize.split('-');
+            imports.push(`@import "@db-ux/core-foundations/build/styles/fonts/classes/${category}/${size}.css" layer(db-ux);`);
+        }
+    }
+    // Component styles
+    for (const component of components || []) {
+        if (!exclude.components?.includes(component)) {
+            imports.push(`@import "@db-ux/core-components/build/components/${component}/${component}.css" layer(db-ux);`);
+        }
+    }
+    return imports.join('\n');
+}

package/build/index.d.ts

@@ -0,0 +1,11 @@
+import type { PluginConfig } from './types.js';
+/**
+ * Create the DB UX Vite plugin.
+ * Returns two plugins: a pre-transform plugin for CSS generation and
+ * a post-build plugin for optimizing the final CSS bundle.
+ *
+ * During dev, all available styles are included for instant HMR.
+ * During build, only detected styles are included and unused ones are stripped.
+ */
+export default function dbUxPlugin(config?: PluginConfig): any[];
+export type { PluginConfig };

package/build/index.js

@@ -0,0 +1,168 @@
+import { writeFile } from 'fs/promises';
+import { resolve } from 'path';
+import { detectColors, detectComponents, detectDensities, detectFontSizes, discoverAll, scanComponentDependencies } from './detector.js';
+import { generateCSS } from './generator.js';
+import { removeUnusedStyles } from './optimizer.js';
+/** Default foundation features included unless overridden by user config. */
+const DEFAULT_FOUNDATIONS = [
+    'helpers',
+    'icons',
+    'animations',
+    'code',
+    'elevation'
+];
+/**
+ * Create the DB UX Vite plugin.
+ * Returns two plugins: a pre-transform plugin for CSS generation and
+ * a post-build plugin for optimizing the final CSS bundle.
+ *
+ * During dev, all available styles are included for instant HMR.
+ * During build, only detected styles are included and unused ones are stripped.
+ */
+export default function dbUxPlugin(config = {}) {
+    const { optimize = true, debug = false } = config;
+    // Deep-merge include/exclude so partial user config doesn't lose defaults
+    const include = {
+        foundations: config.include?.foundations ?? [...DEFAULT_FOUNDATIONS],
+        components: config.include?.components,
+        colors: config.include?.colors,
+        densities: config.include?.densities,
+        fontSizes: config.include?.fontSizes
+    };
+    const exclude = config.exclude ?? {};
+    let detectedComponents = new Set();
+    let detectedColors = new Set();
+    let detectedDensities = new Set();
+    let detectedFontSizes = new Set();
+    let hasDetected = false;
+    let detectionPromise = null;
+    let cssModuleId = null;
+    let hasTailwind = false;
+    let root = process.cwd();
+    let isBuild = false;
+    let generatedImports = [];
+    const mainPlugin = {
+        name: 'db-ux-vite-plugin',
+        enforce: 'pre',
+        resolveId(id) {
+            if (id === '@db-ux/core-vite-plugin/index.css') {
+                return id;
+            }
+        },
+        load(id) {
+            if (id === '@db-ux/core-vite-plugin/index.css') {
+                return '';
+            }
+        },
+        configResolved(resolvedConfig) {
+            root = resolvedConfig.root;
+            isBuild = resolvedConfig.command === 'build';
+            hasTailwind = resolvedConfig.plugins.some((plugin) => plugin.name.startsWith('@tailwindcss/vite'));
+            if (debug) {
+                console.log(`[db-ux-vite-plugin] Initialized (mode: ${resolvedConfig.command}, tailwind: ${hasTailwind})`);
+            }
+        },
+        handleHotUpdate({ file, server, modules }) {
+            if (/\.(vue|jsx|tsx|ts|html)$/.test(file) && cssModuleId) {
+                const mod = server.moduleGraph.getModuleById(cssModuleId);
+                if (mod) {
+                    server.moduleGraph.invalidateModule(mod);
+                    return [...modules, mod];
+                }
+            }
+        },
+        async transform(code, id) {
+            if (!id.endsWith('.css'))
+                return;
+            const hasImport = code.includes('@import "@db-ux/core-vite-plugin/index.css"') ||
+                code.includes("@import '@db-ux/core-vite-plugin/index.css'");
+            if (hasImport) {
+                cssModuleId = id;
+                if (isBuild && !hasDetected && !detectionPromise) {
+                    detectionPromise = (async () => {
+                        hasDetected = true;
+                        detectedComponents = await detectComponents(root, include.components || []);
+                        detectedColors = await detectColors(root, include.colors || []);
+                        detectedDensities = await detectDensities(root, include.densities || []);
+                        detectedFontSizes = await detectFontSizes(root, include.fontSizes || []);
+                        scanComponentDependencies(root, detectedComponents, detectedColors, detectedDensities, detectedFontSizes);
+                    })();
+                }
+                if (detectionPromise) {
+                    await detectionPromise;
+                }
+                // During dev, include all discovered values for instant HMR.
+                // During build, use only detected values for tree-shaking.
+                const discovered = discoverAll(root);
+                const css = generateCSS({
+                    root,
+                    include: {
+                        components: isBuild
+                            ? Array.from(detectedComponents)
+                            : Array.from(discovered.components),
+                        foundations: include.foundations || [],
+                        colors: isBuild
+                            ? Array.from(detectedColors)
+                            : discovered.colors,
+                        densities: isBuild
+                            ? Array.from(detectedDensities)
+                            : discovered.densities,
+                        fontSizes: isBuild
+                            ? Array.from(detectedFontSizes)
+                            : discovered.fontSizes
+                    },
+                    exclude,
+                    theme: config.theme,
+                    additionalLayers: config.additionalLayers,
+                    overrideLayers: config.overrideLayers,
+                    hasTailwind
+                });
+                generatedImports = css.split('\n');
+                if (debug) {
+                    console.log('\n[db-ux-vite-plugin] Generated imports:\n' +
+                        generatedImports
+                            .map((line) => `  ${line}`)
+                            .join('\n') +
+                        '\n');
+                }
+                code = code.replace(/@import ["']@db-ux\/core-vite-plugin\/index\.css["'];?/g, css);
+            }
+            return code;
+        },
+        async buildEnd() {
+            if (debug && hasDetected) {
+                const reportPath = resolve(root, 'db-ux-detection-report.json');
+                await writeFile(reportPath, JSON.stringify({
+                    components: Array.from(detectedComponents).sort(),
+                    colors: Array.from(detectedColors).sort(),
+                    densities: Array.from(detectedDensities).sort(),
+                    fontSizes: Array.from(detectedFontSizes).sort(),
+                    generatedImports
+                }, null, 2), 'utf-8');
+            }
+        }
+    };
+    const optimizerPlugin = {
+        name: 'db-ux-vite-plugin:optimizer',
+        enforce: 'post',
+        generateBundle(_options, bundle) {
+            if (!optimize || !hasDetected)
+                return;
+            const { colors, densities, fontSizes } = discoverAll(root);
+            const optimizerContext = {
+                allColors: colors,
+                allDensities: densities,
+                allFontSizes: fontSizes
+            };
+            for (const [, asset] of Object.entries(bundle)) {
+                if (asset.type === 'asset' &&
+                    typeof asset.fileName === 'string' &&
+                    asset.fileName.endsWith('.css') &&
+                    typeof asset.source === 'string') {
+                    asset.source = removeUnusedStyles(asset.source, detectedColors, detectedDensities, detectedFontSizes, optimizerContext);
+                }
+            }
+        }
+    };
+    return [mainPlugin, optimizerPlugin];
+}

package/build/optimizer.d.ts

@@ -0,0 +1,12 @@
+/** All available values discovered from the filesystem, used to determine what is unused. */
+export interface OptimizerContext {
+    allColors: string[];
+    allDensities: string[];
+    allFontSizes: string[];
+}
+/**
+ * Remove unused CSS custom properties, @property declarations, and rule blocks
+ * for colors, densities, and font sizes that were not detected in the project.
+ * Also strips empty @layer declarations and @charset directives.
+ */
+export declare function removeUnusedStyles(css: string, detectedColors: Set<string>, detectedDensities: Set<string>, detectedFontSizes: Set<string>, context: OptimizerContext): string;

package/build/optimizer.js

@@ -0,0 +1,35 @@
+/**
+ * Remove unused CSS custom properties, @property declarations, and rule blocks
+ * for colors, densities, and font sizes that were not detected in the project.
+ * Also strips empty @layer declarations and @charset directives.
+ */
+export function removeUnusedStyles(css, detectedColors, detectedDensities, detectedFontSizes, context) {
+    const unusedColors = context.allColors.filter((c) => !detectedColors.has(c));
+    const unusedDensities = context.allDensities.filter((d) => !detectedDensities.has(d));
+    const unusedFontSizes = context.allFontSizes.filter((f) => !detectedFontSizes.has(f));
+    for (const color of unusedColors) {
+        css = css.replace(new RegExp(`@property --db-${color}-[a-z0-9-]+\\{[^}]+\\}`, 'g'), '');
+        // Make semicolon optional to handle last property in a block
+        css = css.replace(new RegExp(`--db-${color}-[a-z0-9-]+:[^;}]+;?`, 'g'), '');
+        // Normalize selectors — handle both quoted and unquoted data-color
+        css = css.replace(new RegExp(`\\[data-color=["']?${color}["']?\\],\\.db-color-${color}`, 'g'), `.db-color-${color}`);
+        css = css.replace(new RegExp(`\\.db-color-${color},\\[data-color=["']?${color}["']?\\]`, 'g'), `.db-color-${color}`);
+        // Remove entire rule blocks including pseudo-classes
+        css = css.replace(new RegExp(`\\.db-color-${color}(?:[^{]*?)\\{[^}]+\\}`, 'g'), '');
+    }
+    for (const density of unusedDensities) {
+        css = css.replace(new RegExp(`@property --db-[a-z-]+-${density}-[a-z0-9-]+\\{[^}]+\\}`, 'g'), '');
+        css = css.replace(new RegExp(`--db-[a-z-]+-${density}-[a-z0-9-]+:[^;}]+;?`, 'g'), '');
+    }
+    for (const fontSize of unusedFontSizes) {
+        const [type, size] = fontSize.split('-');
+        css = css.replace(new RegExp(`--db-type-${fontSize}:[^;}]+;?`, 'g'), '');
+        css = css.replace(new RegExp(`--db-base-${type}-icon-weight-${size}:[^;}]+;?`, 'g'), '');
+        css = css.replace(new RegExp(`@property --db-base-icon-weight-[a-z]+-[a-z]+-${type}-${size}\\{[^}]+\\}`, 'g'), '');
+        css = css.replace(new RegExp(`@property --db-base-icon-font-size-[a-z]+-[a-z]+-${type}-${size}\\{[^}]+\\}`, 'g'), '');
+        css = css.replace(new RegExp(`@property --db-typography-[a-z]+-[a-z]+-${type}-${size}\\{[^}]+\\}`, 'g'), '');
+    }
+    css = css.replace(/@layer variables;/g, '');
+    css = css.replace(/@charset "UTF-8";/g, '');
+    return css;
+}

package/build/types.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Foundation features that can be included or excluded.
+ * - `icons`: Include icon fonts
+ * - `helpers`: Include helper classes
+ * - `elevation`: Include elevation styles
+ * - `animations`: Include component animations
+ * - `code`: Include code styling
+ */
+export type FoundationFeature = 'icons' | 'helpers' | 'elevation' | 'animations' | 'code';
+/**
+ * Available color schemes for the design system.
+ */
+export type ColorScheme = 'neutral' | 'brand' | 'blue' | 'burgundy' | 'critical' | 'cyan' | 'green' | 'informational' | 'light-green' | 'orange' | 'pink' | 'red' | 'successful' | 'turquoise' | 'violet' | 'warning' | 'yellow';
+/**
+ * Available density options for components.
+ */
+export type Density = 'regular' | 'functional' | 'expressive';
+/**
+ * Available font size options.
+ */
+export type FontSize = 'body-3xs' | 'body-2xs' | 'body-xs' | 'body-sm' | 'body-md' | 'body-lg' | 'body-xl' | 'body-2xl' | 'body-3xl' | 'headline-3xs' | 'headline-2xs' | 'headline-xs' | 'headline-sm' | 'headline-md' | 'headline-lg' | 'headline-xl' | 'headline-2xl' | 'headline-3xl';
+/**
+ * Configuration options for the Vite plugin.
+ */
+export interface PluginConfig {
+    /**
+     * Force include specific components, foundation features, color schemes, densities, or font sizes.
+     */
+    include?: {
+        components?: string[];
+        foundations?: FoundationFeature[];
+        colors?: ColorScheme[];
+        densities?: Density[];
+        fontSizes?: FontSize[];
+    };
+    /**
+     * Exclude specific components, foundation features, color schemes, densities, or font sizes.
+     */
+    exclude?: {
+        components?: string[];
+        foundations?: FoundationFeature[];
+        colors?: ColorScheme[];
+        densities?: Density[];
+        fontSizes?: FontSize[];
+    };
+    /**
+     * Remove unused CSS variable declarations to reduce bundle size (default: true).
+     */
+    optimize?: boolean;
+    /**
+     * Specify preferred theme package name (e.g., "db-theme").
+     */
+    theme?: string;
+    /**
+     * Append custom layers to the auto-generated `@layer` order.
+     * @example { after: ['ri-extension'] } → `@layer db-theme, db-ux, ri-extension;`
+     * @example { before: ['reset'] } → `@layer reset, db-theme, db-ux;`
+     */
+    additionalLayers?: {
+        before?: string[];
+        after?: string[];
+    };
+    /**
+     * Fully replace the auto-generated `@layer` statement.
+     * When set, `additionalLayers` is ignored.
+     * @example ['db-theme', 'db-ux', 'ri-extension']
+     */
+    overrideLayers?: string[];
+    /**
+     * Generate detection report for debugging (default: false).
+     */
+    debug?: boolean;
+}
+/**
+ * Internal options passed to the CSS generator.
+ */
+export interface GenerateOptions extends Pick<Required<PluginConfig>, 'include' | 'exclude'>, Pick<PluginConfig, 'theme' | 'additionalLayers' | 'overrideLayers'> {
+    /** Vite project root, used for resolving node_modules. */
+    root: string;
+    hasTailwind: boolean;
+}

package/build/types.js

@@ -0,0 +1 @@
+export {};

package/index.css

@@ -0,0 +1 @@
+/* This file is processed by the @db-ux/core-vite-plugin */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/core-vite-plugin",
-  "version": "0.0.0",
+  "version": "4.6.0",
   "type": "module",
   "description": "Vite plugin for optimized DB UX Design System CSS imports",
   "repository": {
@@ -8,14 +8,52 @@
     "url": "git+https://github.com/db-ux-design-system/core-web.git"
   },
   "license": "Apache-2.0",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "default": "./build/index.js"
+    },
+    "./index.css": "./index.css",
+    "./index": "./index.css"
+  },
+  "files": [
+    "CHANGELOG.md",
+    "build",
+    "index.css",
+    "LICENSE"
+  ],
   "keywords": [
     "vite",
     "vite-plugin",
     "db-ux",
     "design-system"
   ],
+  "scripts": {
+    "build": "tsc",
+    "copy-output": "npm-run-all copy:*",
+    "copy:changelog": "cpr CHANGELOG.md ../../build-outputs/vite-plugin/CHANGELOG.md --overwrite",
+    "copy:index.css": "cpr index.css ../../build-outputs/vite-plugin/index.css -o",
+    "copy:outputs": "cpr build ../../build-outputs/vite-plugin/build -o",
+    "copy:package.json": "cpr package.json ../../build-outputs/vite-plugin/package.json -o",
+    "copy:readme": "cpr README.md ../../build-outputs/vite-plugin/README.md -o",
+    "test": "vitest run --config vitest.config.ts",
+    "test:update": "npm run test -- --update"
+  },
+  "peerDependencies": {
+    "vite": ">=4.0.0"
+  },
+  "dependencies": {
+    "fast-glob": "^3.3.3"
+  },
+  "devDependencies": {
+    "@types/node": "22.16.0",
+    "typescript": "5.9.3",
+    "vite": "8.0.6",
+    "vitest": "4.1.3"
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
-  }
+  },
+  "style": "index.css"
 }