@stylezjs/stylez/dist/index.mjs.map

Stylez → “Z” of Zero Runtime | A lightweight utility for generating CSS class names dynamically.

{
  "version": 3,
  "sources": ["../src/core/lib/hash.ts", "../src/core/lib/selector.ts", "../src/runtime/class-name.ts", "../src/core/utils/css-sort.ts", "../src/core/utils/media-query.ts", "../src/core/utils/css-generate.ts", "../src/runtime/create.ts"],
  "sourcesContent": ["import crypto from 'crypto';\n\nexport const toHash = (content: string, label: string): string =>\n  `${label}${crypto\n    .createHash('md5')\n    .update(`stylez${content}`)\n    .digest('hex')\n    .slice(0, 8)}`;\n", "import type { Styles } from '../../types.js';\nimport { toHash } from './hash.js';\n\nexport const toSelector = (styles: Styles) =>\n  toHash(JSON.stringify(styles), 'z_');\n", "import { toSelector } from '@/core/lib/selector.js';\n\nimport type { Styles } from '../types.js';\n\n/**\n * Returns a frozen object containing the className string\n * for a given style object.\n *\n * This does not register or collect the style \u2014 it must be passed\n * a style object previously created via `stylez.create()`.\n *\n * @param styles - A style object previously passed to `stylez.create`.\n * @returns An object like `{ className: 'zbf3a8096' }`.\n *\n * @example\n * const styles = stylez.create({ padding: '1rem' });\n *\n * const App = () => <div {...stylez.className(styles)}>Hello</div>;\n */\nexport const className = (styles: Styles) =>\n  Object.freeze({ className: toSelector(styles) });\n", "import type { CSS } from './css-generate.js';\n\nconst getMediaMinWidth = (key: string) => {\n  const match = key.match(/min-width:\\s*(\\d+)px/);\n\n  return match ? parseInt(match[1] as string) : Infinity;\n};\n\nexport const toCssSort = (css: CSS): CSS =>\n  css.sort((a, b) => {\n    const aKey = a[0];\n    const bKey = b[0];\n\n    const aIsMedia = aKey.startsWith('@media');\n    const bIsMedia = bKey.startsWith('@media');\n\n    if (aKey === 'root') return -1;\n    if (bKey === 'root') return 1;\n\n    if (!aIsMedia && bIsMedia) return -1;\n    if (aIsMedia && !bIsMedia) return 1;\n\n    if (aIsMedia && bIsMedia) {\n      return getMediaMinWidth(aKey) - getMediaMinWidth(bKey);\n    }\n\n    return aKey.localeCompare(bKey);\n  });\n", "import type { Breakpoints } from '../../types.js';\nimport type { CSS } from './css-generate.js';\n\nexport const toMediaQuery = (\n  css: CSS,\n  breakpoints: Breakpoints = {\n    lg: '1280px',\n    md: '1024px',\n    sm: '768px',\n    xl: '1640px',\n    xs: '520px',\n  },\n): CSS =>\n  css.map(([key, value]) => {\n    if (key.startsWith('@')) {\n      const minWidth =\n        breakpoints[key.replace('@', '') as keyof typeof breakpoints];\n      const media = `@media (min-width: ${minWidth})`;\n\n      return [media, value];\n    }\n    return [key, value];\n  });\n", "import { toSelector } from '@/core/lib/selector.js';\n\nimport type { Breakpoints, Styles } from '../../types.js';\nimport { toCssSort } from './css-sort.js';\nimport { toMediaQuery } from './media-query.js';\n\n// type Vars = Map<string, string | number>;\nexport type CSSProp = string | number;\nexport type CSS = [string, Record<string, CSSProp>][];\n\nexport const toCssGenerate = (styles: Styles[]) => {\n  // const vars: Vars = new Map<string, string>();\n\n  let breakpoints: Breakpoints | undefined;\n  // [ '@md', { '.z_fb1b06a7': [Object], '.z_5c035a94': [Object] } ],\n  const props: Record<string, Record<string, CSSProp>> = {};\n\n  for (const style of styles) {\n    const className = `.${toSelector(style)}`;\n    for (const [key, value] of Object.entries(style)) {\n      if (key === 'breakpoints') breakpoints = value as Breakpoints;\n      else if (key.startsWith('@')) {\n        (props[key] ??= {})[className] ??= value as CSSProp;\n      } else {\n        (props[className] ??= {})[key] ??= value as CSSProp;\n      }\n    }\n  }\n\n  // props['root'] ??= {};\n\n  const css: CSS = Object.entries(props);\n  const cssWithQueries = toMediaQuery(css, breakpoints);\n  const sorted = toCssSort(cssWithQueries);\n\n  return sorted;\n};\n", "import { toSelector } from '../core/lib/selector.js';\nimport { toCssGenerate } from '../core/utils/css-generate.js';\nimport type { Styles } from '../types.js';\n\nconst seen = new Set<string>();\nconst css: Styles[] = [];\n\n/**\n * Registers a new style object for CSS generation.\n *\n * Ensures that the given style object is only registered once,\n * based on its selector hash. This function is intended to be\n * called at runtime wherever styles are defined.\n *\n * @param styles - A style object representing CSS rules.\n * @returns The original style object (unmodified).\n *\n * @example\n * const styles = stylez.create({ color: 'red', fontSize: '1.2rem' });\n */\n\nexport const create = (styles: Styles) => {\n  const hash = toSelector(styles);\n\n  if (!seen.has(hash)) {\n    seen.add(hash);\n    css.push(styles);\n  }\n\n  return styles;\n};\n\n/**\n * \uD83D\uDEAB INTERNAL USE ONLY \u2014 Used by @stylezjs/stylez build tools to extract generated CSS.\n * Not intended for runtime usage.\n */\nexport const getAllCss = () => Object.fromEntries(toCssGenerate(css));\n"],
  "mappings": "AAAA,OAAOA,MAAY,SAEZ,IAAMC,EAAS,CAACC,EAAiBC,IACtC,GAAGA,CAAK,GAAGH,EACR,WAAW,KAAK,EAChB,OAAO,SAASE,CAAO,EAAE,EACzB,OAAO,KAAK,EACZ,MAAM,EAAG,CAAC,CAAC,GCJT,IAAME,EAAcC,GACzBC,EAAO,KAAK,UAAUD,CAAM,EAAG,IAAI,ECe9B,IAAME,EAAaC,GACxB,OAAO,OAAO,CAAE,UAAWC,EAAWD,CAAM,CAAE,CAAC,EClBjD,IAAME,EAAoBC,GAAgB,CACxC,IAAMC,EAAQD,EAAI,MAAM,sBAAsB,EAE9C,OAAOC,EAAQ,SAASA,EAAM,CAAC,CAAW,EAAI,GAChD,EAEaC,EAAaC,GACxBA,EAAI,KAAK,CAACC,EAAGC,IAAM,CACjB,IAAMC,EAAOF,EAAE,CAAC,EACVG,EAAOF,EAAE,CAAC,EAEVG,EAAWF,EAAK,WAAW,QAAQ,EACnCG,EAAWF,EAAK,WAAW,QAAQ,EAEzC,OAAID,IAAS,OAAe,GACxBC,IAAS,OAAe,EAExB,CAACC,GAAYC,EAAiB,GAC9BD,GAAY,CAACC,EAAiB,EAE9BD,GAAYC,EACPV,EAAiBO,CAAI,EAAIP,EAAiBQ,CAAI,EAGhDD,EAAK,cAAcC,CAAI,CAChC,CAAC,ECxBI,IAAMG,EAAe,CAC1BC,EACAC,EAA2B,CACzB,GAAI,SACJ,GAAI,SACJ,GAAI,QACJ,GAAI,SACJ,GAAI,OACN,IAEAD,EAAI,IAAI,CAAC,CAACE,EAAKC,CAAK,IACdD,EAAI,WAAW,GAAG,EAKb,CAFO,sBADZD,EAAYC,EAAI,QAAQ,IAAK,EAAE,CAA6B,CAClB,IAE7BC,CAAK,EAEf,CAACD,EAAKC,CAAK,CACnB,ECZI,IAAMC,EAAiBC,GAAqB,CAGjD,IAAIC,EAEEC,EAAiD,CAAC,EAExD,QAAWC,KAASH,EAAQ,CAC1B,IAAMI,EAAY,IAAIC,EAAWF,CAAK,CAAC,GACvC,OAAW,CAACG,EAAKC,CAAK,IAAK,OAAO,QAAQJ,CAAK,EACzCG,IAAQ,cAAeL,EAAcM,EAChCD,EAAI,WAAW,GAAG,GACxBJ,EAAMI,CAAG,IAAM,CAAC,GAAGF,CAAS,IAAMG,GAElCL,EAAME,CAAS,IAAM,CAAC,GAAGE,CAAG,IAAMC,CAGzC,CAIA,IAAMC,EAAW,OAAO,QAAQN,CAAK,EAC/BO,EAAiBC,EAAaF,EAAKP,CAAW,EAGpD,OAFeU,EAAUF,CAAc,CAGzC,EChCA,IAAMG,EAAO,IAAI,IACXC,EAAgB,CAAC,EAgBVC,EAAUC,GAAmB,CACxC,IAAMC,EAAOC,EAAWF,CAAM,EAE9B,OAAKH,EAAK,IAAII,CAAI,IAChBJ,EAAK,IAAII,CAAI,EACbH,EAAI,KAAKE,CAAM,GAGVA,CACT,EAMaG,EAAY,IAAM,OAAO,YAAYC,EAAcN,CAAG,CAAC",
  "names": ["crypto", "toHash", "content", "label", "toSelector", "styles", "toHash", "className", "styles", "toSelector", "getMediaMinWidth", "key", "match", "toCssSort", "css", "a", "b", "aKey", "bKey", "aIsMedia", "bIsMedia", "toMediaQuery", "css", "breakpoints", "key", "value", "toCssGenerate", "styles", "breakpoints", "props", "style", "className", "toSelector", "key", "value", "css", "cssWithQueries", "toMediaQuery", "toCssSort", "seen", "css", "create", "styles", "hash", "toSelector", "getAllCss", "toCssGenerate"]
}