@mincho-js/css/dist/esm/index.mjs

Natural CSS in the Typescript

import { globalStyle as globalStyle$1, style as style$1, createVar, fallbackVar } from "@vanilla-extract/css";
import { assignVars, composeStyles, createContainer, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, createVar as createVar2, fallbackVar as fallbackVar2, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalLayer, keyframes, layer } from "@vanilla-extract/css";
import { transform, initTransformContext, replaceVariantReference } from "@mincho-js/transform-to-vanilla";
import "@vanilla-extract/css/fileScope";
import deepmerge from "@fastify/deepmerge";
import { addFunctionSerializer } from "@vanilla-extract/css/functionSerializer";
import { t as transformToggleVariants, m as mapValues, a as transformVariantSelection, c as createRuntimeFn } from "../createRuntimeFn-D4HQs9f_.js";
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) {
  globalStyle$1(selector, transform(rule));
}
const globalStyle = globalCss;
function css(style2, debugId) {
  return style$1(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(initTransformContext);
    const className2 = style$1(
      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;
    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 = 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,
    transformToggleVariants(toggles)
  );
  const variantClassNames = mapValues(
    mergedVariants,
    (variantGroup, variantGroupName) => cssVariants(
      variantGroup,
      (styleRule) => typeof styleRule === "string" ? [styleRule] : styleRule,
      getDebugName(debugId, String(variantGroupName))
    )
  );
  const compounds = [];
  if (typeof compoundVariants === "function") {
    const variantConditions = mapValues(
      mergedVariants,
      (variantGroup, variantName) => 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([
        transformVariantSelection(variants2),
        processCompoundStyle(rule.style, debugId, index)
      ]);
    });
  } else {
    for (const { style: theStyle, variants: variants2 } of compoundVariants) {
      compounds.push([
        transformVariantSelection(
          variants2
        ),
        processCompoundStyle(theStyle, debugId, compounds.length)
      ]);
    }
  }
  const config = {
    defaultClassName,
    variantClassNames,
    defaultVariants: transformVariantSelection(defaultVariants),
    compoundVariants: compounds,
    propVars
  };
  return addFunctionSerializer(
    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 = createVar(debugName);
    propVars[propName] = getVarName(propVar);
    const isBaseValue = propValue?.base !== void 0;
    propValue?.targets.forEach((target) => {
      setCSSProperty(
        propStyles,
        target,
        isBaseValue ? fallbackVar(propVar, `${propValue.base}`) : propVar
      );
    });
  });
}
function processCompoundStyle(style2, debugId, index) {
  return typeof style2 === "string" ? style2 : css(style2, getDebugName(debugId, `compound_${index}`));
}
export {
  assignVars,
  composeStyles,
  createContainer,
  createGlobalTheme,
  createGlobalThemeContract,
  createRuntimeFn,
  createTheme,
  createThemeContract,
  createVar2 as createVar,
  css,
  cssVariants,
  fallbackVar2 as fallbackVar,
  fontFace,
  generateIdentifier,
  globalCss,
  globalFontFace,
  globalKeyframes,
  globalLayer,
  globalStyle,
  keyframes,
  layer,
  recipe,
  rules,
  style,
  styleVariants
};