@antdv-next/cssinjs 0.0.3 → 1.0.0-alpha.2

package/dist/linters/hashedAnimationLinter.js

@@ -0,0 +1,12 @@
+import { lintWarning } from "./utils.js";
+
+//#region src/linters/hashedAnimationLinter.ts
+const linter = (key, value, info) => {
+	if (key === "animation") {
+		if (info.hashId && value !== "none") lintWarning(`You seem to be using hashed animation '${value}', in which case 'animationName' with Keyframe as value is recommended.`, info);
+	}
+};
+var hashedAnimationLinter_default = linter;
+
+//#endregion
+export { hashedAnimationLinter_default as default };

package/dist/linters/index.d.ts

@@ -0,0 +1,5 @@
+import { Linter } from "./interface.js";
+import { linter } from "./legacyNotSelectorLinter.js";
+import { linter as linter$1 } from "./logicalPropertiesLinter.js";
+import { linter as linter$2 } from "./NaNLinter.js";
+import { linter as linter$3 } from "./parentSelectorLinter.js";

package/dist/linters/index.js

@@ -0,0 +1,8 @@
+import contentQuotesLinter_default from "./contentQuotesLinter.js";
+import hashedAnimationLinter_default from "./hashedAnimationLinter.js";
+import legacyNotSelectorLinter_default from "./legacyNotSelectorLinter.js";
+import logicalPropertiesLinter_default from "./logicalPropertiesLinter.js";
+import NaNLinter_default from "./NaNLinter.js";
+import parentSelectorLinter_default from "./parentSelectorLinter.js";
+
+export {  };

package/dist/linters/interface.d.ts

@@ -0,0 +1,11 @@
+//#region src/linters/interface.d.ts
+interface LinterInfo {
+  path?: string;
+  hashId?: string;
+  parentSelectors: string[];
+}
+interface Linter {
+  (key: string, value: string | number, info: LinterInfo): void;
+}
+//#endregion
+export { Linter };

package/dist/linters/legacyNotSelectorLinter.d.ts

@@ -0,0 +1,6 @@
+import { Linter } from "./interface.js";
+
+//#region src/linters/legacyNotSelectorLinter.d.ts
+declare const linter: Linter;
+//#endregion
+export { linter };

package/dist/linters/legacyNotSelectorLinter.js

@@ -0,0 +1,20 @@
+import { lintWarning } from "./utils.js";
+
+//#region src/linters/legacyNotSelectorLinter.ts
+function isConcatSelector(selector) {
+	return (selector.match(/:not\(([^)]*)\)/)?.[1] || "").split(/(\[[^[]*\])|(?=[.#])/).filter((str) => str).length > 1;
+}
+function parsePath(info) {
+	return info.parentSelectors.reduce((prev, cur) => {
+		if (!prev) return cur;
+		return cur.includes("&") ? cur.replace(/&/g, prev) : `${prev} ${cur}`;
+	}, "");
+}
+const linter = (_key, _value, info) => {
+	const notList = parsePath(info).match(/:not\([^)]*\)/g) || [];
+	if (notList.length > 0 && notList.some(isConcatSelector)) lintWarning(`Concat ':not' selector not support in legacy browsers.`, info);
+};
+var legacyNotSelectorLinter_default = linter;
+
+//#endregion
+export { legacyNotSelectorLinter_default as default };

package/dist/linters/logicalPropertiesLinter.d.ts

@@ -0,0 +1,6 @@
+import { Linter } from "./interface.js";
+
+//#region src/linters/logicalPropertiesLinter.d.ts
+declare const linter: Linter;
+//#endregion
+export { linter };

package/dist/linters/logicalPropertiesLinter.js

@@ -0,0 +1,57 @@
+import { lintWarning } from "./utils.js";
+
+//#region src/linters/logicalPropertiesLinter.ts
+const linter = (key, value, info) => {
+	switch (key) {
+		case "marginLeft":
+		case "marginRight":
+		case "paddingLeft":
+		case "paddingRight":
+		case "left":
+		case "right":
+		case "borderLeft":
+		case "borderLeftWidth":
+		case "borderLeftStyle":
+		case "borderLeftColor":
+		case "borderRight":
+		case "borderRightWidth":
+		case "borderRightStyle":
+		case "borderRightColor":
+		case "borderTopLeftRadius":
+		case "borderTopRightRadius":
+		case "borderBottomLeftRadius":
+		case "borderBottomRightRadius":
+			lintWarning(`You seem to be using non-logical property '${key}' which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`, info);
+			return;
+		case "margin":
+		case "padding":
+		case "borderWidth":
+		case "borderStyle":
+			if (typeof value === "string") {
+				const valueArr = value.split(" ").map((item) => item.trim());
+				if (valueArr.length === 4 && valueArr[1] !== valueArr[3]) lintWarning(`You seem to be using '${key}' property with different left ${key} and right ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`, info);
+			}
+			return;
+		case "clear":
+		case "textAlign":
+			if (value === "left" || value === "right") lintWarning(`You seem to be using non-logical value '${value}' of ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`, info);
+			return;
+		case "borderRadius":
+			if (typeof value === "string") {
+				if (value.split("/").map((item) => item.trim()).reduce((result, group) => {
+					if (result) return result;
+					const radiusArr = group.split(" ").map((item) => item.trim());
+					if (radiusArr.length >= 2 && radiusArr[0] !== radiusArr[1]) return true;
+					if (radiusArr.length === 3 && radiusArr[1] !== radiusArr[2]) return true;
+					if (radiusArr.length === 4 && radiusArr[2] !== radiusArr[3]) return true;
+					return result;
+				}, false)) lintWarning(`You seem to be using non-logical value '${value}' of ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`, info);
+			}
+			return;
+		default:
+	}
+};
+var logicalPropertiesLinter_default = linter;
+
+//#endregion
+export { logicalPropertiesLinter_default as default };

package/dist/linters/parentSelectorLinter.d.ts

@@ -0,0 +1,7 @@
+import { Linter } from "./interface.js";
+import "../index.js";
+
+//#region src/linters/parentSelectorLinter.d.ts
+declare const linter: Linter;
+//#endregion
+export { linter };

package/dist/linters/parentSelectorLinter.js

@@ -0,0 +1,12 @@
+import { lintWarning } from "./utils.js";
+
+//#region src/linters/parentSelectorLinter.ts
+const linter = (_key, _value, info) => {
+	if (info.parentSelectors.some((selector) => {
+		return selector.split(",").some((item) => item.split("&").length > 2);
+	})) lintWarning("Should not use more than one `&` in a selector.", info);
+};
+var parentSelectorLinter_default = linter;
+
+//#endregion
+export { parentSelectorLinter_default as default };

package/dist/linters/utils.js

@@ -0,0 +1,10 @@
+import devWarning from "@v-c/util/dist/warning";
+
+//#region src/linters/utils.ts
+function lintWarning(message, info) {
+	const { path, parentSelectors } = info;
+	devWarning(false, `[Ant Design CSS-in-JS] ${path ? `Error in ${path}: ` : ""}${message}${parentSelectors.length ? ` Selector: ${parentSelectors.join(" | ")}` : ""}`);
+}
+
+//#endregion
+export { lintWarning };

package/dist/ssr/styleCollector.d.ts

@@ -0,0 +1,8 @@
+//#region src/ssr/styleCollector.d.ts
+type StyleCollector = {
+  push: (styleText: string) => void;
+} | null;
+declare function setStyleCollector(next: StyleCollector): void;
+declare function collectStyleText(styleText: string): void;
+//#endregion
+export { collectStyleText, setStyleCollector };

package/dist/ssr/styleCollector.js

@@ -0,0 +1,11 @@
+//#region src/ssr/styleCollector.ts
+let collector = null;
+function setStyleCollector(next) {
+	collector = next;
+}
+function collectStyleText(styleText) {
+	collector?.push(styleText);
+}
+
+//#endregion
+export { collectStyleText, setStyleCollector };

package/dist/theme/Theme.d.ts

@@ -0,0 +1,16 @@
+import { DerivativeFunc, TokenType } from "./interface.js";
+
+//#region src/theme/Theme.d.ts
+
+/**
+ * Theme with algorithms to derive tokens from design tokens.
+ * Use `createTheme` first which will help to manage the theme instance cache.
+ */
+declare class Theme<DesignToken extends TokenType, DerivativeToken extends TokenType> {
+  private derivatives;
+  readonly id: number;
+  constructor(derivatives: DerivativeFunc<DesignToken, DerivativeToken> | DerivativeFunc<DesignToken, DerivativeToken>[]);
+  getDerivativeToken(token: DesignToken): DerivativeToken;
+}
+//#endregion
+export { Theme };

package/dist/theme/Theme.js

@@ -0,0 +1,24 @@
+import { warning } from "@v-c/util/dist/warning";
+
+//#region src/theme/Theme.ts
+let uuid = 0;
+/**
+* Theme with algorithms to derive tokens from design tokens.
+* Use `createTheme` first which will help to manage the theme instance cache.
+*/
+var Theme = class {
+	derivatives;
+	id;
+	constructor(derivatives) {
+		this.derivatives = Array.isArray(derivatives) ? derivatives : [derivatives];
+		this.id = uuid;
+		if (derivatives.length === 0) warning(derivatives.length > 0, "[Ant Design CSS-in-JS] Theme should have at least one derivative function.");
+		uuid += 1;
+	}
+	getDerivativeToken(token) {
+		return this.derivatives.reduce((result, derivative) => derivative(token, result), void 0);
+	}
+};
+
+//#endregion
+export { Theme as default };

package/dist/theme/ThemeCache.js

@@ -0,0 +1,79 @@
+//#region src/theme/ThemeCache.ts
+function sameDerivativeOption(left, right) {
+	if (left.length !== right.length) return false;
+	for (let i = 0; i < left.length; i++) if (left[i] !== right[i]) return false;
+	return true;
+}
+var ThemeCache = class ThemeCache {
+	static MAX_CACHE_SIZE = 20;
+	static MAX_CACHE_OFFSET = 5;
+	cache;
+	keys;
+	cacheCallTimes;
+	constructor() {
+		this.cache = /* @__PURE__ */ new Map();
+		this.keys = [];
+		this.cacheCallTimes = 0;
+	}
+	size() {
+		return this.keys.length;
+	}
+	internalGet(derivativeOption, updateCallTimes = false) {
+		let cache = { map: this.cache };
+		derivativeOption.forEach((derivative) => {
+			if (!cache) cache = void 0;
+			else cache = cache?.map?.get(derivative);
+		});
+		if (cache?.value && updateCallTimes) cache.value[1] = this.cacheCallTimes++;
+		return cache?.value;
+	}
+	get(derivativeOption) {
+		return this.internalGet(derivativeOption, true)?.[0];
+	}
+	has(derivativeOption) {
+		return !!this.internalGet(derivativeOption);
+	}
+	set(derivativeOption, value) {
+		if (!this.has(derivativeOption)) {
+			if (this.size() + 1 > ThemeCache.MAX_CACHE_SIZE + ThemeCache.MAX_CACHE_OFFSET) {
+				const [targetKey] = this.keys.reduce((result, key) => {
+					const [, callTimes] = result;
+					if (this.internalGet(key)[1] < callTimes) return [key, this.internalGet(key)[1]];
+					return result;
+				}, [this.keys[0], this.cacheCallTimes]);
+				this.delete(targetKey);
+			}
+			this.keys.push(derivativeOption);
+		}
+		let cache = this.cache;
+		derivativeOption.forEach((derivative, index) => {
+			if (index === derivativeOption.length - 1) cache.set(derivative, { value: [value, this.cacheCallTimes++] });
+			else {
+				const cacheValue = cache.get(derivative);
+				if (!cacheValue) cache.set(derivative, { map: /* @__PURE__ */ new Map() });
+				else if (!cacheValue.map) cacheValue.map = /* @__PURE__ */ new Map();
+				cache = cache.get(derivative).map;
+			}
+		});
+	}
+	deleteByPath(currentCache, derivatives) {
+		const cache = currentCache.get(derivatives[0]);
+		if (derivatives.length === 1) {
+			if (!cache.map) currentCache.delete(derivatives[0]);
+			else currentCache.set(derivatives[0], { map: cache.map });
+			return cache.value?.[0];
+		}
+		const result = this.deleteByPath(cache.map, derivatives.slice(1));
+		if ((!cache.map || cache.map.size === 0) && !cache.value) currentCache.delete(derivatives[0]);
+		return result;
+	}
+	delete(derivativeOption) {
+		if (this.has(derivativeOption)) {
+			this.keys = this.keys.filter((item) => !sameDerivativeOption(item, derivativeOption));
+			return this.deleteByPath(this.cache, derivativeOption);
+		}
+	}
+};
+
+//#endregion
+export { ThemeCache as default };

package/dist/theme/calc/CSSCalculator.d.ts

@@ -0,0 +1,19 @@
+import { AbstractCalculator } from "./calculator.js";
+
+//#region src/theme/calc/CSSCalculator.d.ts
+declare class CSSCalculator extends AbstractCalculator {
+  result: string;
+  unitlessCssVar: Set<string>;
+  lowPriority?: boolean;
+  constructor(num: number | string | AbstractCalculator, unitlessCssVar: Set<string>);
+  add(num: number | string | AbstractCalculator): this;
+  sub(num: number | string | AbstractCalculator): this;
+  mul(num: number | string | AbstractCalculator): this;
+  div(num: number | string | AbstractCalculator): this;
+  getResult(force?: boolean): string;
+  equal(options?: {
+    unit?: boolean;
+  }): string;
+}
+//#endregion
+export { CSSCalculator };

package/dist/theme/calc/CSSCalculator.js

@@ -0,0 +1,63 @@
+import calculator_default from "./calculator.js";
+
+//#region src/theme/calc/CSSCalculator.ts
+const CALC_UNIT = "CALC_UNIT";
+const regexp = new RegExp(CALC_UNIT, "g");
+function unit(value) {
+	if (typeof value === "number") return `${value}${CALC_UNIT}`;
+	return value;
+}
+var CSSCalculator = class CSSCalculator extends calculator_default {
+	result = "";
+	unitlessCssVar;
+	lowPriority;
+	constructor(num, unitlessCssVar) {
+		super();
+		const numType = typeof num;
+		this.unitlessCssVar = unitlessCssVar;
+		if (num instanceof CSSCalculator) this.result = `(${num.result})`;
+		else if (numType === "number") this.result = unit(num);
+		else if (numType === "string") this.result = num;
+	}
+	add(num) {
+		if (num instanceof CSSCalculator) this.result = `${this.result} + ${num.getResult()}`;
+		else if (typeof num === "number" || typeof num === "string") this.result = `${this.result} + ${unit(num)}`;
+		this.lowPriority = true;
+		return this;
+	}
+	sub(num) {
+		if (num instanceof CSSCalculator) this.result = `${this.result} - ${num.getResult()}`;
+		else if (typeof num === "number" || typeof num === "string") this.result = `${this.result} - ${unit(num)}`;
+		this.lowPriority = true;
+		return this;
+	}
+	mul(num) {
+		if (this.lowPriority) this.result = `(${this.result})`;
+		if (num instanceof CSSCalculator) this.result = `${this.result} * ${num.getResult(true)}`;
+		else if (typeof num === "number" || typeof num === "string") this.result = `${this.result} * ${num}`;
+		this.lowPriority = false;
+		return this;
+	}
+	div(num) {
+		if (this.lowPriority) this.result = `(${this.result})`;
+		if (num instanceof CSSCalculator) this.result = `${this.result} / ${num.getResult(true)}`;
+		else if (typeof num === "number" || typeof num === "string") this.result = `${this.result} / ${num}`;
+		this.lowPriority = false;
+		return this;
+	}
+	getResult(force) {
+		return this.lowPriority || force ? `(${this.result})` : this.result;
+	}
+	equal(options) {
+		const { unit: cssUnit } = options || {};
+		let mergedUnit = true;
+		if (typeof cssUnit === "boolean") mergedUnit = cssUnit;
+		else if (Array.from(this.unitlessCssVar).some((cssVar) => this.result.includes(cssVar))) mergedUnit = false;
+		this.result = this.result.replace(regexp, mergedUnit ? "px" : "");
+		if (typeof this.lowPriority !== "undefined") return `calc(${this.result})`;
+		return this.result;
+	}
+};
+
+//#endregion
+export { CSSCalculator as default };

package/dist/theme/calc/NumCalculator.d.ts

@@ -0,0 +1,14 @@
+import { AbstractCalculator } from "./calculator.js";
+
+//#region src/theme/calc/NumCalculator.d.ts
+declare class NumCalculator extends AbstractCalculator {
+  result: number;
+  constructor(num: number | string | AbstractCalculator);
+  add(num: number | string | AbstractCalculator): this;
+  sub(num: number | string | AbstractCalculator): this;
+  mul(num: number | string | AbstractCalculator): this;
+  div(num: number | string | AbstractCalculator): this;
+  equal(): number;
+}
+//#endregion
+export { NumCalculator };

package/dist/theme/calc/NumCalculator.js

@@ -0,0 +1,37 @@
+import calculator_default from "./calculator.js";
+
+//#region src/theme/calc/NumCalculator.ts
+var NumCalculator = class NumCalculator extends calculator_default {
+	result = 0;
+	constructor(num) {
+		super();
+		if (num instanceof NumCalculator) this.result = num.result;
+		else if (typeof num === "number") this.result = num;
+	}
+	add(num) {
+		if (num instanceof NumCalculator) this.result += num.result;
+		else if (typeof num === "number") this.result += num;
+		return this;
+	}
+	sub(num) {
+		if (num instanceof NumCalculator) this.result -= num.result;
+		else if (typeof num === "number") this.result -= num;
+		return this;
+	}
+	mul(num) {
+		if (num instanceof NumCalculator) this.result *= num.result;
+		else if (typeof num === "number") this.result *= num;
+		return this;
+	}
+	div(num) {
+		if (num instanceof NumCalculator) this.result /= num.result;
+		else if (typeof num === "number") this.result /= num;
+		return this;
+	}
+	equal() {
+		return this.result;
+	}
+};
+
+//#endregion
+export { NumCalculator as default };

package/dist/theme/calc/calculator.d.ts

@@ -0,0 +1,32 @@
+//#region src/theme/calc/calculator.d.ts
+declare abstract class AbstractCalculator {
+  /**
+   * @descCN 计算两数的和，例如：1 + 2
+   * @descEN Calculate the sum of two numbers, e.g. 1 + 2
+   */
+  abstract add(num: number | string | AbstractCalculator): this;
+  /**
+   * @descCN 计算两数的差，例如：1 - 2
+   * @descEN Calculate the difference between two numbers, e.g. 1 - 2
+   */
+  abstract sub(num: number | string | AbstractCalculator): this;
+  /**
+   * @descCN 计算两数的积，例如：1 * 2
+   * @descEN Calculate the product of two numbers, e.g. 1 * 2
+   */
+  abstract mul(num: number | string | AbstractCalculator): this;
+  /**
+   * @descCN 计算两数的商，例如：1 / 2
+   * @descEN Calculate the quotient of two numbers, e.g. 1 / 2
+   */
+  abstract div(num: number | string | AbstractCalculator): this;
+  /**
+   * @descCN 获取计算结果
+   * @descEN Get the calculation result
+   */
+  abstract equal(options?: {
+    unit?: boolean;
+  }): string | number;
+}
+//#endregion
+export { AbstractCalculator };

package/dist/theme/calc/calculator.js

@@ -0,0 +1,6 @@
+//#region src/theme/calc/calculator.ts
+var AbstractCalculator = class {};
+var calculator_default = AbstractCalculator;
+
+//#endregion
+export { calculator_default as default };

package/dist/theme/calc/index.d.ts

@@ -0,0 +1,8 @@
+import { AbstractCalculator } from "./calculator.js";
+import { CSSCalculator } from "./CSSCalculator.js";
+import { NumCalculator } from "./NumCalculator.js";
+
+//#region src/theme/calc/index.d.ts
+declare function genCalc(type: 'css' | 'js', unitlessCssVar: Set<string>): (num: number | string | AbstractCalculator) => CSSCalculator | NumCalculator;
+//#endregion
+export { genCalc };

package/dist/theme/calc/index.js

@@ -0,0 +1,12 @@
+import CSSCalculator from "./CSSCalculator.js";
+import NumCalculator from "./NumCalculator.js";
+
+//#region src/theme/calc/index.ts
+function genCalc(type, unitlessCssVar) {
+	const Calculator = type === "css" ? CSSCalculator : NumCalculator;
+	return (num) => new Calculator(num, unitlessCssVar);
+}
+var calc_default = genCalc;
+
+//#endregion
+export { calc_default as default };

package/dist/theme/createTheme.d.ts

@@ -0,0 +1,11 @@
+import { DerivativeFunc, TokenType } from "./interface.js";
+import { Theme } from "./Theme.js";
+
+//#region src/theme/createTheme.d.ts
+
+/**
+ * Same as new Theme, but will always return same one if `derivative` not changed.
+ */
+declare function createTheme<DesignToken extends TokenType, DerivativeToken extends TokenType>(derivatives: DerivativeFunc<DesignToken, DerivativeToken>[] | DerivativeFunc<DesignToken, DerivativeToken>): Theme<any, any>;
+//#endregion
+export { createTheme };

package/dist/theme/createTheme.js

@@ -0,0 +1,16 @@
+import Theme from "./Theme.js";
+import ThemeCache from "./ThemeCache.js";
+
+//#region src/theme/createTheme.ts
+const cacheThemes = new ThemeCache();
+/**
+* Same as new Theme, but will always return same one if `derivative` not changed.
+*/
+function createTheme(derivatives) {
+	const derivativeArr = Array.isArray(derivatives) ? derivatives : [derivatives];
+	if (!cacheThemes.has(derivativeArr)) cacheThemes.set(derivativeArr, new Theme(derivativeArr));
+	return cacheThemes.get(derivativeArr);
+}
+
+//#endregion
+export { createTheme as default };

package/dist/theme/index.js

@@ -0,0 +1,6 @@
+import calc_default from "./calc/index.js";
+import Theme from "./Theme.js";
+import ThemeCache from "./ThemeCache.js";
+import createTheme from "./createTheme.js";
+
+export {  };

package/dist/theme/interface.d.ts

@@ -0,0 +1,5 @@
+//#region src/theme/interface.d.ts
+type TokenType = object;
+type DerivativeFunc<DesignToken extends TokenType, DerivativeToken extends TokenType> = (designToken: DesignToken, derivativeToken?: DerivativeToken) => DerivativeToken;
+//#endregion
+export { DerivativeFunc, TokenType };

package/dist/transformers/autoPrefix.d.ts

@@ -0,0 +1,6 @@
+import { Transformer } from "./interface.js";
+
+//#region src/transformers/autoPrefix.d.ts
+declare const transform: Transformer;
+//#endregion
+export { transform };

package/dist/transformers/autoPrefix.js

@@ -0,0 +1,7 @@
+//#region src/transformers/autoPrefix.ts
+const AUTO_PREFIX = {};
+const transform = AUTO_PREFIX;
+var autoPrefix_default = transform;
+
+//#endregion
+export { autoPrefix_default as default };

package/dist/transformers/interface.d.ts

@@ -0,0 +1,9 @@
+import { CSSObject } from "../hooks/useStyleRegister.js";
+import "../index.js";
+
+//#region src/transformers/interface.d.ts
+interface Transformer {
+  visit?: (cssObj: CSSObject) => CSSObject;
+}
+//#endregion
+export { Transformer };

package/{es → dist}/transformers/legacyLogicalProperties.d.ts

@@ -1,4 +1,7 @@
-import { Transformer } from './interface';
+import { Transformer } from "./interface.js";
+
+//#region src/transformers/legacyLogicalProperties.d.ts
+
 /**
  * Convert css logical properties to legacy properties.
  * Such as: `margin-block-start` to `margin-top`.
@@ -9,4 +12,5 @@ import { Transformer } from './interface';
  * - border
  */
 declare const transform: Transformer;
-export default transform;
+//#endregion
+export { transform };