feat: add vite-plugin to resolve CSS automatically by nmerget · Pull Request #6055 · db-ux-design-system/core-web

nmerget · 2026-02-13T23:09:53Z

Proposed changes

add vite-plugin to resolve CSS automatically based on detected components and styles

Types of changes

Bugfix (non-breaking change that fixes an issue)
New feature (non-breaking change which adds functionality)
Refactoring (improvements to existing components or architectural decisions)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation Update (if none of the other choices apply)

Further comments

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/feat-vite-plugin

…components and styles

changeset-bot · 2026-02-13T23:09:58Z

🦋 Changeset detected

Latest commit: 95b044b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
@db-ux/core-vite-plugin	Minor
@db-ux/core-foundations	Minor
@db-ux/core-components	Minor
@db-ux/react-core-components	Minor
@db-ux/ngx-core-components	Minor
@db-ux/v-core-components	Minor
@db-ux/wc-core-components	Minor
@db-ux/core-stylelint	Minor
@db-ux/core-migration	Minor
@db-ux/agent-cli	Minor
@db-ux/core-eslint-plugin	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

packages/vite-plugin/src/index.ts

michaelmkraus · 2026-03-04T15:16:06Z

packages/vite-plugin/src/detector.ts

+			const importMatches = code.matchAll(IMPORT_PATTERN);
+			for (const match of importMatches) {
+				const componentName = match[1]
+					.toLowerCase()


Suggested change

.toLowerCase()

we have to remove the first .toLowerCase(), otherwise the regex will fail.

michaelmkraus · 2026-03-04T15:16:25Z

packages/vite-plugin/src/detector.ts

+			const usageMatches = code.matchAll(COMPONENT_USAGE_PATTERN);
+			for (const match of usageMatches) {
+				const componentName = match[1]
+					.toLowerCase()


Suggested change

.toLowerCase()

we have to remove the first .toLowerCase(), otherwise the regex will fail.

michaelmkraus · 2026-03-04T15:19:33Z

packages/vite-plugin/src/detector.ts

+
+const IMPORT_PATTERN =
+	/import\s+\{[^}]*\bDB(\w+)\b[^}]*\}\s+from\s+['"]@db-ux\/(?:react|ngx|v|wc)-core-components['"]/g;
+const COMPONENT_USAGE_PATTERN = /<DB(\w+)[\s>]/g;


This only works for JSX but won't work for e.g. <db-button>

michaelmkraus · 2026-03-05T07:27:08Z

packages/vite-plugin/src/detector.ts

+	forceInclude: string[]
+): Promise<Set<string>> {
+	const components = new Set<string>(forceInclude);
+	const moduleIds = Array.from(context.getModuleIds());


Using context.getModuleIds() here might cause issues with the dev-server. Since Vite loads files on-demand, the modules will be mostly empty when the initial CSS file is requested.
To fix this, we could scan the file system directly (e.g., using fast-glob). This is the same approach Tailwind CSS uses.

import fg from 'fast-glob'; const files = await fg(['src/**/*.{vue,jsx,tsx,html}', 'index.html'], { absolute: true }); for (const file of files) { const code = readFileSync(file, 'utf-8'); // run detection regex... }

michaelmkraus · 2026-03-05T07:43:45Z

packages/vite-plugin/src/index.ts

+
+			const distDir = resolve(process.cwd(), outDir);
+			try {
+				const files = await readdir(distDir, { recursive: true });


closeBundle is not meant to read and write directly to the dist folder. Changing files on disk behind Vite's back can break source maps or other plugins.
We should use the generateBundle hook instead. It allows to iterate over the bundle object and modify the CSS directly before Vite writes it to the disk.

michaelmkraus · 2026-03-05T07:58:08Z

packages/vite-plugin/src/generator.ts

+			const fullPath =
+				key === 'animations'
+					? `build/styles/${path}`
+					: `build/styles/${path}`;


Suggested change

const fullPath =

key === 'animations'

? `build/styles/${path}`

: `build/styles/${path}`;

const fullPath = `build/styles/${path}`;

Both cases for fullPath return the exact same string.

michaelmkraus · 2026-03-05T08:13:49Z

packages/vite-plugin/src/optimizer.ts

+		css = css.replace(
+			new RegExp(`\\[data-color=${color}\\],\\.db-color-${color}`, 'g'),
+			`.db-color-${color}`


The pattern searches for the exact string [data-color=blue] (without quotes).
If selectors with quotes are used (e.g. [data-color="blue"]), this regex will fail and won't remove the unused styles.

michaelmkraus · 2026-03-05T08:41:18Z

packages/vite-plugin/src/index.ts

+					const mod = server.moduleGraph.getModuleById(cssModuleId);
+					if (mod) {
+						server.moduleGraph.invalidateModule(mod);
+						server.ws.send({ type: 'full-reload' });


Suggested change

server.ws.send({ type: 'full-reload' });

Sending a full-reload event here breaks Vite's hot module replacement. It forces a full page refresh in the browser every time a developer saves a .vue or .tsx file, which disturbs the fast developer experience Vite is known for.
Using server.moduleGraph.invalidateModule(mod) should be enough for Vite to update CSS without refreshing the page.

michaelmkraus · 2026-03-05T09:06:08Z

packages/vite-plugin/src/detector.ts

+];
+
+const COLOR_PATTERNS = [
+	/\.db-color-(neutral|brand|blue|burgundy|critical|cyan|green|informational|light-green|orange|pink|red|successful|turquoise|violet|warning|yellow)/g,


The first pattern in each const array looks for a dot (e.g., /\.db-color-...). In the relevant files, developers will write class="db-color-blue". The regex will fail to match and all class-based usages will be ignored and falsely removed.

michaelmkraus · 2026-03-05T09:20:29Z

packages/vite-plugin/src/detector.ts

+import { readFileSync } from 'fs';
+import type { PluginContext } from 'rollup';
+
+const COMPONENT_PATTERNS = [


Every time a new component is created or a color/token is renamed/added, developers must remember to manually update these regex strings, the VALID_COMPONENTS array and the hardcoded lists in optimizer.ts and types.ts. Otherwise, the Vite plugin will strip the CSS for the new component.

Instead of maintaining manual lists, we can use a generic regex to capture anything relevant and dynamically check if it's a valid component by looking them up in the file system.

michaelmkraus · 2026-03-05T09:32:27Z

packages/vite-plugin/src/detector.ts

+	/["']data-font-size["']:\s*["'](body|headline)-(3xs|2xs|xs|sm|md|lg|xl|2xl|3xl)["']/g
+];
+
+const IMPORT_PATTERN =


If a user imports multiple components in a single statement (e.g. import { DBButton, DBCard } from '@db-ux/react-core-components'), \bDB(\w+)\b only catches the first one (Button). DBCard will be ignored.

michaelmkraus · 2026-03-05T09:40:52Z

packages/vite-plugin/src/detector.ts

+					const componentMatch =
+						match[0].match(/db-(\S+?)(?:[\s"]|$)/);


The class detection misses components if multiple db- classes are used in the same attribute (e.g., <div class="db-navigation-item db-infotext">).

The regex only returns the first hit, meaning db-infotext will be ignored. I am not sure if this really occurs (two components sharing the same wrapper)...

michaelmkraus · 2026-03-05T09:52:12Z

packages/vite-plugin/src/optimizer.ts

+			''
+		);
+		css = css.replace(
+			new RegExp(`--db-${color}-[a-z0-9-]+:[^;]+;`, 'g'),


Vite strips the trailing semicolon of the last property in a rule block (.class { color: red; --db-blue: #000 }). Because the regex strictly requires a semicolon, it will fail to remove any unused variables that happen to be at the end of a block.
We should make the semicolon optional and ensure we don't match past the closing }

michaelmkraus · 2026-03-05T09:59:20Z

packages/vite-plugin/src/optimizer.ts

+		);
+		// Remove entire rule block
+		css = css.replace(
+			new RegExp(`\\.db-color-${color}\\{[^}]+\\}`, 'g'),


The regex for removing entire unused rule blocks is too rigid. It assumes the opening { comes exactly after the class name.
Therefore, it completely ignores pseudo-classes (like .db-color-blue:hover { ... }), leaving those as dead code in the bundle.

michaelmkraus · 2026-03-05T10:32:15Z

packages/vite-plugin/package.json

+  "exports": {
+    ".": {
+      "types": "./build/src/index.d.ts",
+      "default": "./build/src/index.js"
+    },


Since the tsconfig.json uses "outDir": "build" and the code is inside src, TypeScript will handle src as the root directory. This means src/index.ts will be compiled directly to build/index.js, not build/src/index.js. If we publish it like this, users will get an error.

michaelmkraus · 2026-03-05T10:41:19Z

packages/vite-plugin/test/generator.spec.ts

+
+describe('generateCSS', () => {
+	it('should include default theme when no theme is detected', () => {
+		const css = generateCSS({


The unit tests are using an outdated signature for generateCSS. The tests pass the configuration as a flat object, but generateCSS expects them to be inside include and exclude objects (see GenerateOptions type)

Just tested the unit tests. When I change the call to this, the tests are working.

const css = generateCSS({ include: { foundations: ['icons'] }, exclude: {}, hasTailwind: false });

michaelmkraus · 2026-03-05T13:14:27Z

packages/vite-plugin/test/fixtures/react-app/tsconfig.json

+			"@components": ["../../../../output/react/src"],
+			"@components/src/*": ["../../../../output/react/src/*"],
+			"@components/components/*": [
+				"../../../../output/react/src/components/*"


Suggested change

"@components": ["../../../../output/react/src"],

"@components/src/*": ["../../../../output/react/src/*"],

"@components/components/*": [

"../../../../output/react/src/components/*"

"@components": ["../../../../../output/react/src"],

"@components/src/*": ["../../../../../output/react/src/*"],

"@components/components/*": [

"../../../../../output/react/src/components/*"

I think we have to go up one more level. Here, we go up only 4 levels to the output directory, but in the vite.config.ts 5 (which is correct).

michaelmkraus · 2026-03-05T13:17:38Z

packages/vite-plugin/test/fixtures/vue-app/tsconfig.json

+			"@components": ["../../../../output/vue/src"],
+			"@components/src/*": ["../../../../output/vue/src/*"],
+			"@components/components/*": [
+				"../../../../output/vue/src/components/*"


Suggested change

"@components": ["../../../../output/vue/src"],

"@components/src/*": ["../../../../output/vue/src/*"],

"@components/components/*": [

"../../../../output/vue/src/components/*"

"@components": ["../../../../../output/vue/src"],

"@components/src/*": ["../../../../../output/vue/src/*"],

"@components/components/*": [

"../../../../../output/vue/src/components/*"

I think we have to go up one more level. Here, we go up only 4 levels to the output directory, but in the vite.config.ts 5 (which is correct).

michaelmkraus · 2026-03-06T07:39:10Z

packages/vite-plugin/src/optimizer.ts

+		(d) => !detectedDensities.has(d)
+	);
+
+	const allFontSizes = [


The type FontSize in the types.ts has more entries than allFontSizes.
If a user doesn't use headline-md in their code, the optimizer looks for it in the allFontSizes array. Since it is missing there, it never gets added to unusedFontSizes. As a result, the plugin will never remove the unused CSS variables for the missing font sizes.

michaelmkraus · 2026-03-06T07:45:15Z

packages/vite-plugin/src/index.ts

+	PluginConfig
+} from './types.js';
+
+export default function dbUxPlugin(config: PluginConfig = {}): Plugin {


If a user passes a custom config to the plugin

dbUxPlugin({ include: { components: ['button'] } })

the default value for the include object is completely overridden because the objec exists and the foundations array inside the include object becomes undefined. Users will lose their default icons, helper etc. styles because they explicitly wanted to include a single component.

feat: add vite-plugin to resolve CSS automatically based on detected …

c732624

…components and styles

github-project-automation bot added this to UX Engineering Team Backlog Feb 13, 2026

github-project-automation bot moved this to 🏗 In progress in UX Engineering Team Backlog Feb 13, 2026

github-actions bot assigned nmerget Feb 13, 2026

github-actions bot added 📕documentation Improvements or additions to documentation 🚢📀cicd Changes inside .github folder 🛠️configuration 🏗foundations labels Feb 13, 2026

github-advanced-security bot found potential problems Feb 13, 2026

View reviewed changes

mfranzke changed the title ~~feat: add vite-plugin to resolve CSS automatically based on detected …~~ feat: add vite-plugin to resolve CSS automatically Feb 14, 2026

chore: update vite-plugin to detect tailwind

4ec6a28

github-advanced-security bot found potential problems Feb 14, 2026

View reviewed changes

packages/vite-plugin/src/index.ts Fixed Show fixed Hide fixed

packages/vite-plugin/src/index.ts Fixed Show fixed Hide fixed

nmerget added 13 commits February 14, 2026 21:03

chore: align some functions inside vite plugin

950b819

chore: fix issue with vue build

6b15a82

fix: issue with react build

32b0968

fix: add CHANGELOG.md to vite plugin

b0cb8e6

fix: issue with missing copy

d2064de

fix: issue with missing builds

f8908a1

chore: update snapshot

c944442

fix: issue with test for vite-plugin

c73bb00

chore: update snapshot

4d9038c

chore: update tests

840faac

chore: update snapshot

5f4eac5

chore: update from main

e82a1cf

chore: update test

e75a5ac

nmerget marked this pull request as ready for review February 23, 2026 08:28

nmerget moved this from 🏗 In progress to 🎁 Ready for review in UX Engineering Team Backlog Feb 23, 2026

mfranzke requested a review from Copilot February 26, 2026 16:28

Copilot started reviewing on behalf of mfranzke February 26, 2026 16:29 View session

michaelmkraus moved this from 🎁 Ready for review to 👀 Actively In Review in UX Engineering Team Backlog Mar 4, 2026

michaelmkraus self-requested a review March 4, 2026 14:54

michaelmkraus reviewed Mar 4, 2026

View reviewed changes

michaelmkraus reviewed Mar 5, 2026

View reviewed changes

michaelmkraus modified the milestones: 4.6.0, 4.7.0 Mar 5, 2026

michaelmkraus reviewed Mar 5, 2026

View reviewed changes

michaelmkraus added 2 commits March 5, 2026 14:48

Merge branch 'main' into feat-vite-plugin

b1976c8

Merge branch 'main' into feat-vite-plugin

102d076

michaelmkraus reviewed Mar 6, 2026

View reviewed changes

Merge branch 'main' into feat-vite-plugin

95b044b

michaelmkraus moved this from 👀 Actively In Review to 🎶 Waiting for feedback in UX Engineering Team Backlog Mar 6, 2026

		const componentMatch =
		match[0].match(/db-(\S+?)(?:[\s"]\|$)/);

Conversation

nmerget commented Feb 13, 2026 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Types of changes

Further comments

Uh oh!

changeset-bot bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

michaelmkraus Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

michaelmkraus Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

nmerget commented Feb 13, 2026 •

edited by github-actions bot

Loading

changeset-bot bot commented Feb 13, 2026 •

edited

Loading

michaelmkraus Mar 4, 2026 •

edited

Loading

michaelmkraus Mar 6, 2026 •

edited

Loading