@wyw-in-js/processor-utils 1.0.5 → 2.0.0-alpha.0

package/esm/utils/templateProcessor.js

@@ -1,120 +1,100 @@
-/* eslint-disable no-continue */
-/**
- * This file handles transforming template literals to class names or styled components and generates CSS content.
- * It uses CSS code from template literals and evaluated values of lazy dependencies stored in ValueCache.
- */
-
-import { hasEvalMeta, ValueType } from '@wyw-in-js/shared';
-import { getVariableName } from './getVariableName';
-import stripLines from './stripLines';
-import throwIfInvalid from './throwIfInvalid';
-import toCSS, { isCSSable } from './toCSS';
-import { units } from './units';
-
+import { hasEvalMeta, ValueType } from "@wyw-in-js/shared";
+import { getVariableName } from "./getVariableName.js";
+import stripLines from "./stripLines.js";
+import throwIfInvalid from "./throwIfInvalid.js";
+import toCSS, { isCSSable } from "./toCSS.js";
+import { units } from "./units.js";
 // Match any valid CSS unit not immediately followed by an alphanumeric character or underscore.
-const unitRegex = new RegExp(`^(?:${units.join('|')})(?![a-zA-Z0-9_])`);
-export default function templateProcessor(tagProcessor, [...template], valueCache, variableNameConfig) {
-  const sourceMapReplacements = [];
-  // Check if the variable is referenced anywhere for basic DCE
-  // Only works when it's assigned to a variable
-  const {
-    isReferenced
-  } = tagProcessor;
-
-  // Serialize the tagged template literal to a string
-  let cssText = '';
-  let item;
-  // eslint-disable-next-line no-cond-assign
-  while (item = template.shift()) {
-    if ('type' in item) {
-      // It's a template element
-      cssText += item.value.cooked;
-      continue;
-    }
-
-    // It's an expression
-    const {
-      ex
-    } = item;
-    const {
-      end,
-      start
-    } = ex.loc;
-    const beforeLength = cssText.length;
-
-    // The location will be end of the current string to start of next string
-    const next = template[0]; // template[0] is the next template element
-    const loc = {
-      start,
-      end: next ? {
-        line: next.loc.start.line,
-        column: next.loc.start.column
-      } : {
-        line: end.line,
-        column: end.column + 1
-      }
-    };
-    const value = 'value' in item ? item.value : valueCache.get(item.ex.name);
-
-    // Is it props based interpolation?
-    if (item.kind === ValueType.FUNCTION || typeof value === 'function') {
-      // Check if previous expression was a CSS variable that we replaced
-      // If it has a unit after it, we need to move the unit into the interpolation
-      // e.g. `var(--size)px` should actually be `var(--size)`
-      // So we check if the current text starts with a unit, and add the unit to the previous interpolation
-      // Another approach would be `calc(var(--size) * 1px), but some browsers don't support all units
-      // https://bugzilla.mozilla.org/show_bug.cgi?id=956573
-      const matches = next.value.cooked?.match(unitRegex);
-      try {
-        if (matches) {
-          template.shift();
-          const [unit] = matches;
-          const varId = tagProcessor.addInterpolation(item.ex, cssText, item.source, unit);
-          cssText += getVariableName(varId, variableNameConfig);
-          cssText += next.value.cooked?.substring(unit?.length ?? 0) ?? '';
-        } else {
-          const varId = tagProcessor.addInterpolation(item.ex, cssText, item.source);
-          cssText += getVariableName(varId, variableNameConfig);
-        }
-      } catch (e) {
-        if (e instanceof Error) {
-          throw item.buildCodeFrameError(e.message);
-        }
-        throw e;
-      }
-    } else {
-      throwIfInvalid(tagProcessor.isValidValue.bind(tagProcessor), value, item, item.source);
-      if (value !== undefined && typeof value !== 'function') {
-        // Skip the blank string instead of throw ing an error
-        if (value === '') {
-          continue;
-        }
-        if (hasEvalMeta(value)) {
-          // If it's a React component wrapped in styled, get the class name
-          // Useful for interpolating components
-          cssText += `.${value.__wyw_meta.className}`;
-        } else if (isCSSable(value)) {
-          // If it's a plain object or an array, convert it to a CSS string
-          cssText += stripLines(loc, toCSS(value));
-        } else {
-          // For anything else, assume it'll be stringified
-          cssText += stripLines(loc, value);
-        }
-        sourceMapReplacements.push({
-          original: loc,
-          length: cssText.length - beforeLength
-        });
-      }
-    }
-  }
-  const rules = tagProcessor.extractRules(valueCache, cssText, tagProcessor.location);
-
-  // tagProcessor.doRuntimeReplacement(classes);
-  if (!isReferenced && !cssText.includes(':global')) {
-    return null;
-  }
-
-  // eslint-disable-next-line no-param-reassign
-  return [rules, sourceMapReplacements];
+const unitRegex = new RegExp(`^(?:${units.join("|")})(?![a-zA-Z0-9_])`);
+export default function templateProcessor(tagProcessor, [ ...template], valueCache, variableNameConfig) {
+	const sourceMapReplacements = [];
+	// Check if the variable is referenced anywhere for basic DCE
+	// Only works when it's assigned to a variable
+	const { isReferenced } = tagProcessor;
+	// Serialize the tagged template literal to a string
+	let cssText = "";
+	let item;
+	// eslint-disable-next-line no-cond-assign
+	while (item = template.shift()) {
+		if ("type" in item) {
+			// It's a template element
+			cssText += item.value.cooked;
+			continue;
+		}
+		// It's an expression
+		const { ex } = item;
+		const { end, start } = ex.loc;
+		const beforeLength = cssText.length;
+		// The location will be end of the current string to start of next string
+		const next = template[0];
+		const loc = {
+			start,
+			end: next ? {
+				line: next.loc.start.line,
+				column: next.loc.start.column
+			} : {
+				line: end.line,
+				column: end.column + 1
+			}
+		};
+		const value = "value" in item ? item.value : valueCache.get(item.ex.name);
+		// Is it props based interpolation?
+		if (item.kind === ValueType.FUNCTION || typeof value === "function") {
+			// Check if previous expression was a CSS variable that we replaced
+			// If it has a unit after it, we need to move the unit into the interpolation
+			// e.g. `var(--size)px` should actually be `var(--size)`
+			// So we check if the current text starts with a unit, and add the unit to the previous interpolation
+			// Another approach would be `calc(var(--size) * 1px), but some browsers don't support all units
+			// https://bugzilla.mozilla.org/show_bug.cgi?id=956573
+			const matches = next.value.cooked?.match(unitRegex);
+			try {
+				if (matches) {
+					template.shift();
+					const [unit] = matches;
+					const varId = tagProcessor.addInterpolation(item.ex, cssText, item.source, unit);
+					cssText += getVariableName(varId, variableNameConfig);
+					cssText += next.value.cooked?.substring(unit?.length ?? 0) ?? "";
+				} else {
+					const varId = tagProcessor.addInterpolation(item.ex, cssText, item.source);
+					cssText += getVariableName(varId, variableNameConfig);
+				}
+			} catch (e) {
+				if (e instanceof Error) {
+					throw item.buildCodeFrameError(e.message);
+				}
+				throw e;
+			}
+		} else {
+			throwIfInvalid(tagProcessor.isValidValue.bind(tagProcessor), value, item, item.source);
+			if (value !== undefined && typeof value !== "function") {
+				// Skip the blank string instead of throw ing an error
+				if (value === "") {
+					continue;
+				}
+				if (hasEvalMeta(value)) {
+					// If it's a React component wrapped in styled, get the class name
+					// Useful for interpolating components
+					cssText += `.${value.__wyw_meta.className}`;
+				} else if (isCSSable(value)) {
+					// If it's a plain object or an array, convert it to a CSS string
+					cssText += stripLines(loc, toCSS(value));
+				} else {
+					// For anything else, assume it'll be stringified
+					cssText += stripLines(loc, value);
+				}
+				sourceMapReplacements.push({
+					original: loc,
+					length: cssText.length - beforeLength
+				});
+			}
+		}
+	}
+	const rules = tagProcessor.extractRules(valueCache, cssText, tagProcessor.location);
+	// tagProcessor.doRuntimeReplacement(classes);
+	if (!isReferenced && !cssText.includes(":global")) {
+		return null;
+	}
+	// eslint-disable-next-line no-param-reassign
+	return [rules, sourceMapReplacements];
 }
-//# sourceMappingURL=templateProcessor.js.map
+//# sourceMappingURL=templateProcessor.js.map

package/esm/utils/templateProcessor.js.map

@@ -1 +1 @@
-{"version":3,"file":"templateProcessor.js","names":["hasEvalMeta","ValueType","getVariableName","stripLines","throwIfInvalid","toCSS","isCSSable","units","unitRegex","RegExp","join","templateProcessor","tagProcessor","template","valueCache","variableNameConfig","sourceMapReplacements","isReferenced","cssText","item","shift","value","cooked","ex","end","start","loc","beforeLength","length","next","line","column","get","name","kind","FUNCTION","matches","match","unit","varId","addInterpolation","source","substring","e","Error","buildCodeFrameError","message","isValidValue","bind","undefined","__wyw_meta","className","push","original","rules","extractRules","location","includes"],"sources":["../../src/utils/templateProcessor.ts"],"sourcesContent":["/* eslint-disable no-continue */\n/**\n * This file handles transforming template literals to class names or styled components and generates CSS content.\n * It uses CSS code from template literals and evaluated values of lazy dependencies stored in ValueCache.\n */\n\nimport type { TemplateElement } from '@babel/types';\n\nimport type { ExpressionValue, Replacements } from '@wyw-in-js/shared';\nimport { hasEvalMeta, ValueType } from '@wyw-in-js/shared';\n\nimport type { TaggedTemplateProcessor } from '../TaggedTemplateProcessor';\nimport type { ValueCache, Rules } from '../types';\n\nimport { getVariableName } from './getVariableName';\nimport stripLines from './stripLines';\nimport throwIfInvalid from './throwIfInvalid';\nimport toCSS, { isCSSable } from './toCSS';\nimport type { IOptions } from './types';\nimport { units } from './units';\n\n// Match any valid CSS unit not immediately followed by an alphanumeric character or underscore.\nconst unitRegex = new RegExp(`^(?:${units.join('|')})(?![a-zA-Z0-9_])`);\n\nexport default function templateProcessor(\n  tagProcessor: TaggedTemplateProcessor,\n  [...template]: (TemplateElement | ExpressionValue)[],\n  valueCache: ValueCache,\n  variableNameConfig: IOptions['variableNameConfig'] | undefined\n): [rules: Rules, sourceMapReplacements: Replacements] | null {\n  const sourceMapReplacements: Replacements = [];\n  // Check if the variable is referenced anywhere for basic DCE\n  // Only works when it's assigned to a variable\n  const { isReferenced } = tagProcessor;\n\n  // Serialize the tagged template literal to a string\n  let cssText = '';\n\n  let item: TemplateElement | ExpressionValue | undefined;\n  // eslint-disable-next-line no-cond-assign\n  while ((item = template.shift())) {\n    if ('type' in item) {\n      // It's a template element\n      cssText += item.value.cooked;\n      continue;\n    }\n\n    // It's an expression\n    const { ex } = item;\n\n    const { end, start } = ex.loc!;\n    const beforeLength = cssText.length;\n\n    // The location will be end of the current string to start of next string\n    const next = template[0] as TemplateElement; // template[0] is the next template element\n    const loc = {\n      start,\n      end: next\n        ? { line: next.loc!.start.line, column: next.loc!.start.column }\n        : { line: end.line, column: end.column + 1 },\n    };\n\n    const value = 'value' in item ? item.value : valueCache.get(item.ex.name);\n\n    // Is it props based interpolation?\n    if (item.kind === ValueType.FUNCTION || typeof value === 'function') {\n      // Check if previous expression was a CSS variable that we replaced\n      // If it has a unit after it, we need to move the unit into the interpolation\n      // e.g. `var(--size)px` should actually be `var(--size)`\n      // So we check if the current text starts with a unit, and add the unit to the previous interpolation\n      // Another approach would be `calc(var(--size) * 1px), but some browsers don't support all units\n      // https://bugzilla.mozilla.org/show_bug.cgi?id=956573\n      const matches = next.value.cooked?.match(unitRegex);\n\n      try {\n        if (matches) {\n          template.shift();\n          const [unit] = matches;\n\n          const varId = tagProcessor.addInterpolation(\n            item.ex,\n            cssText,\n            item.source,\n            unit\n          );\n          cssText += getVariableName(varId, variableNameConfig);\n\n          cssText += next.value.cooked?.substring(unit?.length ?? 0) ?? '';\n        } else {\n          const varId = tagProcessor.addInterpolation(\n            item.ex,\n            cssText,\n            item.source\n          );\n          cssText += getVariableName(varId, variableNameConfig);\n        }\n      } catch (e) {\n        if (e instanceof Error) {\n          throw item.buildCodeFrameError(e.message);\n        }\n\n        throw e;\n      }\n    } else {\n      throwIfInvalid(\n        tagProcessor.isValidValue.bind(tagProcessor),\n        value,\n        item,\n        item.source\n      );\n\n      if (value !== undefined && typeof value !== 'function') {\n        // Skip the blank string instead of throw ing an error\n        if (value === '') {\n          continue;\n        }\n\n        if (hasEvalMeta(value)) {\n          // If it's a React component wrapped in styled, get the class name\n          // Useful for interpolating components\n          cssText += `.${value.__wyw_meta.className}`;\n        } else if (isCSSable(value)) {\n          // If it's a plain object or an array, convert it to a CSS string\n          cssText += stripLines(loc, toCSS(value));\n        } else {\n          // For anything else, assume it'll be stringified\n          cssText += stripLines(loc, value);\n        }\n\n        sourceMapReplacements.push({\n          original: loc,\n          length: cssText.length - beforeLength,\n        });\n      }\n    }\n  }\n\n  const rules = tagProcessor.extractRules(\n    valueCache,\n    cssText,\n    tagProcessor.location\n  );\n\n  // tagProcessor.doRuntimeReplacement(classes);\n  if (!isReferenced && !cssText.includes(':global')) {\n    return null;\n  }\n\n  // eslint-disable-next-line no-param-reassign\n  return [rules, sourceMapReplacements];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAKA,SAASA,WAAW,EAAEC,SAAS,QAAQ,mBAAmB;AAK1D,SAASC,eAAe,QAAQ,mBAAmB;AACnD,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,KAAK,IAAIC,SAAS,QAAQ,SAAS;AAE1C,SAASC,KAAK,QAAQ,SAAS;;AAE/B;AACA,MAAMC,SAAS,GAAG,IAAIC,MAAM,CAAC,OAAOF,KAAK,CAACG,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC;AAEvE,eAAe,SAASC,iBAAiBA,CACvCC,YAAqC,EACrC,CAAC,GAAGC,QAAQ,CAAwC,EACpDC,UAAsB,EACtBC,kBAA8D,EACF;EAC5D,MAAMC,qBAAmC,GAAG,EAAE;EAC9C;EACA;EACA,MAAM;IAAEC;EAAa,CAAC,GAAGL,YAAY;;EAErC;EACA,IAAIM,OAAO,GAAG,EAAE;EAEhB,IAAIC,IAAmD;EACvD;EACA,OAAQA,IAAI,GAAGN,QAAQ,CAACO,KAAK,CAAC,CAAC,EAAG;IAChC,IAAI,MAAM,IAAID,IAAI,EAAE;MAClB;MACAD,OAAO,IAAIC,IAAI,CAACE,KAAK,CAACC,MAAM;MAC5B;IACF;;IAEA;IACA,MAAM;MAAEC;IAAG,CAAC,GAAGJ,IAAI;IAEnB,MAAM;MAAEK,GAAG;MAAEC;IAAM,CAAC,GAAGF,EAAE,CAACG,GAAI;IAC9B,MAAMC,YAAY,GAAGT,OAAO,CAACU,MAAM;;IAEnC;IACA,MAAMC,IAAI,GAAGhB,QAAQ,CAAC,CAAC,CAAoB,CAAC,CAAC;IAC7C,MAAMa,GAAG,GAAG;MACVD,KAAK;MACLD,GAAG,EAAEK,IAAI,GACL;QAAEC,IAAI,EAAED,IAAI,CAACH,GAAG,CAAED,KAAK,CAACK,IAAI;QAAEC,MAAM,EAAEF,IAAI,CAACH,GAAG,CAAED,KAAK,CAACM;MAAO,CAAC,GAC9D;QAAED,IAAI,EAAEN,GAAG,CAACM,IAAI;QAAEC,MAAM,EAAEP,GAAG,CAACO,MAAM,GAAG;MAAE;IAC/C,CAAC;IAED,MAAMV,KAAK,GAAG,OAAO,IAAIF,IAAI,GAAGA,IAAI,CAACE,KAAK,GAAGP,UAAU,CAACkB,GAAG,CAACb,IAAI,CAACI,EAAE,CAACU,IAAI,CAAC;;IAEzE;IACA,IAAId,IAAI,CAACe,IAAI,KAAKjC,SAAS,CAACkC,QAAQ,IAAI,OAAOd,KAAK,KAAK,UAAU,EAAE;MACnE;MACA;MACA;MACA;MACA;MACA;MACA,MAAMe,OAAO,GAAGP,IAAI,CAACR,KAAK,CAACC,MAAM,EAAEe,KAAK,CAAC7B,SAAS,CAAC;MAEnD,IAAI;QACF,IAAI4B,OAAO,EAAE;UACXvB,QAAQ,CAACO,KAAK,CAAC,CAAC;UAChB,MAAM,CAACkB,IAAI,CAAC,GAAGF,OAAO;UAEtB,MAAMG,KAAK,GAAG3B,YAAY,CAAC4B,gBAAgB,CACzCrB,IAAI,CAACI,EAAE,EACPL,OAAO,EACPC,IAAI,CAACsB,MAAM,EACXH,IACF,CAAC;UACDpB,OAAO,IAAIhB,eAAe,CAACqC,KAAK,EAAExB,kBAAkB,CAAC;UAErDG,OAAO,IAAIW,IAAI,CAACR,KAAK,CAACC,MAAM,EAAEoB,SAAS,CAACJ,IAAI,EAAEV,MAAM,IAAI,CAAC,CAAC,IAAI,EAAE;QAClE,CAAC,MAAM;UACL,MAAMW,KAAK,GAAG3B,YAAY,CAAC4B,gBAAgB,CACzCrB,IAAI,CAACI,EAAE,EACPL,OAAO,EACPC,IAAI,CAACsB,MACP,CAAC;UACDvB,OAAO,IAAIhB,eAAe,CAACqC,KAAK,EAAExB,kBAAkB,CAAC;QACvD;MACF,CAAC,CAAC,OAAO4B,CAAC,EAAE;QACV,IAAIA,CAAC,YAAYC,KAAK,EAAE;UACtB,MAAMzB,IAAI,CAAC0B,mBAAmB,CAACF,CAAC,CAACG,OAAO,CAAC;QAC3C;QAEA,MAAMH,CAAC;MACT;IACF,CAAC,MAAM;MACLvC,cAAc,CACZQ,YAAY,CAACmC,YAAY,CAACC,IAAI,CAACpC,YAAY,CAAC,EAC5CS,KAAK,EACLF,IAAI,EACJA,IAAI,CAACsB,MACP,CAAC;MAED,IAAIpB,KAAK,KAAK4B,SAAS,IAAI,OAAO5B,KAAK,KAAK,UAAU,EAAE;QACtD;QACA,IAAIA,KAAK,KAAK,EAAE,EAAE;UAChB;QACF;QAEA,IAAIrB,WAAW,CAACqB,KAAK,CAAC,EAAE;UACtB;UACA;UACAH,OAAO,IAAI,IAAIG,KAAK,CAAC6B,UAAU,CAACC,SAAS,EAAE;QAC7C,CAAC,MAAM,IAAI7C,SAAS,CAACe,KAAK,CAAC,EAAE;UAC3B;UACAH,OAAO,IAAIf,UAAU,CAACuB,GAAG,EAAErB,KAAK,CAACgB,KAAK,CAAC,CAAC;QAC1C,CAAC,MAAM;UACL;UACAH,OAAO,IAAIf,UAAU,CAACuB,GAAG,EAAEL,KAAK,CAAC;QACnC;QAEAL,qBAAqB,CAACoC,IAAI,CAAC;UACzBC,QAAQ,EAAE3B,GAAG;UACbE,MAAM,EAAEV,OAAO,CAACU,MAAM,GAAGD;QAC3B,CAAC,CAAC;MACJ;IACF;EACF;EAEA,MAAM2B,KAAK,GAAG1C,YAAY,CAAC2C,YAAY,CACrCzC,UAAU,EACVI,OAAO,EACPN,YAAY,CAAC4C,QACf,CAAC;;EAED;EACA,IAAI,CAACvC,YAAY,IAAI,CAACC,OAAO,CAACuC,QAAQ,CAAC,SAAS,CAAC,EAAE;IACjD,OAAO,IAAI;EACb;;EAEA;EACA,OAAO,CAACH,KAAK,EAAEtC,qBAAqB,CAAC;AACvC","ignoreList":[]}
+{"mappings":"AAOA,SAAS,aAAa,iBAAiB;AAMvC,SAAS,uBAAuB;AAChC,OAAO,gBAAgB;AACvB,OAAO,oBAAoB;AAC3B,OAAO,SAAS,iBAAiB;AAEjC,SAAS,aAAa;;AAGtB,MAAM,YAAY,IAAI,OAAO,OAAO,MAAM,KAAK,IAAI,CAAC,mBAAmB;AAEvE,eAAe,SAAS,kBACtB,cACA,EAAC,GAAG,WACJ,YACA,oBAC4D;CAC5D,MAAM,wBAAsC,EAAE;;;CAG9C,MAAM,EAAE,iBAAiB;;CAGzB,IAAI,UAAU;CAEd,IAAI;;AAEJ,QAAQ,OAAO,SAAS,OAAO,EAAG;AAChC,MAAI,UAAU,MAAM;;AAElB,cAAW,KAAK,MAAM;AACtB;;;EAIF,MAAM,EAAE,OAAO;EAEf,MAAM,EAAE,KAAK,UAAU,GAAG;EAC1B,MAAM,eAAe,QAAQ;;EAG7B,MAAM,OAAO,SAAS;EACtB,MAAM,MAAM;GACV;GACA,KAAK,OACD;IAAE,MAAM,KAAK,IAAK,MAAM;IAAM,QAAQ,KAAK,IAAK,MAAM;IAAQ,GAC9D;IAAE,MAAM,IAAI;IAAM,QAAQ,IAAI,SAAS;IAAG;GAC/C;EAED,MAAM,QAAQ,WAAW,OAAO,KAAK,QAAQ,WAAW,IAAI,KAAK,GAAG,KAAK;;AAGzE,MAAI,KAAK,SAAS,UAAU,YAAY,OAAO,UAAU,YAAY;;;;;;;GAOnE,MAAM,UAAU,KAAK,MAAM,QAAQ,MAAM,UAAU;AAEnD,OAAI;AACF,QAAI,SAAS;AACX,cAAS,OAAO;KAChB,MAAM,CAAC,QAAQ;KAEf,MAAM,QAAQ,aAAa,iBACzB,KAAK,IACL,SACA,KAAK,QACL,KACD;AACD,gBAAW,gBAAgB,OAAO,mBAAmB;AAErD,gBAAW,KAAK,MAAM,QAAQ,UAAU,MAAM,UAAU,EAAE,IAAI;WACzD;KACL,MAAM,QAAQ,aAAa,iBACzB,KAAK,IACL,SACA,KAAK,OACN;AACD,gBAAW,gBAAgB,OAAO,mBAAmB;;YAEhD,GAAG;AACV,QAAI,aAAa,OAAO;AACtB,WAAM,KAAK,oBAAoB,EAAE,QAAQ;;AAG3C,UAAM;;SAEH;AACL,kBACE,aAAa,aAAa,KAAK,aAAa,EAC5C,OACA,MACA,KAAK,OACN;AAED,OAAI,UAAU,aAAa,OAAO,UAAU,YAAY;;AAEtD,QAAI,UAAU,IAAI;AAChB;;AAGF,QAAI,YAAY,MAAM,EAAE;;;AAGtB,gBAAW,IAAI,MAAM,WAAW;eACvB,UAAU,MAAM,EAAE;;AAE3B,gBAAW,WAAW,KAAK,MAAM,MAAM,CAAC;WACnC;;AAEL,gBAAW,WAAW,KAAK,MAAM;;AAGnC,0BAAsB,KAAK;KACzB,UAAU;KACV,QAAQ,QAAQ,SAAS;KAC1B,CAAC;;;;CAKR,MAAM,QAAQ,aAAa,aACzB,YACA,SACA,aAAa,SACd;;AAGD,KAAI,CAAC,gBAAgB,CAAC,QAAQ,SAAS,UAAU,EAAE;AACjD,SAAO;;;AAIT,QAAO,CAAC,OAAO,sBAAsB","names":[],"sources":["../../src/utils/templateProcessor.ts"],"version":3,"sourcesContent":["/* eslint-disable no-continue */\n/**\n * This file handles transforming template literals to class names or styled components and generates CSS content.\n * It uses CSS code from template literals and evaluated values of lazy dependencies stored in ValueCache.\n */\n\nimport type { ExpressionValue, Replacements } from '@wyw-in-js/shared';\nimport { hasEvalMeta, ValueType } from '@wyw-in-js/shared';\n\nimport type { TaggedTemplateProcessor } from '../TaggedTemplateProcessor';\nimport type { Expression, TemplateElement } from '../ast';\nimport type { ValueCache, Rules } from '../types';\n\nimport { getVariableName } from './getVariableName';\nimport stripLines from './stripLines';\nimport throwIfInvalid from './throwIfInvalid';\nimport toCSS, { isCSSable } from './toCSS';\nimport type { IOptions } from './types';\nimport { units } from './units';\n\n// Match any valid CSS unit not immediately followed by an alphanumeric character or underscore.\nconst unitRegex = new RegExp(`^(?:${units.join('|')})(?![a-zA-Z0-9_])`);\n\nexport default function templateProcessor(\n  tagProcessor: TaggedTemplateProcessor,\n  [...template]: (TemplateElement | ExpressionValue)[],\n  valueCache: ValueCache,\n  variableNameConfig: IOptions['variableNameConfig'] | undefined\n): [rules: Rules, sourceMapReplacements: Replacements] | null {\n  const sourceMapReplacements: Replacements = [];\n  // Check if the variable is referenced anywhere for basic DCE\n  // Only works when it's assigned to a variable\n  const { isReferenced } = tagProcessor;\n\n  // Serialize the tagged template literal to a string\n  let cssText = '';\n\n  let item: TemplateElement | ExpressionValue | undefined;\n  // eslint-disable-next-line no-cond-assign\n  while ((item = template.shift())) {\n    if ('type' in item) {\n      // It's a template element\n      cssText += item.value.cooked;\n      continue;\n    }\n\n    // It's an expression\n    const { ex } = item;\n\n    const { end, start } = ex.loc!;\n    const beforeLength = cssText.length;\n\n    // The location will be end of the current string to start of next string\n    const next = template[0] as TemplateElement; // template[0] is the next template element\n    const loc = {\n      start,\n      end: next\n        ? { line: next.loc!.start.line, column: next.loc!.start.column }\n        : { line: end.line, column: end.column + 1 },\n    };\n\n    const value = 'value' in item ? item.value : valueCache.get(item.ex.name);\n\n    // Is it props based interpolation?\n    if (item.kind === ValueType.FUNCTION || typeof value === 'function') {\n      // Check if previous expression was a CSS variable that we replaced\n      // If it has a unit after it, we need to move the unit into the interpolation\n      // e.g. `var(--size)px` should actually be `var(--size)`\n      // So we check if the current text starts with a unit, and add the unit to the previous interpolation\n      // Another approach would be `calc(var(--size) * 1px), but some browsers don't support all units\n      // https://bugzilla.mozilla.org/show_bug.cgi?id=956573\n      const matches = next.value.cooked?.match(unitRegex);\n\n      try {\n        if (matches) {\n          template.shift();\n          const [unit] = matches;\n\n          const varId = tagProcessor.addInterpolation(\n            item.ex as Expression,\n            cssText,\n            item.source,\n            unit\n          );\n          cssText += getVariableName(varId, variableNameConfig);\n\n          cssText += next.value.cooked?.substring(unit?.length ?? 0) ?? '';\n        } else {\n          const varId = tagProcessor.addInterpolation(\n            item.ex as Expression,\n            cssText,\n            item.source\n          );\n          cssText += getVariableName(varId, variableNameConfig);\n        }\n      } catch (e) {\n        if (e instanceof Error) {\n          throw item.buildCodeFrameError(e.message);\n        }\n\n        throw e;\n      }\n    } else {\n      throwIfInvalid(\n        tagProcessor.isValidValue.bind(tagProcessor),\n        value,\n        item,\n        item.source\n      );\n\n      if (value !== undefined && typeof value !== 'function') {\n        // Skip the blank string instead of throw ing an error\n        if (value === '') {\n          continue;\n        }\n\n        if (hasEvalMeta(value)) {\n          // If it's a React component wrapped in styled, get the class name\n          // Useful for interpolating components\n          cssText += `.${value.__wyw_meta.className}`;\n        } else if (isCSSable(value)) {\n          // If it's a plain object or an array, convert it to a CSS string\n          cssText += stripLines(loc, toCSS(value));\n        } else {\n          // For anything else, assume it'll be stringified\n          cssText += stripLines(loc, value);\n        }\n\n        sourceMapReplacements.push({\n          original: loc,\n          length: cssText.length - beforeLength,\n        });\n      }\n    }\n  }\n\n  const rules = tagProcessor.extractRules(\n    valueCache,\n    cssText,\n    tagProcessor.location\n  );\n\n  // tagProcessor.doRuntimeReplacement(classes);\n  if (!isReferenced && !cssText.includes(':global')) {\n    return null;\n  }\n\n  // eslint-disable-next-line no-param-reassign\n  return [rules, sourceMapReplacements];\n}\n"],"file":"templateProcessor.js"}

package/esm/utils/throwIfInvalid.js

@@ -1,10 +1,9 @@
-const isLikeError = value => typeof value === 'object' && value !== null && 'stack' in value && 'message' in value;
-
+const isLikeError = (value) => typeof value === "object" && value !== null && "stack" in value && "message" in value;
 // Throw if we can't handle the interpolated value
 function throwIfInvalid(checker, value, ex, source) {
-  // We can't use instanceof here so let's use duck typing
-  if (isLikeError(value) && value.stack && value.message) {
-    throw ex.buildCodeFrameError(`An error occurred when evaluating the expression:
+	// We can't use instanceof here so let's use duck typing
+	if (isLikeError(value) && value.stack && value.message) {
+		throw ex.buildCodeFrameError(`An error occurred when evaluating the expression:
 
   > ${value.message}.
 
@@ -18,12 +17,12 @@ function throwIfInvalid(checker, value, ex, source) {
   because it cannot be statically determined in which context you use them.
   That's why some variables may be not defined during evaluation.
       `);
-  }
-  if (checker(value)) {
-    return;
-  }
-  const stringified = typeof value === 'object' ? JSON.stringify(value) : String(value);
-  throw ex.buildCodeFrameError(`The expression evaluated to '${stringified}', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, e.g. - 'String(${source})'.`);
+	}
+	if (checker(value)) {
+		return;
+	}
+	const stringified = typeof value === "object" ? JSON.stringify(value) : String(value);
+	throw ex.buildCodeFrameError(`The expression evaluated to '${stringified}', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, e.g. - 'String(${source})'.`);
 }
 export default throwIfInvalid;
-//# sourceMappingURL=throwIfInvalid.js.map
+//# sourceMappingURL=throwIfInvalid.js.map

package/esm/utils/throwIfInvalid.js.map

@@ -1 +1 @@
-{"version":3,"file":"throwIfInvalid.js","names":["isLikeError","value","throwIfInvalid","checker","ex","source","stack","message","buildCodeFrameError","stringified","JSON","stringify","String"],"sources":["../../src/utils/throwIfInvalid.ts"],"sourcesContent":["import type { BuildCodeFrameErrorFn } from '@wyw-in-js/shared';\n\nconst isLikeError = (value: unknown): value is Error =>\n  typeof value === 'object' &&\n  value !== null &&\n  'stack' in value &&\n  'message' in value;\n\n// Throw if we can't handle the interpolated value\nfunction throwIfInvalid<T>(\n  checker: (value: unknown) => value is T,\n  value: Error | unknown,\n  ex: { buildCodeFrameError: BuildCodeFrameErrorFn },\n  source: string\n): asserts value is T {\n  // We can't use instanceof here so let's use duck typing\n  if (isLikeError(value) && value.stack && value.message) {\n    throw ex.buildCodeFrameError(\n      `An error occurred when evaluating the expression:\n\n  > ${value.message}.\n\n  Make sure you are not using a browser or Node specific API and all the variables are available in static context.\n  Linaria have to extract pieces of your code to resolve the interpolated values.\n  Defining styled component or class will not work inside:\n    - function,\n    - class,\n    - method,\n    - loop,\n  because it cannot be statically determined in which context you use them.\n  That's why some variables may be not defined during evaluation.\n      `\n    );\n  }\n\n  if (checker(value)) {\n    return;\n  }\n\n  const stringified =\n    typeof value === 'object' ? JSON.stringify(value) : String(value);\n\n  throw ex.buildCodeFrameError(\n    `The expression evaluated to '${stringified}', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, e.g. - 'String(${source})'.`\n  );\n}\n\nexport default throwIfInvalid;\n"],"mappings":"AAEA,MAAMA,WAAW,GAAIC,KAAc,IACjC,OAAOA,KAAK,KAAK,QAAQ,IACzBA,KAAK,KAAK,IAAI,IACd,OAAO,IAAIA,KAAK,IAChB,SAAS,IAAIA,KAAK;;AAEpB;AACA,SAASC,cAAcA,CACrBC,OAAuC,EACvCF,KAAsB,EACtBG,EAAkD,EAClDC,MAAc,EACM;EACpB;EACA,IAAIL,WAAW,CAACC,KAAK,CAAC,IAAIA,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACM,OAAO,EAAE;IACtD,MAAMH,EAAE,CAACI,mBAAmB,CAC1B;AACN;AACA,MAAMP,KAAK,CAACM,OAAO;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OACI,CAAC;EACH;EAEA,IAAIJ,OAAO,CAACF,KAAK,CAAC,EAAE;IAClB;EACF;EAEA,MAAMQ,WAAW,GACf,OAAOR,KAAK,KAAK,QAAQ,GAAGS,IAAI,CAACC,SAAS,CAACV,KAAK,CAAC,GAAGW,MAAM,CAACX,KAAK,CAAC;EAEnE,MAAMG,EAAE,CAACI,mBAAmB,CAC1B,gCAAgCC,WAAW,8IAA8IJ,MAAM,KACjM,CAAC;AACH;AAEA,eAAeH,cAAc","ignoreList":[]}
+{"mappings":"AAEA,MAAM,eAAe,UACnB,OAAO,UAAU,YACjB,UAAU,QACV,WAAW,SACX,aAAa;;AAGf,SAAS,eACP,SACA,OACA,IACA,QACoB;;AAEpB,KAAI,YAAY,MAAM,IAAI,MAAM,SAAS,MAAM,SAAS;AACtD,QAAM,GAAG,oBACP;;MAEA,MAAM,QAAQ;;;;;;;;;;;QAYf;;AAGH,KAAI,QAAQ,MAAM,EAAE;AAClB;;CAGF,MAAM,cACJ,OAAO,UAAU,WAAW,KAAK,UAAU,MAAM,GAAG,OAAO,MAAM;AAEnE,OAAM,GAAG,oBACP,gCAAgC,YAAY,6IAA6I,OAAO,KACjM;;AAGH,eAAe","names":[],"sources":["../../src/utils/throwIfInvalid.ts"],"version":3,"sourcesContent":["import type { BuildCodeFrameErrorFn } from '@wyw-in-js/shared';\n\nconst isLikeError = (value: unknown): value is Error =>\n  typeof value === 'object' &&\n  value !== null &&\n  'stack' in value &&\n  'message' in value;\n\n// Throw if we can't handle the interpolated value\nfunction throwIfInvalid<T>(\n  checker: (value: unknown) => value is T,\n  value: Error | unknown,\n  ex: { buildCodeFrameError: BuildCodeFrameErrorFn },\n  source: string\n): asserts value is T {\n  // We can't use instanceof here so let's use duck typing\n  if (isLikeError(value) && value.stack && value.message) {\n    throw ex.buildCodeFrameError(\n      `An error occurred when evaluating the expression:\n\n  > ${value.message}.\n\n  Make sure you are not using a browser or Node specific API and all the variables are available in static context.\n  Linaria have to extract pieces of your code to resolve the interpolated values.\n  Defining styled component or class will not work inside:\n    - function,\n    - class,\n    - method,\n    - loop,\n  because it cannot be statically determined in which context you use them.\n  That's why some variables may be not defined during evaluation.\n      `\n    );\n  }\n\n  if (checker(value)) {\n    return;\n  }\n\n  const stringified =\n    typeof value === 'object' ? JSON.stringify(value) : String(value);\n\n  throw ex.buildCodeFrameError(\n    `The expression evaluated to '${stringified}', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, e.g. - 'String(${source})'.`\n  );\n}\n\nexport default throwIfInvalid;\n"],"file":"throwIfInvalid.js"}

package/esm/utils/toCSS.js

@@ -1,50 +1,41 @@
-import { isBoxedPrimitive } from '@wyw-in-js/shared';
-import { unitless } from './units';
-const isCSSPropertyValue = o => {
-  return isBoxedPrimitive(o) || typeof o === 'string' || typeof o === 'number' && Number.isFinite(o);
+import { isBoxedPrimitive } from "@wyw-in-js/shared";
+import { unitless } from "./units.js";
+const isCSSPropertyValue = (o) => {
+	return isBoxedPrimitive(o) || typeof o === "string" || typeof o === "number" && Number.isFinite(o);
 };
-export const isCSSable = o => {
-  if (isCSSPropertyValue(o)) {
-    return true;
-  }
-  if (Array.isArray(o)) {
-    return o.every(isCSSable);
-  }
-  if (typeof o === 'object') {
-    return o !== null && Object.values(o).every(isCSSable);
-  }
-  return false;
+export const isCSSable = (o) => {
+	if (isCSSPropertyValue(o)) {
+		return true;
+	}
+	if (Array.isArray(o)) {
+		return o.every(isCSSable);
+	}
+	if (typeof o === "object") {
+		return o !== null && Object.values(o).every(isCSSable);
+	}
+	return false;
 };
-const hyphenate = s => {
-  if (s.startsWith('--')) {
-    // It's a custom property which is already well formatted.
-    return s;
-  }
-  return s
-  // Hyphenate CSS property names from camelCase version from JS string
-  .replace(/([A-Z])/g, (match, p1) => `-${p1.toLowerCase()}`)
-  // Special case for `-ms` because in JS it starts with `ms` unlike `Webkit`
-  .replace(/^ms-/, '-ms-');
+const hyphenate = (s) => {
+	if (s.startsWith("--")) {
+		// It's a custom property which is already well formatted.
+		return s;
+	}
+	return s.replace(/([A-Z])/g, (match, p1) => `-${p1.toLowerCase()}`).replace(/^ms-/, "-ms-");
 };
-
 // Some tools such as polished.js output JS objects
 // To support them transparently, we convert JS objects to CSS strings
 export default function toCSS(o) {
-  if (Array.isArray(o)) {
-    return o.map(toCSS).join('\n');
-  }
-  if (isCSSPropertyValue(o)) {
-    return o.valueOf().toString();
-  }
-  return Object.entries(o).filter(([, value]) =>
-  // Ignore all falsy values except numbers
-  typeof value === 'number' || value).map(([key, value]) => {
-    if (!isCSSPropertyValue(value)) {
-      return `${key} { ${toCSS(value)} }`;
-    }
-    return `${hyphenate(key)}: ${typeof value === 'number' && value !== 0 &&
-    // Strip vendor prefixes when checking if the value is unitless
-    !(key.replace(/^(Webkit|Moz|O|ms)([A-Z])(.+)$/, (match, p1, p2, p3) => `${p2.toLowerCase()}${p3}`) in unitless) ? `${value}px` : value};`;
-  }).join(' ');
+	if (Array.isArray(o)) {
+		return o.map(toCSS).join("\n");
+	}
+	if (isCSSPropertyValue(o)) {
+		return o.valueOf().toString();
+	}
+	return Object.entries(o).filter(([, value]) => typeof value === "number" || value).map(([key, value]) => {
+		if (!isCSSPropertyValue(value)) {
+			return `${key} { ${toCSS(value)} }`;
+		}
+		return `${hyphenate(key)}: ${typeof value === "number" && value !== 0 && !(key.replace(/^(Webkit|Moz|O|ms)([A-Z])(.+)$/, (match, p1, p2, p3) => `${p2.toLowerCase()}${p3}`) in unitless) ? `${value}px` : value};`;
+	}).join(" ");
 }
-//# sourceMappingURL=toCSS.js.map
+//# sourceMappingURL=toCSS.js.map

package/esm/utils/toCSS.js.map

@@ -1 +1 @@
-{"version":3,"file":"toCSS.js","names":["isBoxedPrimitive","unitless","isCSSPropertyValue","o","Number","isFinite","isCSSable","Array","isArray","every","Object","values","hyphenate","s","startsWith","replace","match","p1","toLowerCase","toCSS","map","join","valueOf","toString","entries","filter","value","key","p2","p3"],"sources":["../../src/utils/toCSS.ts"],"sourcesContent":["import { isBoxedPrimitive } from '@wyw-in-js/shared';\n\nimport type { CSSPropertyValue, CSSable } from '../types';\n\nimport { unitless } from './units';\n\nconst isCSSPropertyValue = (o: unknown): o is CSSPropertyValue => {\n  return (\n    isBoxedPrimitive(o) ||\n    typeof o === 'string' ||\n    (typeof o === 'number' && Number.isFinite(o))\n  );\n};\n\nexport const isCSSable = (o: unknown): o is CSSable => {\n  if (isCSSPropertyValue(o)) {\n    return true;\n  }\n\n  if (Array.isArray(o)) {\n    return o.every(isCSSable);\n  }\n\n  if (typeof o === 'object') {\n    return o !== null && Object.values(o).every(isCSSable);\n  }\n\n  return false;\n};\n\nconst hyphenate = (s: string) => {\n  if (s.startsWith('--')) {\n    // It's a custom property which is already well formatted.\n    return s;\n  }\n  return (\n    s\n      // Hyphenate CSS property names from camelCase version from JS string\n      .replace(/([A-Z])/g, (match, p1) => `-${p1.toLowerCase()}`)\n      // Special case for `-ms` because in JS it starts with `ms` unlike `Webkit`\n      .replace(/^ms-/, '-ms-')\n  );\n};\n\n// Some tools such as polished.js output JS objects\n// To support them transparently, we convert JS objects to CSS strings\nexport default function toCSS(o: CSSable): string {\n  if (Array.isArray(o)) {\n    return o.map(toCSS).join('\\n');\n  }\n\n  if (isCSSPropertyValue(o)) {\n    return o.valueOf().toString();\n  }\n\n  return Object.entries(o)\n    .filter(\n      ([, value]) =>\n        // Ignore all falsy values except numbers\n        typeof value === 'number' || value\n    )\n    .map(([key, value]) => {\n      if (!isCSSPropertyValue(value)) {\n        return `${key} { ${toCSS(value)} }`;\n      }\n\n      return `${hyphenate(key)}: ${\n        typeof value === 'number' &&\n        value !== 0 &&\n        // Strip vendor prefixes when checking if the value is unitless\n        !(\n          key.replace(\n            /^(Webkit|Moz|O|ms)([A-Z])(.+)$/,\n            (match, p1, p2, p3) => `${p2.toLowerCase()}${p3}`\n          ) in unitless\n        )\n          ? `${value}px`\n          : value\n      };`;\n    })\n    .join(' ');\n}\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,mBAAmB;AAIpD,SAASC,QAAQ,QAAQ,SAAS;AAElC,MAAMC,kBAAkB,GAAIC,CAAU,IAA4B;EAChE,OACEH,gBAAgB,CAACG,CAAC,CAAC,IACnB,OAAOA,CAAC,KAAK,QAAQ,IACpB,OAAOA,CAAC,KAAK,QAAQ,IAAIC,MAAM,CAACC,QAAQ,CAACF,CAAC,CAAE;AAEjD,CAAC;AAED,OAAO,MAAMG,SAAS,GAAIH,CAAU,IAAmB;EACrD,IAAID,kBAAkB,CAACC,CAAC,CAAC,EAAE;IACzB,OAAO,IAAI;EACb;EAEA,IAAII,KAAK,CAACC,OAAO,CAACL,CAAC,CAAC,EAAE;IACpB,OAAOA,CAAC,CAACM,KAAK,CAACH,SAAS,CAAC;EAC3B;EAEA,IAAI,OAAOH,CAAC,KAAK,QAAQ,EAAE;IACzB,OAAOA,CAAC,KAAK,IAAI,IAAIO,MAAM,CAACC,MAAM,CAACR,CAAC,CAAC,CAACM,KAAK,CAACH,SAAS,CAAC;EACxD;EAEA,OAAO,KAAK;AACd,CAAC;AAED,MAAMM,SAAS,GAAIC,CAAS,IAAK;EAC/B,IAAIA,CAAC,CAACC,UAAU,CAAC,IAAI,CAAC,EAAE;IACtB;IACA,OAAOD,CAAC;EACV;EACA,OACEA;EACE;EAAA,CACCE,OAAO,CAAC,UAAU,EAAE,CAACC,KAAK,EAAEC,EAAE,KAAK,IAAIA,EAAE,CAACC,WAAW,CAAC,CAAC,EAAE;EAC1D;EAAA,CACCH,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC;AAE9B,CAAC;;AAED;AACA;AACA,eAAe,SAASI,KAAKA,CAAChB,CAAU,EAAU;EAChD,IAAII,KAAK,CAACC,OAAO,CAACL,CAAC,CAAC,EAAE;IACpB,OAAOA,CAAC,CAACiB,GAAG,CAACD,KAAK,CAAC,CAACE,IAAI,CAAC,IAAI,CAAC;EAChC;EAEA,IAAInB,kBAAkB,CAACC,CAAC,CAAC,EAAE;IACzB,OAAOA,CAAC,CAACmB,OAAO,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;EAC/B;EAEA,OAAOb,MAAM,CAACc,OAAO,CAACrB,CAAC,CAAC,CACrBsB,MAAM,CACL,CAAC,GAAGC,KAAK,CAAC;EACR;EACA,OAAOA,KAAK,KAAK,QAAQ,IAAIA,KACjC,CAAC,CACAN,GAAG,CAAC,CAAC,CAACO,GAAG,EAAED,KAAK,CAAC,KAAK;IACrB,IAAI,CAACxB,kBAAkB,CAACwB,KAAK,CAAC,EAAE;MAC9B,OAAO,GAAGC,GAAG,MAAMR,KAAK,CAACO,KAAK,CAAC,IAAI;IACrC;IAEA,OAAO,GAAGd,SAAS,CAACe,GAAG,CAAC,KACtB,OAAOD,KAAK,KAAK,QAAQ,IACzBA,KAAK,KAAK,CAAC;IACX;IACA,EACEC,GAAG,CAACZ,OAAO,CACT,gCAAgC,EAChC,CAACC,KAAK,EAAEC,EAAE,EAAEW,EAAE,EAAEC,EAAE,KAAK,GAAGD,EAAE,CAACV,WAAW,CAAC,CAAC,GAAGW,EAAE,EACjD,CAAC,IAAI5B,QAAQ,CACd,GACG,GAAGyB,KAAK,IAAI,GACZA,KAAK,GACR;EACL,CAAC,CAAC,CACDL,IAAI,CAAC,GAAG,CAAC;AACd","ignoreList":[]}
+{"mappings":"AAAA,SAAS,wBAAwB;AAIjC,SAAS,gBAAgB;AAEzB,MAAM,sBAAsB,MAAsC;AAChE,QACE,iBAAiB,EAAE,IACnB,OAAO,MAAM,YACZ,OAAO,MAAM,YAAY,OAAO,SAAS,EAAE;;AAIhD,OAAO,MAAM,aAAa,MAA6B;AACrD,KAAI,mBAAmB,EAAE,EAAE;AACzB,SAAO;;AAGT,KAAI,MAAM,QAAQ,EAAE,EAAE;AACpB,SAAO,EAAE,MAAM,UAAU;;AAG3B,KAAI,OAAO,MAAM,UAAU;AACzB,SAAO,MAAM,QAAQ,OAAO,OAAO,EAAE,CAAC,MAAM,UAAU;;AAGxD,QAAO;;AAGT,MAAM,aAAa,MAAc;AAC/B,KAAI,EAAE,WAAW,KAAK,EAAE;;AAEtB,SAAO;;AAET,QACE,EAEG,QAAQ,aAAa,OAAO,OAAO,IAAI,GAAG,aAAa,GAAG,CAE1D,QAAQ,QAAQ,OAAO;;;;AAM9B,eAAe,SAAS,MAAM,GAAoB;AAChD,KAAI,MAAM,QAAQ,EAAE,EAAE;AACpB,SAAO,EAAE,IAAI,MAAM,CAAC,KAAK,KAAK;;AAGhC,KAAI,mBAAmB,EAAE,EAAE;AACzB,SAAO,EAAE,SAAS,CAAC,UAAU;;AAG/B,QAAO,OAAO,QAAQ,EAAE,CACrB,QACE,GAAG,WAEF,OAAO,UAAU,YAAY,MAChC,CACA,KAAK,CAAC,KAAK,WAAW;AACrB,MAAI,CAAC,mBAAmB,MAAM,EAAE;AAC9B,UAAO,GAAG,IAAI,KAAK,MAAM,MAAM,CAAC;;AAGlC,SAAO,GAAG,UAAU,IAAI,CAAC,IACvB,OAAO,UAAU,YACjB,UAAU,KAEV,EACE,IAAI,QACF,mCACC,OAAO,IAAI,IAAI,OAAO,GAAG,GAAG,aAAa,GAAG,KAC9C,IAAI,YAEH,GAAG,MAAM,MACT,MACL;GACD,CACD,KAAK,IAAI","names":[],"sources":["../../src/utils/toCSS.ts"],"version":3,"sourcesContent":["import { isBoxedPrimitive } from '@wyw-in-js/shared';\n\nimport type { CSSPropertyValue, CSSable } from '../types';\n\nimport { unitless } from './units';\n\nconst isCSSPropertyValue = (o: unknown): o is CSSPropertyValue => {\n  return (\n    isBoxedPrimitive(o) ||\n    typeof o === 'string' ||\n    (typeof o === 'number' && Number.isFinite(o))\n  );\n};\n\nexport const isCSSable = (o: unknown): o is CSSable => {\n  if (isCSSPropertyValue(o)) {\n    return true;\n  }\n\n  if (Array.isArray(o)) {\n    return o.every(isCSSable);\n  }\n\n  if (typeof o === 'object') {\n    return o !== null && Object.values(o).every(isCSSable);\n  }\n\n  return false;\n};\n\nconst hyphenate = (s: string) => {\n  if (s.startsWith('--')) {\n    // It's a custom property which is already well formatted.\n    return s;\n  }\n  return (\n    s\n      // Hyphenate CSS property names from camelCase version from JS string\n      .replace(/([A-Z])/g, (match, p1) => `-${p1.toLowerCase()}`)\n      // Special case for `-ms` because in JS it starts with `ms` unlike `Webkit`\n      .replace(/^ms-/, '-ms-')\n  );\n};\n\n// Some tools such as polished.js output JS objects\n// To support them transparently, we convert JS objects to CSS strings\nexport default function toCSS(o: CSSable): string {\n  if (Array.isArray(o)) {\n    return o.map(toCSS).join('\\n');\n  }\n\n  if (isCSSPropertyValue(o)) {\n    return o.valueOf().toString();\n  }\n\n  return Object.entries(o)\n    .filter(\n      ([, value]) =>\n        // Ignore all falsy values except numbers\n        typeof value === 'number' || value\n    )\n    .map(([key, value]) => {\n      if (!isCSSPropertyValue(value)) {\n        return `${key} { ${toCSS(value)} }`;\n      }\n\n      return `${hyphenate(key)}: ${\n        typeof value === 'number' &&\n        value !== 0 &&\n        // Strip vendor prefixes when checking if the value is unitless\n        !(\n          key.replace(\n            /^(Webkit|Moz|O|ms)([A-Z])(.+)$/,\n            (match, p1, p2, p3) => `${p2.toLowerCase()}${p3}`\n          ) in unitless\n        )\n          ? `${value}px`\n          : value\n      };`;\n    })\n    .join(' ');\n}\n"],"file":"toCSS.js"}

package/esm/utils/toValidCSSIdentifier.js

@@ -1,4 +1,4 @@
 export function toValidCSSIdentifier(s) {
-  return s.replace(/[^-_a-z0-9\u00A0-\uFFFF]/gi, '_').replace(/^\d/, '_');
+	return s.replace(/[^-_a-z0-9\u00A0-\uFFFF]/gi, "_").replace(/^\d/, "_");
 }
-//# sourceMappingURL=toValidCSSIdentifier.js.map
+//# sourceMappingURL=toValidCSSIdentifier.js.map

package/esm/utils/toValidCSSIdentifier.js.map

@@ -1 +1 @@
-{"version":3,"file":"toValidCSSIdentifier.js","names":["toValidCSSIdentifier","s","replace"],"sources":["../../src/utils/toValidCSSIdentifier.ts"],"sourcesContent":["export function toValidCSSIdentifier(s: string) {\n  return s.replace(/[^-_a-z0-9\\u00A0-\\uFFFF]/gi, '_').replace(/^\\d/, '_');\n}\n"],"mappings":"AAAA,OAAO,SAASA,oBAAoBA,CAACC,CAAS,EAAE;EAC9C,OAAOA,CAAC,CAACC,OAAO,CAAC,4BAA4B,EAAE,GAAG,CAAC,CAACA,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC;AACzE","ignoreList":[]}
+{"mappings":"AAAA,OAAO,SAAS,qBAAqB,GAAW;AAC9C,QAAO,EAAE,QAAQ,8BAA8B,IAAI,CAAC,QAAQ,OAAO,IAAI","names":[],"sources":["../../src/utils/toValidCSSIdentifier.ts"],"version":3,"sourcesContent":["export function toValidCSSIdentifier(s: string) {\n  return s.replace(/[^-_a-z0-9\\u00A0-\\uFFFF]/gi, '_').replace(/^\\d/, '_');\n}\n"],"file":"toValidCSSIdentifier.js"}

package/esm/utils/types.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/esm/utils/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/utils/types.ts"],"sourcesContent":["import type { TransformOptions } from '@babel/core';\n\nimport type { ClassNameFn, VariableNameFn } from '@wyw-in-js/shared';\n\nexport interface IOptions {\n  classNameSlug?: string | ClassNameFn;\n  displayName: boolean;\n  extensions?: string[];\n  variableNameConfig?: 'var' | 'dashes' | 'raw';\n  variableNameSlug?: string | VariableNameFn;\n}\n\nexport type IFileContext = Pick<TransformOptions, 'root' | 'filename'>;\n"],"mappings":"","ignoreList":[]}
+{"mappings":"","names":[],"sources":["../../src/utils/types.ts"],"version":3,"sourcesContent":["import type { ClassNameFn, VariableNameFn } from '@wyw-in-js/shared';\n\nexport interface IOptions {\n  classNameSlug?: string | ClassNameFn;\n  displayName: boolean;\n  extensions?: string[];\n  variableNameConfig?: 'var' | 'dashes' | 'raw';\n  variableNameSlug?: string | VariableNameFn;\n}\n\nexport type IFileContext = {\n  filename?: string | null;\n  root?: string | null;\n};\n"],"file":"types.js"}

package/esm/utils/units.js

@@ -1,65 +1,83 @@
 // https://www.w3.org/TR/css-values-4/
 export const units = [
-// font relative lengths
-'em', 'ex', 'cap', 'ch', 'ic', 'rem', 'lh', 'rlh',
-// viewport percentage lengths
-'vw', 'vh', 'vi', 'vb', 'vmin', 'vmax',
-// absolute lengths
-'cm', 'mm', 'Q', 'in', 'pc', 'pt', 'px',
-// angle units
-'deg', 'grad', 'rad', 'turn',
-// duration units
-'s', 'ms',
-// frequency units
-'Hz', 'kHz',
-// resolution units
-'dpi', 'dpcm', 'dppx', 'x',
-// https://www.w3.org/TR/css-grid-1/#fr-unit
-'fr',
-// percentages
-'%'];
+	"em",
+	"ex",
+	"cap",
+	"ch",
+	"ic",
+	"rem",
+	"lh",
+	"rlh",
+	"vw",
+	"vh",
+	"vi",
+	"vb",
+	"vmin",
+	"vmax",
+	"cm",
+	"mm",
+	"Q",
+	"in",
+	"pc",
+	"pt",
+	"px",
+	"deg",
+	"grad",
+	"rad",
+	"turn",
+	"s",
+	"ms",
+	"Hz",
+	"kHz",
+	"dpi",
+	"dpcm",
+	"dppx",
+	"x",
+	"fr",
+	"%"
+];
 export const unitless = {
-  animationIterationCount: true,
-  borderImageOutset: true,
-  borderImageSlice: true,
-  borderImageWidth: true,
-  boxFlex: true,
-  boxFlexGroup: true,
-  boxOrdinalGroup: true,
-  columnCount: true,
-  columns: true,
-  flex: true,
-  flexGrow: true,
-  flexPositive: true,
-  flexShrink: true,
-  flexNegative: true,
-  flexOrder: true,
-  gridRow: true,
-  gridRowEnd: true,
-  gridRowSpan: true,
-  gridRowStart: true,
-  gridColumn: true,
-  gridColumnEnd: true,
-  gridColumnSpan: true,
-  gridColumnStart: true,
-  fontWeight: true,
-  lineClamp: true,
-  lineHeight: true,
-  opacity: true,
-  order: true,
-  orphans: true,
-  tabSize: true,
-  widows: true,
-  zIndex: true,
-  zoom: true,
-  // SVG-related properties
-  fillOpacity: true,
-  floodOpacity: true,
-  stopOpacity: true,
-  strokeDasharray: true,
-  strokeDashoffset: true,
-  strokeMiterlimit: true,
-  strokeOpacity: true,
-  strokeWidth: true
+	animationIterationCount: true,
+	borderImageOutset: true,
+	borderImageSlice: true,
+	borderImageWidth: true,
+	boxFlex: true,
+	boxFlexGroup: true,
+	boxOrdinalGroup: true,
+	columnCount: true,
+	columns: true,
+	flex: true,
+	flexGrow: true,
+	flexPositive: true,
+	flexShrink: true,
+	flexNegative: true,
+	flexOrder: true,
+	gridRow: true,
+	gridRowEnd: true,
+	gridRowSpan: true,
+	gridRowStart: true,
+	gridColumn: true,
+	gridColumnEnd: true,
+	gridColumnSpan: true,
+	gridColumnStart: true,
+	fontWeight: true,
+	lineClamp: true,
+	lineHeight: true,
+	opacity: true,
+	order: true,
+	orphans: true,
+	tabSize: true,
+	widows: true,
+	zIndex: true,
+	zoom: true,
+	// SVG-related properties
+	fillOpacity: true,
+	floodOpacity: true,
+	stopOpacity: true,
+	strokeDasharray: true,
+	strokeDashoffset: true,
+	strokeMiterlimit: true,
+	strokeOpacity: true,
+	strokeWidth: true
 };
-//# sourceMappingURL=units.js.map
+//# sourceMappingURL=units.js.map

package/esm/utils/units.js.map

@@ -1 +1 @@
-{"version":3,"file":"units.js","names":["units","unitless","animationIterationCount","borderImageOutset","borderImageSlice","borderImageWidth","boxFlex","boxFlexGroup","boxOrdinalGroup","columnCount","columns","flex","flexGrow","flexPositive","flexShrink","flexNegative","flexOrder","gridRow","gridRowEnd","gridRowSpan","gridRowStart","gridColumn","gridColumnEnd","gridColumnSpan","gridColumnStart","fontWeight","lineClamp","lineHeight","opacity","order","orphans","tabSize","widows","zIndex","zoom","fillOpacity","floodOpacity","stopOpacity","strokeDasharray","strokeDashoffset","strokeMiterlimit","strokeOpacity","strokeWidth"],"sources":["../../src/utils/units.ts"],"sourcesContent":["// https://www.w3.org/TR/css-values-4/\nexport const units = [\n  // font relative lengths\n  'em',\n  'ex',\n  'cap',\n  'ch',\n  'ic',\n  'rem',\n  'lh',\n  'rlh',\n\n  // viewport percentage lengths\n  'vw',\n  'vh',\n  'vi',\n  'vb',\n  'vmin',\n  'vmax',\n\n  // absolute lengths\n  'cm',\n  'mm',\n  'Q',\n  'in',\n  'pc',\n  'pt',\n  'px',\n\n  // angle units\n  'deg',\n  'grad',\n  'rad',\n  'turn',\n\n  // duration units\n  's',\n  'ms',\n\n  // frequency units\n  'Hz',\n  'kHz',\n\n  // resolution units\n  'dpi',\n  'dpcm',\n  'dppx',\n  'x',\n\n  // https://www.w3.org/TR/css-grid-1/#fr-unit\n  'fr',\n\n  // percentages\n  '%',\n];\n\nexport const unitless = {\n  animationIterationCount: true,\n  borderImageOutset: true,\n  borderImageSlice: true,\n  borderImageWidth: true,\n  boxFlex: true,\n  boxFlexGroup: true,\n  boxOrdinalGroup: true,\n  columnCount: true,\n  columns: true,\n  flex: true,\n  flexGrow: true,\n  flexPositive: true,\n  flexShrink: true,\n  flexNegative: true,\n  flexOrder: true,\n  gridRow: true,\n  gridRowEnd: true,\n  gridRowSpan: true,\n  gridRowStart: true,\n  gridColumn: true,\n  gridColumnEnd: true,\n  gridColumnSpan: true,\n  gridColumnStart: true,\n  fontWeight: true,\n  lineClamp: true,\n  lineHeight: true,\n  opacity: true,\n  order: true,\n  orphans: true,\n  tabSize: true,\n  widows: true,\n  zIndex: true,\n  zoom: true,\n\n  // SVG-related properties\n  fillOpacity: true,\n  floodOpacity: true,\n  stopOpacity: true,\n  strokeDasharray: true,\n  strokeDashoffset: true,\n  strokeMiterlimit: true,\n  strokeOpacity: true,\n  strokeWidth: true,\n};\n"],"mappings":"AAAA;AACA,OAAO,MAAMA,KAAK,GAAG;AACnB;AACA,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,KAAK;AAEL;AACA,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAM;AAEN;AACA,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI;AAEJ;AACA,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM;AAEN;AACA,GAAG,EACH,IAAI;AAEJ;AACA,IAAI,EACJ,KAAK;AAEL;AACA,KAAK,EACL,MAAM,EACN,MAAM,EACN,GAAG;AAEH;AACA,IAAI;AAEJ;AACA,GAAG,CACJ;AAED,OAAO,MAAMC,QAAQ,GAAG;EACtBC,uBAAuB,EAAE,IAAI;EAC7BC,iBAAiB,EAAE,IAAI;EACvBC,gBAAgB,EAAE,IAAI;EACtBC,gBAAgB,EAAE,IAAI;EACtBC,OAAO,EAAE,IAAI;EACbC,YAAY,EAAE,IAAI;EAClBC,eAAe,EAAE,IAAI;EACrBC,WAAW,EAAE,IAAI;EACjBC,OAAO,EAAE,IAAI;EACbC,IAAI,EAAE,IAAI;EACVC,QAAQ,EAAE,IAAI;EACdC,YAAY,EAAE,IAAI;EAClBC,UAAU,EAAE,IAAI;EAChBC,YAAY,EAAE,IAAI;EAClBC,SAAS,EAAE,IAAI;EACfC,OAAO,EAAE,IAAI;EACbC,UAAU,EAAE,IAAI;EAChBC,WAAW,EAAE,IAAI;EACjBC,YAAY,EAAE,IAAI;EAClBC,UAAU,EAAE,IAAI;EAChBC,aAAa,EAAE,IAAI;EACnBC,cAAc,EAAE,IAAI;EACpBC,eAAe,EAAE,IAAI;EACrBC,UAAU,EAAE,IAAI;EAChBC,SAAS,EAAE,IAAI;EACfC,UAAU,EAAE,IAAI;EAChBC,OAAO,EAAE,IAAI;EACbC,KAAK,EAAE,IAAI;EACXC,OAAO,EAAE,IAAI;EACbC,OAAO,EAAE,IAAI;EACbC,MAAM,EAAE,IAAI;EACZC,MAAM,EAAE,IAAI;EACZC,IAAI,EAAE,IAAI;EAEV;EACAC,WAAW,EAAE,IAAI;EACjBC,YAAY,EAAE,IAAI;EAClBC,WAAW,EAAE,IAAI;EACjBC,eAAe,EAAE,IAAI;EACrBC,gBAAgB,EAAE,IAAI;EACtBC,gBAAgB,EAAE,IAAI;EACtBC,aAAa,EAAE,IAAI;EACnBC,WAAW,EAAE;AACf,CAAC","ignoreList":[]}
+{"mappings":";AACA,OAAO,MAAM,QAAQ;CAEnB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CAGA;CACA;CAGA;CACA;CAGA;CACA;CACA;CACA;CAGA;CAGA;CACD;AAED,OAAO,MAAM,WAAW;CACtB,yBAAyB;CACzB,mBAAmB;CACnB,kBAAkB;CAClB,kBAAkB;CAClB,SAAS;CACT,cAAc;CACd,iBAAiB;CACjB,aAAa;CACb,SAAS;CACT,MAAM;CACN,UAAU;CACV,cAAc;CACd,YAAY;CACZ,cAAc;CACd,WAAW;CACX,SAAS;CACT,YAAY;CACZ,aAAa;CACb,cAAc;CACd,YAAY;CACZ,eAAe;CACf,gBAAgB;CAChB,iBAAiB;CACjB,YAAY;CACZ,WAAW;CACX,YAAY;CACZ,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,MAAM;;CAGN,aAAa;CACb,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,kBAAkB;CAClB,kBAAkB;CAClB,eAAe;CACf,aAAa;CACd","names":[],"sources":["../../src/utils/units.ts"],"version":3,"sourcesContent":["// https://www.w3.org/TR/css-values-4/\nexport const units = [\n  // font relative lengths\n  'em',\n  'ex',\n  'cap',\n  'ch',\n  'ic',\n  'rem',\n  'lh',\n  'rlh',\n\n  // viewport percentage lengths\n  'vw',\n  'vh',\n  'vi',\n  'vb',\n  'vmin',\n  'vmax',\n\n  // absolute lengths\n  'cm',\n  'mm',\n  'Q',\n  'in',\n  'pc',\n  'pt',\n  'px',\n\n  // angle units\n  'deg',\n  'grad',\n  'rad',\n  'turn',\n\n  // duration units\n  's',\n  'ms',\n\n  // frequency units\n  'Hz',\n  'kHz',\n\n  // resolution units\n  'dpi',\n  'dpcm',\n  'dppx',\n  'x',\n\n  // https://www.w3.org/TR/css-grid-1/#fr-unit\n  'fr',\n\n  // percentages\n  '%',\n];\n\nexport const unitless = {\n  animationIterationCount: true,\n  borderImageOutset: true,\n  borderImageSlice: true,\n  borderImageWidth: true,\n  boxFlex: true,\n  boxFlexGroup: true,\n  boxOrdinalGroup: true,\n  columnCount: true,\n  columns: true,\n  flex: true,\n  flexGrow: true,\n  flexPositive: true,\n  flexShrink: true,\n  flexNegative: true,\n  flexOrder: true,\n  gridRow: true,\n  gridRowEnd: true,\n  gridRowSpan: true,\n  gridRowStart: true,\n  gridColumn: true,\n  gridColumnEnd: true,\n  gridColumnSpan: true,\n  gridColumnStart: true,\n  fontWeight: true,\n  lineClamp: true,\n  lineHeight: true,\n  opacity: true,\n  order: true,\n  orphans: true,\n  tabSize: true,\n  widows: true,\n  zIndex: true,\n  zoom: true,\n\n  // SVG-related properties\n  fillOpacity: true,\n  floodOpacity: true,\n  stopOpacity: true,\n  strokeDasharray: true,\n  strokeDashoffset: true,\n  strokeMiterlimit: true,\n  strokeOpacity: true,\n  strokeWidth: true,\n};\n"],"file":"units.js"}