@bcc-code/component-library-vue 1.3.15 → 1.3.16

package/README.md

@@ -64,10 +64,12 @@ export default defineConfig({
 @import '@bcc-code/component-library-vue/theme.css';
 ```
 
-That single import is enough. `theme.css` does two things:
+That single import is enough. `theme.css` includes:
 
-- It exposes the BCC design tokens and Tailwind utilities.
-- It also imports `library-utilities.css`, the pre-compiled CSS for the utility classes used **inside** the library's own components. 
+- BCC design tokens, `@theme` / `@utility` definitions, and the rest of the design-system CSS inlined from `src/style.css` (including component-specific rules such as `BccInput` icon sizing and `BccButton` context tokens).
+- `library-utilities.css`, the pre-compiled Tailwind **utility class** rules used inside library templates (which your build cannot infer from the published JS).
+
+Do **not** rely on `library-utilities.css` alone with a minimal “base” import: you still need the full `theme.css` (or `style.css` for Option 2) so non-utility component styles and tokens are present. 
 
 ### Styles Option 2 — Pre-built CSS only
 

package/dist/sfc-styles.css

@@ -0,0 +1 @@
+.p-button.useCtx[data-v-c57d52aa]{--p-button-primary-color:var(--ctx-text);--p-button-primary-background:var(--ctx-background);--p-button-primary-border-color:var(--ctx-border);--p-button-primary-hover-background:var(--ctx-background-hover);--p-button-primary-hover-border-color:var(--ctx-border-hover);--p-button-primary-hover-color:var(--ctx-text-hover);--p-button-primary-active-background:var(--ctx-background-pressed);--p-button-primary-active-border-color:var(--ctx-border-pressed);--p-button-primary-active-color:var(--ctx-text-pressed)}.p-inputicon{--icon-size: 20px;font-size:var(--icon-size);width:var(--icon-size);height:var(--icon-size);margin-top:calc(-1 * (var(--icon-size) / 2))}.p-iconfield:has(.p-inputfield-sm) .p-inputicon{--icon-size: 16px}.p-iconfield:has(.p-inputfield-lg) .p-inputicon{--icon-size: 24px}

package/dist/theme.css

@@ -2618,7 +2618,10 @@ strong,
 }
 
 
+/* SFC <style> blocks extracted all .vue components
+@import './sfc-styles.css';
+
 /* Library utility classes, compiled from the library's own components.
-   Contains only the utility class rules used inside the library — no preflight, no @theme
-   variables, no design tokens, since theme.css already provides those. */
+   Contains only the utility class rules used inside the library — no preflight,
+   no @theme variables, no design tokens, since theme.css already provides those. */
 @import './library-utilities.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcc-code/component-library-vue",
-  "version": "1.3.15",
+  "version": "1.3.16",
   "type": "module",
   "description": "Extended Vue component library based on PrimeVue and BCC design tokens",
   "repository": "https://github.com/bcc-code/bcc-design.git",
@@ -30,6 +30,7 @@
     },
     "./style.css": "./dist/index.css",
     "./theme.css": "./dist/theme.css",
+    "./sfc-styles.css": "./dist/sfc-styles.css",
     "./library-utilities.css": "./dist/library-utilities.css",
     "./archivo-font.css": "./dist/archivo-font.css",
     "./tailwind.css": "./dist-css/tailwind.css"
@@ -38,7 +39,8 @@
     "start": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build": "run-p typecheck build:types build:vite",
-    "build:vite": "rimraf dist && vite build && pnpm run build:library-utilities && node scripts/build-theme-css.mjs",
+    "build:vite": "rimraf dist && vite build && pnpm run build:sfc-styles && pnpm run build:library-utilities && node scripts/build-theme-css.mjs",
+    "build:sfc-styles": "vite build --config vite.config.sfc-styles.ts && rimraf dist/sfc-styles.js",
     "build:library-utilities": "tailwindcss -i src/library-utilities-input.css -o dist/library-utilities.css --minify",
     "build:types": "rimraf dist-types && vue-tsc -p tsconfig.build.json",
     "generate:semantic": "node scripts/restructure-semantic-primitives.mjs",