@db-ux/core-vite-plugin 4.12.1 → 4.13.1-angular-signal-forms3-9c66774
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/build/detector.d.ts +2 -2
- package/build/detector.js +12 -12
- package/build/generator.js +6 -9
- package/build/index.d.ts +1 -1
- package/build/index.js +15 -14
- package/build/optimizer.d.ts +2 -2
- package/build/optimizer.js +14 -14
- package/build/types.d.ts +4 -4
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
package/build/detector.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Walk up the directory tree from `root` to locate a package path inside node_modules.
|
|
3
3
|
* Handles monorepo hoisting where dependencies may live in a parent node_modules.
|
|
4
|
-
* Returns the resolved absolute path or
|
|
4
|
+
* Returns the resolved absolute path or `undefined` if not found.
|
|
5
5
|
*/
|
|
6
|
-
export declare function resolvePackagePath(root: string, packagePath: string): string |
|
|
6
|
+
export declare function resolvePackagePath(root: string, packagePath: string): string | undefined;
|
|
7
7
|
/** Public accessor for the discovery cache. */
|
|
8
8
|
export declare function discoverAll(root: string): {
|
|
9
9
|
components: Set<string>;
|
package/build/detector.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import fg from 'fast-glob';
|
|
2
|
-
import { readFileSync, readdirSync } from 'fs';
|
|
3
|
-
import { resolve } from 'path';
|
|
2
|
+
import { readFileSync, readdirSync } from 'node:fs';
|
|
3
|
+
import { resolve } from 'node:path';
|
|
4
4
|
/**
|
|
5
5
|
* Walk up the directory tree from `root` to locate a package path inside node_modules.
|
|
6
6
|
* Handles monorepo hoisting where dependencies may live in a parent node_modules.
|
|
7
|
-
* Returns the resolved absolute path or
|
|
7
|
+
* Returns the resolved absolute path or `undefined` if not found.
|
|
8
8
|
*/
|
|
9
9
|
export function resolvePackagePath(root, packagePath) {
|
|
10
10
|
let currentDir = root;
|
|
@@ -22,7 +22,7 @@ export function resolvePackagePath(root, packagePath) {
|
|
|
22
22
|
break;
|
|
23
23
|
currentDir = parentDir;
|
|
24
24
|
}
|
|
25
|
-
return
|
|
25
|
+
return undefined;
|
|
26
26
|
}
|
|
27
27
|
/** Return subdirectory names (folders only) from the given path. */
|
|
28
28
|
function readDirNames(dirPath) {
|
|
@@ -113,8 +113,8 @@ export function scanComponentDependencies(root, components, colors, densities, f
|
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
115
|
/** Convert PascalCase to kebab-case: "NavigationItem" → "navigation-item". */
|
|
116
|
-
function toKebabCase(
|
|
117
|
-
return
|
|
116
|
+
function toKebabCase(string_) {
|
|
117
|
+
return string_.replaceAll(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
|
118
118
|
}
|
|
119
119
|
/**
|
|
120
120
|
* Build an array of regex patterns to detect usage of design system values.
|
|
@@ -124,9 +124,9 @@ function toKebabCase(str) {
|
|
|
124
124
|
function buildPatterns(classPrefix, dataAttr, values) {
|
|
125
125
|
return [
|
|
126
126
|
new RegExp(`${classPrefix}(${values})`, 'g'),
|
|
127
|
-
new RegExp(
|
|
127
|
+
new RegExp(String.raw `\[${dataAttr}=["']?(${values})["']?\]`, 'g'),
|
|
128
128
|
new RegExp(`${dataAttr}=["'](${values})["']`, 'g'),
|
|
129
|
-
new RegExp(`["']${dataAttr}["']
|
|
129
|
+
new RegExp(String.raw `["']${dataAttr}["']:\s*["'](${values})["']`, 'g')
|
|
130
130
|
];
|
|
131
131
|
}
|
|
132
132
|
/** Matches JSX/TSX component usage: <DBButton>, <DBNavigationItem> */
|
|
@@ -134,9 +134,9 @@ const JSX_COMPONENT_PATTERN = /<DB(\w+)[\s>/]/g;
|
|
|
134
134
|
/** Matches Angular/HTML kebab-case usage: <db-button>, <db-navigation-item> */
|
|
135
135
|
const KEBAB_COMPONENT_PATTERN = /<db-([\w-]+)[\s>/]/g;
|
|
136
136
|
/** Matches CSS class-based usage: class="db-button ...", className="db-card" */
|
|
137
|
-
const CLASS_COMPONENT_PATTERN = /(?:class|className)=(?:"[^"]*|'[^']
|
|
137
|
+
const CLASS_COMPONENT_PATTERN = /(?:class|className)=(?:"[^"]*|'[^']*|{[^}]*)db-([\w-]+)/g;
|
|
138
138
|
/** Matches named imports from @db-ux framework packages: import { DBButton, DBCard } from '...' */
|
|
139
|
-
const IMPORT_PATTERN = /import\s
|
|
139
|
+
const IMPORT_PATTERN = /import\s+{([^}]+)}\s+from\s+['"]@db-ux\/(?:react|ngx|v|wc)-core-components['"]/g;
|
|
140
140
|
/** Glob all source files from the project root, excluding node_modules/dist/build. */
|
|
141
141
|
async function scanFiles(root) {
|
|
142
142
|
return fg(['**/*.{vue,jsx,tsx,ts,html}'], {
|
|
@@ -151,7 +151,7 @@ function readSource(filePath) {
|
|
|
151
151
|
return readFileSync(filePath, 'utf-8');
|
|
152
152
|
}
|
|
153
153
|
catch {
|
|
154
|
-
return
|
|
154
|
+
return undefined;
|
|
155
155
|
}
|
|
156
156
|
}
|
|
157
157
|
/**
|
|
@@ -248,6 +248,6 @@ export async function detectFontSizes(root, forceInclude) {
|
|
|
248
248
|
const validSet = new Set(validFontSizes);
|
|
249
249
|
return detectByPatterns(root, forceInclude, 'db-font-size-', 'data-font-size', [`(${categories.join('|')})-(${sizes.join('|')})`], (match) => {
|
|
250
250
|
const value = `${match[1]}-${match[2]}`;
|
|
251
|
-
return validSet.has(value) ? value :
|
|
251
|
+
return validSet.has(value) ? value : undefined;
|
|
252
252
|
});
|
|
253
253
|
}
|
package/build/generator.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { readdirSync } from 'fs';
|
|
2
|
-
import { resolve } from 'path';
|
|
1
|
+
import { readdirSync } from 'node:fs';
|
|
2
|
+
import { resolve } from 'node:path';
|
|
3
3
|
/** Maps foundation feature names to their CSS file paths relative to build/styles/. */
|
|
4
4
|
const FOUNDATION_IMPORTS = {
|
|
5
5
|
helpers: 'helpers/classes/all.css',
|
|
@@ -54,7 +54,7 @@ function detectTheme(root, preferredTheme) {
|
|
|
54
54
|
break;
|
|
55
55
|
currentDir = parentDir;
|
|
56
56
|
}
|
|
57
|
-
return
|
|
57
|
+
return undefined;
|
|
58
58
|
}
|
|
59
59
|
/**
|
|
60
60
|
* Generate the CSS import statements based on detected/discovered values.
|
|
@@ -98,20 +98,17 @@ export function generateCSS(options) {
|
|
|
98
98
|
}
|
|
99
99
|
// Theme or default fallback
|
|
100
100
|
if (theme) {
|
|
101
|
-
imports.push(`@import "${theme}/build/styles/rollup.css" layer(${themeName});`);
|
|
102
|
-
imports.push(`@import "@db-ux/core-foundations/build/styles/defaults/default-container-properties.css" layer(db-ux);`);
|
|
101
|
+
imports.push(`@import "${theme}/build/styles/rollup.css" layer(${themeName});`, `@import "@db-ux/core-foundations/build/styles/defaults/default-container-properties.css" layer(db-ux);`);
|
|
103
102
|
}
|
|
104
103
|
else {
|
|
105
|
-
imports.push(`@import "@db-ux/core-foundations/build/styles/theme/rollup.css" layer(db-ux);`);
|
|
106
|
-
imports.push(`@import "@db-ux/core-foundations/build/styles/fonts/rollup.css" layer(db-ux);`);
|
|
104
|
+
imports.push(`@import "@db-ux/core-foundations/build/styles/theme/rollup.css" layer(db-ux);`, `@import "@db-ux/core-foundations/build/styles/fonts/rollup.css" layer(db-ux);`);
|
|
107
105
|
}
|
|
108
106
|
// Tailwind theme
|
|
109
107
|
if (hasTailwind) {
|
|
110
108
|
imports.push(`@import "@db-ux/core-foundations/build/tailwind/theme/index.css";`);
|
|
111
109
|
}
|
|
112
110
|
// Required foundation styles
|
|
113
|
-
imports.push(`@import "@db-ux/core-foundations/build/styles/defaults/default-required.css" layer(db-ux);`);
|
|
114
|
-
imports.push(`@import "@db-ux/core-foundations/build/styles/defaults/default-root.css" layer(db-ux);`);
|
|
111
|
+
imports.push(`@import "@db-ux/core-foundations/build/styles/defaults/default-required.css" layer(db-ux);`, `@import "@db-ux/core-foundations/build/styles/defaults/default-root.css" layer(db-ux);`);
|
|
115
112
|
// Optional foundation features
|
|
116
113
|
for (const [key, path] of Object.entries(FOUNDATION_IMPORTS)) {
|
|
117
114
|
const feature = key;
|
package/build/index.d.ts
CHANGED
|
@@ -8,4 +8,4 @@ import type { PluginConfig } from './types.js';
|
|
|
8
8
|
* During build, only detected styles are included and unused ones are stripped.
|
|
9
9
|
*/
|
|
10
10
|
export default function dbUxPlugin(config?: PluginConfig): any[];
|
|
11
|
-
export type
|
|
11
|
+
export { type PluginConfig } from './types.js';
|
package/build/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { writeFile } from 'fs/promises';
|
|
2
|
-
import { resolve } from 'path';
|
|
1
|
+
import { writeFile } from 'node:fs/promises';
|
|
2
|
+
import { resolve } from 'node:path';
|
|
3
3
|
import { detectColors, detectComponents, detectDensities, detectFontSizes, discoverAll, scanComponentDependencies } from './detector.js';
|
|
4
4
|
import { generateCSS } from './generator.js';
|
|
5
5
|
import { removeUnusedStyles } from './optimizer.js';
|
|
@@ -35,8 +35,8 @@ export default function dbUxPlugin(config = {}) {
|
|
|
35
35
|
let detectedDensities = new Set();
|
|
36
36
|
let detectedFontSizes = new Set();
|
|
37
37
|
let hasDetected = false;
|
|
38
|
-
let detectionPromise
|
|
39
|
-
let cssModuleId
|
|
38
|
+
let detectionPromise;
|
|
39
|
+
let cssModuleId;
|
|
40
40
|
let hasTailwind = false;
|
|
41
41
|
let root = process.cwd();
|
|
42
42
|
let isBuild = false;
|
|
@@ -98,17 +98,17 @@ export default function dbUxPlugin(config = {}) {
|
|
|
98
98
|
root,
|
|
99
99
|
include: {
|
|
100
100
|
components: isBuild
|
|
101
|
-
?
|
|
102
|
-
:
|
|
101
|
+
? [...detectedComponents]
|
|
102
|
+
: [...discovered.components],
|
|
103
103
|
foundations: include.foundations || [],
|
|
104
104
|
colors: isBuild
|
|
105
|
-
?
|
|
105
|
+
? [...detectedColors]
|
|
106
106
|
: discovered.colors,
|
|
107
107
|
densities: isBuild
|
|
108
|
-
?
|
|
108
|
+
? [...detectedDensities]
|
|
109
109
|
: discovered.densities,
|
|
110
110
|
fontSizes: isBuild
|
|
111
|
-
?
|
|
111
|
+
? [...detectedFontSizes]
|
|
112
112
|
: discovered.fontSizes
|
|
113
113
|
},
|
|
114
114
|
exclude,
|
|
@@ -125,7 +125,7 @@ export default function dbUxPlugin(config = {}) {
|
|
|
125
125
|
.join('\n') +
|
|
126
126
|
'\n');
|
|
127
127
|
}
|
|
128
|
-
code = code.
|
|
128
|
+
code = code.replaceAll(/@import ["']@db-ux\/core-vite-plugin\/index\.css["'];?/g, css);
|
|
129
129
|
}
|
|
130
130
|
return code;
|
|
131
131
|
},
|
|
@@ -133,10 +133,10 @@ export default function dbUxPlugin(config = {}) {
|
|
|
133
133
|
if (debug && hasDetected) {
|
|
134
134
|
const reportPath = resolve(root, 'db-ux-detection-report.json');
|
|
135
135
|
await writeFile(reportPath, JSON.stringify({
|
|
136
|
-
components:
|
|
137
|
-
colors:
|
|
138
|
-
densities:
|
|
139
|
-
fontSizes:
|
|
136
|
+
components: [...detectedComponents].sort(),
|
|
137
|
+
colors: [...detectedColors].sort(),
|
|
138
|
+
densities: [...detectedDensities].sort(),
|
|
139
|
+
fontSizes: [...detectedFontSizes].sort(),
|
|
140
140
|
generatedImports
|
|
141
141
|
}, null, 2), 'utf-8');
|
|
142
142
|
}
|
|
@@ -166,3 +166,4 @@ export default function dbUxPlugin(config = {}) {
|
|
|
166
166
|
};
|
|
167
167
|
return [mainPlugin, optimizerPlugin];
|
|
168
168
|
}
|
|
169
|
+
export {} from './types.js';
|
package/build/optimizer.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/** All available values discovered from the filesystem, used to determine what is unused. */
|
|
2
|
-
export
|
|
2
|
+
export type OptimizerContext = {
|
|
3
3
|
allColors: string[];
|
|
4
4
|
allDensities: string[];
|
|
5
5
|
allFontSizes: string[];
|
|
6
|
-
}
|
|
6
|
+
};
|
|
7
7
|
/**
|
|
8
8
|
* Remove unused CSS custom properties, @property declarations, and rule blocks
|
|
9
9
|
* for colors, densities, and font sizes that were not detected in the project.
|
package/build/optimizer.js
CHANGED
|
@@ -8,28 +8,28 @@ export function removeUnusedStyles(css, detectedColors, detectedDensities, detec
|
|
|
8
8
|
const unusedDensities = context.allDensities.filter((d) => !detectedDensities.has(d));
|
|
9
9
|
const unusedFontSizes = context.allFontSizes.filter((f) => !detectedFontSizes.has(f));
|
|
10
10
|
for (const color of unusedColors) {
|
|
11
|
-
css = css.
|
|
11
|
+
css = css.replaceAll(new RegExp(String.raw `@property --db-${color}-[a-z0-9-]+\{[^}]+\}`, 'g'), '');
|
|
12
12
|
// Make semicolon optional to handle last property in a block
|
|
13
|
-
css = css.
|
|
13
|
+
css = css.replaceAll(new RegExp(`--db-${color}-[a-z0-9-]+:[^;}]+;?`, 'g'), '');
|
|
14
14
|
// Normalize selectors — handle both quoted and unquoted data-color
|
|
15
|
-
css = css.
|
|
16
|
-
css = css.
|
|
15
|
+
css = css.replaceAll(new RegExp(String.raw `\[data-color=["']?${color}["']?\],\.db-color-${color}`, 'g'), `.db-color-${color}`);
|
|
16
|
+
css = css.replaceAll(new RegExp(String.raw `\.db-color-${color},\[data-color=["']?${color}["']?\]`, 'g'), `.db-color-${color}`);
|
|
17
17
|
// Remove entire rule blocks including pseudo-classes
|
|
18
|
-
css = css.
|
|
18
|
+
css = css.replaceAll(new RegExp(String.raw `\.db-color-${color}(?:[^{]*?)\{[^}]+\}`, 'g'), '');
|
|
19
19
|
}
|
|
20
20
|
for (const density of unusedDensities) {
|
|
21
|
-
css = css.
|
|
22
|
-
css = css.
|
|
21
|
+
css = css.replaceAll(new RegExp(String.raw `@property --db-[a-z-]+-${density}-[a-z0-9-]+\{[^}]+\}`, 'g'), '');
|
|
22
|
+
css = css.replaceAll(new RegExp(`--db-[a-z-]+-${density}-[a-z0-9-]+:[^;}]+;?`, 'g'), '');
|
|
23
23
|
}
|
|
24
24
|
for (const fontSize of unusedFontSizes) {
|
|
25
25
|
const [type, size] = fontSize.split('-');
|
|
26
|
-
css = css.
|
|
27
|
-
css = css.
|
|
28
|
-
css = css.
|
|
29
|
-
css = css.
|
|
30
|
-
css = css.
|
|
26
|
+
css = css.replaceAll(new RegExp(`--db-type-${fontSize}:[^;}]+;?`, 'g'), '');
|
|
27
|
+
css = css.replaceAll(new RegExp(`--db-base-${type}-icon-weight-${size}:[^;}]+;?`, 'g'), '');
|
|
28
|
+
css = css.replaceAll(new RegExp(String.raw `@property --db-base-icon-weight-[a-z]+-[a-z]+-${type}-${size}\{[^}]+\}`, 'g'), '');
|
|
29
|
+
css = css.replaceAll(new RegExp(String.raw `@property --db-base-icon-font-size-[a-z]+-[a-z]+-${type}-${size}\{[^}]+\}`, 'g'), '');
|
|
30
|
+
css = css.replaceAll(new RegExp(String.raw `@property --db-typography-[a-z]+-[a-z]+-${type}-${size}\{[^}]+\}`, 'g'), '');
|
|
31
31
|
}
|
|
32
|
-
css = css.
|
|
33
|
-
css = css.
|
|
32
|
+
css = css.replaceAll('@layer variables;', '');
|
|
33
|
+
css = css.replaceAll('@charset "UTF-8";', '');
|
|
34
34
|
return css;
|
|
35
35
|
}
|
package/build/types.d.ts
CHANGED
|
@@ -22,7 +22,7 @@ export type FontSize = 'body-3xs' | 'body-2xs' | 'body-xs' | 'body-sm' | 'body-m
|
|
|
22
22
|
/**
|
|
23
23
|
* Configuration options for the Vite plugin.
|
|
24
24
|
*/
|
|
25
|
-
export
|
|
25
|
+
export type PluginConfig = {
|
|
26
26
|
/**
|
|
27
27
|
* Force include specific components, foundation features, color schemes, densities, or font sizes.
|
|
28
28
|
*/
|
|
@@ -70,12 +70,12 @@ export interface PluginConfig {
|
|
|
70
70
|
* Generate detection report for debugging (default: false).
|
|
71
71
|
*/
|
|
72
72
|
debug?: boolean;
|
|
73
|
-
}
|
|
73
|
+
};
|
|
74
74
|
/**
|
|
75
75
|
* Internal options passed to the CSS generator.
|
|
76
76
|
*/
|
|
77
|
-
export
|
|
77
|
+
export type GenerateOptions = {
|
|
78
78
|
/** Vite project root, used for resolving node_modules. */
|
|
79
79
|
root: string;
|
|
80
80
|
hasTailwind: boolean;
|
|
81
|
-
}
|
|
81
|
+
} & Pick<Required<PluginConfig>, 'include' | 'exclude'> & Pick<PluginConfig, 'theme' | 'additionalLayers' | 'overrideLayers'>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@db-ux/core-vite-plugin",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.13.1-angular-signal-forms3-9c66774",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Vite plugin for optimized DB UX Design System CSS imports",
|
|
6
6
|
"repository": {
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"npm-run-all2": "9.0.2",
|
|
42
42
|
"typescript": "5.9.3",
|
|
43
43
|
"vite": "8.0.16",
|
|
44
|
-
"vitest": "4.1.
|
|
44
|
+
"vitest": "4.1.9"
|
|
45
45
|
},
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"registry": "https://registry.npmjs.org/",
|