{"id":35636869,"url":"https://github.com/kubit-ui/bernova","last_synced_at":"2026-03-17T10:03:30.239Z","repository":{"id":320152921,"uuid":"1067705612","full_name":"kubit-ui/bernova","owner":"kubit-ui","description":"The best way to write CSS with Javascript syntax","archived":false,"fork":false,"pushed_at":"2026-01-12T12:03:35.000Z","size":911,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"cms","last_synced_at":"2026-01-12T19:34:00.591Z","etag":null,"topics":["css"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/bernova","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kubit-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-01T09:05:34.000Z","updated_at":"2026-01-12T12:03:38.000Z","dependencies_parsed_at":"2025-10-22T09:10:13.384Z","dependency_job_id":"fe10ecf3-f1e2-4957-9bd3-1b4439522650","html_url":"https://github.com/kubit-ui/bernova","commit_stats":null,"previous_names":["kubit-ui/bernova"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/kubit-ui/bernova","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kubit-ui%2Fbernova","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kubit-ui%2Fbernova/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kubit-ui%2Fbernova/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kubit-ui%2Fbernova/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kubit-ui","download_url":"https://codeload.github.com/kubit-ui/bernova/tar.gz/refs/heads/cms","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kubit-ui%2Fbernova/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28633748,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T04:47:28.174Z","status":"ssl_error","status_checked_at":"2026-01-21T04:47:22.943Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css"],"created_at":"2026-01-05T10:08:20.390Z","updated_at":"2026-01-21T13:08:59.141Z","avatar_url":"https://github.com/kubit-ui.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://kubit-ui.com\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://github.com/kubit-ui/bernova/raw/cms/assets/bernova.png\"\u003e\n      \u003cimg src=\"https://github.com/kubit-ui/bernova/raw/cms/assets/bernova.png\" width=\"70%\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![NPM Version](https://img.shields.io/npm/v/bernova?style=for-the-badge\u0026logo=npm\u0026color=CB3837)](https://www.npmjs.com/package/bernova)\n[![NPM Downloads](https://img.shields.io/npm/dm/bernova?style=for-the-badge\u0026logo=npm\u0026color=CB3837)](https://www.npmjs.com/package/bernova)\n[![License](https://img.shields.io/github/license/kubit-ui/bernova?style=for-the-badge\u0026color=blue)](./LICENSE)\n[![GitHub Stars](https://img.shields.io/github/stars/kubit-ui/bernova?style=for-the-badge\u0026logo=github\u0026color=yellow)](https://github.com/kubit-ui/bernova/stargazers)\n[![GitHub Issues](https://img.shields.io/github/issues/kubit-ui/bernova?style=for-the-badge\u0026logo=github\u0026color=red)](https://github.com/kubit-ui/bernova/issues)\n\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue?style=for-the-badge\u0026logo=typescript)](https://www.typescriptlang.org/)\n[![Node.js](https://img.shields.io/badge/Node.js-20+-339933?style=for-the-badge\u0026logo=node.js)](https://nodejs.org/)\n[![Vite](https://img.shields.io/badge/Vite-7.3-646CFF?style=for-the-badge\u0026logo=vite)](https://vitejs.dev/)\n\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n## Related Information\n\n- [Instalation](#installation)\n- [Configuration](#configuration)\n- [How to use](#how-to-use)\n- [Design tools](#design-tools)\n  - [Foundations](#foundations)\n  - [Global Styles](#global-styles)\n  - [MediaQueries](#mediaqueries)\n    - [Css MediaQueries](#Css-MediaQueries)\n  - [Components Tools](#components-tools)\n    - [Nested Styles](#Nested-styles)\n    - [Variant styles](#Variant-styles)\n    - [Css Pseudo Classes](#Css-Pseudo-Classes)\n    - [Css Pseudo Elements](#Css-Pseudo-Elements)\n    - [HTML Atributes](#HTML-Atributes)\n    - [Css Advanced Selectors](#Css-Advanced-Selectors)\n    - [Complex Styles](#Complex-Styles)\n    - [Foreign Feature](#Foreign-Feature)\n    - [Dynamic Values Feature](#Dynamic-Values-Feature)\n- [Fonts](#setting-text-fonts)\n- [Reset CSS](#enable-reset-css)\n- [Typescript helps](#typescript-helps)\n- [Multi themes](#using-multi-themes)\n- [Provider](#library-provider)\n- [Foreign CSS documents](#foreign-css-documents)\n- [Compiler Options](#compiler-options)\n\n## Installation\n\nYou can install Bernova using your preferred package manager:\n\n```bash\n# Using npm\nnpm install bernova\n\n# Using yarn\nyarn add bernova\n\n# Using pnpm (recommended)\npnpm add bernova\n```\n\n## Configuration\n\nThe library requires a JSON configuration file located in the root of the project. The name of this file is **bernova.config.json**.\n\nThere is a script provided by the library to generate a template for the configuration file:\n\n```bash\nnpx bv-config\n```\n\n**bernova.config.json** looks like this\n\n```json\n{\n  \"provider\": {\n    \"name\": \"BernovaStyledProvider\",\n    \"path\": \"./src/styles/provider\",\n    \"declarationHelp\": true\n  },\n  \"themes\": [\n    {\n      \"name\": \"default\",\n      \"minified\": false,\n      \"theme\": {\n        \"name\": \"BERNOVA_STYLES\",\n        \"path\": \"./fixture/theme.ts\"\n      },\n      \"foundations\": {\n        \"name\": \"FOUNDATIONS\",\n        \"path\": \"./fixture/foundations/foundations.ts\"\n      },\n      \"globalStyles\": {\n        \"name\": \"GLOBAL_STYLES\",\n        \"path\": \"./fixture/globalStyles.ts\"\n      },\n      \"mediaQueries\": {\n        \"name\": \"MEDIA_QUERIES\",\n        \"path\": \"./fixture/mediaQueries.ts\"\n      },\n      \"resetCss\": true,\n      \"stylesPath\": \"./src/styles/default\",\n      \"bvTools\": {\n        \"path\": \"./src/styles/default/tools\",\n        \"declarationHelp\": true,\n        \"cssVariables\": true,\n        \"cssClassNames\": true,\n        \"cssMediaQueries\": true,\n        \"cssGlobalStyles\": true,\n        \"availableComponents\": true\n      },\n      \"typesTools\": {\n        \"stylesTypes\": { \"name\": \"stylesTypes\", \"path\": \"./src/styles/types\" },\n        \"componentsTypes\": {\n          \"name\": \"componentsTypes\",\n          \"path\": \"./src/styles/default/tools\"\n        }\n      },\n      \"fonts\": {\n        \"google\": [\n          {\n            \"name\": \"Roboto\",\n            \"weights\": [\"300\", \"400\", \"600\", \"700\"]\n          }\n        ]\n      }\n    }\n  ]\n}\n```\n\n## How to use\n\nThe library has a script to transpile the js code into css. The command for this is:\n\n```bash\nnpx bernova\n```\n\nBy adding a flag at the end of the script, you can transpile only part of the project.\n\nFor FOUNDATIONS, MediaQueries, and GlobalStyles:\n\n```bash\nnpx bernova --foundationOnly\n```\n\nFor the classes of the HTML elements and available components\n\n```bash\nnpx bernova --componentOnly\n```\n\n## Design Tools\n\n### Foundations\n\nThe library gives you a lot of freedom when it comes to applying styles, but it also provides tools to follow good CSS practices. If you want to use the CSS variable system, you must add that configuration to the **bernova.config.json** file and create that document in the path provided.\n\n```json\n{\n  \"themes\": [\n    {\n      //... rest of the config\n      \"foundations\": {\n        \"name\": \"FOUNDATIONS\",\n        \"path\": \"./fixture/foundations/foundations.ts\"\n      }\n      //... rest of the config\n    }\n  ]\n}\n```\n\nfoundation example:\n\n```js\nexport const FOUNDATIONS = {\n  colors: {\n    primary: '#FF0000',\n    secondary: '#00FF00',\n    tertiary: '#0000FF',\n  },\n  sizes: {\n    small: '4px',\n    medium: '8px',\n    large: '12px',\n  },\n};\n```\n\nThe result of this when transpiling is\n\n```css\n:root {\n  --colors-primary: #ff0000;\n  --colors-secondary: #00ff00;\n  --colors-tertiary: #0000ff;\n  --sizes-small: 4px;\n  --sizes-medium: 8px;\n  --sizes-large: 12px;\n}\n```\n\nIf you add bvTools to the configuration file, you can have an object to access these variables from your js code.\n\n```json\n{\n  \"themes\": [\n    {\n      //... rest of the config\n      \"foundations\": {\n        \"name\": \"FOUNDATIONS\",\n        \"path\": \"./fixture/foundations/foundations.ts\"\n      },\n      \"bvTools\": {\n        \"path\": \"./src/styles/default/tools\",\n        \"declarationHelp\": true,\n        \"cssVariables\": true\n      }\n      //... rest of the config\n    }\n  ]\n}\n```\n\nThe resulting tool is\n\n```js\nexport const cssVars = {\n  colors_primary: 'var(--colors-primary)',\n  colors_secondary: 'var(--colors-secondary)',\n  colors_tertiary: 'var(--colors-tertiary)',\n  sizes_small: 'var(--sizes-small)',\n  sizes_medium: 'var(--sizes-medium)',\n  sizes_large: 'var(--sizes-large)',\n};\n```\n\nFor use with TypeScript, if we set the declarationHelp key to true, it will give us a declaration file.\n\n```ts\nexport declare const cssVars: {\n  colors_primary: string;\n  colors_secondary: string;\n  colors_tertiary: string;\n  sizes_small: string;\n  sizes_medium: string;\n  sizes_large: string;\n};\n```\n\n### Global Styles\n\nWe can create global styles for the project and create their tools, as long as they are CSS classes.\n\n```json\n{\n  \"themes\": [\n    {\n      //... rest of the config\n      \"globalStyles\": {\n        \"name\": \"GLOBAL_STYLES\",\n        \"path\": \"./fixture/globalStyles.ts\"\n      }\n      //... rest of the config\n    }\n  ]\n}\n```\n\nGlobal styles example:\n\n```js\nexport const GLOBAL_STYLES = [\n  { targets: 'html, body', styles: { font_size: '16px' } },\n  { targets: 'a', styles: { font_weight: '700' } },\n  { targets: '*', styles: { box_sizing: 'border-box' } },\n  { targets: '.padding-4', styles: { padding: '4px' } },\n  { targets: '.padding-8', styles: { padding: '8px' } },\n];\n```\n\nThe result of this when transpiling is:\n\n```css\nhtml,\nbody {\n  font-size: 16px;\n}\na {\n  font-weight: 700;\n}\n* {\n  box-sizing: border-box;\n}\n.padding-4 {\n  padding: 4px;\n}\n.padding-8 {\n  padding: 8px;\n}\n```\n\nIf you add bvTools to the configuration file, you can have an object to access these variables from your js code.\n\n```json\n{\n  \"themes\": [\n    {\n      //... rest of the config\n      \"globalStyles\": {\n        \"name\": \"GLOBAL_STYLES\",\n        \"path\": \"./fixture/globalStyles.ts\"\n      },\n      \"bvTools\": {\n        \"path\": \"./src/styles/default/tools\",\n        \"declarationHelp\": true,\n        \"cssGlobalStyles\": true\n      }\n      //... rest of the config\n    }\n  ]\n}\n```\n\nThe resulting tool is (Only CSS classes are considered for the object):\n\n```js\nexport const cssGlobalStyles = {\n  padding_4: '.padding-4',\n  padding_8: '.padding-8',\n};\n```\n\nFor use with TypeScript, if we set the declarationHelp key to true, it will give us a declaration file.\n\n```ts\nexport declare const cssGlobalStyles: {\n  padding_4: string;\n  padding_8: string;\n};\n```\n\n### MediaQueries\n\nMediaQueries are an important aspect of CSS, and the library can handle them\n\n```json\n{\n  \"themes\": [\n    {\n      //... rest of the config\n      \"mediaQueries\": {\n        \"name\": \"MEDIA_QUERIES\",\n        \"path\": \"./fixture/mediaQueries.ts\"\n      }\n      //... rest of the config\n    }\n  ]\n}\n```\n\nMediaQueries example:\n\n```js\nexport const MEDIA_QUERIES = [\n  {\n    name: 'mobile',\n    type: 'screen',\n    values: {\n      max_width: '767px',\n      min_width: '240px',\n    },\n  },\n  {\n    name: 'tablet',\n    type: 'screen',\n    values: {\n      max_width: '1024px',\n      min_width: '768px',\n    },\n  },\n  {\n    name: 'desktop',\n    type: 'screen',\n    values: {\n      max_width: '1440px',\n      min_width: '1025px',\n    },\n  },\n];\n```\n\nThe result of this when transpiling is:\n\n```css\n@media screen and (max-width: 767px) and (min-width: 240px) {\n  .test {\n    padding: 10px;\n  }\n}\n@media screen and (max-width: 1024px) and (min-width: 768px) {\n  .test {\n    padding: 20px;\n  }\n}\n@media screen and (max-width: 1440px) and (min-width: 1025px) {\n  .test {\n    padding: 30px;\n  }\n}\n```\n\nIf you add bvTools to the configuration file, you can have an object to access these variables from your js code.\n\n```json\n{\n  \"themes\": [\n    {\n      //... rest of the config\n      \"mediaQueries\": {\n        \"name\": \"MEDIA_QUERIES\",\n        \"path\": \"./fixture/mediaQueries.ts\"\n      },\n      \"bvTools\": {\n        \"path\": \"./src/styles/default/tools\",\n        \"declarationHelp\": true,\n        \"cssMediaQueries\": true\n      }\n      //... rest of the config\n    }\n  ]\n}\n```\n\nThe resulting tool is:\n\n```js\nexport const cssMediaQueries = {\n  mobile: 'mobile',\n  tablet: 'tablet',\n  desktop: 'desktop',\n};\n```\n\nFor use with TypeScript, if we set the declarationHelp key to true, it will give us a declaration file.\n\n```ts\nexport declare const cssMediaQueries: {\n  mobile: 'mobile';\n  tablet: 'tablet';\n  desktop: 'desktop';\n};\n```\n\n## Components tools\n\nThe main feature of the library is the ability to build CSS styles from a JavaScript literal object.\n\nExample:\n\n```js\nconst CONTAINER = {\n  background_color: 'red',\n  color: '#fff',\n  border_radius: '8px',\n};\n```\n\nThe result of this when transpiling is:\n\n```css\n.container {\n  background-color: red;\n  color: #fff;\n  border-radius: 8px;\n}\n```\n\nYou can create multiple objects with different components and export them all as a single object. To do this, remember to add the configuration in **bernova.config.json**.\n\n```json\n{\n  \"themes\": [\n    {\n      //... rest of the config\n      \"theme\": {\n        \"name\": \"BERNOVA_STYLES\",\n        \"path\": \"./fixture/theme.ts\"\n      }\n      //... rest of the config\n    }\n  ]\n}\n```\n\ntheme.ts example:\n\n```js\nimport { BUTTON, LINK, CONTAINER } from './components';\n\nexport const BERNOVA_STYLES = {\n  BUTTON,\n  LINK,\n  CONTAINER,\n};\n```\n\nThe result of this when transpiling is:\n\n```css\n.button {\n  /* button styles */\n}\n.link {\n  /* link styles */\n}\n.container {\n  /* container styles */\n}\n```\n\n### Nested styles\n\nIn many cases, HTML elements have nested children. It is possible to create styles for these from the main element object.\n\n```js\nexport const BUTTON = {\n  background: 'red',\n  border: 'none',\n  _text: {\n    color: 'white',\n    font_size: '12px',\n  },\n  _icon: {\n    height: '16px',\n    width: '16px',\n    color: 'white',\n  },\n};\n```\n\nBased on the BEM methodology, the result would be as follows:\n\n```css\n.button {\n  background: red;\n  border: none;\n}\n.button__text {\n  color: white;\n  font-size: 12px;\n}\n.button__icon {\n  height: 16px;\n  width: 16px;\n  color: white;\n}\n```\n\n### Variant styles\n\nSometimes we may want to have several similar elements, but with certain variations in their design. The library also allows the use of variants in the javascript object for styles.\n\n```js\nconst buttonVariants = {\n  PRIMARY: 'PRIMARY',\n  ALTERNATIVE: 'ALTERNATIVE',\n};\n\nexport const BUTTON = {\n  border: 'none',\n  _text: {\n    font_size: '16px',\n  },\n  _icon: {\n    width: '16px',\n    height: '16px',\n  },\n  [buttonVariants.PRIMARY]: {\n    background: 'red',\n    _text: {\n      color: 'white',\n    },\n    _icon: {\n      color: 'white',\n    },\n  },\n  [buttonVariants.ALTERNATIVE]: {\n    background: '#fff',\n    _text: {\n      color: '#000',\n    },\n    _icon: {\n      color: '#000',\n    },\n  },\n};\n```\n\nBased on the BEM methodology, the result would be as follows:\n\n```css\n.button {\n  border: none;\n}\n.button__text {\n  font-size: 16px;\n}\n.button__icon {\n  width: 16px;\n  height: 16px;\n}\n.button--primary {\n  background: red;\n}\n.button__text--primary {\n  color: white;\n}\n.button__icon--primary {\n  color: white;\n}\n.button--alternative {\n  background: #fff;\n}\n.button__text--alternative {\n  color: #000;\n}\n.button__icon--alternative {\n  color: #000;\n}\n```\n\n### Css Pseudo Classes\n\nA very common practice in CSS is the use of pseudo classes. The library allows their implementation from the JavaScript styles object.\n\n```js\nconst BUTTON = {\n  background_color: '#ff0000',\n  color: 'white',\n  $pseudoClasses: {\n    active: {\n      background_color: '#ac0202'\n    },\n    hover: {\n      background_color: '#e94141',\n    },\n    focus: {\n      border_color: '#0000ff',\n    }\n  }\n}\n```\n\nThe result of this when transpiling is:\n\n```css\n.button {\n  background-color: #ff0000;\n  color: white;\n}\n.button:active {\n  background-color: #ac0202;\n}\n.button:hover {\n  background-color: #e94141;\n}\n.button:focus {\n  background-color: #0000ff;\n}\n```\n\n### Css Pseudo Elements\n\nPseudo elements are widely used in CSS styles. The library also supports them.\n\n```js\nexport const CONTAINER = {\n  border_radius: '100%',\n  border: '1px solid black',\n  height: '80px',\n  width: '80px',\n  $pseudoElements: {\n    before: {\n      $content: '',\n      position: 'absolute',\n      border_radius: '100%',\n      background_color: 'blue',\n      height: '20px',\n      width: '20px',\n      left: '70px',\n      top: '10px',\n    },\n  },\n};\n```\n\nThe result of this when transpiling is:\n\n```css\n.container {\n  border-radius: 100%;\n  border: 1px solid black;\n  height: 80px;\n  width: 80px;\n}\n.container::before {\n  content: '';\n  position: absolute;\n  border-radius: 100%;\n  background-color: blue;\n  height: 20px;\n  width: 20px;\n  left: 70px;\n  top: 10px;\n}\n```\n\n### HTML Atributes\n\nSometimes, we need to condition the application of certain styles, depending on whether a certain condition is met.\n\n#### Simple example:\n\nIf you only need to check that an attribute exists (Boolean), you can do so as follows:\n\nHTML element example:\n\n```html\n\u003cspan class=\"message\" data-valid=\"true\"\u003eA simple notify\u003c/span\u003e\n```\n\nJavascript style object:\n\n```js\nexport const MESSAGE = {\n  color: '#000',\n  padding: '8px',\n  border_radius: '16px',\n  $attributes: {\n    ['data-valid']: {\n      cursor: 'pointer',\n    },\n  },\n};\n```\n\nThe result of this when transpiling is:\n\n```css\n.message {\n  color: #000;\n  padding: 8px;\n  border-radius: 16px;\n}\n.message[data-valid='true'] {\n  cursor: pointer;\n}\n```\n\n#### Custom example\n\nIf you need the attribute value to be customized or have more than one use case, you can do so as follows:\n\nHMLT element example:\n\n```html\n\u003cspan class=\"message\" data-type=\"warning\"\u003eA simple notify\u003c/span\u003e\n```\n\nJavaScript style object:\n\n```js\nexport const MESSAGE = {\n  color: '#000',\n  padding: '8px',\n  border_radius: '16px',\n  $attributes: {\n    ['data-type']: {\n      success: {\n        background_color: 'green',\n      },\n      warning: {\n        background_color: 'yellow',\n      },\n      error: {\n        background_color: 'red',\n      },\n    },\n  },\n};\n```\n\nThe result of this when transpiling is:\n\n```css\n.message {\n  color: #000;\n  padding: 8px;\n  border-radius: 16px;\n}\n.message[data-type='success'] {\n  background-color: green;\n}\n.message[data-type='warning'] {\n  background-color: yellow;\n}\n.message[data-type='error'] {\n  background-color: red;\n}\n```\n\n### Css MediaQueries\n\nAn important aspect of modern designs is adaptability to different devices. This is usually handled with MediaQueries, so the library also supports this feature.\n\n#### From project config\n\nIf you have created the media queries configuration file [MediaQueries](#MediaQueries), you can access its configuration using the configuration name as the object key.\n\n```js\nimport { cssMediaQueries } from './tools/cssMediaQueries';\n\nexport const BANNER = {\n  width: '1220px',\n  $mediaQueries: {\n    [cssMediaQueries.mobile]: {\n      width: '240px',\n    },\n  },\n};\n```\n\nThe result of this when transpiling is:\n\n```css\n.banner {\n  width: 1220px;\n}\n@media screen and (max-width: 767px) and (min-width: 240px) {\n  .banner {\n    width: 240px;\n  }\n}\n```\n\n#### Custom config\n\nSometimes, we need a very specific media query that is not found in the configuration structure. Or perhaps we don't want to generate the media query configuration because there will be very few use cases. For these types of situations, we can set up custom media queries.\n\n```js\nexport const BANNER = {\n  width: '1220px',\n  $mediaQueries: {\n    mini: {\n      $type: 'screen',\n      $values: { 'min-width': '100px', 'max-width': '200px' },\n      width: '100px',\n    },\n  },\n};\n```\n\nThe result of this when transpiling is:\n\n```css\n.banner {\n  width: 1220px;\n}\n@media screen and (max-width: 200px) and (min-width: 100px) {\n  .banner {\n    width: 100px;\n  }\n}\n```\n\n### Css Advanced Selectors\n\nIn CSS, advanced selectors can be used to access other elements of the DOM. To do this with the library, we can use the following feature\n\n```js\nexport const CONTAINER = {\n  height: '100px',\n  width: '100px',\n  $advancedSelector: [\n    {\n      descendant: {\n        $target: 'span',\n        color: 'red',\n      },\n    },\n    {\n      child: {\n        $target: 'p',\n        font_size: '10px';\n        color: 'black',\n      },\n    },\n  ]\n}\n```\n\nThe result of this when transpiling is:\n\n```css\n.container {\n  height: 100px;\n  width: 100px;\n}\n.container span {\n  color: red;\n}\n.container \u003e p {\n  font-size: 10px;\n  color: black;\n}\n```\n\n### Complex Styles\n\nWithin each special feature (those that begin with the **$** symbol) of style objects in JavaScript, others can be used to create complex styles.\n\n```js\nexport const CONTAINER = {\n  width: '30px';\n  height: '30px';\n  $attributes: {\n    ['data-hoverable']: {\n      $pseudoClasses: {\n        hover: {\n          $advancedSelectors: [\n            {\n              descendant: {\n                $target: 'p',\n                background_color: 'red',\n                color: 'white',\n              },\n            },\n            {\n              descendant: {\n                $target: 'b',\n                background_color: 'green',\n                color: 'white',\n              },\n            },\n            {\n              child: {\n                $target: 'span',\n                background_color: 'blue',\n                color: 'black',\n              },\n            },\n          ]\n        }\n      }\n    }\n  }\n}\n```\n\nThe result of this when transpiling is:\n\n```css\n.container {\n  width: 30px;\n  height: 30px;\n}\n.container[data-hoverable='true']:hover p {\n  background-color: red;\n  color: white;\n}\n.container[data-hoverable='true']:hover b {\n  background-color: green;\n  color: white;\n}\n.container[data-hoverable='true']:hover \u003e span {\n  background-color: blue;\n  color: white;\n}\n```\n\nWhen nesting pseudo-classes and pseudo-elements, you can avoid using the **$** symbol a second time.\n\n```js\nexport const INPUT = {\n  border_color: 'black',\n  border_radius: '4px',\n  $pseudoClasses: {\n    active: {\n      before: {\n        $content: '',\n        color: '#ccc',\n      },\n    },\n  },\n};\n```\n\nThe result of this when transpiling is:\n\n```css\n.input {\n  border-color: black;\n  border-radius: 4px;\n}\n.input:active::before {\n  content: '';\n  color: #ccc;\n}\n```\n\n### Foreign Feature\n\nWhen we are creating styles for an HTML element, there may be other nested elements whose styles we have already styled in another element and may want to reuse.\n\n```js\nimport { LINK, BUTTON } from './components';\n\nexport const HEADER = {\n  width: '100%',\n  height: '80px',\n  background_color: 'green',\n  $foreign: {\n    nav_item: {\n      component: LINK,\n      variant: 'primary',\n      name: 'link',\n    },\n    loging_button: {\n      component: BUTTON,\n      name: 'button',\n    },\n  },\n};\n```\n\n### Dynamic Values Feature\n\nThere may be a value within our styles that we need to retrieve dynamically. The library provides a tool to handle these cases.\n\nIMPORTANT: The names of variables within the array, as well as in its implementation, must starts with the dollar char \u003c**$**\u003e.\n\n```js\nexport const CONTAINER = {\n  $dynamicValues: ['$bgColor', '$borderColor'],\n  height: '100px',\n  width: '100px',\n  background_color: '$bgColor',\n  border_color: '$borderColor',\n};\n```\n\nThe _$dynamicValues_ tool will return the result in string format and in object format so that we can use the one that applies in our case.\n\n```js\nimport { StylesProvider } from './provider';\n\nconst styles = StylesProvider.getComponentStyles({ component: 'CONTAINER' });\nconst dynamicVars = styles.dynamic_values({\n  $bgColor: 'white',\n  $borderColor: 'red',\n});\n\n/**\n * dinamycVars = {\n *  string: '--bgcolor: white; --bordercolor: red',\n *  object: {\n *    '--bgcolor': 'white',\n *    '--bordercolor': 'red'\n *  }\n * }\n */\n```\n\nExample of implementation\n\n```jsx\nimport { StylesProvider } from './provider';\n\nexport const Container = ({ bgColor, borderColor, children }) =\u003e {\n  const styles = StylesProvider.getComponentStyles({ component: 'CONTAINER' });\n  const dynamicVars = styles.dynamic_values({\n    $bgColor: bgColor,\n    $borderColor: borderColor,\n  }).object;\n\n  \u003cdiv className={styles.container} style={dynamicVars}\u003e\n    {children}\n  \u003c/div\u003e;\n};\n```\n\nIn this case, only the styles for the header will be generated, and in the development tools, for _nav_item_ and _login_button_, the existing classes for BUTTON and LINK will be returned.\n\n## Access to classNames\n\nTo use the generated CSS classes, you can use the name directly on the HTML element, as the library will return a valid CSS file.\n\n```html\n\u003cbutton class=\"button button--primary\"\u003e\n  \u003cspan class=\"button__text button__text--primary\"\u003eButton Text\u003c/span\u003e\n\u003c/button\u003e\n```\n\nHowever, this can be complex to use in collaborative projects or large projects. The library provides an object that records all the CSS classes generated.\n\n```json\n{\n  \"themes\": [\n    {\n      //... rest of the config\n      \"theme\": {\n        \"name\": \"BERNOVA_STYLES\",\n        \"path\": \"./fixture/theme.ts\"\n      },\n      \"bvTools\": {\n        \"path\": \"./src/styles/default/tools\",\n        \"declarationHelp\": true,\n        \"cssClassNames\": true\n      }\n      //... rest of the config\n    }\n  ]\n}\n```\n\nThe returned object looks like this:\n\n```js\nexport const cssClasses = {\n  button: 'button',\n  button_icon: 'button__icon',\n  button_text: 'button__text',\n  button_primary: 'button button--primary',\n  button_icon_primary: 'button__icon button__icon--primary',\n  button_text_primary: 'button__text button__text--primary',\n  card: 'card',\n  card_header: 'card__header',\n  card_body: 'card__body',\n  card_footer: 'card__footer',\n};\n```\n\nFor use with TypeScript, if we set the declarationHelp key to true, it will give us a declaration file.\n\n```ts\nexport declare const cssClasses: {\n  button: string;\n  button_icon: string;\n  button_text: string;\n  button_primary: string;\n  button_icon_primary: string;\n  button_text_primary: string;\n  card: string;\n  card_header: string;\n  card_body: string;\n  card_footer: string;\n};\n```\n\nExample of use\n\n```jsx\nimport { cssClasses } from './tools';\n\nexport const Button = ({ text }) =\u003e {\n  return (\n    \u003cbutton className={cssClasses.button_primary}\u003e\n      \u003cspan className={cssClasses.button_text_primary}\u003e{text}\u003c/span\u003e\n    \u003c/button\u003e\n  );\n};\n```\n\n## Access to components\n\nSometimes, we may need to know which components have been styled with the library, beyond just the CSS classes.\n\n```json\n{\n  \"themes\": [\n    {\n      //... rest of the config\n      \"theme\": {\n        \"name\": \"BERNOVA_STYLES\",\n        \"path\": \"./fixture/theme.ts\"\n      },\n      \"bvTools\": {\n        \"path\": \"./src/styles/default/tools\",\n        \"declarationHelp\": true,\n        \"availableComponents\": true\n      }\n      //... rest of the config\n    }\n  ]\n}\n```\n\nThe returned object looks like this:\n\n```js\nexport const cssAvailableComponents = {\n  BUTTON: 'BUTTON',\n  CARD: 'CARD',\n};\n```\n\nFor use with TypeScript, if we set the declarationHelp key to true, it will give us a declaration file.\n\n```ts\nexport declare const cssAvailableComponents: {\n  BUTTON: 'BUTTON';\n  CARD: 'CARD';\n};\n```\n\n## Using variables in JavaScript objects for styles\n\nWe typically use constants to store values and reuse them when necessary.\n\n```js\nconst SIZES = {\n  small: '4px',\n  medium: '8px',\n  large: '12px',\n};\nconst COLORS = {\n  red: '#ff0000',\n  green: '#00ff00',\n  blue: '#0000ff',\n  white: '#fff',\n};\nexport const BUTTON = {\n  background_color: COLORS.red,\n  padding: SIZES.medium,\n  border_radius: SIZES.small,\n  color: COLORS.white,\n};\n```\n\nThe result of this when transpiling is:\n\n```css\n.button {\n  background-color: #ff0000;\n  padding: 8px;\n  border-radius: 4px;\n  color: #fff;\n}\n```\n\nThis could work in the library, but if you want to use the CSS variable system, it is advisable to create the tools for the [foundations](#Foundations)\n\n```js\nimport { cssVars } from './tools';\n\nexport const BUTTON = {\n  background_color: cssVars.colors_red,\n  padding: cssVars.sizes_medium,\n  border_radius: cssVars.sizes_small,\n  color: cssVars.colors_white,\n};\n```\n\nThe result of this when transpiling is:\n\n```css\n.button {\n  background-color: var(--colors-red);\n  padding: var(--sizes-medium);\n  border-radius: var(--sizes-small);\n  color: var(--colors-white);\n}\n```\n\n## Setting text fonts\n\n```json\n{\n  \"themes\": [\n    {\n      //... rest of the config\n      \"fonts\": {\n        \"google\": [\n          {\n            \"name\": \"Roboto\",\n            \"weights\": [\"300\", \"400\", \"600\", \"700\"]\n          }\n        ]\n      }\n      //... rest of the config\n    }\n  ]\n}\n```\n\nThe result of this when transpiling is:\n\n```css\n@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600;700\u0026display=swap');\n```\n\n## Enable Reset CSS\n\nThe library has a feature that can be enabled so that the generated CSS resets certain styles.\n\n```json\n{\n  \"themes\": [\n    {\n      //... rest of the config\n      \"resetCss\": true\n      //... rest of the config\n    }\n  ]\n}\n```\n\nThe result of this when transpiling is:\n\n```css\nhtml {\n  margin: 0;\n  padding: 0;\n  vertical-align: baseline;\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-left: 0;\n  margin-right: 0;\n  box-sizing: border-box;\n  background-color: transparent;\n  border: 0;\n}\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo,\ndialog,\ninput,\nbutton {\n  margin: 0;\n  padding: 0;\n  vertical-align: baseline;\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-left: 0;\n  margin-right: 0;\n  box-sizing: border-box;\n  background-color: transparent;\n  border: 0;\n}\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n  display: block;\n}\nbody {\n  line-height: 1;\n}\nol,\nul {\n  list-style: none;\n}\nblockquote,\nq {\n  quotes: none;\n}\nblockquote::before,\nblockquote::after,\nq::before,\nq::after {\n  content: '';\n  content: none;\n}\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n@supports (font: -apple-system-body) {\n  html {\n    font: -apple-system-body;\n  }\n}\n@supports (font: system-ui) {\n  html {\n    font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,\n      Noto Sans, sans-serif;\n  }\n}\n```\n\n## TypeScript Helps\n\nThe tools generated by the library are in JavaScript format, but they have declaration files for type support in TypeScript. In addition to this, the library can generate _types_ to help in the construction of style objects or for the structure of components styled with the library.\n\n```json\n{\n  \"themes\": [\n    {\n      //... rest of the config\n      \"typesTools\": {\n        \"stylesTypes\": {\n          \"name\": \"stylesTypes\",\n          \"path\": \"./src/styles/types\"\n        },\n        \"componentsTypes\": {\n          \"name\": \"componentsTypes\",\n          \"path\": \"./src/styles/default/tools\"\n        }\n      }\n      //... rest of the config\n    }\n  ]\n}\n```\n\n## Using Multi themes\n\nIf you need to work with different themes, the **themes** key of the configuration object is an array and allows you to customize settings for different themes. The result will be a CSS document for each theme, as well as its set of tools.\n\n```json\n{\n  \"provider\": {\n    \"name\": \"TsAppProvider\",\n    \"path\": \"./src/provider\"\n  },\n  \"themes\": [\n    {\n      \"name\": \"default\",\n      \"theme\": {\n        \"name\": \"BERNOVA_STYLES\",\n        \"path\": \"./src/design/default/components/theme.ts\"\n      },\n      \"foundations\": {\n        \"name\": \"FOUNDATIONS\",\n        \"path\": \"./src/design/default/foundations/foundations.ts\"\n      },\n      \"mediaQueries\": {\n        \"name\": \"MEDIA_QUERIES\",\n        \"path\": \"./src/design/default/mediaQueries/mediaQueries.ts\"\n      },\n      \"resetCss\": false,\n      \"stylesPath\": \"./src/styles/default\",\n      \"fonts\": {\n        \"google\": [\n          {\n            \"name\": \"Roboto\",\n            \"weights\": [\"300\", \"400\", \"600\", \"700\"]\n          }\n        ]\n      }\n    },\n    {\n      \"name\": \"alternative\",\n      \"theme\": {\n        \"name\": \"BERNOVA_STYLES\",\n        \"path\": \"./src/design/alternative/components/theme.ts\"\n      },\n      \"foundations\": {\n        \"name\": \"FOUNDATIONS\",\n        \"path\": \"./src/design/alternative/foundations/foundations.ts\"\n      },\n      \"mediaQueries\": {\n        \"name\": \"MEDIA_QUERIES\",\n        \"path\": \"./src/design/alternative/mediaQueries/mediaQueries.ts\"\n      },\n      \"resetCss\": true,\n      \"stylesPath\": \"./src/styles/alternative\",\n      \"fileName\": \"alternative\",\n      \"fonts\": {\n        \"google\": [\n          {\n            \"name\": \"Roboto\",\n            \"weights\": [\"300\", \"400\", \"600\", \"700\"]\n          }\n        ]\n      }\n    }\n  ]\n}\n```\n\n## Library Provider\n\nIf the project is very large, it is likely that you will need to manage all the tools generated by the library. This is why the library can create a JavaScript Provider to handle all these aspects. Like the other tools, the declaration files are available to the provider.\n\n```json\n{\n  \"provider\": {\n    \"name\": \"StylesProvider\",\n    \"path\": \"./src/styles/provider\",\n    \"declarationHelp\": true\n  },\n  \"themes\": [\n    {\n      \"name\": \"theme-1\"\n      //... theme configurations\n    },\n    {\n      \"name\": \"theme-2\"\n      //... theme configurations\n    }\n  ]\n}\n```\n\n### Handler themes\n\nThe provider returned by the library will be built automatically, allowing access to multiple themes, variables, styled components, and CSS classes. All that is required is to create a new instance of the provider.\n\n```js\nimport { StylesProvider } from './src/styles/provider'; // \u003c-- The same name and same route of bernova.config.json\n\nexport const ThemeProvider = new StylesProvider();\n```\n\nYou can allow the provider to manage the import of CSS into the DOM with minimal configuration.\n\n```js\nimport { StylesProvider } from './src/styles/provider'; // \u003c-- The same name and same route of bernova.config.json\n\nexport const ThemeProvider = new StylesProvider({ jsInCss: true });\n```\n\nIn order for the strategy of allowing the provider to manage the import of CSS with multiple instances of the provider to work, an ID can be set for each instance.\n\n```js\nimport { StylesProvider } from './src/styles/provider'; // \u003c-- The same name and same route of bernova.config.json\n\nexport const LightThemeProvider = new StylesProvider({\n  jsInCss: true,\n  id: 'lighttheme1',\n});\nexport const DarkThemeProvider = new StylesProvider({\n  jsInCss: true,\n  id: 'darktheme1',\n});\n```\n\nIt is also possible to switch between themes from the same provider.\n\n```js\nimport { StylesProvider } from './src/styles/provider';\n\nexport const ThemeProvider = new StylesProvider({ jsInCss: true });\n\nThemeProvider.themeSelected = 'dark';\n```\n\nIf you do not have access to, or do not know, the names of the topics generated with the library, the provider also has tools to manage this.\n\n```js\nimport { StylesProvider } from './src/styles/provider';\n\nexport const ThemeProvider = new StylesProvider({ jsInCss: true });\n\nconst themes = ThemeProvider.allThemeNames; // \u003c-- string[]\n\nexport const themeObject = themes.reduce((acc, theme) =\u003e {\n  acc[theme] = theme;\n  return acc;\n}, {});\n```\n\nYou can also access the complete themes with their variables, components, and CSS classes associated with each one.\n\n```js\nimport { StylesProvider } from './src/styles/provider';\n\nexport const ThemeProvider = new StylesProvider({ jsInCss: true });\n\nconst completeThemes = ThemeProvider.allThemes;\n```\n\n#### Provider themes tools\n\nOnce you have selected the theme you want to work with (if you don't specify one, it will default to the first one), you can access the variables, CSS classes, and components by parts associated only with the selected theme.\n\n```js\nimport { StylesProvider } from './src/styles/provider';\n\nexport const ThemeProvider = new StylesProvider({ jsInCss: true });\n\nconst themes = ThemeProvider.allThemeNames;\nexport const themeObject = themes.reduce((acc, theme) =\u003e {\n  acc[theme] = theme;\n  return acc;\n}, {});\n\nThemeProvider.themeSelected = themeObject.dark;\nexport const cssDarkVariables = ThemeProvider.variables;\nexport const cssDarkClasses = ThemeProvider.classsNames;\nexport const cssDarkComponents = ThemeProvider.components;\nexport const cssDarkGlobalStyles = ThemeProvider.globalStyles;\nexport const cssDarkMediaQueries = ThemeProvider.mediaQueries;\n```\n\nTo use the specific CSS classes of a component from a selected theme, there is no need to create different interactions between the objects returned by the provider. There is a method to manage this.\n\n```js\nimport { StylesProvider } from './src/styles/provider';\n\nexport const ThemeProvider = new StylesProvider({ jsInCss: true });\n\nconst { components, getComponentStyles } = ThemeProvider;\n\nconst buttonStyles = getComponentStyles({\n  variant: 'primary', // \u003c-- optional parameter\n  component: components.button,\n});\n\n/*\n * buttonStyles = {\n *   button: 'button button--primary,\n *   text: 'button__text button__text--primary,\n *   icon: 'button__icon button__icon--primary,\n * }\n */\n```\n\nThe **getComponentStyle** method has a prop that allows you to extend CSS classes with external classes, as long as the object structure is maintained.\n\n```js\nimport { StylesProvider } from './src/styles/provider';\n\nexport const ThemeProvider = new StylesProvider({ jsInCss: true });\n\nconst { components, getComponentStyles } = ThemeProvider;\n\nconst additionalClassNames = {\n  button: 'external-color',\n  text: 'external-size',\n};\n\nconst buttonStyles = getComponentStyles({\n  variant: 'primary', // \u003c-- optional parameter\n  component: components.button,\n  additionalClassNames,\n});\n\n/*\n * buttonStyles = {\n *   button: 'button button--primary external-color,\n *   text: 'button__text button__text--primary external-size,\n *   icon: 'button__icon button__icon--primary,\n * }\n */\n```\n\n## Foreign CSS documents\n\nYou probably already have CSS documents with highly customized rules and want to integrate these documents into the library provider. There is a key in the individual configuration of each theme to add all these additional documents, which will be associated with the theme in which they are established.\n\n```json\n{\n  \"provider\": {\n    \"name\": \"StylesProvider\",\n    \"path\": \"./src/styles/provider\",\n    \"declarationHelp\": true\n  },\n  \"themes\": [\n    {\n      \"name\": \"theme-1\",\n      \"foreignThemes\": [\n        {\n          \"position\": \"before\",\n          \"name\": \"teams\",\n          \"path\": \"./fixture/teams.css\"\n        },\n        {\n          \"position\": \"after\",\n          \"name\": \"reset\",\n          \"path\": \"./fixture/reset.css\"\n        }\n      ]\n      //... theme configurations\n    }\n  ]\n}\n```\n\nWith this configuration, every time the provider injects the related theme's CSS, it will also inject the established CSS. Similarly, if the external CSS files have CSS classes or variables, these keys can be accessed in their corresponding categories from the provider.\n\n### Recover className from extenal css document\n\n```js\nimport { ThemeProvider } from './src/styles/provider';\n\nconst { components, getComponentStyles } = ThemeProvider;\n\nconst avatarStyles = getComponentStyles({\n  component: components.teams, // \u003c-- This is from teams.css document\n});\n```\n\n### Recover variable from extenal css document\n\n```js\nimport { ThemeProvider } from './src/styles/provider';\n\nexport const LOGIN_BUTTON = {\n  background_color: ThemeProvider.variables.color_teams_primary, // \u003c-- This is from ':root' into teams.css document\n};\n```\n\n## Compiler Options\n\nThere is a script provided by the library to generate a build/dist bundler is:\n\n```bash\nnpx bv-build\n```\n\nWhen 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.\n\n```json\n{\n  // ...rest of the config\n  \"compilerOptions\": {\n    \"baseOutDir\": \"./dist\",\n    \"rootDir\": \"./src\",\n    \"minifyCss\": true,\n    \"minifyJS\": true,\n    \"preventMoveJS\": false,\n    \"preventMoveDTS\": false,\n    \"types\": [\"cjs\", \"esm\"],\n    \"customOutDirs\": {\n      \"css\": \"./custom/outdir/css\",\n      \"provider\": \"./custom/outdir/provider\",\n      \"tools\": \"./custom/outdir/tools\"\n    }\n  }\n  // ...rest of the config\n}\n```\n\n### Compiler Options Properties\n\n- **baseOutDir**: Specifies the base output directory where all compiled files will be placed. This is the root folder for your distribution files.\n\n- **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.\n\n- **minifyCss**: When set to `true`, CSS files will be minified to reduce file size. The minified files will have the `.min.css` extension.\n\n- **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.\n\n- **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.\n\n- **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.\n\n- **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.\n\n  - `\"cjs\"`: Generate CommonJS modules for node.js compability.\n  - `\"esm\"`: Generate ES Modules for modern JavaScript environments\n\n- **customOutDirs**: An optional object that allows you to specify custom output directories for different file types, overriding the default structure:\n - `\"css\"`: Custom output path for CSS files\n - `\"provider\"`: Custom output path for provider file\n - `\"tools\"`: Custom output path for tools files (cssVars, cssClasses, etc)\n\n- **embedCss**: When set to `'true'`, instead of generating a static CSS file, the styles generated by Bernova will be embedded.\n\n ### Overwrite or set a single customOutDirs\n\nYou 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.\n\n```bash\n# css case\nnpx bv-build --css dist/custom/output\n\n# tools case\nnpx bv-build --tools dist/custom/output\n\n# provider and stats case\nnpx bv-build --provider dist/custom/output\n\n# full case\nnpx bv-build --css dist/custom/output --tools dist/custom/output --provider dist/custom/output\n```\n\nThere are other cases where you may need to override values set in the bernova.config.json document or set a specific value for a single case.\n\n**Important**: For affirmative Boolean values, it is sufficient to set the flag. And to remove values set in the bernova.config.json file, the word `'none'` is used.\n\nThe flags available for this are:\n\n```bash\n# baseOutDir case\nnpx bv-build --base-out-dir custom/base/out/dir\n\n# rootDir case\nnpx bv-build --root-dir custom/root/dir\n\n# preventMoveJS case\nnpx bv-build --prevent-move-js\n\n# preventMoveDTS case\nnpx bv-build --prevent-move-dts\n\n# unset types values from bernova.config.json\nnpx bv-build --types none\n\n# Prevent process the js ad dts files\nnpx bv-build --prevent-process-js\n\n# Embed styles\nnpx bv-build --embed-css\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkubit-ui%2Fbernova","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkubit-ui%2Fbernova","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkubit-ui%2Fbernova/lists"}