bernova 0.0.2

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

@@ -0,0 +1,249 @@
+/**
+ * CSS Styles Generation Module for Bernova
+ *
+ * Processes CSS-in-JS objects and generates CSS strings with support for:
+ * - Nested styles and components
+ * - Pseudo-classes and pseudo-elements
+ * - Media queries and responsive design
+ * - Advanced selectors (child, sibling, etc.)
+ * - Attribute selectors
+ * - Foreign theme integration
+ * - Dynamic value interpolation
+ */
+
+const {
+  formatRuleName,
+  setForeignRegister,
+  pseudoHandler,
+  foreignHandler,
+  attributeHandler,
+  advancedSelectorHandler,
+  separateStyles,
+  extractValues,
+  mediaQueriesHandler,
+  generateMediaQueries,
+  handlerRegister,
+  setDynamicRegister,
+  processDynamicProps,
+} = require('./index.js');
+
+/**
+ * Generates CSS styles from a JavaScript object representation
+ *
+ * @param {Object} params - Generation parameters
+ * @param {Object} params.source - CSS-in-JS source object
+ * @param {Object} params.mediaConfig - Media query configuration
+ * @param {string} params.prefix - CSS class prefix for namespacing
+ * @returns {Object} Generated CSS styles and documentation
+ */
+const generateCssStyles = ({ source, mediaConfig, prefix }) => {
+  // Initialize generation state
+  let cssStyles = ''; // Accumulates generated CSS
+  let register = {}; // Tracks generated class names
+  const mediaRegister = {}; // Tracks media query styles
+  const prefixed = prefix ? `${prefix}-` : ''; // CSS class prefix
+
+  /**
+   * Recursively processes CSS-in-JS source objects
+   * Handles nested structures, special properties, and generates CSS rules
+   *
+   * @param {Object} params - Processing parameters
+   * @param {Object} params.source - CSS object to process
+   * @param {string} params.parentRule - Parent CSS rule for nesting
+   * @param {string} params.theRule - Current rule name
+   */
+  const processSource = ({
+    source,
+    parentRule = undefined,
+    theRule = undefined,
+  }) => {
+    const {
+      styles,
+      lib: { $dynamicValues, ...lib },
+      other,
+    } = separateStyles(source);
+    const hasStyles = Object.entries(styles).length > 0;
+    const hasOtherProps = Object.entries(other).length > 0;
+    const hasLibProps = Object.entries(lib).length > 0;
+
+    const dynamicValues = $dynamicValues
+      ? processDynamicProps($dynamicValues)
+      : undefined;
+
+    const ruleName = formatRuleName({
+      theRule,
+      parentRule,
+      register,
+      hasStyles,
+      prefix: prefixed,
+    });
+
+    if (hasStyles) {
+      cssStyles += `.${ruleName} { ${extractValues({
+        styles,
+        dynamicValues,
+      })} }\n`;
+    }
+    if (hasLibProps) {
+      const {
+        $pseudoClasses,
+        $pseudoElements,
+        $mediaQueries,
+        $attributes,
+        $advancedSelectors,
+        $foreign,
+      } = lib;
+
+      if (Object.entries(other).length) {
+        processSource({ source: other, parentRule: ruleName });
+      }
+      if ($pseudoClasses) {
+        pseudoHandler({ pseudoData: $pseudoClasses, ruleName, processSource });
+      }
+      if ($pseudoElements) {
+        pseudoHandler({ pseudoData: $pseudoElements, ruleName, processSource });
+      }
+      if ($mediaQueries && !!mediaConfig) {
+        mediaQueriesHandler({
+          config: mediaConfig,
+          mediaQueries: $mediaQueries,
+          parentRule: ruleName,
+          theRule,
+          mediaRegister,
+        });
+      }
+      if ($attributes) {
+        attributeHandler({ attributes: $attributes, ruleName, processSource });
+      }
+      if ($advancedSelectors) {
+        advancedSelectorHandler($advancedSelectors, ruleName, processSource);
+      }
+      if ($foreign) {
+        const foreignRegister = foreignHandler({
+          foreign: $foreign,
+          prefix: prefixed,
+        });
+        const foreignName = ruleName.replace(prefixed, '');
+        setForeignRegister({
+          ruleName: foreignName,
+          foreignRegister,
+          register,
+        });
+      }
+      if (dynamicValues) {
+        setDynamicRegister({
+          dynamicValues,
+          register,
+          ruleName,
+          prefix: prefixed,
+        });
+      }
+    }
+    if (hasOtherProps) {
+      for (const [key, value] of Object.entries(other)) {
+        if (typeof value === 'object') {
+          const {
+            $pseudoClasses,
+            $pseudoElements,
+            $mediaQueries,
+            $attributes,
+            $advancedSelectors,
+            $foreign,
+            $dynamicValues,
+            ...css
+          } = value;
+
+          const { styles, other } = separateStyles(css);
+          const hasStyles = Object.entries(styles).length > 0;
+
+          const dynamicValues = $dynamicValues
+            ? processDynamicProps($dynamicValues)
+            : undefined;
+
+          const ruleName = formatRuleName({
+            key,
+            theRule,
+            parentRule,
+            register,
+            hasStyles,
+            prefix: prefixed,
+          });
+
+          if (hasStyles) {
+            cssStyles += `.${ruleName} { ${extractValues({
+              styles,
+              dynamicValues,
+            })} }\n`;
+          }
+          if (Object.entries(other).length) {
+            processSource({ source: other, parentRule: ruleName });
+          }
+          if ($pseudoClasses) {
+            pseudoHandler({
+              pseudoData: $pseudoClasses,
+              ruleName,
+              processSource,
+            });
+          }
+          if ($pseudoElements) {
+            pseudoHandler({
+              pseudoData: $pseudoElements,
+              ruleName,
+              processSource,
+            });
+          }
+          if ($mediaQueries && !!mediaConfig) {
+            mediaQueriesHandler({
+              config: mediaConfig,
+              mediaQueries: $mediaQueries,
+              parentRule: ruleName,
+              theRule,
+              mediaRegister,
+            });
+          }
+          if ($attributes) {
+            attributeHandler({
+              attributes: $attributes,
+              ruleName,
+              processSource,
+            });
+          }
+          if ($advancedSelectors) {
+            advancedSelectorHandler(
+              $advancedSelectors,
+              ruleName,
+              processSource
+            );
+          }
+          if ($foreign) {
+            const foreignRegister = foreignHandler({
+              foreign: $foreign,
+              prefix: prefixed,
+            });
+            const foreignName = ruleName.replace(prefixed, '');
+            setForeignRegister({
+              ruleName: foreignName,
+              foreignRegister,
+              register,
+            });
+          }
+          if (dynamicValues) {
+            setDynamicRegister({
+              dynamicValues,
+              register,
+              ruleName,
+              prefix: prefixed,
+            });
+          }
+        }
+      }
+    }
+  };
+
+  processSource({ source });
+  const stylesDocs = handlerRegister({ register, prefix });
+  const cssMediaStyles = generateMediaQueries(mediaRegister);
+  return { styles: cssStyles.concat(cssMediaStyles), stylesDocs };
+};
+
+module.exports = { generateCssStyles };

package/src/lib/generateCss/helpers/index.js

@@ -0,0 +1,53 @@
+const {
+  advancedSelectorHandler,
+} = require('./advanceselector/advancedSelectorHandler.utils');
+const { attributeHandler } = require('./attribute/attributeHandler.utils');
+const { formatClassName } = require('./classnames/formatClassName.utils');
+const { generateVars } = require('./cssVars/generateVars.utils');
+const { foreignHandler } = require('./foreign/foreignHandler.utils');
+const {
+  generateMediaQueries,
+} = require('./mediaqueries/generateMediaQueries.utils');
+const {
+  mediaQueriesHandler,
+} = require('./mediaqueries/mediaQueriesHandler.utils');
+const { declareCssType } = require('./other/declareCssType.utils');
+const { generateGlobalStyles } = require('./other/generateGlobalStyles.utils');
+const { pseudoHandler } = require('./pseudo/pseudoHandler.utils');
+const {
+  formatRuleName,
+  setForeignRegister,
+} = require('./rulename/formatRuleName.utils');
+const { extractValues } = require('./utils/extractValues.utils');
+const { processCssWithPostcss } = require('./utils/processCss.utils');
+const { separateStyles } = require('./utils/separateStyles.utils');
+const {
+  validatePreviouslyExists,
+} = require('./utils/validatePreviouslyExists.utils');
+const { formattedStatKey } = require('./utils/formattedStatKey.utils');
+const { handlerRegister } = require('./classnames/handlerRegister.utils');
+const { setDynamicRegister } = require('./dynamicValues/dynamicValues.utils');
+const { processDynamicProps } = require('./dynamicValues/processDynamic.utils');
+
+module.exports = {
+  advancedSelectorHandler,
+  attributeHandler,
+  formatClassName,
+  generateVars,
+  foreignHandler,
+  generateMediaQueries,
+  mediaQueriesHandler,
+  declareCssType,
+  generateGlobalStyles,
+  pseudoHandler,
+  formatRuleName,
+  setForeignRegister,
+  extractValues,
+  processCssWithPostcss,
+  separateStyles,
+  validatePreviouslyExists,
+  formattedStatKey,
+  handlerRegister,
+  setDynamicRegister,
+  processDynamicProps,
+};

package/src/lib/generateCss/helpers/mediaqueries/generateMediaQueries.utils.js

@@ -0,0 +1,9 @@
+const generateMediaQueries = (mediaRegister) => {
+  let cssMediaStyles = '';
+  Object.entries(mediaRegister).forEach(([mediaName, mediaStyles]) => {
+    cssMediaStyles += `@media ${mediaName} {\n${mediaStyles}}\n`;
+  });
+  return cssMediaStyles;
+};
+
+module.exports = { generateMediaQueries };

package/src/lib/generateCss/helpers/mediaqueries/mediaQueriesHandler.utils.js

@@ -0,0 +1,181 @@
+/**
+ * Media Queries Handler for Bernova CSS Framework
+ *
+ * Processes and generates CSS media queries from JavaScript objects.
+ * Handles nested styles, pseudo-classes, and advanced selectors within media queries.
+ */
+
+const {
+  advancedSelectorHandler,
+} = require('../advanceselector/advancedSelectorHandler.utils');
+const { attributeHandler } = require('../attribute/attributeHandler.utils');
+const { formatClassName } = require('../classnames/formatClassName.utils');
+const { pseudoHandler } = require('../pseudo/pseudoHandler.utils');
+const { formatRuleName } = require('../rulename/formatRuleName.utils');
+const { extractValues } = require('../utils/extractValues.utils');
+const { separateStyles } = require('../utils/separateStyles.utils');
+
+/**
+ * Handles CSS generation within media queries context
+ * Processes styles that should be applied at specific breakpoints
+ *
+ * @param {Object} mediaStyles - CSS styles object for media query
+ * @param {string} parentRule - Parent CSS rule selector
+ * @param {string} theRule - Current CSS rule being processed
+ * @returns {Object} Generated CSS and register information
+ */
+const handleMediaQueriesStyles = ({ mediaStyles, parentRule, theRule }) => {
+  let cssMediaStyles = '';
+  let mediaRegister = {};
+
+  /**
+   * Recursively processes media query styles
+   * Separates CSS properties from nested objects and generates appropriate selectors
+   */
+  const processMediaStyles = ({
+    source,
+    parentRule = undefined,
+    theRule = undefined,
+  }) => {
+    const { styles, other } = separateStyles(source);
+    const hasStyles = Object.entries(styles).length > 0;
+    const hasOtherProps = Object.entries(other).length > 0;
+    const ruleName = formatRuleName({
+      key: parentRule,
+      theRule,
+      parentRule: undefined,
+      register: mediaRegister,
+      hasStyles,
+      prefix: '',
+    });
+
+    if (hasStyles) {
+      cssMediaStyles += `.${ruleName} { ${extractValues({ styles })} }\n`;
+    }
+    if (hasOtherProps) {
+      for (const [key, value] of Object.entries(other)) {
+        if (typeof value === 'object') {
+          const {
+            $pseudoClasses,
+            $pseudoElements,
+            $mediaQueries,
+            $attributes,
+            $advancedSelectors,
+            $foreign,
+            $extends,
+            $recycle,
+            $variables,
+            ...css
+          } = value;
+
+          const { styles, other } = separateStyles(css);
+          const hasStyles = Object.entries(styles).length > 0;
+          const ruleName = formatRuleName({
+            key,
+            theRule,
+            parentRule,
+            register: mediaRegister,
+            hasStyles,
+            prefix: '',
+          });
+
+          if (hasStyles) {
+            cssMediaStyles += `.${ruleName} { ${extractValues({ styles })} }\n`;
+          }
+          if (Object.entries(other).length) {
+            processMediaStyles({ source: other, parentRule: ruleName });
+          }
+          if ($pseudoClasses) {
+            pseudoHandler({
+              pseudoData: $pseudoClasses,
+              ruleName,
+              processSource: processMediaStyles,
+            });
+          }
+          if ($pseudoElements) {
+            pseudoHandler({
+              pseudoData: $pseudoElements,
+              ruleName,
+              processSource: processMediaStyles,
+            });
+          }
+          if ($attributes) {
+            attributeHandler({
+              attributes: $attributes,
+              ruleName,
+              processSource: processMediaStyles,
+            });
+          }
+          if ($advancedSelectors) {
+            advancedSelectorHandler(
+              $advancedSelectors,
+              ruleName,
+              processMediaStyles
+            );
+          }
+          if ($foreign) {
+            const [comp, ..._] = ruleName.split('--');
+            const component = comp.length ? comp : '';
+            const mainComponent = component.includes('__')
+              ? component.split('__')[0]
+              : component;
+            Object.entries($foreign).forEach(([key, value]) => {
+              const foreignComponent = `${mainComponent}-${key}`;
+              processSource({ source: value, parentRule: foreignComponent });
+            });
+          }
+        }
+      }
+    }
+  };
+
+  processMediaStyles({ source: mediaStyles, theRule, parentRule });
+  return cssMediaStyles;
+};
+
+const mediaQueriesHandler = ({
+  config,
+  mediaQueries,
+  parentRule,
+  theRule,
+  mediaRegister,
+}) => {
+  Object.entries(mediaQueries).forEach(([media, mediaStyles]) => {
+    const relatedConfig = config.find((c) => c.name === media);
+    if (typeof mediaStyles === 'object' && Object.keys(mediaStyles).length) {
+      const { $type = '', $values, ...rest } = mediaStyles;
+      const cssMediaStyles = handleMediaQueriesStyles({
+        mediaStyles: rest,
+        parentRule,
+        theRule,
+      });
+      let _type;
+      let _values;
+      if (!!relatedConfig) {
+        const { type = '', values } = relatedConfig;
+        _type = type;
+        _values = values;
+      } else if (!!$values) {
+        _type = $type;
+        _values = $values;
+      }
+      let localValues = '';
+      Object.entries(_values).forEach(([key, value], idx) => {
+        const formattedKey = formatClassName(key);
+        if (idx > 0 || _type.length) {
+          localValues += ' and';
+        }
+        localValues += ` (${formattedKey}: ${value})`;
+      });
+
+      const mediaName = `${_type}${localValues}`;
+      if (!(mediaName in mediaRegister)) {
+        mediaRegister[mediaName] = cssMediaStyles;
+      } else {
+        mediaRegister[mediaName] += cssMediaStyles;
+      }
+    }
+  });
+};
+
+module.exports = { mediaQueriesHandler };

package/src/lib/generateCss/helpers/other/declareCssType.utils.js

@@ -0,0 +1,120 @@
+const path = require('path');
+const {
+  cssProps,
+  cssPseudoClasses,
+  cssPseudoElements,
+  cssAdvancedSelectors,
+} = require('../../../../constants/index.js');
+const { writeDoc } = require('../../../writeDoc/writeDoc.utils.js');
+
+/**
+ * Generates TypeScript type definitions for CSS properties, pseudo-classes, pseudo-elements,
+ * attributes, and media queries, and writes them to a file.
+ *
+ * @param {Object} mediaQueries - An object containing media query definitions.
+ * @param {string} dir - The directory path where the generated TypeScript file will be saved.
+ * @returns {Promise<void>} A promise that resolves when the file has been written.
+ */
+const declareCssType = async (mediaQueries, dir) => {
+  const generateTypeDefinition = (name, content) =>
+    `type ${name} = {\n${content}\n};\n`;
+
+  const generateInterfaceContent = (obj, additionalContent = '') =>
+    Object.keys(obj)
+      .map((key) => `${key}?: ${additionalContent}`)
+      .join('\n');
+
+  const libExtendsInterface = generateTypeDefinition(
+    'LibExtendsType',
+    '$extends?: string;'
+  );
+  const libRecycleInterface = generateTypeDefinition(
+    'LibRecycleType',
+    '$recycle?: string;'
+  );
+  const foreignInterface = generateTypeDefinition(
+    'ForeignType',
+    '$foreign?: { [key: string]: { [key: string]: CssPropsType & CssPseudoJoinedType & CssAddicionalTypes } };'
+  );
+
+  const cssPropsInterface = generateTypeDefinition(
+    'CssPropsType',
+    `LibExtendsType & LibRecycleType & ForeignType & {\n${generateInterfaceContent(
+      cssProps,
+      'string;'
+    )}\n}`
+  );
+
+  const cssAdvancedSelectorsInterface = generateTypeDefinition(
+    'CssAdvancedSelectorsType',
+    generateInterfaceContent(
+      cssAdvancedSelectors,
+      'CssPropsType & { $target: string }'
+    )
+  );
+
+  const cssPseudoJoined = generateTypeDefinition(
+    'CssPseudoJoinedType',
+    '$pseudoClasses?: CssPseudoClassesType;\n$pseudoElements?: CssPseudoElementsType;'
+  );
+
+  const cssAddicionalTypes = generateTypeDefinition(
+    'CssAddicionalTypes',
+    '$advancedSelectors?: CssAdvancedSelectorsType[];\n$mediaQueries?: MediaQueriesType;\n'
+  );
+
+  const cssPseudoClassesInterface = generateTypeDefinition(
+    'CssPseudoClassesType',
+    generateInterfaceContent(
+      cssPseudoClasses,
+      'CssPropsType & { $target?: string } & CssAddicionalTypes & { $attributes?: CssAttributesType } | CssPseudoElementsType & CssAddicionalTypes & { $attributes?: CssAttributesType } | CssPseudoClassesType & CssAddicionalTypes & { $attributes?: CssAttributesType };'
+    )
+  );
+
+  const cssPseudoElementsInterface = generateTypeDefinition(
+    'CssPseudoElementsType',
+    generateInterfaceContent(
+      cssPseudoElements,
+      'CssPropsType & CssAddicionalTypes & { $attributes?: CssAttributesType } | CssPseudoElementsType & CssAddicionalTypes & { $attributes?: CssAttributesType } | CssPseudoClassesType & CssAddicionalTypes & { $attributes?: CssAttributesType };'
+    )
+  );
+
+  const attributesInterface = generateTypeDefinition(
+    'CssAttributesType',
+    '[key: string]: CssPropsType & CssAddicionalTypes & CssPseudoJoinedType | {\n[key: string]: CssPropsType & CssAddicionalTypes & CssPseudoJoinedType \n};'
+  );
+
+  let mediaQueriesInterface = '';
+  if (mediaQueries?.screen && Object.keys(mediaQueries.screen).length) {
+    const mediaScreenInterface = generateTypeDefinition(
+      'MediaScreenType',
+      generateInterfaceContent(mediaQueries.screen, 'CssPropsType;')
+    );
+    mediaQueriesInterface = `${mediaScreenInterface}type MediaQueriesType = {\n screen?: MediaScreenType;\n};\n`;
+  }
+
+  const cssGeneratorInterface = `export type CssGeneratorType = CssPropsType & {\n$pseudoClasses?: CssPseudoClassesType;\n$pseudoElements?: CssPseudoElementsType;\n$mediaQueries?: MediaQueriesType;\n$attributes?: CssAttributesType;\n$advancedSelectors?: CssAdvancedSelectorsType[];\n};\n`;
+
+  const finalTypeDoc = [
+    libExtendsInterface,
+    libRecycleInterface,
+    foreignInterface,
+    cssPropsInterface,
+    cssAdvancedSelectorsInterface,
+    cssPseudoJoined,
+    cssAddicionalTypes,
+    cssPseudoClassesInterface,
+    cssPseudoElementsInterface,
+    mediaQueriesInterface,
+    attributesInterface,
+    cssGeneratorInterface,
+  ].join('');
+
+  await writeDoc(
+    path.resolve(dir, 'generatorType.ts'),
+    finalTypeDoc,
+    'generatorType.ts'
+  );
+};
+
+module.exports = { declareCssType };

package/src/lib/generateCss/helpers/other/generateGlobalStyles.utils.js

@@ -0,0 +1,30 @@
+const { simplifyName } = require('../../../simplifyName/simplifyName.utils.js');
+const { extractValues } = require('../utils/extractValues.utils.js');
+
+/**
+ * Generates globalStyles CSS styles from the provided globalStyles styles object.
+ *
+ * @param {Array} globalStyles - An array of objects containing targets and styles.
+ * @returns {string} The generated globalStyles CSS styles.
+ */
+const generateGlobalStyles = (globalStyles) => {
+  return globalStyles.reduce(
+    (acc, { targets, styles }) => {
+      const stylesString = extractValues({ styles });
+      acc.globalStyles += `${targets} { ${stylesString} }\n`;
+      //* Set the globalStyles register
+      const allTargets = targets.split(' ').filter((t) => t.startsWith('.'));
+      if (allTargets.length) {
+        allTargets.forEach((target) => {
+          const formattedTarget = simplifyName(target);
+          acc.globalDocs.doc += `  ${formattedTarget}: '${target}',\n`;
+          acc.globalDocs.declare += `  ${formattedTarget}: string;\n`;
+        });
+      }
+      return acc;
+    },
+    { globalStyles: '', globalDocs: { doc: '', declare: '' } }
+  );
+};
+
+module.exports = { generateGlobalStyles };

package/src/lib/generateCss/helpers/pseudo/pseudoHandler.utils.js

@@ -0,0 +1,56 @@
+const {
+  cssPseudoClasses,
+  cssPseudoElements,
+} = require('../../../../constants/index.js');
+const { separateStyles } = require('../utils/separateStyles.utils.js');
+
+/**
+ * Handles pseudo-classes and pseudo-elements, and processes nested objects.
+ *
+ * @param {Object} pseudoData - The pseudo-classes and pseudo-elements to process.
+ * @param {string} ruleName - The base rule name to be used.
+ * @param {Function} processSource - A function to process nested objects.
+ */
+const pseudoHandler = ({ pseudoData, ruleName, processSource }) => {
+  for (const [pseudo, properties] of Object.entries(pseudoData)) {
+    //? Determine the pseudo type
+    const pseudoType = (() => {
+      if (pseudo in cssPseudoClasses) {
+        return `:${cssPseudoClasses[pseudo]}`;
+      } else if (pseudo in cssPseudoElements) {
+        return `::${cssPseudoElements[pseudo]}`;
+      }
+      return '';
+    })();
+    //? Extract special property and the rest
+    const { $target, ...props } = properties;
+    //? Build the complete rule name
+    const pseudoRule = $target ? `${pseudoType}(${$target})` : `${pseudoType}`;
+    const completeRuleName = `${ruleName}${pseudoRule}`;
+    //? Separate properties into special and regular
+    /**
+     * styles: regular CSS properties
+     * lib: special properties like $pseudoClasses, $mediaQueries, etc.
+     * other: any other properties that don't fit into styles or lib
+     */
+    const { styles, lib, other } = separateStyles(props);
+    const processStyles =
+      Object.entries(styles).length > 0 || Object.entries(lib).length > 0;
+    const hasNestedStyles = Object.keys(other).some(
+      (oth) => oth in cssPseudoClasses || oth in cssPseudoElements
+    );
+    if (hasNestedStyles) {
+      pseudoHandler({
+        pseudoData: other,
+        ruleName: completeRuleName,
+        processSource,
+      });
+    }
+    if (processStyles) {
+      const mergeStyles = { ...styles, ...lib };
+      processSource({ source: mergeStyles, theRule: completeRuleName });
+    }
+  }
+};
+
+module.exports = { pseudoHandler };