bernova 1.2.2 → 1.3.1

package/CHANGELOG.md

@@ -5,6 +5,18 @@ 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).
 
+## [1.3.1] - 2026-01-21
+
+### Patch
+
+- **prevent minify provider**: Prevent minify providerTemplate.js file
+
+## [1.3.0] - 2026-01-21
+
+### New Features
+
+- **Added --embed-css flag**: Added the function for embedded styles.
+
 ## [1.2.2] - 2026-01-16
 
 ### Fixed

package/README.md

@@ -1854,6 +1854,8 @@ When publishing our projects, depending of the packager configuration, it is nec
  - `"provider"`: Custom output path for provider file
  - `"tools"`: Custom output path for tools files (cssVars, cssClasses, etc)
 
+- **embedCss**: When set to `'true'`, instead of generating a static CSS file, the styles generated by Bernova will be embedded.
+
  ### Overwrite or set a single customOutDirs
 
 You may need to run the bv-build script in multiple outputs, and the bernova.config.json file configuration only supports one path. In these cases, you can use flags to specify the output path for the specific case.
@@ -1896,4 +1898,7 @@ npx bv-build --types none
 
 # Prevent process the js ad dts files
 npx bv-build --prevent-process-js
+
+# Embed styles
+npx bv-build --embed-css
 ```

package/dist/bin/buildstyle.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-const e=require("fs").promises,s=require("path"),t=require("@babel/core"),{minify:r}=require("terser"),{extractDocFragment:a,writeDoc:o,fileExists:n,readConfigData:i,buildRelativePath:c}=require("../src/lib");async function p({baseOutPath:t,jsFile:r,rootDir:i,customOutDirs:p,dir:m,minifyJS:l,preventMoveJS:d,provider:v,type:y=""}){const b=r.name.endsWith(".d.ts"),D=s.resolve(m,r.path,r.name);if(!n(m,D))return void console.error(`File not found: ${D}`);let g=await e.readFile(D,"utf8");if("stats.js"===r.name&&p?.css){const e=a({section:"CssThemes",doc:g}),t=e.replace(/export const cssThemes\s*=\s*/,""),r=new Function(`return (${t})`)(),o=s.relative(i||"",v.path),n=f({cssThemes:r,cssOutPath:c({from:s.resolve(o),to:s.resolve(m,p.css)})});g=g.replace(e,`export const cssThemes = {\n${n}};\n`)}"cjs"!==y||b||(g=await u(g,D,!0)),"esm"!==y||b||(g=await u(g,D)),l&&!b&&(g=await h(g));const O=s.relative(i||"",r.path),j=d?D:s.resolve(t,O,r.name);await o(j,g,r.name)}async function m({baseOutPath:t,cssFiles:r,rootDir:a,customOutDirs:i,dir:c}){for(const p of r){const r=(()=>a&&!i?.css?s.relative(a,p.path):i?.css?i.css:p.path)(),m=s.resolve(c,p.path,p.name);if(n(c,m)){const a=await e.readFile(m,"utf8");await o(s.resolve(t,r,p.name),a,p.name.replace(".min",""))}}}function l({baseOutDir:e,type:t="-"}){const r=(()=>{switch(t){case"cjs":return"cjs";case"esm":return"esm";default:return""}})();return s.join(e,r)}async function u(e,s,r=!1){const a=!!r&&"commonjs";return(await t.transformAsync(e,{filename:s,presets:[["@babel/preset-env",{modules:a,targets:{node:"current"}}]]})).code}async function h(e){return(await r(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 d({themes:e,minifyCss:t}){return e&&Array.isArray(e)&&e.length>0?e.reduce((e,r)=>{const{name:a,stylesPath:o,foreignThemes:n}=r;return a&&o&&y(e,{name:t?`${a}.min.css`:`${a}.css`,path:o}),n&&Array.isArray(n)&&n.length>0&&n.forEach(t=>{const r=s.basename(t),a=t.replace(r,"").trim();y(e,{name:r,path:a})}),e},[]):[]}function v({provider:e,themes:s,preventMoveDTS:t=!1}){const r=s&&s.bvTools?s.reduce((e,{bvTools:s})=>{const{path:r,declarationHelp:a,cssVariables:o,cssClassNames:n,cssMediaQueries:i,cssGlobalStyles:c,availableComponents:p}=s,m=a&&!t;return o&&(y(e,{name:"cssVars.js",path:r}),m&&y(e,{name:"cssVars.d.ts",path:r})),n&&(y(e,{name:"cssClasses.js",path:r}),m&&y(e,{name:"cssClasses.d.ts",path:r})),i&&(y(e,{name:"cssMediaQueries.js",path:r}),m&&y(e,{name:"cssMediaQueries.d.ts",path:r})),c&&(y(e,{name:"cssGlobalStyles.js",path:r}),m&&y(e,{name:"cssGlobalStyles.d.ts",path:r})),p&&(y(e,{name:"cssAvailableComponents.js",path:r}),m&&y(e,{name:"cssAvailableComponents.d.js",path:r})),e},[]):[];return e&&(y(r,{name:`${e.name.toLocaleLowerCase()}.js`,path:e.path}),y(r,{name:"stats.js",path:`${e.path}/stats`}),e.declarationHelp&&!t&&(y(r,{name:`${e.name.toLocaleLowerCase()}.d.ts`,path:e.path}),y(r,{name:"stats.d.ts",path:`${e.path}/stats`}))),r}function f({cssThemes:e,cssOutPath:t}){return Object.entries(e).reduce((e,[r,{foreign:a}])=>{const{before:o,after:n}=a,i=o&&Array.isArray(o)&&o.length>0?o.reduce((e,r,a)=>{const o=s.basename(r);return a>0&&(e+=", "),e+`'${t}/${o}'`},""):"",c=n&&Array.isArray(n)&&n.length>0?n.reduce((e,r,a)=>{const o=s.basename(r);return a>0&&(e+=", "),e+`'${t}/${o}'`},""):"";return e+`'${r}': { css: '${t}/${r}.css', foreign: { before: [${i}], after: [${c}] } },\n`},"")}function y(e,s){e.some(e=>e.name===s.name&&e.path===s.path)||e.push(s)}function b(){const e=["--base-out-dir","--root-dir","--prevent-process-js","--prevent-move-js","--prevent-move-dts","--types","--css","--tools","--provider"],s={};for(let t=0;t<process.argv.length;t++)if(e.includes(process.argv[t])){const r=process.argv[t].replace("--","").replace(/-([a-z])/g,(e,s)=>s.toUpperCase()),a=process.argv[t+1];s[r]=(()=>!(a&&!e.includes(a))||("none"===a.toLocaleLowerCase()?"":a))()}return s}function D({jsonCustomOutDirs:e,cliCustomOutDirs:s}){let t={};return e&&(t={...e}),s&&(t={...t,...s}),Object.keys(t).length>0?t:void 0}(async()=>{const e=process.cwd(),t=await i(s.resolve(e,"bernova.config.json")),{compilerOptions:r,provider:a,themes:o}=t;r&&a&&o||(console.error("Invalid configuration: Missing compilerOptions, themes or provider"),process.exit(1));const{baseOutDir:n,rootDir:c,minifyCss:u,minifyJS:h,preventMoveJS:f,preventMoveDTS:y,types:g,customOutDirs:O}=r,{baseOutDir:j,rootDir:w,types:C,preventMoveJs:$,preventMoveDts:S,preventProcessJs:A=!1,...M}=b(),T=j??n??"",F=w??c??void 0,J=$??f??!1,P=S??y??!1,_=C??g??void 0,L=D({jsonCustomOutDirs:O,cliCustomOutDirs:M}),k=d({themes:o,minifyCss:u}),q=A?[]:v({provider:a,themes:o,preventMoveDTS:P}),x=l({baseOutDir:T});if(k&&k.length>0&&await m({baseOutPath:x,cssFiles:k,rootDir:F,customOutDirs:L,dir:e}),q&&q.length>0)if(_&&Array.isArray(_)&&_.length>0)for(const s of _){const t=l({baseOutDir:T,type:s});for(const r of q)await p({baseOutPath:t,jsFile:r,rootDir:F,customOutDirs:L,dir:e,minifyJS:h,preventMoveJS:J,provider:a,type:s})}else for(const s of q)await p({baseOutPath:x,jsFile:s,rootDir:F,customOutDirs:L,dir:e,minifyJS:h,preventMoveJS:J,provider:a})})();
+const e=require("fs").promises,s=require("path"),t=require("@babel/core"),{minify:n}=require("terser"),{extractDocFragment:r,writeDoc:a,fileExists:o,readConfigData:i,buildRelativePath:c}=require("../src/lib");async function l({baseOutPath:t,jsFile:n,rootDir:i,customOutDirs:l,dir:m,minifyJS:p,preventMoveJS:h,provider:f,type:y="",embedCss:b,cssFiles:g}){const D=n.name.endsWith(".d.ts"),j=s.resolve(m,n.path,n.name);if(!o(m,j))return void console.error(`File not found: ${j}`);let C=await e.readFile(j,"utf8");const O=!!l?.css||b&&g.length>0;if("stats.js"===n.name&&O){const t=r({section:"CssThemes",doc:C}),n=t.replace(/export const cssThemes\s*=\s*/,""),a=new Function(`return (${n})`)();if(l?.css){const e=s.relative(i||"",f.path),n=c({from:s.resolve(e),to:s.resolve(m,l.css)}),r=v({cssThemes:a,cssOutPath:""!==y?s.join("../",n):n});C=C.replace(t,`export const cssThemes = {\n${r}};\n`)}else if(b&&g.length>0){const n={},r=await g.reduce(async(t,{name:r,path:a,parent:i})=>{const c=s.resolve(m,a,r);if(o(m,c)){const s=await e.readFile(c,"utf8");if(i)i.forEach(e=>{const{name:t,position:r}=e;t in n||(n[t]={before:"",after:""}),n[t][r]+=s.replace(/\s+/g,"")});else{const e=r.replace(".css","").replace(".min","");e in t||(t[e]=""),t[e]+=s.replace(/\s+/g,"")}}return t},{}),a=`export const cssThemes = {\n${Object.entries(r).reduce((e,[s,t])=>{const r=n[s]||{before:"",after:""};return e+`'${s}': { css: \`${r.before+t+r.after}\` },\n`},"")}};\n`;C=C.replace(t,a)}}if(n.name===`${f.name.toLocaleLowerCase()}.js`&&O){const t="\n    #linkBuilder = (css, id) => {\n      if (typeof document === 'undefined') return;\n      let styleElement = document.getElementById(id);\n      if (!styleElement) {\n        styleElement = document.createElement('style');\n        styleElement.id = id;\n        styleElement.type = 'text/css';\n        document.head.appendChild(styleElement);\n      }\n      styleElement.innerHTML = css;\n    };\n    #handlerThemes = (data) => {\n      const { css } = data;\n      this.#linkBuilder(css, this.#linkId);\n    };\n    #cleanUpLinks = () => {\n      if (typeof document === 'undefined') return;\n      const style = document.getElementById(this.#linkId);\n      if (style) style.remove();\n    };\n    ",n="../src/lib/generateProvider/template/providerTemplate.js";let a=await e.readFile(s.resolve(__dirname,n),"utf8");a=a.replace(/\$_Provider_\$/g,f.name);const o=r({section:"Bernova provider methods",doc:a});C=a.replace(o,t.trim())}if(n.name===`${f.name.toLocaleLowerCase()}.d.ts`&&O){const t="\n    #linkBuilder(css: string, id: string): void;\n    #handlerThemes(data: { css: string }): void;\n    #cleanUpLinks(): void;\n    ",n="../src/lib/generateProvider/template/providerTemplate.d.ts";let a=await e.readFile(s.resolve(__dirname,n),"utf8");a=a.replace(/\$_Provider_\$/g,f.name);const o=r({section:"Bernova provider methods",doc:a});C=a.replace(o,t.trim())}"cjs"!==y||D||(C=await d(C,j,!0)),"esm"!==y||D||(C=await d(C,j)),p&&!D&&(C=await u(C));const $=s.relative(i||"",n.path),w=h?j:s.resolve(t,$,n.name);await a(w,C,n.name)}async function m({baseOutPath:t,cssFiles:n,rootDir:r,customOutDirs:i,dir:c}){for(const l of n){const n=(()=>r&&!i?.css?s.relative(r,l.path):i?.css?i.css:l.path)(),m=s.resolve(c,l.path,l.name);if(o(c,m)){const r=await e.readFile(m,"utf8"),o=l.name.replace(".min","");await a(s.resolve(t,n,o),r,o)}}}function p({baseOutDir:e,type:t="-"}){const n=(()=>{switch(t){case"cjs":return"cjs";case"esm":return"esm";default:return""}})();return s.join(e,n)}async function d(e,s,n=!1){const r=!!n&&"commonjs";return(await t.transformAsync(e,{filename:s,presets:[["@babel/preset-env",{modules:r,targets:{node:"current"}}]]})).code}async function u(e){return(await n(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 h({themes:e,minifyCss:t}){return e&&Array.isArray(e)&&e.length>0?e.reduce((e,n)=>{const{name:r,stylesPath:a,foreignThemes:o}=n;return r&&a&&y(e,{name:t?`${r}.min.css`:`${r}.css`,path:a}),o&&Array.isArray(o)&&o.length>0&&o.forEach(t=>{const n=s.basename(t.path),a=t.path.replace(n,"").trim(),o=e.findIndex(e=>e.name===n&&e.path===a);o>=0?e[o].parent.push({name:r,position:t.position}):e.push({name:n,path:a,parent:[{name:r,position:t.position}]})}),e},[]):[]}function f({provider:e,themes:s,preventMoveDTS:t=!1}){const n=s&&s.bvTools?s.reduce((e,{bvTools:s})=>{const{path:n,declarationHelp:r,cssVariables:a,cssClassNames:o,cssMediaQueries:i,cssGlobalStyles:c,availableComponents:l}=s,m=r&&!t;return a&&(y(e,{name:"cssVars.js",path:n}),m&&y(e,{name:"cssVars.d.ts",path:n})),o&&(y(e,{name:"cssClasses.js",path:n}),m&&y(e,{name:"cssClasses.d.ts",path:n})),i&&(y(e,{name:"cssMediaQueries.js",path:n}),m&&y(e,{name:"cssMediaQueries.d.ts",path:n})),c&&(y(e,{name:"cssGlobalStyles.js",path:n}),m&&y(e,{name:"cssGlobalStyles.d.ts",path:n})),l&&(y(e,{name:"cssAvailableComponents.js",path:n}),m&&y(e,{name:"cssAvailableComponents.d.js",path:n})),e},[]):[];return e&&(y(n,{name:`${e.name.toLocaleLowerCase()}.js`,path:e.path}),y(n,{name:"stats.js",path:`${e.path}/stats`}),e.declarationHelp&&!t&&(y(n,{name:`${e.name.toLocaleLowerCase()}.d.ts`,path:e.path}),y(n,{name:"stats.d.ts",path:`${e.path}/stats`}))),n}function v({cssThemes:e,cssOutPath:t}){return Object.entries(e).reduce((e,[n,{foreign:r}])=>{const{before:a,after:o}=r,i=a&&Array.isArray(a)&&a.length>0?a.reduce((e,n,r)=>{const a=s.basename(n);return r>0&&(e+=", "),e+`'${t}/${a}'`},""):"",c=o&&Array.isArray(o)&&o.length>0?o.reduce((e,n,r)=>{const a=s.basename(n);return r>0&&(e+=", "),e+`'${t}/${a}'`},""):"";return e+`'${n}': { css: '${t}/${n}.css', foreign: { before: [${i}], after: [${c}] } },\n`},"")}function y(e,s){e.some(e=>e.name===s.name&&e.path===s.path)||e.push(s)}function b(){const e=["--base-out-dir","--root-dir","--prevent-process-js","--prevent-move-js","--prevent-move-dts","--types","--css","--tools","--provider","--embed-css"],s={};for(let t=0;t<process.argv.length;t++)if(e.includes(process.argv[t])){const n=process.argv[t].replace("--","").replace(/-([a-z])/g,(e,s)=>s.toUpperCase()),r=process.argv[t+1];s[n]=(()=>!(r&&!e.includes(r))||("none"===r.toLocaleLowerCase()?"":r))()}return s}function g({jsonCustomOutDirs:e,cliCustomOutDirs:s}){let t={};return e&&(t={...e}),s&&(t={...t,...s}),Object.keys(t).length>0?t:void 0}(async()=>{const e=process.cwd(),t=await i(s.resolve(e,"bernova.config.json")),{compilerOptions:n,provider:r,themes:a}=t;n&&r&&a||(console.error("Invalid configuration: Missing compilerOptions, themes or provider"),process.exit(1));const{baseOutDir:o,rootDir:c,minifyCss:d,minifyJS:u,preventMoveJS:v,preventMoveDTS:y,types:D,embedCss:j,customOutDirs:C}=n,{baseOutDir:O,rootDir:$,types:w,preventMoveJs:T,preventMoveDts:F,preventProcessJs:_=!1,embedCss:M,...P}=b(),S=O??o??"",A=$??c??void 0,E=T??v??!1,L=F??y??!1,k=w??D??void 0,J=M??j??!1,x=g({jsonCustomOutDirs:C,cliCustomOutDirs:P}),B=h({themes:a,minifyCss:d}),I=_?[]:f({provider:r,themes:a,preventMoveDTS:L}),q=p({baseOutDir:S});if(B&&B.length>0&&!J&&await m({baseOutPath:q,cssFiles:B,rootDir:A,customOutDirs:x,dir:e}),I&&I.length>0)if(k&&Array.isArray(k)&&k.length>0)for(const s of k){const t=p({baseOutDir:S,type:s});for(const n of I)await l({baseOutPath:t,jsFile:n,rootDir:A,customOutDirs:x,dir:e,minifyJS:u,preventMoveJS:E,provider:r,type:s,embedCss:J,cssFiles:B})}else for(const s of I)await l({baseOutPath:q,jsFile:s,rootDir:A,customOutDirs:x,dir:e,minifyJS:u,preventMoveJS:E,provider:r,embedCss:J,cssFiles:B})})();

package/dist/src/lib/generateProvider/template/providerTemplate.d.ts

@@ -32,12 +32,14 @@ export declare class $_Provider_$ {
   #themesMediaQueries: typeof cssMediaQueries;
   #linkId: string;
   #jsInCss: boolean;
+  /* Bernova provider methods */
   #linkBuilder: (url: string, id: string) => void;
   #handlerThemes: (data: {
     css: string;
     foreign?: { high?: string[]; low?: string[] };
   }) => void;
   #cleanUpLinks: () => void;
+  /* Bernova provider methods */
 
   constructor(options?: { linkId?: string; jsInCss?: boolean });
 

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

@@ -1 +1,163 @@
-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}}
+import {
+  cssThemes,
+  cssClasses,
+  cssVars,
+  cssAvailableComponents,
+  cssGlobalStyles,
+  cssMediaQueries,
+} from './stats/stats';
+
+export class $_Provider_$ {
+  #currentTheme;
+  #themes;
+  #themesVariables;
+  #themesClassNames;
+  #themesComponents;
+  #themesGlobalStyles;
+  #themesMediaQueries;
+  #linkId;
+  #jsInCss;
+  /* Bernova provider methods */
+  #linkBuilder = (url, id) => {
+    if (typeof document === 'undefined') return;
+    let linkElement = document.getElementById(id);
+    if (!linkElement) {
+      linkElement = document.createElement('link');
+      linkElement.id = id;
+      linkElement.rel = 'stylesheet';
+      document.head.appendChild(linkElement);
+    }
+    const href = new URL(url, import.meta.url).href;
+    linkElement.href = href;
+  };
+  #handlerThemes = (data) => {
+    const { css, foreign } = data;
+    const beforeFiles = foreign?.before || [];
+    const afterFiles = foreign?.after || [];
+    //* set the lower priority foreign themes
+    beforeFiles.forEach((url, idx) => {
+      const id = `${this.#linkId}-foreign-before-${idx + 1}`;
+      this.#linkBuilder(url, id);
+    });
+    //* set main theme
+    this.#linkBuilder(css, this.#linkId);
+    //* set the higher priority foreign themes
+    afterFiles.forEach((url, idx) => {
+      const id = `${this.#linkId}-foreign-after-${idx + 1}`;
+      this.#linkBuilder(url, id);
+    });
+  };
+  #cleanUpLinks = () => {
+    if (typeof document === 'undefined') return;
+    const links = document.querySelectorAll(`link[id^="${this.#linkId}"]`);
+    links.forEach((link) => link.remove());
+  };
+  /* Bernova provider methods */
+
+  constructor({ linkId, jsInCss } = {}) {
+    this.#themes = cssThemes;
+    this.#themesVariables = cssVars;
+    this.#themesClassNames = cssClasses;
+    this.#themesComponents = cssAvailableComponents;
+    this.#themesGlobalStyles = cssGlobalStyles;
+    this.#themesMediaQueries = cssMediaQueries;
+    this.#linkId = linkId || 'kb-styled-link';
+    this.#currentTheme = Object.keys(cssThemes)[0];
+    this.#jsInCss = !!jsInCss;
+    this.getComponentStyles = this.getComponentStyles.bind(this);
+
+    if (
+      typeof window !== 'undefined' &&
+      typeof document !== 'undefined' &&
+      this.#jsInCss
+    ) {
+      this.#cleanUpLinks();
+      this.#handlerThemes(this.#themes[this.#currentTheme]);
+    }
+  }
+  // ? getters and setters
+  //* theme selected
+  get themeSelected() {
+    return this.#currentTheme;
+  }
+  set themeSelected(themeName) {
+    if (themeName in this.#themes) {
+      if (this.#jsInCss) {
+        this.#cleanUpLinks();
+        this.#handlerThemes(this.#themes[themeName]);
+      }
+      this.#currentTheme = themeName;
+    } else {
+      throw new Error(`${themeName} is not exists`);
+    }
+  }
+  //* themes
+  get allThemesNames() {
+    return Object.keys(this.#themes);
+  }
+  get allThemes() {
+    return this.#themes;
+  }
+  //* variables
+  get variables() {
+    return this.#themesVariables[this.#currentTheme];
+  }
+  //* classNames
+  get classNames() {
+    return this.#themesClassNames[this.#currentTheme];
+  }
+  //* components
+  get components() {
+    return this.#themesComponents[this.#currentTheme];
+  }
+  //* global styles
+  get globalStyles() {
+    return this.#themesGlobalStyles[this.#currentTheme];
+  }
+  //* media queries
+  get mediaQueries() {
+    return this.#themesMediaQueries[this.#currentTheme];
+  }
+  //? methods
+  getComponentStyles({ variant, component, additionalClassNames }) {
+    const THEME = this.#themesClassNames[this.#currentTheme];
+    const upperComponent = component.toLocaleUpperCase();
+    const COMPONENT = THEME[upperComponent];
+
+    if (!COMPONENT) return {};
+
+    const structure = {};
+    const startV = '$_';
+    const componentVariant = (() => {
+      if (!!variant) {
+        const lowerVariant = variant.toLocaleLowerCase().replace(/-/g, '_');
+        return `${startV}${lowerVariant}`;
+      } else {
+        return false;
+      }
+    })();
+    if (componentVariant && componentVariant in COMPONENT) {
+      const variantFragment = COMPONENT[componentVariant];
+      Object.entries(variantFragment).forEach(([key, value]) => {
+        if (!(key in structure)) {
+          structure[key] = value;
+        }
+      });
+    }
+    Object.entries(COMPONENT).forEach(([key, value]) => {
+      if (key.startsWith(startV)) return;
+      if (!(key in structure)) {
+        structure[key] = value;
+      }
+    });
+    if (!!additionalClassNames && Object.keys(additionalClassNames).length) {
+      Object.entries(additionalClassNames).forEach(([key, value]) => {
+        if (!(key in structure)) {
+          structure[key] = '';
+        }
+        structure[key] += ` ${value}`;
+      });
+    }
+    return structure;
+  }
+}

package/dist/src/styles/default/default.css

@@ -0,0 +1,9 @@
+/* === BERNOVA FOUNDATIONS === */
+:root{
+}
+
+/* === END FOUNDATIONS === */
+
+/* === BERNOVA COMPONENTS === */
+
+/* === END COMPONENTS === */

package/dist/styles/default/default.css

@@ -0,0 +1,9 @@
+/* === BERNOVA FOUNDATIONS === */
+:root{
+}
+
+/* === END FOUNDATIONS === */
+
+/* === BERNOVA COMPONENTS === */
+
+/* === END COMPONENTS === */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bernova",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "description": "The best way to write CSS with Javascript syntax",
   "main": "./dist/src/index.js",
   "types": "./dist/src/index.d.ts",

package/src/lib/generateProvider/template/providerTemplate.d.ts

@@ -32,12 +32,14 @@ export declare class $_Provider_$ {
   #themesMediaQueries: typeof cssMediaQueries;
   #linkId: string;
   #jsInCss: boolean;
+  /* Bernova provider methods */
   #linkBuilder: (url: string, id: string) => void;
   #handlerThemes: (data: {
     css: string;
     foreign?: { high?: string[]; low?: string[] };
   }) => void;
   #cleanUpLinks: () => void;
+  /* Bernova provider methods */
 
   constructor(options?: { linkId?: string; jsInCss?: boolean });
 

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

@@ -17,6 +17,7 @@ export class $_Provider_$ {
   #themesMediaQueries;
   #linkId;
   #jsInCss;
+  /* Bernova provider methods */
   #linkBuilder = (url, id) => {
     if (typeof document === 'undefined') return;
     let linkElement = document.getElementById(id);
@@ -51,6 +52,7 @@ export class $_Provider_$ {
     const links = document.querySelectorAll(`link[id^="${this.#linkId}"]`);
     links.forEach((link) => link.remove());
   };
+  /* Bernova provider methods */
 
   constructor({ linkId, jsInCss } = {}) {
     this.#themes = cssThemes;

package/src/styles/default/default.css

@@ -0,0 +1,9 @@
+/* === BERNOVA FOUNDATIONS === */
+:root{
+}
+
+/* === END FOUNDATIONS === */
+
+/* === BERNOVA COMPONENTS === */
+
+/* === END COMPONENTS === */