bernova 0.2.1 → 1.0.0

package/CHANGELOG.md

@@ -5,7 +5,19 @@ All notable changes to Bernova will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.3.0] - 2025-01-30
+## [1.0.0] - 2026-01-08
+
+### New Features
+
+- **Improve library styles and tools build/dist**: Complete the buildStyle.js cli function.
+- **Improve provider router hanler**: Improve the Bernova provider for handler relative doc routes.
+
+### Fixed
+
+- **Fixed the doc routes**: Change the absolute routes for relative routes into provides's stats.
+- **Fixed Error in partial transpilation**: Fixed the function for the flags --foundationsOnly and --componentsOnly.
+
+## [0.3.0] - 2026-01-01
 
 ### ✨ New Features
 

package/README.md

@@ -645,7 +645,7 @@ const BUTTON = {
     },
     hover: {
       background_color: '#e94141',
-    }
+    },
     focus: {
       border_color: '#0000ff',
     }
@@ -1485,7 +1485,10 @@ The tools generated by the library are in JavaScript format, but they have decla
     {
       //... rest of the config
       "typesTools": {
-        "stylesTypes": { "name": "stylesTypes", "path": "./src/styles/types" },
+        "stylesTypes": {
+          "name": "stylesTypes",
+          "path": "./src/styles/types"
+        },
         "componentsTypes": {
           "name": "componentsTypes",
           "path": "./src/styles/default/tools"
@@ -1746,12 +1749,12 @@ You probably already have CSS documents with highly customized rules and want to
       "name": "theme-1",
       "foreignThemes": [
         {
-          "priority": "low",
+          "position": "before",
           "name": "teams",
           "path": "./fixture/teams.css"
         },
         {
-          "priority": "high",
+          "position": "after",
           "name": "reset",
           "path": "./fixture/reset.css"
         }
@@ -1785,3 +1788,52 @@ export const LOGIN_BUTTON = {
   background_color: ThemeProvider.variables.color_teams_primary, // <-- This is from ':root' into teams.css document
 };
 ```
+
+## Compiler Options
+
+When publishing our projects, depending of the packager configuration, it is necessary to move static files or other types of documents not originalle included. Bernova manages the files necessary for proper operation in production.
+
+```json
+{
+  // ...rest of the config
+  "compilerOptions": {
+    "baseOutDir": "./dist",
+    "rootDir": "./src",
+    "minifyCss": true,
+    "minifyJS": true,
+    "preventMoveJS": false,
+    "preventMoveDTS": false,
+    "types": ["cjs", "esm"],
+    "customOutDirs": {
+      "css": "./custom/outdir/css",
+      "provider": "./custom/outdir/provider",
+      "tools": "./custom/outdir/tools"
+    }
+  }
+  // ...rest of the config
+}
+```
+
+### Compiler Options Properties
+
+- **baseOutDir**: Specifies the base output directory where all compiled files will be placed. This is the root folder for your distribution files.
+
+- **rootDir**: Defines the root directory of your source code. Used as a reference point to maintain the relative structure of the files when copying them to the output directory.
+
+- **minifyCss**: When set to `true`, CSS files will be minified to reduce file size. The minified files will have the `.min.css` extension.
+
+- **minifyJS**: When set to `true`, JavaScript files will be minified using Terser. This reduces file size by compressing the code, removing dead code, and dropping debbuger statements.
+
+- **preventMoveJS**: When set to `true`, JavaScript file will remain in their original location instead of being copied to the output directory. Useful if you want to manage JS file separately.
+
+- **preventMoveDTS**: When set to `true`, TypeScript declaration files (.d.ts) will not be copied to the output directory. Set this to `true` if you're handling type definitions through another process.
+
+- **types**: An array that specifies the module formats to generate. Accepts `"cjs"` (Commonjs) and/or `"esm"` (ES Modules). For each type specified, Bernova will create a separate folder and transpile the code accordingly.
+
+  - `"cjs"`: Generate CommonJS modules for node.js compability.
+  - `"esm"`: Generate ES Modules for modern JavaScript environments
+
+- **customOutDirs**: An optional object that allows you to specify custom output directories for different file types, overriding the default structure:
+ - `"css"`: Custom output path for CSS files
+ - `"provider"`: Custom output path for provider file
+ - `"tools"`: Custom output path for tools files (cssVars, cssClasses, etc)

package/dist/bin/buildstyle.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-const e=require("clean-css"),r=require("fs").promises,i=require("path"),{readConfigData:s}=require("../dist/helpers/readFile.utils.js");(async()=>{const{default:t}=await import("ora"),c=t("Starting CSS build process...").start();try{const t=i.resolve(process.cwd(),"bernova.config.json"),a=await s(t),o=i.resolve(__dirname,"../styles/bernova.css"),{outputDir:n}=a;let l=!0;try{await r.access(o),c.succeed("Source CSS file found.")}catch(e){l=!1,c.info("Source CSS file does not exist, will create default.")}l||(c.start("Creating default CSS file..."),await r.mkdir(i.dirname(o),{recursive:!0}),await r.writeFile(o,"/* Generated by Bernova - run compilation first */"),c.succeed("Default CSS file created.")),c.start("Reading source CSS file...");const u=await r.readFile(o,"utf8");c.succeed("Source CSS file loaded successfully."),c.start("Minifying CSS...");const d=new e({level:2,returnPromise:!1}).minify(u);if(d.errors&&d.errors.length>0)throw new Error(`CSS minification errors: ${d.errors.join(", ")}`);c.succeed(`CSS minified successfully (${Math.round(100*(1-d.styles.length/u.length))}% reduction).`);const S=n||"./dist",f=i.resolve(process.cwd(),S,"bernova.min.css");c.start("Ensuring output directory exists..."),await r.mkdir(i.dirname(f),{recursive:!0}),c.succeed("Output directory ready."),c.start("Writing minified CSS to output file..."),await r.writeFile(f,d.styles),c.succeed(`Minified CSS written to: ${f}`),c.succeed("CSS build process completed successfully.")}catch(e){c.fail("CSS build process failed."),console.error("Build error:",e.message),process.exit(1)}})();
+const e=require("fs").promises,s=require("path"),t=require("@babel/core"),{minify:a}=require("terser"),{extractDocFragment:r,writeDoc:n,fileExists:o,readConfigData:i,buildRelativePath:c}=require("../src/lib");async function m({baseOutPath:t,jsFile:a,rootDir:i,customOutDirs:m,dir:l,minifyJS:p,preventMoveJS:f,provider:d,type:y=""}){const b=s.resolve(l,a.path,a.name);if(!o(l,b))return void console.error(`File not found: ${b}`);let D=await e.readFile(b,"utf8");if("stats.js"===a.name&&m?.css){const e=r({section:"CssThemes",doc:D}),t=e.replace(/export const cssThemes\s*=\s*/,""),a=new Function(`return (${t})`)(),n=s.relative(i||"",d.path),o=v({cssThemes:a,cssOutPath:c({from:s.resolve(n),to:s.resolve(l,m.css)})});D=D.replace(e,`export const cssThemes = {\n${o}};\n`)}"cjs"===y&&(D=await u(D,b,!0)),"esm"===y&&(D=await u(D,b)),p&&(D=await h(D));const O=s.relative(i||"",a.path),g=f?b:s.resolve(t,O,a.name);await n(g,D,a.name)}async function l({baseOutPath:t,cssFiles:a,rootDir:r,customOutDirs:i,dir:c}){for(const m of a){const a=(()=>r&&i?.css?s.relative(r,m.path):i?.css?i.css:m.path)(),l=s.resolve(c,m.path,m.name);if(o(c,l)){const r=await e.readFile(l,"utf8");await n(s.resolve(t,a,m.name),r,m.name)}}}function p({baseOutDir:e,type:t="-"}){const a=(()=>{switch(t){case"cjs":return"cjs";case"esm":return"esm";default:return""}})();return s.join(e,a)}async function u(e,s,a=!1){const r=!!a&&"commonjs";return(await t.transformAsync(e,{filename:s,presets:[["@babel/preset-env",{modules:r,target:{node:"current"}}]]})).code}async function h(e){return(await a(e,{compress:{dead_code:!0,drop_console:!1,drop_debugger:!0,keep_classnames:!1,keep_fargs:!0,keep_fnames:!1,keep_infinity:!1},mangle:{toplevel:!1},format:{comments:!1}})).code}function f({themes:e,minifyCss:t}){return e&&Array.isArray(e)&&e.length>0?e.reduce((e,a)=>{const{name:r,stylesPath:n,foreignThemes:o}=a;r&&n&&y(e,{name:t?`${r}.min.css`:`${r}.css`,path:n}),o&&Array.isArray(o)&&o.length>0&&o.forEach(t=>{const a=s.basename(t),r=t.replace(a,"").trim();y(e,{name:a,path:r})})},[]):[]}function d({provider:e,themes:s,preventMoveDTS:t=!1}){const a=s&&s.bvTools?s.reduce((e,{bvTools:s})=>{const{path:a,declarationHelp:r,cssVariables:n,cssClassNames:o,cssMediaQueries:i,cssGlobalStyles:c,availableComponents:m}=s,l=r&&!t;return n&&(y(e,{name:"cssVars.js",path:a}),l&&y(e,{name:"cssVars.d.ts",path:a})),o&&(y(e,{name:"cssClasses.js",path:a}),l&&y(e,{name:"cssClasses.d.ts",path:a})),i&&(y(e,{name:"cssMediaQueries.js",path:a}),l&&y(e,{name:"cssMediaQueries.d.ts",path:a})),c&&(y(e,{name:"cssGlobalStyles.js",path:a}),l&&y(e,{name:"cssGlobalStyles.d.ts",path:a})),m&&(y(e,{name:"cssAvailableComponents.js",path:a}),l&&y(e,{name:"cssAvailableComponents.d.js",path:a})),e},[]):[];return e&&(y(a,{name:`${e.name.toLocaleLowerCase()}.js`,path:e.path}),y(a,{name:"stats.js",path:`${e.path}/stats`}),e.declarationHelp&&!t&&(y(a,{name:`${e.name.toLocaleLowerCase()}.d.ts`,path:e.path}),y(a,{name:"stats.d.ts",path:`${e.path}/stats`}))),a}function v({cssThemes:e,cssOutPath:t}){return Object.entries(e).reduce((e,[a,{foreign:r}])=>{const{before:n,after:o}=r;n&&Array.isArray(n)&&n.length>0&&n.reduce((e,a,r)=>{const n=s.basename(a);return r>0&&(e+=", "),e+`'${t}${n}'`},""),o&&Array.isArray(o)&&o.length>0&&o.reduce((e,a,r)=>{const n=s.basename(a);return r>0&&(e+=", "),e+`'${t}${n}'`},"")},"")}function y(e,s){e.some(e=>e.name===s.name&&e.path===s.path)||e.push(s)}(async()=>{const e=process.cwd(),t=await i(s.resolve(e,"bernova.config.json")),{compilerOptions:a,provider:r,themes:n}=t;a&&r&&n||(console.error("Invalid configuration: Missing compilerOptions, themes or provider"),process.exit(1));const{baseOutDir:o,rootDir:c,minifyCss:u,minifyJS:h,preventMoveJS:v,preventMoveDTS:y,types:b,customOutDirs:D}=a,O=f({themes:n,minifyCss:u}),g=d({provider:r,themes:n,preventMoveDTS:y});if(b&&Array.isArray(b)&&b.length>0)for(const s of b){const t=p({baseOutDir:o,type:s});if(O&&O.length>0&&await l({baseOutPath:t,cssFiles:O,rootDir:c,customOutDirs:D,dir:e}),g&&g.length>0)for(const a of g)await m({baseOutPath:t,jsFile:a,rootDir:c,customOutDirs:D,dir:e,minifyJS:h,preventMoveJS:v,provider:r,type:s})}else{const s=p({baseOutDir:o});if(O&&O.length>0&&await l({baseOutPath:s,cssFiles:O,rootDir:c,customOutDirs:D,dir:e}),g&&g.length>0)for(const t of g)await m({baseOutPath:s,jsFile:t,rootDir:c,customOutDirs:D,dir:e,minifyJS:h,preventMoveJS:v,provider:r})}})();

package/dist/src/app.js

@@ -1 +1 @@
-const e=require("path"),{generateBaseCss:s,compileThemes:o,generateCSS:t,compileConfig:r,writeDoc:i,generateProvider:a,processMediaConfig:l,generateThemeRegister:n,generateCssDoc:c,handlerForeignThemes:d}=require("./lib"),{validatePreviouslyExists:f,processCssWithPostcss:m}=require("./lib/generateCss/helpers"),{compilerTypeValid:p}=require("./constants"),{generateTypesTools:g}=require("./lib/generateTypesTools/generateTypesTools.utils"),{generateTools:u}=require("./lib/generateTools/generateTools.utils");async function y(y){const h=process.cwd(),T={},{default:v}=await import("ora"),C=v("Starting BernovaStyled process...").start(),{themes:D,provider:w}=await r({dir:h});for(const r of D){const{themeCss:a,fonts:v,resetCss:D,bvTools:w,name:b,stylesPath:P,typesTools:S,foreignThemes:$,prefix:q}=o({themeConfig:r,dir:h}),x=await s({fonts:v,resetCss:D,stylesPath:P}),{theme:B,media:E,...F}=a,N=(()=>{switch(y){case p.foundationOnly:return F;case p.componentOnly:return{theme:B,media:E};default:return a}})(),{stylesCss:V,foundationsCss:H,stylesDocs:M,rootDocs:O,globalDocs:R}=await t({source:N,baseCss:x,compilerType:y,prefix:q}),W=P?e.resolve(h,P):e.resolve(h,"styles"),{cssDir:A,cssMinifiedDir:j,oldData:k}=await f({stylesDir:W,compilerType:y,name:b}),z=c({compilerType:y,stylesCss:V,foundationsCss:H,oldData:k}),G=await m(z,!1,null),I=await m(z,!0,null);C.start(`Writing CSS to file for theme: ${b}...`),await i(A,G,"css"),await i(j,I,"css minified"),C.succeed(`CSS written to file for theme: ${b}.`),C.start(`Compiling register for theme: ${b}...`),C.succeed(`Register compiled for theme: ${b}.`),C.start("Verifying types tools..."),S?(C.succeed(`Types tools verified for theme: ${b}.`),await g({dir:h,typesTools:S,mediaConfig:E,stylesDocs:M})):C.succeed(`No types tools found for theme: ${b}.`);const J=l({mediaConfig:E});C.start(`Processing bvTools for theme: ${b}...`),w?(C.succeed(`bvTools found for theme: ${b}.`),await u({bvTools:w,compilerType:y,name:b,dir:h,stylesDir:W,stylesDocs:M,rootDocs:O,globalDocs:R,mediaDocs:J})):C.succeed(`No bvTools found for theme: ${b}.`);const{themeByPosition:K,variablesExtracted:L,classesExtracted:Q}=await d({dir:h,foreignThemes:$});T[b]=n({cssPath:e.resolve(h,W,`${b}.css`),rootDocs:O,stylesDocs:M,globalDocs:R,mediaDocs:J,foreignStyles:Q,foreignVars:L,foreignBeforeFiles:K.before,foreignAfterFiles:K.after})}w&&(C.start("Provider configuration found, generating tools..."),await a({dir:e.resolve(h,w.path),providerDocs:T,declarationHelp:w.declarationHelp,providerName:w.name,compilerType:y}),C.succeed("Provider tools generated successfully."))}module.exports={bernovaStyles:y};
+const e=require("path"),{generateBaseCss:s,compileThemes:o,generateCSS:t,compileConfig:r,writeDoc:i,generateProvider:a,processMediaConfig:l,generateThemeRegister:n,generateCssDoc:c,handlerForeignThemes:d,buildRelativePath:f}=require("./lib"),{validatePreviouslyExists:m,processCssWithPostcss:p}=require("./lib/generateCss/helpers"),{compilerTypeValid:g}=require("./constants"),{generateTypesTools:u}=require("./lib/generateTypesTools/generateTypesTools.utils"),{generateTools:h}=require("./lib/generateTools/generateTools.utils");async function y(y){const T=process.cwd(),v={},{default:D}=await import("ora"),C=D("Starting BernovaStyled process...").start(),{themes:b,provider:w}=await r({dir:T});for(const r of b){const{themeCss:a,fonts:D,resetCss:b,bvTools:$,name:P,stylesPath:S,typesTools:q,foreignThemes:x,prefix:B}=o({themeConfig:r,dir:T}),E=await s({fonts:D,resetCss:b,stylesPath:S}),{theme:F,media:N=[],...R}=a,V=(()=>{switch(y){case g.foundationOnly:return R;case g.componentOnly:return{theme:F,media:N};default:return a}})(),{stylesCss:H,foundationsCss:M,stylesDocs:O,rootDocs:W,globalDocs:j}=await t({source:V,baseCss:E,compilerType:y,prefix:B}),A=S?e.resolve(T,S):e.resolve(T,"styles"),{cssDir:G,cssMinifiedDir:k,oldData:z}=await m({stylesDir:A,compilerType:y,name:P}),I=c({compilerType:y,stylesCss:H,foundationsCss:M,oldData:z}),J=await p(I,!1,null),K=await p(I,!0,null);C.start(`Writing CSS to file for theme: ${P}...`),await i(G,J,"css"),await i(k,K,"css minified"),C.succeed(`CSS written to file for theme: ${P}.`),C.start(`Compiling register for theme: ${P}...`),C.succeed(`Register compiled for theme: ${P}.`),C.start("Verifying types tools..."),q?(C.succeed(`Types tools verified for theme: ${P}.`),await u({dir:T,typesTools:q,mediaConfig:N,stylesDocs:O})):C.succeed(`No types tools found for theme: ${P}.`);const L=N?l({mediaConfig:N}):null;if(C.start(`Processing bvTools for theme: ${P}...`),$?(C.succeed(`bvTools found for theme: ${P}.`),await h({bvTools:$,compilerType:y,name:P,dir:T,stylesDir:A,stylesDocs:O,rootDocs:W,globalDocs:j,mediaDocs:L})):C.succeed(`No bvTools found for theme: ${P}.`),w){C.start(`Generating theme register for theme: ${P}...`);const s=e.resolve(w.path),o=f({from:s,to:e.join(A,`${P}.css`)}),{themeByPosition:t,variablesExtracted:r,classesExtracted:i}=await d({dir:T,providerDir:s,foreignThemes:x});v[P]=n({cssPath:o,rootDocs:W,stylesDocs:O,globalDocs:j,mediaDocs:L,foreignStyles:i,foreignVars:r,foreignBeforeFiles:t.before,foreignAfterFiles:t.after}),C.succeed(`Theme register generated for provider for theme: ${P}`)}}w&&(C.start("Provider configuration found, generating tools..."),await a({dir:e.resolve(T,w.path),providerDocs:v,declarationHelp:w.declarationHelp,providerName:w.name,compilerType:y}),C.succeed("Provider tools generated successfully."))}module.exports={bernovaStyles:y};

package/dist/src/lib/buildRelativePath/buildRelativePath.utils.js

@@ -0,0 +1 @@
+const e=require("path"),n=({from:n,to:i})=>{const a=e.basename(n),l=e.basename(i),r=a.includes(".")&&n.includes(a)?e.dirname(n):e.normalize(n),s=l.includes(".")&&i.includes(l)?e.dirname(i):e.normalize(i),d=e.relative(r,s),o=l.includes(".")?l:"";return e.join(d,o)};module.exports={buildRelativePath:n};

package/dist/src/lib/extractDocFragment/extractDocFragment.utils.js

@@ -1 +1 @@
-const t=({section:t,doc:e})=>{const c=new RegExp(`/\\* ${t} \\*/([\\s\\S]*?)/\\* ${t} \\*/`),o=e.match(c);return o?o[1].trim():""};module.exports={extractDocFragment:t};
+const t=({section:t,doc:e,endSection:c})=>{const n=new RegExp(`/\\* ${t} \\*/([\\s\\S]*?)/\\* ${c||t} \\*/`),o=e.match(n);return o?o[1].trim():""};module.exports={extractDocFragment:t};

package/dist/src/lib/generateCss/helpers/utils/validatePreviouslyExists.utils.js

@@ -1 +1 @@
-const e=require("fs").promises,r=require("path"),{compilerTypeValid:t}=require("../../../../constants"),{extractDocFragment:s}=require("../../../extractDocFragment/extractDocFragment.utils"),a=async({stylesDir:a,compilerType:c,name:i})=>{const n={cssDir:r.resolve(a,`${i}.css`),cssMinifiedDir:r.resolve(a,`${i}.min.css`),oldData:""};try{await e.access(a);try{if(await e.access(n.cssDir),!c||c===t.full)return n;const r=await e.readFile(n.cssDir,"utf8"),a=(()=>{switch(c){case t.foundationOnly:return"Components";case t.componentOnly:return"Foundations";default:return""}})();n.oldData=s({section:a,doc:r})}catch{return n}}catch{return await e.mkdir(a,{recursive:!0}),n}return n};module.exports={validatePreviouslyExists:a};
+const e=require("fs").promises,r=require("path"),{compilerTypeValid:t}=require("../../../../constants"),{extractDocFragment:s}=require("../../../extractDocFragment/extractDocFragment.utils"),c=async({stylesDir:c,compilerType:a,name:i})=>{const n={cssDir:r.resolve(c,`${i}.css`),cssMinifiedDir:r.resolve(c,`${i}.min.css`),oldData:""};try{await e.access(c);try{if(await e.access(n.cssDir),!a||a===t.full)return n;const r=await e.readFile(n.cssDir,"utf8"),c=(()=>{switch(a){case t.foundationOnly:return"COMPONENTS";case t.componentOnly:return"FOUNDATIONS";default:return""}})();n.oldData=s({section:`=== BERNOVA ${c} ===`,endSection:`=== END ${c} ===`,doc:r})}catch{return n}}catch{return await e.mkdir(c,{recursive:!0}),n}return n};module.exports={validatePreviouslyExists:c};

package/dist/src/lib/generateCssDoc/generateCssDoc.util.js

@@ -1 +1 @@
-const{compilerTypeValid:n}=require("../../constants"),o=({compilerType:o,stylesCss:e,foundationsCss:s,oldData:N=""})=>`${o!==n.componentOnly?`/* === BERNOVA FOUNDATIONS === */\n${s}\n/* === END FOUNDATIONS === */\n\n`:N}${o!==n.foundationOnly?`/* === BERNOVA COMPONENTS === */\n${e}\n/* === END COMPONENTS === */\n`:N}`;module.exports={generateCssDoc:o};
+const{compilerTypeValid:n}=require("../../constants"),o=({compilerType:o,stylesCss:e,foundationsCss:s,oldData:N=""})=>`${o!==n.componentOnly?`/* === BERNOVA FOUNDATIONS === */\n${s}/* === END FOUNDATIONS === */\n\n`:N}${o!==n.foundationOnly?`/* === BERNOVA COMPONENTS === */\n${e}/* === END COMPONENTS === */\n`:N}`;module.exports={generateCssDoc:o};

package/dist/src/lib/generateProvider/template/providerTemplate.js

@@ -1 +1 @@
-import{cssThemes as e,cssClasses as t,cssVars as s,cssAvailableComponents as i,cssGlobalStyles as n,cssMediaQueries as h}from"./stats/stats";export class $_Provider_${#e;#t;#s;#i;#n;#h;#r;#l;#m;#o=(e,t)=>{if("undefined"==typeof document)return;let s=document.getElementById(t);s||(s=document.createElement("link"),s.id=t,s.rel="stylesheet",document.head.appendChild(s)),s.href=e};#a=e=>{const{css:t,foreign:s}=e,i=s?.before||[],n=s?.after||[];i.forEach((e,t)=>{const s=`${this.#l}-foreign-before-${t+1}`;this.#o(e,s)}),this.#o(t,this.#l),n.forEach((e,t)=>{const s=`${this.#l}-foreign-after-${t+1}`;this.#o(e,s)})};#c=()=>{"undefined"!=typeof document&&document.querySelectorAll(`link[id^="${this.#l}"]`).forEach(e=>e.remove())};constructor({linkId:r,jsInCss:l}={}){this.#t=e,this.#s=s,this.#i=t,this.#n=i,this.#h=n,this.#r=h,this.#l=r||"kb-styled-link",this.#e=Object.keys(e)[0],this.#m=!!l,this.getComponentStyles=this.getComponentStyles.bind(this),"undefined"!=typeof window&&"undefined"!=typeof document&&this.#m&&(this.#c(),this.#a(this.#t[this.#e]))}get themeSelected(){return this.#e}set themeSelected(e){if(!(e in this.#t))throw new Error(`${e} is not exists`);this.#m&&(this.#c(),this.#a(this.#t[e])),this.#e=e}get allThemesNames(){return Object.keys(this.#t)}get allThemes(){return this.#t}get variables(){return this.#s[this.#e]}get classNames(){return this.#i[this.#e]}get components(){return this.#n[this.#e]}get globalStyles(){return this.#h[this.#e]}get mediaQueries(){return this.#r[this.#e]}getComponentStyles({variant:e,component:t,additionalClassNames:s}){const i=this.#i[this.#e][t.toLocaleUpperCase()];if(!i)return{};const n={},h=!!e&&`$_${e.toLocaleLowerCase().replace(/-/g,"_")}`;if(h&&h in i){const e=i[h];Object.entries(e).forEach(([e,t])=>{e in n||(n[e]=t)})}return Object.entries(i).forEach(([e,t])=>{e.startsWith("$_")||e in n||(n[e]=t)}),s&&Object.keys(s).length&&Object.entries(s).forEach(([e,t])=>{e in n||(n[e]=""),n[e]+=` ${t}`}),n}}
+import{cssThemes as e,cssClasses as t,cssVars as s,cssAvailableComponents as i,cssGlobalStyles as n,cssMediaQueries as h}from"./stats/stats";export class $_Provider_${#e;#t;#s;#i;#n;#h;#r;#l;#m;#o=(e,t)=>{if("undefined"==typeof document)return;let s=document.getElementById(t);s||(s=document.createElement("link"),s.id=t,s.rel="stylesheet",document.head.appendChild(s));const i=new URL(e,import.meta.url).href;s.href=i};#a=e=>{const{css:t,foreign:s}=e,i=s?.before||[],n=s?.after||[];i.forEach((e,t)=>{const s=`${this.#l}-foreign-before-${t+1}`;this.#o(e,s)}),this.#o(t,this.#l),n.forEach((e,t)=>{const s=`${this.#l}-foreign-after-${t+1}`;this.#o(e,s)})};#c=()=>{"undefined"!=typeof document&&document.querySelectorAll(`link[id^="${this.#l}"]`).forEach(e=>e.remove())};constructor({linkId:r,jsInCss:l}={}){this.#t=e,this.#s=s,this.#i=t,this.#n=i,this.#h=n,this.#r=h,this.#l=r||"kb-styled-link",this.#e=Object.keys(e)[0],this.#m=!!l,this.getComponentStyles=this.getComponentStyles.bind(this),"undefined"!=typeof window&&"undefined"!=typeof document&&this.#m&&(this.#c(),this.#a(this.#t[this.#e]))}get themeSelected(){return this.#e}set themeSelected(e){if(!(e in this.#t))throw new Error(`${e} is not exists`);this.#m&&(this.#c(),this.#a(this.#t[e])),this.#e=e}get allThemesNames(){return Object.keys(this.#t)}get allThemes(){return this.#t}get variables(){return this.#s[this.#e]}get classNames(){return this.#i[this.#e]}get components(){return this.#n[this.#e]}get globalStyles(){return this.#h[this.#e]}get mediaQueries(){return this.#r[this.#e]}getComponentStyles({variant:e,component:t,additionalClassNames:s}){const i=this.#i[this.#e][t.toLocaleUpperCase()];if(!i)return{};const n={},h=!!e&&`$_${e.toLocaleLowerCase().replace(/-/g,"_")}`;if(h&&h in i){const e=i[h];Object.entries(e).forEach(([e,t])=>{e in n||(n[e]=t)})}return Object.entries(i).forEach(([e,t])=>{e.startsWith("$_")||e in n||(n[e]=t)}),s&&Object.keys(s).length&&Object.entries(s).forEach(([e,t])=>{e in n||(n[e]=""),n[e]+=` ${t}`}),n}}

package/dist/src/lib/handlerForeignThemes/handlerForeignThemes.utils.js

@@ -1 +1 @@
-const e=require("fs").promises,r=require("path"),{fileExists:t}=require("../fileExists/fileExists.utils"),{simplifyName:s}=require("../simplifyName/simplifyName.utils"),i=async({dir:i,foreignThemes:a})=>{const n={after:"",before:""},o={doc:"",declare:""},c={doc:"",declare:""},l=new Set;if(a&&a.length>0)for(const{path:d,position:f,name:m}of a){if(!t(i,d))continue;const a=s(m).toLocaleUpperCase(),$=r.resolve(i,d),h=await e.readFile($,"utf-8");n[f]+=0===n[f].length?`'${$}'`:`, '${$}'`;const p=h.match(/--[a-zA-Z0-9-_]+:\s*[^;]+;/g);p&&[...new Set(p)].forEach(e=>{const[r]=e.split(":").map(e=>e.trim()),t=s(r);l.has(t)||(l.add(t),c.doc+=`  ${t}: 'var(${r})',\n`,c.declare+=`  ${t}: string; \n`)});const u=h.match(/\.[a-zA-Z0-9_-]+/g);if(u){const{doc:e,declare:r}=[...new Set(u)].reduce((e,r)=>{const t=r.slice(1),i=s(t);return e.doc+=`    ${i}: '${t}',\n`,e.declare+=`    ${i}: string; \n`,e},{doc:"",declare:""});o.doc+=`  ${a}: {\n${e}  },\n`,o.declare+=`  ${a}: {\n${r}  },\n`}}return{themeByPosition:{after:`[${n.after}]`,before:`[${n.before}]`},variablesExtracted:c,classesExtracted:o}};module.exports={handlerForeignThemes:i};
+const e=require("fs").promises,t=require("path"),{fileExists:r}=require("../fileExists/fileExists.utils"),{simplifyName:i}=require("../simplifyName/simplifyName.utils"),{buildRelativePath:a}=require("../buildRelativePath/buildRelativePath.utils"),s=async({dir:s,providerDir:o,foreignThemes:n})=>{const c={after:"",before:""},l={doc:"",declare:""},d={doc:"",declare:""},f=new Set;if(n&&n.length>0)for(const{path:m,position:u,name:h}of n){if(!r(s,m))continue;const n=i(h).toLocaleUpperCase(),$=t.resolve(s,m),p=a({from:o,to:$}),g=await e.readFile($,"utf-8");c[u]+=0===c[u].length?`'${p}'`:`, '${p}'`;const b=g.match(/--[a-zA-Z0-9-_]+:\s*[^;]+;/g);b&&[...new Set(b)].forEach(e=>{const[t]=e.split(":").map(e=>e.trim()),r=i(t);f.has(r)||(f.add(r),d.doc+=`  ${r}: 'var(${t})',\n`,d.declare+=`  ${r}: string; \n`)});const v=g.match(/\.[a-zA-Z0-9_-]+/g);if(v){const{doc:e,declare:t}=[...new Set(v)].reduce((e,t)=>{const r=t.slice(1),a=i(r);return e.doc+=`    ${a}: '${r}',\n`,e.declare+=`    ${a}: string; \n`,e},{doc:"",declare:""});l.doc+=`  ${n}: {\n${e}  },\n`,l.declare+=`  ${n}: {\n${t}  },\n`}}return{themeByPosition:{after:`[${c.after}]`,before:`[${c.before}]`},variablesExtracted:d,classesExtracted:l}};module.exports={handlerForeignThemes:s};

package/dist/src/lib/index.js

@@ -1 +1 @@
-const{generateCSS:e}=require("./generateCss/generateCSS.utils.js"),{readConfigData:r,readThemeData:s}=require("./readFile/readFile.utils.js"),{writeDoc:i}=require("./writeDoc/writeDoc.utils.js"),{generateBaseCss:t}=require("./generateBaseCss/generateBaseCss.utils.js"),{copyLocalFonts:a}=require("./copyLocalFonts/copyLocalFonts.utils.js"),{generateCssFonts:o}=require("./copyLocalFonts/generateCssFonts.utils.js"),{generateProvider:n}=require("./generateProvider/generateProvider.utils.js"),{compileThemes:g}=require("./compileThemes.js"),{compileConfig:l}=require("./compileConfig.js"),{typingStyles:c}=require("./typingStyles"),{extractDocFragment:m}=require("./extractDocFragment/extractDocFragment.utils.js"),{fileExists:u}=require("./fileExists/fileExists.utils.js"),{handlerForeignThemes:C}=require("./handlerForeignThemes/handlerForeignThemes.utils.js"),{simplifyName:p}=require("./simplifyName/simplifyName.utils.js"),{processMediaConfig:d}=require("./processMediaConfig/processMediaConfig.util.js"),{generateThemeRegister:F}=require("./generateThemeRegister/generateThemeRegister.utils.js"),{generateCssDoc:f}=require("./generateCssDoc/generateCssDoc.util.js");module.exports={generateCSS:e,readConfigData:r,readThemeData:s,writeDoc:i,generateBaseCss:t,copyLocalFonts:a,generateCssFonts:o,generateProvider:n,compileThemes:g,compileConfig:l,typingStyles:c,extractDocFragment:m,handlerForeignThemes:C,fileExists:u,simplifyName:p,processMediaConfig:d,generateThemeRegister:F,generateCssDoc:f};
+const{generateCSS:e}=require("./generateCss/generateCSS.utils.js"),{readConfigData:r,readThemeData:s}=require("./readFile/readFile.utils.js"),{writeDoc:i}=require("./writeDoc/writeDoc.utils.js"),{generateBaseCss:t}=require("./generateBaseCss/generateBaseCss.utils.js"),{copyLocalFonts:a}=require("./copyLocalFonts/copyLocalFonts.utils.js"),{generateCssFonts:o}=require("./copyLocalFonts/generateCssFonts.utils.js"),{generateProvider:n}=require("./generateProvider/generateProvider.utils.js"),{compileThemes:l}=require("./compileThemes.js"),{compileConfig:g}=require("./compileConfig.js"),{typingStyles:u}=require("./typingStyles"),{extractDocFragment:c}=require("./extractDocFragment/extractDocFragment.utils.js"),{fileExists:m}=require("./fileExists/fileExists.utils.js"),{handlerForeignThemes:C}=require("./handlerForeignThemes/handlerForeignThemes.utils.js"),{simplifyName:d}=require("./simplifyName/simplifyName.utils.js"),{processMediaConfig:p}=require("./processMediaConfig/processMediaConfig.util.js"),{buildRelativePath:h}=require("./buildRelativePath/buildRelativePath.utils.js"),{generateThemeRegister:q}=require("./generateThemeRegister/generateThemeRegister.utils.js"),{generateCssDoc:F}=require("./generateCssDoc/generateCssDoc.util.js");module.exports={generateCSS:e,readConfigData:r,readThemeData:s,writeDoc:i,generateBaseCss:t,copyLocalFonts:a,generateCssFonts:o,generateProvider:n,compileThemes:l,compileConfig:g,typingStyles:u,extractDocFragment:c,handlerForeignThemes:C,fileExists:m,simplifyName:d,processMediaConfig:p,buildRelativePath:h,generateThemeRegister:q,generateCssDoc:F};

package/dist/src/lib/readFile/readFile.utils.js

@@ -1 +1 @@
-const e=require("fs").promises,r=require("path"),{register:o}=require("ts-node");o({compilerOptions:{module:"commonjs",target:"es6",moduleResolution:"node",esModuleInterop:!0,allowJs:!0,skipLibCheck:!0}});const t=async r=>{try{const o=await e.readFile(r,"utf8"),t=JSON.parse(o);if(!t||"object"!=typeof t)throw new Error("Configuration file must contain a valid JSON object");return t}catch(e){if("ENOENT"===e.code)throw new Error(`Configuration file not found: ${r}`);if(e instanceof SyntaxError)throw new Error(`Invalid JSON in configuration file: ${e.message}`);throw console.error(`Error reading config file at ${r}:`,e.message),e}},n=e=>{const o={};return Object.entries(e).forEach(([e,t])=>{try{const{path:n,name:a}=t;if(!n||!a)throw new Error(`Invalid configuration for ${e}: missing path or name`);const i=r.resolve(n);delete require.cache[i];const module=require(i);if(!(a in module))throw new Error(`Export "${a}" not found in module ${n}`);o[e]=module[a]}catch(r){throw console.error(`Failed to load theme data for ${e}:`,r.message),new Error(`Cannot load theme data for "${e}": ${r.message}`)}}),o};module.exports={readConfigData:t,readThemeData:n};
+const e=require("fs").promises,o=require("path"),{register:r}=require("ts-node");r({compilerOptions:{module:"commonjs",target:"es6",moduleResolution:"node",esModuleInterop:!0,allowJs:!0,skipLibCheck:!0,allowSyntheticDefaultImports:!0,checkJs:!1}});const t=async o=>{try{const r=await e.readFile(o,"utf8"),t=JSON.parse(r);if(!t||"object"!=typeof t)throw new Error("Configuration file must contain a valid JSON object");return t}catch(e){if("ENOENT"===e.code)throw new Error(`Configuration file not found: ${o}`);if(e instanceof SyntaxError)throw new Error(`Invalid JSON in configuration file: ${e.message}`);throw console.error(`Error reading config file at ${o}:`,e.message),e}},n=e=>{const r={};return Object.entries(e).forEach(([e,t])=>{try{const{path:n,name:a}=t;if(!n||!a)throw new Error(`Invalid configuration for ${e}: missing path or name`);const i=o.resolve(n);delete require.cache[i];const module=require(i);if(!(a in module))throw new Error(`Export "${a}" not found in module ${n}`);r[e]=module[a]}catch(o){throw console.error(`Failed to load theme data for ${e}:`,o.message),new Error(`Cannot load theme data for "${e}": ${o.message}`)}}),r};module.exports={readConfigData:t,readThemeData:n};

package/dist/types/lib/buildRelativePath/buildRelativePath.utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Builds a relative path from one location to another, handling both file paths and/or directory paths
+ *
+ * @param {object} params
+ * @param {string} params.from - The origin path (can be a file path or directory path)
+ * @param {string} params.to - The destination path (can be a file path or directory path)
+ * @returns {string} - The relative path from 'from' to 'to', including the filename if 'to' is a file path
+ */
+export function buildRelativePath({ from, to }: {
+    from: string;
+    to: string;
+}): string;

package/dist/types/lib/extractDocFragment/extractDocFragment.utils.d.ts

@@ -8,8 +8,10 @@
  * Extracts a specific section from CSS documentation using regex matching
  * Looks for content between matching comment markers
  *
- * @param {string} section - Name of the section to extract
- * @param {string} doc - CSS document content to search in
+ * @param {object}
+ * @param {string} param.section - Name of the section to extract
+ * @param {string} param.doc - CSS document content to search in
+ * @param {string} param.endSection - Optional different end section name
  * @returns {string} Extracted section content (trimmed) or empty string if not found
  */
-export function extractDocFragment({ section, doc }: string): string;
+export function extractDocFragment({ section, doc, endSection }: object): string;

package/dist/types/lib/handlerForeignThemes/handlerForeignThemes.utils.d.ts

@@ -3,10 +3,11 @@
  * Extracts CSS variables and class names from external stylesheets
  *
  * @param {string} dir - Base directory for resolving theme file paths
+ * @param {string} providerDir - Directory of the provider for relative path calculation
  * @param {Array} foreignThemes - Array of foreign theme configurations
  * @param {string} foreignThemes[].path - Relative path to the theme CSS file
  * @param {string} foreignThemes[].position - Where to include ('before' or 'after')
  * @param {string} foreignThemes[].name - Theme identifier name
  * @returns {Object} Processed theme data with variables, classes, and file paths
  */
-export function handlerForeignThemes({ dir, foreignThemes }: string): any;
+export function handlerForeignThemes({ dir, providerDir, foreignThemes }: string): any;

package/dist/types/lib/index.d.ts

@@ -13,6 +13,7 @@ import { handlerForeignThemes } from './handlerForeignThemes/handlerForeignTheme
 import { fileExists } from './fileExists/fileExists.utils.js';
 import { simplifyName } from './simplifyName/simplifyName.utils.js';
 import { processMediaConfig } from './processMediaConfig/processMediaConfig.util.js';
+import { buildRelativePath } from './buildRelativePath/buildRelativePath.utils.js';
 import { generateThemeRegister } from './generateThemeRegister/generateThemeRegister.utils.js';
 import { generateCssDoc } from './generateCssDoc/generateCssDoc.util.js';
-export { generateCSS, readConfigData, readThemeData, writeDoc, generateBaseCss, copyLocalFonts, generateCssFonts, generateProvider, compileThemes, compileConfig, typingStyles, extractDocFragment, handlerForeignThemes, fileExists, simplifyName, processMediaConfig, generateThemeRegister, generateCssDoc };
+export { generateCSS, readConfigData, readThemeData, writeDoc, generateBaseCss, copyLocalFonts, generateCssFonts, generateProvider, compileThemes, compileConfig, typingStyles, extractDocFragment, handlerForeignThemes, fileExists, simplifyName, processMediaConfig, buildRelativePath, generateThemeRegister, generateCssDoc };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bernova",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "description": "The best way to write CSS with Javascript syntax",
   "main": "./dist/src/index.js",
   "types": "./dist/src/index.d.ts",
@@ -78,7 +78,11 @@
     "postcss-font-magician": "^4.0.0",
     "postcss-preset-env": "^10.4.0",
     "ts-node": "^10.9.2",
-    "typescript": "*"
+    "typescript": "*",
+    "terser": "^5.44.1",
+    "tsconfig-paths": "^4.2.0",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.3",

package/src/app.js

@@ -10,6 +10,7 @@ const {
   generateThemeRegister,
   generateCssDoc,
   handlerForeignThemes,
+  buildRelativePath,
 } = require('./lib');
 const {
   validatePreviouslyExists,
@@ -59,7 +60,7 @@ async function bernovaStyles(compilerType) {
 
     const baseCss = await generateBaseCss({ fonts, resetCss, stylesPath });
 
-    const { theme, media, ...withoutTheme } = themeCss;
+    const { theme, media = [], ...withoutTheme } = themeCss;
     const source = (() => {
       switch (compilerType) {
         case compilerTypeValid.foundationOnly:
@@ -122,7 +123,7 @@ async function bernovaStyles(compilerType) {
       spinner.succeed(`No types tools found for theme: ${name}.`);
     }
 
-    const mediaDocs = processMediaConfig({ mediaConfig: media });
+    const mediaDocs = media ? processMediaConfig({ mediaConfig: media }) : null;
 
     // Generate development tools if configured (bvTools)
     spinner.start(`Processing bvTools for theme: ${name}...`);
@@ -143,20 +144,30 @@ async function bernovaStyles(compilerType) {
       spinner.succeed(`No bvTools found for theme: ${name}.`);
     }
 
-    const { themeByPosition, variablesExtracted, classesExtracted } =
-      await handlerForeignThemes({ dir, foreignThemes });
-
-    themeRegister[name] = generateThemeRegister({
-      cssPath: path.resolve(dir, stylesDir, `${name}.css`),
-      rootDocs,
-      stylesDocs,
-      globalDocs,
-      mediaDocs,
-      foreignStyles: classesExtracted,
-      foreignVars: variablesExtracted,
-      foreignBeforeFiles: themeByPosition.before,
-      foreignAfterFiles: themeByPosition.after,
-    });
+    if (provider) {
+      spinner.start(`Generating theme register for theme: ${name}...`);
+      // build a relative path to CSS file from provider
+      const providerDir = path.resolve(provider.path);
+      const cssPath = buildRelativePath({
+        from: providerDir,
+        to: path.join(stylesDir, `${name}.css`),
+      })
+      const { themeByPosition, variablesExtracted, classesExtracted } =
+        await handlerForeignThemes({ dir, providerDir, foreignThemes });
+      
+      themeRegister[name] = generateThemeRegister({
+        cssPath,
+        rootDocs,
+        stylesDocs,
+        globalDocs,
+        mediaDocs,
+        foreignStyles: classesExtracted,
+        foreignVars: variablesExtracted,
+        foreignBeforeFiles: themeByPosition.before,
+        foreignAfterFiles: themeByPosition.after,
+      });
+      spinner.succeed(`Theme register generated for provider for theme: ${name}`);
+    }
   }
 
   // Generate React/framework provider if configured

package/src/lib/buildRelativePath/buildRelativePath.utils.js

@@ -0,0 +1,30 @@
+const path = require('path');
+/**
+ * Builds a relative path from one location to another, handling both file paths and/or directory paths
+ * 
+ * @param {object} params 
+ * @param {string} params.from - The origin path (can be a file path or directory path)
+ * @param {string} params.to - The destination path (can be a file path or directory path)
+ * @returns {string} - The relative path from 'from' to 'to', including the filename if 'to' is a file path
+ */
+const buildRelativePath = ({ from , to }) => {
+  //* file names
+  const fromFileName = path.basename(from);
+  const toFileName = path.basename(to);
+
+  const fromDir =
+    fromFileName.includes('.') && from.includes(fromFileName)
+      ? path.dirname(from)
+      : path.normalize(from);
+  const toDir =
+    toFileName.includes('.') && to.includes(toFileName)
+      ? path.dirname(to)
+      : path.normalize(to);
+
+  const relativePath = path.relative(fromDir, toDir);
+  const fileName = toFileName.includes('.') ? toFileName : '';
+
+  return path.join(relativePath, fileName);
+}
+
+module.exports = { buildRelativePath };

package/src/lib/extractDocFragment/extractDocFragment.utils.js

@@ -9,15 +9,17 @@
  * Extracts a specific section from CSS documentation using regex matching
  * Looks for content between matching comment markers
  *
- * @param {string} section - Name of the section to extract
- * @param {string} doc - CSS document content to search in
+ * @param {object}
+ * @param {string} param.section - Name of the section to extract
+ * @param {string} param.doc - CSS document content to search in
+ * @param {string} param.endSection - Optional different end section name
  * @returns {string} Extracted section content (trimmed) or empty string if not found
  */
-const extractDocFragment = ({ section, doc }) => {
+const extractDocFragment = ({ section, doc, endSection }) => {
+  const start = section;
+  const end = endSection || section;
   // Create regex pattern to match section markers
-  const matcher = new RegExp(
-    `/\\* ${section} \\*/([\\s\\S]*?)/\\* ${section} \\*/`
-  );
+  const matcher = new RegExp(`/\\* ${start} \\*/([\\s\\S]*?)/\\* ${end} \\*/`);
   const match = doc.match(matcher);
   return match ? match[1].trim() : '';
 };

package/src/lib/generateCss/helpers/utils/validatePreviouslyExists.utils.js

@@ -39,14 +39,18 @@ const validatePreviouslyExists = async ({ stylesDir, compilerType, name }) => {
       const section = (() => {
         switch (compilerType) {
           case compilerTypeValid.foundationOnly:
-            return 'Components';
+            return 'COMPONENTS';
           case compilerTypeValid.componentOnly:
-            return 'Foundations';
+            return 'FOUNDATIONS';
           default:
             return '';
         }
       })();
-      dirs.oldData = extractDocFragment({ section, doc: oldCss });
+      dirs.oldData = extractDocFragment({
+        section: `=== BERNOVA ${section} ===`,
+        endSection: `=== END ${section} ===`,
+        doc: oldCss
+      });
     } catch {
       return dirs;
     }

package/src/lib/generateCssDoc/generateCssDoc.util.js

@@ -31,12 +31,12 @@ const generateCssDoc = ({
 
   // Generate foundations section (CSS variables, reset, base styles)
   const foundations = createFoundations
-    ? `/* === BERNOVA FOUNDATIONS === */\n${foundationsCss}\n/* === END FOUNDATIONS === */\n\n`
+    ? `/* === BERNOVA FOUNDATIONS === */\n${foundationsCss}/* === END FOUNDATIONS === */\n\n`
     : oldData;
 
   // Generate components section (component styles, utilities, media queries)
   const components = createComponents
-    ? `/* === BERNOVA COMPONENTS === */\n${stylesCss}\n/* === END COMPONENTS === */\n`
+    ? `/* === BERNOVA COMPONENTS === */\n${stylesCss}/* === END COMPONENTS === */\n`
     : oldData;
 
   // Combine sections into final CSS document

package/src/lib/generateProvider/template/providerTemplate.js

@@ -26,7 +26,8 @@ export class $_Provider_$ {
       linkElement.rel = 'stylesheet';
       document.head.appendChild(linkElement);
     }
-    linkElement.href = url;
+    const href = new URL(url, import.meta.url).href;
+    linkElement.href = href;
   };
   #handlerThemes = (data) => {
     const { css, foreign } = data;

package/src/lib/handlerForeignThemes/handlerForeignThemes.utils.js

@@ -10,19 +10,21 @@ const fs = require('fs').promises;
 const path = require('path');
 const { fileExists } = require('../fileExists/fileExists.utils');
 const { simplifyName } = require('../simplifyName/simplifyName.utils');
+const { buildRelativePath } = require('../buildRelativePath/buildRelativePath.utils');
 
 /**
  * Processes and integrates foreign CSS theme files into Bernova compilation
  * Extracts CSS variables and class names from external stylesheets
  *
  * @param {string} dir - Base directory for resolving theme file paths
+ * @param {string} providerDir - Directory of the provider for relative path calculation
  * @param {Array} foreignThemes - Array of foreign theme configurations
  * @param {string} foreignThemes[].path - Relative path to the theme CSS file
  * @param {string} foreignThemes[].position - Where to include ('before' or 'after')
  * @param {string} foreignThemes[].name - Theme identifier name
  * @returns {Object} Processed theme data with variables, classes, and file paths
  */
-const handlerForeignThemes = async ({ dir, foreignThemes }) => {
+const handlerForeignThemes = async ({ dir, providerDir, foreignThemes }) => {
   // Initialize data structures for organizing theme content
   const themeByPosition = { after: '', before: '' }; // File paths by position
   const classesExtracted = { doc: '', declare: '' }; // CSS class documentation
@@ -36,12 +38,18 @@ const handlerForeignThemes = async ({ dir, foreignThemes }) => {
 
       // Generate normalized theme name
       const themeName = simplifyName(name).toLocaleUpperCase();
-
-      // Resolve absolute path to theme file
-      const themeRoute = path.resolve(dir, themePath);
+      
+      // Build absolute path to the theme CSS file
+      const themePathAbsolute = path.resolve(dir, themePath);
+      
+      // build a relative path to CSS file from provider location
+      const themeRoute = buildRelativePath({
+        from: providerDir,
+        to: themePathAbsolute
+      });
 
       // Read and parse theme CSS content
-      const data = await fs.readFile(themeRoute, 'utf-8');
+      const data = await fs.readFile(themePathAbsolute, 'utf-8');
       //* save the route of the file read;
       // themeByPosition[position] +=
       //   idx === 0 ? `'${themeRoute}'` : `, '${themeRoute}'`;

package/src/lib/index.js

@@ -32,6 +32,7 @@ const { simplifyName } = require('./simplifyName/simplifyName.utils.js');
 const {
   processMediaConfig,
 } = require('./processMediaConfig/processMediaConfig.util.js');
+const { buildRelativePath } = require('./buildRelativePath/buildRelativePath.utils.js');
 //* register
 const {
   generateThemeRegister,
@@ -56,6 +57,7 @@ module.exports = {
   fileExists,
   simplifyName,
   processMediaConfig,
+  buildRelativePath,
   generateThemeRegister,
   generateCssDoc,
 };

package/src/lib/readFile/readFile.utils.js

@@ -18,6 +18,8 @@ register({
     esModuleInterop: true,
     allowJs: true,
     skipLibCheck: true, // Skip type checking for faster compilation
+    allowSyntheticDefaultImports: true,
+    checkJs: false
   },
 });