@aesthetic/style/lib/index.js

A low-level, high-performance, atomic-based CSS-in-JS style engine.

// Bundled with Packemon: https://packemon.dev
// Platform: browser, Support: stable, Format: lib
'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});

const utils = require('@aesthetic/utils');

const sheet = require('./bundle-f8b1a29f.js');

const engine = require('./bundle-cfb1e92a.js'); // eslint-disable-next-line unicorn/better-regex, unicorn/no-unsafe-regex


const RULE_PATTERN = /^\.(\w+)((?::|\[|>|~|\+|\*)[^{]+)?\s*\{\s*([^:]+):\s*([^}]+)\s*\}$/i;
const FONT_FAMILY = /font-family:([^;]+)/;
const IMPORT_URL = /url\(["']?([^)]+)["']?\)/;

function addRuleToCache(engine$1, rule, rank, media = '', supports = '') {
  const [, className, rawSelector = '', property, rawValue] = rule.match(RULE_PATTERN); // Has trailing spaces

  const selector = rawSelector.trim(); // Has trailing semi-colon

  const value = rawValue.slice(0, -1);
  engine$1.cacheManager.write(engine.createCacheKey(property, value, {
    media,
    selector,
    supports
  }), {
    rank,
    result: className
  });
}

function hydrate(engine$1, sheet) {
  let rank = 0;

  const gatherStack = (rule, prevMedia = '', prevSupports = '') => {
    const condition = rule.conditionText || rule.media.mediaText;
    let media = prevMedia;
    let supports = prevSupports;

    if (rule.type === engine.MEDIA_RULE) {
      media = utils.joinQueries(media, condition);
    } else if (rule.type === engine.SUPPORTS_RULE) {
      supports = utils.joinQueries(supports, condition);
    }

    utils.arrayLoop(rule.cssRules, child => {
      if (child.type === engine.STYLE_RULE) {
        addRuleToCache(engine$1, child.cssText, rank, media, supports);
      } else if (child.type === engine.MEDIA_RULE || child.type === engine.SUPPORTS_RULE) {
        gatherStack(child, media, supports);
      }
    });
  };

  utils.arrayLoop(sheet.cssRules, (rule, currentRank) => {
    // Standard
    if (rule.type === engine.STYLE_RULE) {
      if (!rule.cssText.startsWith(':root')) {
        addRuleToCache(engine$1, rule.cssText, currentRank);
      }

      return;
    } // Conditions


    if (rule.type === engine.MEDIA_RULE || rule.type === engine.SUPPORTS_RULE) {
      rank = currentRank;
      gatherStack(rule);
      return;
    } // Globals


    const css = rule.cssText;
    let cacheKey = '';

    if (rule.type === engine.FONT_FACE_RULE) {
      const fontFamilyName = css.match(FONT_FAMILY);

      if (fontFamilyName) {
        cacheKey = fontFamilyName[1].trim();
      }
    }

    if (rule.type === engine.KEYFRAMES_RULE) {
      cacheKey = css.slice(0, css.indexOf('{')).replace('@keyframes', '').trim();
    }

    if (rule.type === engine.IMPORT_RULE) {
      const importPath = css.match(IMPORT_URL);

      if (importPath) {
        [cacheKey] = importPath;
      }
    }

    if (cacheKey) {
      engine$1.cacheManager.write(cacheKey, {
        result: ''
      });
    }
  });
}

function hydrateStyles(engine) {
  const styles = document.querySelectorAll('style[data-aesthetic-hydrate-index]');
  utils.arrayLoop(styles, style => {
    hydrate(engine, style.sheet);

    if (engine.ruleCount === -1) {
      engine.ruleCount = Number(style.getAttribute('data-aesthetic-rule-count'));
    } // Remove so that we avoid unnecessary hydration


    style.removeAttribute('data-aesthetic-hydrate-index');
    style.removeAttribute('data-aesthetic-rule-count');
  });
  return styles.length > 0;
}
/**
 * @copyright   2020, Miles Johnson
 * @license     https://opensource.org/licenses/MIT
 */


function setDirection(direction) {
  document.documentElement.setAttribute('dir', direction);
} // Set CSS variables to :root


function setRootVariables(vars) {
  utils.objectLoop(vars, (value, key) => {
    document.documentElement.style.setProperty(engine.formatVariable(key), String(value));
  });
} // Set active theme class names on the `body`


function setTheme(classNames) {
  document.body.className = classNames.join(' ');
}

function createClientEngine(options = {}) {
  var _ref, _document$documentEle;

  const direction = (_ref = (_document$documentEle = document.documentElement.getAttribute('dir')) !== null && _document$documentEle !== void 0 ? _document$documentEle : document.body.getAttribute('dir')) !== null && _ref !== void 0 ? _ref : 'ltr';
  const engine$1 = engine.createStyleEngine({
    direction,
    sheetManager: sheet.createSheetManager(sheet.createStyleElements()),
    ...options
  }); // Match against browser preferences

  engine$1.prefersColorScheme = scheme => matchMedia(`(prefers-color-scheme: ${scheme})`).matches;

  engine$1.prefersContrastLevel = level => matchMedia(`(prefers-contrast: ${level})`).matches; // Handle DOM specific logic


  engine$1.setDirection = setDirection;
  engine$1.setRootVariables = setRootVariables;
  engine$1.setTheme = setTheme; // Attempt to hydrate styles immediately

  hydrateStyles(engine$1);
  return engine$1;
}

exports.createSheetManager = sheet.createSheetManager;
exports.createStyleElements = sheet.createStyleElements;
exports.getStyleElement = sheet.getStyleElement;
exports.FONT_FACE_RULE = engine.FONT_FACE_RULE;
exports.IMPORT_RULE = engine.IMPORT_RULE;
exports.KEYFRAMES_RULE = engine.KEYFRAMES_RULE;
exports.KEYFRAME_RULE = engine.KEYFRAME_RULE;
exports.MEDIA_RULE = engine.MEDIA_RULE;
exports.STYLE_RULE = engine.STYLE_RULE;
exports.SUPPORTS_RULE = engine.SUPPORTS_RULE;
exports.VARIANT_COMBO_PATTERN = engine.VARIANT_COMBO_PATTERN;
exports.VARIANT_PATTERN = engine.VARIANT_PATTERN;
exports.createCacheKey = engine.createCacheKey;
exports.createCacheManager = engine.createCacheManager;
exports.createDeclaration = engine.createDeclaration;
exports.createDeclarationBlock = engine.createDeclarationBlock;
exports.createStyleEngine = engine.createStyleEngine;
exports.formatDeclaration = engine.formatDeclaration;
exports.formatFontFace = engine.formatFontFace;
exports.formatImport = engine.formatImport;
exports.formatProperty = engine.formatProperty;
exports.formatRule = engine.formatRule;
exports.formatValue = engine.formatValue;
exports.formatVariable = engine.formatVariable;
exports.formatVariableBlock = engine.formatVariableBlock;
exports.insertAtRule = engine.insertAtRule;
exports.insertImportRule = engine.insertImportRule;
exports.insertRule = engine.insertRule;
exports.isAtRule = engine.isAtRule;
exports.isImportRule = engine.isImportRule;
exports.isNestedSelector = engine.isNestedSelector;
exports.isUnitlessProperty = engine.isUnitlessProperty;
exports.isValidValue = engine.isValidValue;
exports.isVariable = engine.isVariable;
exports.createClientEngine = createClientEngine;
//# sourceMappingURL=index.js.map