@mincho-js/css/dist/cjs/index.cjs

Natural CSS in the Typescript

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const css$1 = require("@vanilla-extract/css");
const transformToVanilla = require("@mincho-js/transform-to-vanilla");
require("@vanilla-extract/css/fileScope");
const deepmerge = require("@fastify/deepmerge");
const functionSerializer = require("@vanilla-extract/css/functionSerializer");
const rules_createRuntimeFn = require("../createRuntimeFn-BFsPmyrA.cjs");
function getDebugName(debugId, name) {
  return debugId ? `${debugId}_${name}` : name;
}
const VAR_PREFIX_LENGTH = "var(".length;
function getVarName(variable) {
  if (variable.startsWith("var(") && variable.endsWith(")")) {
    const inside = variable.slice(VAR_PREFIX_LENGTH, -1);
    const commaIndex = inside.indexOf(",");
    return commaIndex === -1 ? inside : inside.slice(0, commaIndex);
  }
  return variable;
}
function globalCss(selector, rule) {
  css$1.globalStyle(selector, transformToVanilla.transform(rule));
}
const globalStyle = globalCss;
function css(style2, debugId) {
  return css$1.style(transformToVanilla.transform(style2), debugId);
}
const style = css;
function cssVariants(styleMapOrData, mapDataOrDebugId, debugId) {
  if (isMapDataFunction(mapDataOrDebugId)) {
    const data = styleMapOrData;
    const mapData = mapDataOrDebugId;
    return processVariants(data, mapData, debugId);
  } else {
    const styleMap = styleMapOrData;
    const debugId2 = mapDataOrDebugId;
    return processVariants(styleMap, (style2) => style2, debugId2);
  }
}
const styleVariants = cssVariants;
function isMapDataFunction(mapDataOrDebugId) {
  return typeof mapDataOrDebugId === "function";
}
function processVariants(items, transformItem, debugId) {
  const contexts = [];
  const variantMap = {};
  const classMap = {};
  for (const key in items) {
    const context = structuredClone(transformToVanilla.initTransformContext);
    const className2 = css$1.style(
      transformToVanilla.transform(transformItem(items[key], key), context),
      getDebugName(debugId, key)
    );
    contexts.push(context);
    variantMap[`%${key}`] = className2;
    classMap[key] = className2;
  }
  for (const context of contexts) {
    context.variantMap = variantMap;
    transformToVanilla.replaceVariantReference(context);
    for (const [key, value] of Object.entries(context.variantReference)) {
      globalCss(key, value);
    }
  }
  return classMap;
}
const mergeObject = deepmerge();
function setCSSProperty(styles, property, value) {
  styles[property] = value;
}
function rules(options, debugId) {
  const {
    toggles = {},
    variants = {},
    defaultVariants = {},
    compoundVariants = [],
    props = {},
    base,
    ...baseStyles
  } = options;
  const propVars = {};
  const propStyles = {};
  if (Array.isArray(props)) {
    for (const prop of props) {
      if (typeof prop === "string") {
        const debugName = getDebugName(debugId, prop);
        const propVar = css$1.createVar(debugName);
        propVars[prop] = getVarName(propVar);
        setCSSProperty(propStyles, prop, propVar);
      } else {
        processPropObject(prop, propVars, propStyles, debugId);
      }
    }
  } else {
    processPropObject(props, propVars, propStyles, debugId);
  }
  let defaultClassName;
  if (!base || typeof base === "string") {
    const baseClassName = css([baseStyles, propStyles], debugId);
    defaultClassName = base ? `${baseClassName} ${base}` : baseClassName;
  } else {
    defaultClassName = css(
      Array.isArray(base) ? [baseStyles, ...base, propStyles] : [mergeObject(baseStyles, base), propStyles],
      debugId
    );
  }
  const mergedVariants = mergeObject(
    variants,
    rules_createRuntimeFn.transformToggleVariants(toggles)
  );
  const variantClassNames = rules_createRuntimeFn.mapValues(
    mergedVariants,
    (variantGroup, variantGroupName) => cssVariants(
      variantGroup,
      (styleRule) => typeof styleRule === "string" ? [styleRule] : styleRule,
      getDebugName(debugId, String(variantGroupName))
    )
  );
  const compounds = [];
  if (typeof compoundVariants === "function") {
    const variantConditions = rules_createRuntimeFn.mapValues(
      mergedVariants,
      (variantGroup, variantName) => rules_createRuntimeFn.mapValues(variantGroup, (_, optionKey) => ({
        [variantName]: optionKey === "true" ? true : optionKey === "false" ? false : optionKey
      }))
    );
    const compoundRules = compoundVariants(variantConditions);
    compoundRules.forEach((rule, index) => {
      const variants2 = rule.condition.reduce((acc, condition) => {
        return {
          ...acc,
          ...condition
        };
      }, {});
      compounds.push([
        rules_createRuntimeFn.transformVariantSelection(variants2),
        processCompoundStyle(rule.style, debugId, index)
      ]);
    });
  } else {
    for (const { style: theStyle, variants: variants2 } of compoundVariants) {
      compounds.push([
        rules_createRuntimeFn.transformVariantSelection(
          variants2
        ),
        processCompoundStyle(theStyle, debugId, compounds.length)
      ]);
    }
  }
  const config = {
    defaultClassName,
    variantClassNames,
    defaultVariants: rules_createRuntimeFn.transformVariantSelection(defaultVariants),
    compoundVariants: compounds,
    propVars
  };
  return functionSerializer.addFunctionSerializer(
    rules_createRuntimeFn.createRuntimeFn(config),
    {
      importPath: "@mincho-js/css/rules/createRuntimeFn",
      importName: "createRuntimeFn",
      args: [config]
    }
  );
}
const recipe = rules;
function processPropObject(props, propVars, propStyles, debugId) {
  Object.entries(props).forEach(([propName, propValue]) => {
    const debugName = getDebugName(debugId, propName);
    const propVar = css$1.createVar(debugName);
    propVars[propName] = getVarName(propVar);
    const isBaseValue = propValue?.base !== void 0;
    propValue?.targets.forEach((target) => {
      setCSSProperty(
        propStyles,
        target,
        isBaseValue ? css$1.fallbackVar(propVar, `${propValue.base}`) : propVar
      );
    });
  });
}
function processCompoundStyle(style2, debugId, index) {
  return typeof style2 === "string" ? style2 : css(style2, getDebugName(debugId, `compound_${index}`));
}
Object.defineProperty(exports, "assignVars", {
  enumerable: true,
  get: () => css$1.assignVars
});
Object.defineProperty(exports, "composeStyles", {
  enumerable: true,
  get: () => css$1.composeStyles
});
Object.defineProperty(exports, "createContainer", {
  enumerable: true,
  get: () => css$1.createContainer
});
Object.defineProperty(exports, "createGlobalTheme", {
  enumerable: true,
  get: () => css$1.createGlobalTheme
});
Object.defineProperty(exports, "createGlobalThemeContract", {
  enumerable: true,
  get: () => css$1.createGlobalThemeContract
});
Object.defineProperty(exports, "createTheme", {
  enumerable: true,
  get: () => css$1.createTheme
});
Object.defineProperty(exports, "createThemeContract", {
  enumerable: true,
  get: () => css$1.createThemeContract
});
Object.defineProperty(exports, "createVar", {
  enumerable: true,
  get: () => css$1.createVar
});
Object.defineProperty(exports, "fallbackVar", {
  enumerable: true,
  get: () => css$1.fallbackVar
});
Object.defineProperty(exports, "fontFace", {
  enumerable: true,
  get: () => css$1.fontFace
});
Object.defineProperty(exports, "generateIdentifier", {
  enumerable: true,
  get: () => css$1.generateIdentifier
});
Object.defineProperty(exports, "globalFontFace", {
  enumerable: true,
  get: () => css$1.globalFontFace
});
Object.defineProperty(exports, "globalKeyframes", {
  enumerable: true,
  get: () => css$1.globalKeyframes
});
Object.defineProperty(exports, "globalLayer", {
  enumerable: true,
  get: () => css$1.globalLayer
});
Object.defineProperty(exports, "keyframes", {
  enumerable: true,
  get: () => css$1.keyframes
});
Object.defineProperty(exports, "layer", {
  enumerable: true,
  get: () => css$1.layer
});
exports.createRuntimeFn = rules_createRuntimeFn.createRuntimeFn;
exports.css = css;
exports.cssVariants = cssVariants;
exports.globalCss = globalCss;
exports.globalStyle = globalStyle;
exports.recipe = recipe;
exports.rules = rules;
exports.style = style;
exports.styleVariants = styleVariants;