bernova 0.0.2

package/src/lib/generateProvider/generateProvider.utils.js

@@ -0,0 +1,283 @@
+/**
+ * Provider Generation Module for Bernova
+ *
+ * Generates JavaScript/TypeScript provider utilities that allow applications
+ * to consume Bernova-generated CSS classes, variables, and theme data.
+ *
+ * Creates:
+ * - CSS class name mappings
+ * - CSS variable exports
+ * - Theme switching utilities
+ * - TypeScript declarations
+ * - Development statistics
+ */
+
+const f = require('fs');
+const fs = require('fs').promises;
+const path = require('path');
+const { writeDoc } = require('../writeDoc/writeDoc.utils');
+const { compilerTypeValid } = require('../../constants');
+const {
+  extractDocFragment,
+} = require('../extractDocFragment/extractDocFragment.utils');
+
+/**
+ * Builds statistics document with theme data and CSS information
+ * Handles incremental builds by preserving data from previous compilations
+ *
+ * @param {Object} params - Build parameters
+ * @param {Object} params.providerDocs - Theme documentation data
+ * @param {boolean} params.declarationHelp - Whether to generate TypeScript declarations
+ * @param {string} params.compilerType - Type of compilation being performed
+ * @param {string} params.dir - Output directory for provider files
+ * @returns {Promise<Object>} Generated documentation structure
+ */
+const buildStatsDoc = async ({
+  providerDocs,
+  declarationHelp,
+  compilerType,
+  dir,
+}) => {
+  const initialState = {
+    doc: {
+      cssThemes: '/* CssThemes */\nexport const cssThemes = {\n',
+      cssVars: '/* CssVars */\nexport const cssVars = {\n',
+      cssClasses: '/* CssClasses */\nexport const cssClasses = {\n',
+      cssAvailableComponents:
+        '/* CssAvailableComponents */\nexport const cssAvailableComponents = {\n',
+      cssGlobalStyles:
+        '/* CssGlobalStyles */\nexport const cssGlobalStyles = {\n',
+      cssMediaQueries:
+        '/* CssMediaQueries */\nexport const cssMediaQueries = {\n',
+    },
+    declare: {
+      cssThemes: '/* CssThemes */\nexport declare const cssThemes: {\n',
+      cssVars: '/* CssVars */\nexport interface CssVars {\n',
+      cssClasses: '/* CssClasses */\nexport interface CssClasses {\n',
+      cssAvailableComponents:
+        '/* CssAvailableComponents */\nexport interface CssAvailableComponents {\n',
+      cssGlobalStyles:
+        '/* CssGlobalStyles */\nexport interface CssGlobalStyles {\n',
+      cssMediaQueries:
+        '/* CssMediaQueries */\nexport interface CssMediaQueries {\n',
+    },
+  };
+  const hasPreviouslyConfig = f.existsSync(dir);
+  if (hasPreviouslyConfig) {
+    //* recover the stats document previously generated
+    const stats = await fs.readFile(
+      path.resolve(dir, 'stats/stats.js'),
+      'utf8'
+    );
+
+    //* extract the css variables
+    if (compilerType === compilerTypeValid.componentOnly) {
+      //? extract the css variables
+      const cssVars = extractDocFragment({ section: 'CssVars', doc: stats });
+      //? extract the global styles
+      const cssGlobalStyles = extractDocFragment({
+        section: 'CssGlobalStyles',
+        doc: stats,
+      });
+      const cssMediaQueries = extractDocFragment({
+        section: 'CssMediaQueries',
+        doc: stats,
+      });
+
+      initialState.doc.cssVars = `/* CssVars */\n${cssVars}\n/* CssVars */\n`;
+      initialState.doc.cssGlobalStyles = `/* CssGlobalStyles */\n${cssGlobalStyles}\n/* CssGlobalStyles */\n`;
+      initialState.doc.cssMediaQueries = `/* CssMediaQueries */\n${cssMediaQueries}\n/* CssMediaQueries */\n`;
+    }
+
+    //* extract the css class names
+    if (compilerType === compilerTypeValid.foundationOnly) {
+      const cssClasses = extractDocFragment({
+        section: 'CssClasses',
+        doc: stats,
+      });
+      const cssAvailableComponents = extractDocFragment({
+        section: 'CssAvailableComponents',
+        doc: stats,
+      });
+      initialState.doc.cssClasses = `/* CssClasses */\n${cssClasses}\n/* CssClasses */\n`;
+      initialState.doc.cssAvailableComponents = `/* CssAvailableComponents */\n${cssAvailableComponents}\n/* CssAvailableComponents */\n`;
+    }
+    //? extract the declarations
+    if (declarationHelp) {
+      const statsDeclare = await fs.readFile(
+        path.resolve(dir, 'stats/stats.d.ts'),
+        'utf8'
+      );
+      if (compilerType === compilerTypeValid.componentOnly) {
+        const cssVarsDeclare = extractDocFragment({
+          section: 'CssVars',
+          doc: statsDeclare,
+        });
+        const cssGlobalStylesDeclare = extractDocFragment({
+          section: 'CssGlobalStyles',
+          doc: statsDeclare,
+        });
+        const cssMediaQueriesDeclare = extractDocFragment({
+          section: 'CssMediaQueries',
+          doc: statsDeclare,
+        });
+
+        initialState.declare.cssVars = `/* CssVars */\n${cssVarsDeclare}\n/* CssVars */\n`;
+        initialState.declare.cssGlobalStyles = `/* CssGlobalStyles */\n${cssGlobalStylesDeclare}\n/* CssGlobalStyles */\n`;
+        initialState.declare.cssMediaQueries = `/* CssMediaQueries */\n${cssMediaQueriesDeclare}\n/* CssMediaQueries */\n`;
+      }
+      if (compilerType === compilerTypeValid.foundationOnly) {
+        const cssClassesDeclare = extractDocFragment({
+          section: 'CssClasses',
+          doc: statsDeclare,
+        });
+        const cssAvailableComponentsDeclare = extractDocFragment({
+          section: 'CssAvailableComponents',
+          doc: statsDeclare,
+        });
+        initialState.declare.cssClasses = `/* CssClasses */\n${cssClassesDeclare}\n/* CssClasses */\n`;
+        initialState.declare.cssAvailableComponents = `/* CssAvailableComponents */\n${cssAvailableComponentsDeclare}\n/* CssAvailableComponents */\n`;
+      }
+    }
+  }
+  const providerEntries = Object.entries(providerDocs);
+  const compilerVars = compilerType !== compilerTypeValid.componentOnly;
+  const compilerClasses = compilerType !== compilerTypeValid.foundationOnly;
+  return providerEntries.reduce((acc, [theme, values], idx) => {
+    //? check if there are foreign styles docs
+    const beforeFilesExists = values.beforeFiles?.length > 0;
+    const afterFilesExists = values.afterFiles?.length > 0;
+    const beforeKeyValue = beforeFilesExists
+      ? ` before: ${values.beforeFiles}, `
+      : '';
+    const afterKeyValue = afterFilesExists
+      ? ` after: ${values.afterFiles}, `
+      : '';
+    const foreignKeyValue =
+      beforeFilesExists || afterFilesExists
+        ? ` foreign: {${beforeKeyValue}${afterKeyValue}},`
+        : '';
+    //? add the theme css path
+    acc.doc.cssThemes += `  '${theme}': { css: '${values.cssPath}',${foreignKeyValue} },\n`;
+    if (declarationHelp) {
+      acc.declare.cssThemes += `  '${theme}': { css: string; foreign?: { before?: string[]; after?: string[]; }; };\n`;
+    }
+    //? add the css variables
+    if (compilerVars) {
+      acc.doc.cssVars += `  '${theme}': {\n${
+        values.variables?.doc || ''
+      }  },\n`;
+      acc.doc.cssGlobalStyles += `  '${theme}': {\n${
+        values.globalStyles?.doc || ''
+      }  },\n`;
+      acc.doc.cssMediaQueries += `  '${theme}': {\n${
+        values.mediaQueries?.doc || ''
+      }  },\n`;
+      if (declarationHelp) {
+        acc.declare.cssVars += `  '${theme}': {\n${
+          values.variables?.declare || ''
+        }  },\n`;
+        acc.declare.cssGlobalStyles += `  '${theme}': {\n${
+          values.globalStyles?.declare || ''
+        }  },\n`;
+        acc.declare.cssMediaQueries += `  '${theme}': {\n${
+          values.mediaQueries?.declare || ''
+        }  },\n`;
+      }
+    }
+    //? add the css class names amd available components
+    if (compilerClasses) {
+      acc.doc.cssClasses += `  '${theme}': {\n${
+        values.classNames?.doc || ''
+      }  },\n`;
+      acc.doc.cssAvailableComponents += `  '${theme}': {\n${
+        values.availableComp?.doc || ''
+      }  },\n`;
+      if (declarationHelp) {
+        acc.declare.cssClasses += `  '${theme}': {\n${
+          values.classNames?.declare || ''
+        }  },\n`;
+        acc.declare.cssAvailableComponents += `  '${theme}': {\n${
+          values.availableComp?.declare || ''
+        }  },\n`;
+      }
+    }
+    if (idx === providerEntries.length - 1) {
+      acc.doc.cssThemes += '}\n/* CssThemes */\n';
+      acc.doc.cssVars += compilerVars ? '}\n/* CssVars */\n' : '';
+      acc.doc.cssGlobalStyles += compilerVars
+        ? '}\n/* CssGlobalStyles */\n'
+        : '';
+      acc.doc.cssMediaQueries += compilerVars
+        ? '}\n/* CssMediaQueries */\n'
+        : '';
+
+      acc.doc.cssClasses += compilerClasses ? '}\n/* CssClasses */\n' : '';
+      acc.doc.cssAvailableComponents += compilerClasses
+        ? '}\n/* CssAvailableComponents */\n'
+        : '';
+      if (declarationHelp) {
+        acc.declare.cssThemes += '}\n/* CssThemes */\n';
+        acc.declare.cssVars += compilerVars ? '}\n/* CssVars */\n' : '';
+        acc.declare.cssGlobalStyles += compilerVars
+          ? '}\n/* CssGlobalStyles */\n'
+          : '';
+        acc.declare.cssMediaQueries += compilerVars
+          ? '}\n/* CssMediaQueries */\n'
+          : '';
+        acc.declare.cssClasses += compilerClasses
+          ? '}\n/* CssClasses */\n'
+          : '';
+        acc.declare.cssAvailableComponents += compilerClasses
+          ? '}\n/* CssAvailableComponents */\n'
+          : '';
+      }
+    }
+    return acc;
+  }, initialState);
+};
+
+const generateProvider = async ({
+  dir,
+  providerDocs,
+  declarationHelp,
+  providerName,
+  compilerType,
+}) => {
+  const { doc, declare } = await buildStatsDoc({
+    providerDocs,
+    declarationHelp,
+    compilerType,
+    dir,
+  });
+
+  //? write stats document
+  const docsTemplate = `${doc.cssThemes}\n${doc.cssVars}\n${doc.cssClasses}\n${doc.cssAvailableComponents}\n${doc.cssGlobalStyles}\n${doc.cssMediaQueries}\n`;
+  await writeDoc(`${dir}/stats/stats.js`, docsTemplate, 'stats.js');
+  //? write provider
+  const providerDir = path.resolve(__dirname, './template/providerTemplate.js');
+  let template = await fs.readFile(providerDir, 'utf8');
+  //* customize provider name
+  template = template.replace(/\$_Provider_\$/g, providerName);
+  await writeDoc(`${dir}/${providerName}.js`, template, `${providerName}.js`);
+
+  if (declarationHelp) {
+    //? write stats declare document
+    const declareTemplate = `${declare.cssThemes}\n${declare.cssVars}\n${declare.cssClasses}\n${declare.cssAvailableComponents}\n${declare.cssGlobalStyles}\n${declare.cssMediaQueries}\nexport declare const cssVars: CssVars;\nexport declare const cssClasses: CssClasses;\nexport declare const cssAvailableComponents: CssAvailableComponents;\nexport declare const cssGlobalStyles: CssGlobalStyles;\nexport declare const cssMediaQueries: CssMediaQueries;\n`;
+    await writeDoc(`${dir}/stats/stats.d.ts`, declareTemplate, 'stats.d.ts');
+    //? write provider declare document
+    const providerDirDeclare = path.resolve(
+      __dirname,
+      './template/providerTemplate.d.ts'
+    );
+    let templateDeclare = await fs.readFile(providerDirDeclare, 'utf8');
+    templateDeclare = templateDeclare.replace(/\$_Provider_\$/g, providerName);
+    await writeDoc(
+      `${dir}/${providerName}.d.ts`,
+      templateDeclare,
+      `${providerName}.d.ts`
+    );
+  }
+};
+
+module.exports = { generateProvider };

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

@@ -0,0 +1,60 @@
+import {
+  cssThemes,
+  cssClasses,
+  cssVars,
+  cssAvailableComponents,
+  cssGlobalStyles,
+  cssMediaQueries,
+} from './stats/stats';
+
+type ThemesKeys = keyof typeof cssThemes;
+/* Get the types of each variable from the current theme selected */
+type VarFromTheme = (typeof cssVars)[ThemesKeys];
+type ClassNameFromTheme = (typeof cssClasses)[ThemesKeys];
+type ComponentsFromTheme = (typeof cssAvailableComponents)[ThemesKeys];
+type ComponentsKey = keyof ComponentsFromTheme;
+type GlobalStylesFromThemes = (typeof cssGlobalStyles)[ThemesKeys];
+type MediaQueriesFromThemes = (typeof cssMediaQueries)[ThemesKeys];
+/* Get the type of non-variable keys from a component required */
+type NonVariablesKeys<T> = {
+  [K in keyof T]: K extends `$${string}` ? never : K;
+}[keyof T];
+type ComponentSelected<T> = Pick<T, NonVariablesKeys<T>>;
+
+export declare class $_Provider_$ {
+  private static instance: $_Provider_$;
+  #currentTheme: ThemesKeys;
+  #themes: typeof cssThemes;
+  #themesVariables: typeof cssVars;
+  #themesClassNames: typeof cssClasses;
+  #themesComponents: typeof cssAvailableComponents;
+  #themesGlobalStyles: typeof cssGlobalStyles;
+  #themesMediaQueries: typeof cssMediaQueries;
+  #linkId: string;
+  #jsInCss: boolean;
+  #linkBuilder: (url: string, id: string) => void;
+  #handlerThemes: (data: {
+    css: string;
+    foreign?: { high?: string[]; low?: string[] };
+  }) => void;
+  #cleanUpLinks: () => void;
+
+  constructor(options?: { linkId?: string; jsInCss?: boolean });
+
+  get themeSelected(): string | null;
+  get allThemesNames(): string[];
+  get allThemes(): Record<string, string>;
+  get variables(): VarFromTheme;
+  get classNames(): ClassNameFromTheme;
+  get components(): ComponentsFromTheme;
+  get globalStyles(): GlobalStylesFromThemes;
+  get mediaQueries(): MediaQueriesFromThemes;
+
+  set themeSelected(themeName: string);
+
+  getComponentStyles<T extends ComponentsKey>(params: {
+    variant?: string;
+    component: T;
+    additionalClassNames?: Partial<ComponentSelected<ClassNameFromTheme[T]>>;
+  }): ComponentSelected<ClassNameFromTheme[T]>;
+}

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

@@ -0,0 +1,160 @@
+import {
+  cssThemes,
+  cssClasses,
+  cssVars,
+  cssAvailableComponents,
+  cssGlobalStyles,
+  cssMediaQueries,
+} from './stats/stats';
+
+export class $_Provider_$ {
+  #currentTheme;
+  #themes;
+  #themesVariables;
+  #themesClassNames;
+  #themesComponents;
+  #themesGlobalStyles;
+  #themesMediaQueries;
+  #linkId;
+  #jsInCss;
+  #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);
+    }
+    linkElement.href = url;
+  };
+  #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());
+  };
+
+  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/src/lib/generateThemeRegister/generateThemeRegister.utils.js

@@ -0,0 +1,136 @@
+/**
+ * Theme Register Generator for Bernova CSS Framework
+ *
+ * Manages the registration and organization of CSS variables, styles, and components
+ * into structured documentation for provider and tool generation.
+ */
+
+/**
+ * Registers CSS custom properties (variables) from root and foreign themes
+ * Consolidates variable documentation for provider generation
+ *
+ * @param {Object} rootDocs - Root CSS variables documentation
+ * @param {Object} foreignVars - Foreign theme variables documentation
+ * @param {Object} register - Theme register to update with variables
+ */
+const registerCssVariables = ({ rootDocs, foreignVars, register }) => {
+  // Check if documentation exists for root or foreign variables
+  const rootDocsExists =
+    rootDocs?.doc?.length > 0 && rootDocs?.declare?.length > 0;
+  const foreignVarExists =
+    foreignVars?.doc?.length > 0 && foreignVars?.declare?.length > 0;
+
+  // Initialize variables section if any documentation exists
+  if (rootDocsExists || foreignVarExists) {
+    register.variables = { doc: '', declare: '' };
+  }
+
+  // Add root variables documentation
+  if (rootDocsExists) {
+    register.variables.doc += rootDocs.doc;
+    register.variables.declare += rootDocs.declare;
+  }
+
+  // Add foreign variables documentation
+  if (foreignVarExists) {
+    register.variables.doc += foreignVars.doc;
+    register.variables.declare += foreignVars.declare;
+  }
+};
+
+/**
+ * Registers CSS class names and component styles for theme documentation
+ * Consolidates component styles from local and foreign themes
+ *
+ * @param {Object} stylesDocs - Local component styles documentation
+ * @param {Object} foreignStyles - Foreign theme styles documentation
+ * @param {Object} register - Theme register to update with styles
+ */
+const registerCssStyles = ({ stylesDocs, foreignStyles, register }) => {
+  // Check existence of various style documentation types
+  const availableCompExists = stylesDocs?.comp?.object?.length > 0;
+  const stylesDocsExists =
+    stylesDocs?.prov?.doc?.length > 0 && stylesDocs?.prov?.declare?.length > 0;
+  const foreignStylesExists =
+    foreignStyles?.doc?.length > 0 && foreignStyles?.declare?.length > 0;
+
+  // Initialize classNames section if any style documentation exists
+  if (stylesDocsExists || foreignStylesExists) {
+    register.classNames = { doc: '', declare: '' };
+  }
+
+  // Add local styles documentation
+  if (stylesDocsExists) {
+    register.classNames.doc += stylesDocs.prov.doc;
+    register.classNames.declare += stylesDocs.prov.declare;
+  }
+  if (foreignStylesExists) {
+    register.classNames.doc += foreignStyles.doc;
+    register.classNames.declare += foreignStyles.declare;
+  }
+  if (availableCompExists) {
+    register.availableComp = {
+      doc: stylesDocs.comp.object,
+      declare: stylesDocs.comp.object,
+    };
+  }
+};
+
+const registerCssGlobalDocs = ({ globalDocs, register }) => {
+  if (globalDocs?.doc?.length > 0 && globalDocs?.declare?.length > 0) {
+    register.globalStyles = globalDocs;
+  }
+};
+
+const registerCssMedia = ({ mediaDocs, register }) => {
+  if (mediaDocs?.length > 0) {
+    register.mediaQueries = {
+      doc: mediaDocs,
+      declare: mediaDocs,
+    };
+  }
+};
+
+const registerBeforeAfterFiles = ({
+  foreignBeforeFiles,
+  foreignAfterFiles,
+  register,
+}) => {
+  if (foreignBeforeFiles?.length > 0) {
+    register.beforeFiles = foreignBeforeFiles;
+  }
+  if (foreignAfterFiles?.length > 0) {
+    register.afterFiles = foreignAfterFiles;
+  }
+};
+
+const generateThemeRegister = ({
+  cssPath,
+  rootDocs,
+  stylesDocs,
+  globalDocs,
+  mediaDocs,
+  foreignStyles,
+  foreignVars,
+  foreignBeforeFiles,
+  foreignAfterFiles,
+}) => {
+  const register = { cssPath };
+  //* register css variables (include foreign vars)
+  registerCssVariables({ rootDocs, foreignVars, register });
+  //* register css class names and available components (include foreign styles)
+  registerCssStyles({ stylesDocs, foreignStyles, register });
+  //* register global styles docs
+  registerCssGlobalDocs({ globalDocs, register });
+  //* register media queries docs
+  registerCssMedia({ mediaDocs, register });
+  //* register lower and higher files
+  registerBeforeAfterFiles({
+    foreignBeforeFiles,
+    foreignAfterFiles,
+    register,
+  });
+  return register;
+};
+
+module.exports = { generateThemeRegister };