build(design-system): use @tsdown/css plugin [AR-53290]

.changeset/wicked-wings-jog.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': patch
+---
+
+Improve build process

packages/design-system/package.json

@@ -85,13 +85,14 @@
 		"@eslint/compat": "^2.0.3",
 		"@faker-js/faker": "^10.3.0",
 		"@hookform/resolvers": "^5.2.2",
-		"@rolldown/plugin-babel": "^0.2.1",
+		"@rolldown/plugin-babel": "^0.2.2",
 		"@storybook/addon-a11y": "^10.2.19",
 		"@storybook/addon-docs": "^10.2.19",
 		"@storybook/addon-vitest": "^10.2.19",
 		"@storybook/react-vite": "^10.2.19",
 		"@tanstack/react-query": "^5.90.21",
 		"@tanstack/react-router": "^1.166.2",
+		"@tsdown/css": "^0.21.6",
 		"@types/eslint-plugin-jsx-a11y": "^6.10.1",
 		"@types/react": "^19.2.14",
 		"@types/react-dom": "^19.2.3",
@@ -106,16 +107,13 @@
 		"eslint-plugin-storybook": "^10.2.19",
 		"mockdate": "^3.0.5",
 		"playwright": "^1.58.2",
-		"postcss": "^8.5.8",
-		"postcss-modules": "^6.0.1",
 		"publint": "^0.3.18",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
 		"react-hook-form": "^7.71.2",
-		"rollup-plugin-sass": "^1.15.3",
 		"sass-embedded": "^1.97.3",
 		"storybook": "^10.2.19",
-		"tsdown": "^0.21.0",
+		"tsdown": "^0.21.6",
 		"typed-scss-modules": "^8.1.1",
 		"typescript": "^5.9.3",
 		"typescript-plugin-css-modules": "^5.2.0",

packages/design-system/rolldown/react-compiler-rolldown-plugin.ts

@@ -1,7 +1,8 @@
+import type { Rolldown } from 'tsdown';
 import babel from '@rolldown/plugin-babel';
 import { reactCompilerPreset } from '@vitejs/plugin-react';
 
-export function reactCompilerRolldownPlugin() {
+export function reactCompilerRolldownPlugin(): Promise<Rolldown.Plugin> {
 	return babel({
 		presets: [reactCompilerPreset()],
 		include: [/src\/.*\.tsx?/],

packages/design-system/tsdown.config.ts

@@ -1,9 +1,6 @@
 import * as fs from 'node:fs/promises';
 import { defineConfig, type Rolldown } from 'tsdown';
-import sass from 'rollup-plugin-sass';
 import * as sassEmbedded from 'sass-embedded';
-import postcss from 'postcss';
-import postcssModules from 'postcss-modules';
 import { reactCompilerRolldownPlugin } from './rolldown/react-compiler-rolldown-plugin.ts';
 
 export default defineConfig({
@@ -13,55 +10,35 @@ export default defineConfig({
 	dts: true,
 	sourcemap: false,
 	clean: true,
-	skipNodeModulesBundle: true,
 	outDir: 'dist',
 	outExtensions: ({ format }) => (format === 'cjs' ? { js: '.cjs' } : { js: '.js' }),
+	css: {
+		fileName: 'index.min.css',
+		minify: true,
+	},
+	deps: {
+		skipNodeModulesBundle: true,
+	},
 	plugins: [
 		reactCompilerRolldownPlugin(), // Must be first.
-
-		sass({
-			api: 'modern',
-			output: './dist/index.min.css',
-			options: {
-				style: 'compressed',
-			},
-
-			runtime: sassEmbedded,
-
-			// https://github.com/elycruz/rollup-plugin-sass#create-css-modules-using-processor-cssmodules-output
-			async processor(css, id) {
-				let cssModules = {};
-
-				const postcssProcessResult = await postcss([
-					postcssModules({
-						getJSON: (_, json) => {
-							cssModules = json;
-						},
-					}),
-				]).process(css, { from: id });
-
-				return { css: postcssProcessResult.css, cssModules };
-			},
-		}),
-
-		appendRootStyles(),
+		prependRootStyles(),
 	],
 });
 
-function appendRootStyles(): Rolldown.Plugin {
+function prependRootStyles(): Rolldown.Plugin {
 	return {
-		name: 'append-root-styles',
-		async generateBundle({ format }) {
-			// Ensure the root styles are compiled and appended only once.
+		name: 'prepend-root-styles',
+		async writeBundle({ format }) {
+			// Ensure the root styles are compiled and prepended only once.
 			if (format !== 'es') {
 				return;
 			}
 
-			const rootStyles = await sassEmbedded.compileAsync('./src/styles/styles.scss', {
-				style: 'compressed',
-			});
+			const [indexCssFile, rootStyles] = await Promise.all([
+				fs.readFile('./dist/index.min.css', 'utf-8'),
 
-			const indexCssFile = await fs.readFile('./dist/index.min.css', 'utf-8');
+				sassEmbedded.compileAsync('./src/styles/styles.scss', { style: 'compressed' }),
+			]);
 
 			await fs.writeFile('./dist/index.min.css', rootStyles.css + indexCssFile);
 		},

packages/eslint-plugin/package.json

@@ -47,7 +47,7 @@
 		"@vitest/coverage-v8": "^4.1.0",
 		"eslint": "^10.0.1",
 		"publint": "^0.3.18",
-		"tsdown": "^0.21.0",
+		"tsdown": "^0.21.6",
 		"typescript": "^5.9.3",
 		"vitest": "^4.1.0"
 	},

packages/vite-plugin/package.json

@@ -51,7 +51,7 @@
 		"@vitest/coverage-v8": "^4.1.0",
 		"eslint": "^10.0.1",
 		"publint": "^0.3.18",
-		"tsdown": "^0.21.0",
+		"tsdown": "^0.21.6",
 		"typescript": "^5.9.3",
 		"vitest": "^4.1.0"
 	}