@terrazzo/plugin-css 2.0.0-alpha.1 → 2.0.0-alpha.3

package/CHANGELOG.md

@@ -10,12 +10,16 @@
 
 - [#530](https://github.com/terrazzoapp/terrazzo/pull/530) [`370ed7b`](https://github.com/terrazzoapp/terrazzo/commit/370ed7b0f578a64824124145d7f4936536b37bb3) Thanks [@drwpow](https://github.com/drwpow)! - ⚠️ [Plugin API] Minor breaking change: token.originalValue may be undefined for tokens created with $ref. This shouldn’t affect any tokens or plugins not using $refs. But going forward this value will be missing if the token was created dynamically via $ref.
 
+- [#589](https://github.com/terrazzoapp/terrazzo/pull/589) [`8f32d44`](https://github.com/terrazzoapp/terrazzo/commit/8f32d44792bba62194e674c9b60cfdeb366c96c7) Thanks [@michaelurban](https://github.com/michaelurban)! - feat: add typography shorthand, improve Sass plugin
+
 ### Patch Changes
 
 - [#530](https://github.com/terrazzoapp/terrazzo/pull/530) [`370ed7b`](https://github.com/terrazzoapp/terrazzo/commit/370ed7b0f578a64824124145d7f4936536b37bb3) Thanks [@drwpow](https://github.com/drwpow)! - Validation moved to lint rules, which means token validation can be individually configured, and optionally extended.
 
 - [#553](https://github.com/terrazzoapp/terrazzo/pull/553) [`e63a627`](https://github.com/terrazzoapp/terrazzo/commit/e63a6277f61282fb608744a8348689b16f977076) Thanks [@Sidnioulz](https://github.com/Sidnioulz)! - Add support for the Token Listing format
 
+- [#568](https://github.com/terrazzoapp/terrazzo/pull/568) [`67c75be`](https://github.com/terrazzoapp/terrazzo/commit/67c75be78978cece52b61cf258ccc3a875e6af48) Thanks [@drwpow](https://github.com/drwpow)! - Fix border tokens not cascading correctly across modes
+
 ## 0.10.4
 
 ### Patch Changes

package/README.md

@@ -4,13 +4,13 @@ Convert DTCG tokens into CSS variables for use in any web application or native
 
 ## Setup
 
-Requires [Node.js 20 or later](https://nodejs.org) and [the CLI installed](https://terrazzo.app/docs/cli). With both installed, run:
+Requires [Node.js 20 or later](https://nodejs.org) and [the CLI installed](https://terrazzo.app/docs). With both installed, run:
 
 ```sh
 npm i -D @terrazzo/plugin-css
 ```
 
-Add a `terrazzo.config.js` to the root of your project:
+Add a `terrazzo.config.ts` to the root of your project:
 
 ```ts
 import { defineConfig } from "@terrazzo/cli";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/lib.ts","../src/build/index.ts","../src/index.ts"],"sourcesContent":[],"mappings":";;;KAEY,eAAA;KAEA,gBAAA;AAFA,cAIC,SAAA,GAJc,KAAA;AAEf,cAIC,WAAA,GAJe,uJAAA;AAEf,UAMI,gBAAA,CANK;EAET;AAIb;;;UAWyB,CAAA,EAAA,MAAA;;SAE+B,CAAA,EAAA,MAAA,EAAA;;eAE5C,CAAA,EANM,YAMN,EAAA;EAAM;EAsBD,YAAA,CAAA,EAAY,CAAA,KAAA,EA1BJ,eA0BI,EAAA,GAAA,MAAA;EAcZ;EAIA,SAAA,CAAO,EAAA,CAAA,KAAA,EA1CF,eA0CE,EAAA,IAAA,EAAA,MAAA,EAAA,GA1CgC,gBA0ChC,CAAA,OAAA,CAAA;EAAA;SAGO,CAAA,EA3CnB,MA2CmB,CA3CZ,eA2CY,EAAA,MAAA,EAAA,CAAA;;;AAI/B;AAoEA;;;;ACrIA;;WACW,CAAA,EAAA,OAAA;;;;;EAKmB,YAAA,CAAA,EAAA,MAAA;;;;ECNN,UAAA,CAAA,EAAS,MAAA;;AAAW,UFwC3B,YAAA,CExC2B;;EAAyB,IAAA,EAAA,MAAA;;;;;;;;UFsDpD,kBAAA;;;;UAIA,OAAA;;;gBAGD,eAAe;;;iBAIf,UAAA,QAAkB;UAoEjB,cAAA;;;;;;UCrIA,kBAAA;EDPL,OAAA,ECQD,gBDRgB,CAAA,SAAA,CAAA;EAEf,aAAA,ECOK,gBDPW,CAAA,eAAA,CAAA;EAEf,aAAS,ECML,gBDNK,CAAA,eAAA,CAAA;EAET,OAAA,ECKF,gBDLa,CAAA,SAAA,CAAA;EAIP,YAAA,EAAA,MAAgB;EAAA,UAAA,ECGnB,gBDHmB,CAAA,YAAA,CAAA;;;;AARrB,iBEKY,SAAA,CFLI,OAAA,CAAA,EEKgB,gBFLhB,CAAA,EEKmC,MFLnC"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/lib.ts","../src/build/index.ts","../src/index.ts"],"sourcesContent":[],"mappings":";;;KAEY,eAAA;KAEA,gBAAA;AAFA,cAIC,SAAA,GAJc,KAAA;AAEf,cAIC,WAAA,GAJe,uJAAA;AAEf,UAMI,gBAAA,CANK;EAET;AAIb;;;EAasB,QAAA,CAAA,EAAA,MAAA;EAAkC;EAErC,OAAA,CAAA,EAAA,MAAA,EAAA;EAAP;EAAM,aAAA,CAAA,EANA,YAMA,EAAA;EAsBD;EAcA,YAAA,CAAA,EAAA,CAAA,KAAkB,EAxCV,eAwCU,EAAA,GAAA,MAAA;EAIlB;EAOD,SAAA,CAAA,EAAA,CAAU,KAAA,EAjDJ,eAiDmB,EAAA,IAAA,EAAA,MAAA,EAAA,GAjDe,gBAiDf,CAAA,OAAA,CAAA;EAkExB;YAjHL,OAAO;;;AClBnB;;EAEiB,SAAA,CAAA,EAAA,OAAA;EACA;;;;;;;ACLQ;;;;;;;;UF0CR,YAAA;;;;;;;;;;UAcA,kBAAA;;;;UAIA,OAAA;;;gBAGD,eAAe;;;iBAIf,UAAA,QAAkB;UAkEjB,cAAA;;;;;;UCnIA,kBAAA;EDPL,OAAA,ECQD,gBDRgB,CAAA,SAAA,CAAA;EAEf,aAAA,ECOK,gBDPW,CAAA,eAAA,CAAA;EAEf,aAAS,ECML,gBDNK,CAAA,eAAA,CAAA;EAET,OAAA,ECKF,gBDLa,CAAA,SAAA,CAAA;EAIP,YAAA,EAAA,MAAgB;EASf,UAAA,ECNJ,gBDMI,CAAA,YAAA,CAAA;;;;AAjBN,iBEKY,SAAA,CFLI,OAAA,CAAA,EEKgB,gBFLhB,CAAA,EEKmC,MFLnC"}

package/dist/index.js

@@ -2431,14 +2431,11 @@ const convertXyz65ToItp = ({ x, y, z, alpha }) => {
 	const l = transferPqEncode(.3592832590121217 * absX + .6976051147779502 * absY - .0358915932320289 * absZ);
 	const m = transferPqEncode(-.1920808463704995 * absX + 1.1004767970374323 * absY + .0753748658519118 * absZ);
 	const s = transferPqEncode(.0070797844607477 * absX + .0748396662186366 * absY + .8433265453898765 * absZ);
-	const i = .5 * l + .5 * m;
-	const t = 1.61376953125 * l - 3.323486328125 * m + 1.709716796875 * s;
-	const p$2 = 4.378173828125 * l - 4.24560546875 * m - .132568359375 * s;
 	const res = {
 		mode: "itp",
-		i,
-		t,
-		p: p$2
+		i: .5 * l + .5 * m,
+		t: 1.61376953125 * l - 3.323486328125 * m + 1.709716796875 * s,
+		p: 4.378173828125 * l - 4.24560546875 * m - .132568359375 * s
 	};
 	if (alpha !== void 0) res.alpha = alpha;
 	return res;
@@ -2748,13 +2745,11 @@ const convertLuvToXyz50 = ({ l, u, v, alpha }) => {
 	let up = u / (13 * l) + un;
 	let vp = v / (13 * l) + vn;
 	let y = D50.Y * (l <= 8 ? l / k : Math.pow((l + 16) / 116, 3));
-	let x = y * (9 * up) / (4 * vp);
-	let z = y * (12 - 3 * up - 20 * vp) / (4 * vp);
 	let res = {
 		mode: "xyz50",
-		x,
+		x: y * (9 * up) / (4 * vp),
 		y,
-		z
+		z: y * (12 - 3 * up - 20 * vp) / (4 * vp)
 	};
 	if (alpha !== void 0) res.alpha = alpha;
 	return res;
@@ -2918,8 +2913,7 @@ function find_cusp(a, b) {
 		b: S_cusp * b
 	});
 	let L_cusp = Math.cbrt(1 / Math.max(rgb$4.r, rgb$4.g, rgb$4.b));
-	let C_cusp = L_cusp * S_cusp;
-	return [L_cusp, C_cusp];
+	return [L_cusp, L_cusp * S_cusp];
 }
 function find_gamut_intersection(a, b, L1, C1$1, L0, cusp = null) {
 	if (!cusp) cusp = find_cusp(a, b);
@@ -3456,7 +3450,7 @@ function toGamut(dest = "rgb", mode = "oklch", delta = differenceEuclidean("oklc
 }
 
 //#endregion
-//#region ../token-tools/dist/string-D3-qmBT2.js
+//#region ../token-tools/dist/string-BIhoe-L2.js
 const HEX_RE = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i;
 const CULORI_TO_CSS = {
 	a98: "a98-rgb",
@@ -3943,13 +3937,30 @@ function defaultAliasTransform(token) {
 	return `var(${makeCSSVar(token.id)})`;
 }
 /** Generate shorthand CSS for select token types */
-function generateShorthand({ $type, localID }) {
-	switch ($type) {
+function generateShorthand({ token, localID }) {
+	switch (token.$type) {
 		case "transition": return [
 			"duration",
 			"delay",
 			"timing-function"
 		].map((p$2) => makeCSSVar(`${localID}-${p$2}`, { wrapVar: true })).join(" ");
+		case "typography": {
+			const typeVar = (name) => makeCSSVar(`${localID}-${name}`, { wrapVar: true });
+			if ("font-size" in token.$value && "font-family" in token.$value) {
+				let output = "";
+				for (const prop of [
+					"font-style",
+					"font-variant",
+					"font-weight"
+				]) if (prop in token.$value) output += ` ${typeVar(prop)}`;
+				let fontSizeVar = typeVar("font-size");
+				if ("line-height" in token.$value) fontSizeVar += `/${typeVar("line-height")}`;
+				output += ` ${fontSizeVar}`;
+				output += ` ${typeVar("font-family")}`;
+				return output.trim();
+			}
+			break;
+		}
 	}
 }
 const CSS_VAR_RE = /(?:(\p{Uppercase_Letter}?[\p{Lowercase_Letter}\p{Number}]+|[\p{Uppercase_Letter}\p{Number}]+|[\u{80}-\u{10FFFF}\p{Number}]+)|.)/u;
@@ -4186,10 +4197,7 @@ function transformString(token, options) {
 function transformTransition(token, options) {
 	const { tokensSet, transformAlias = defaultAliasTransform } = options;
 	if (token.aliasChain?.[0]) return transformAlias(tokensSet[token.aliasChain[0]]);
-	const duration = token.partialAliasOf?.duration ? transformAlias(tokensSet[token.partialAliasOf.duration]) : transformDuration({ $value: token.$value.duration }, options);
-	const delay = token.partialAliasOf?.delay ? transformAlias(tokensSet[token.partialAliasOf.delay]) : transformDuration({ $value: token.$value.delay }, options);
-	const timingFunction = token.partialAliasOf?.timingFunction ? transformAlias(tokensSet[token.partialAliasOf.timingFunction]) : transformCubicBezier({ $value: token.$value.timingFunction }, options);
-	return `${duration} ${delay} ${timingFunction}`;
+	return `${token.partialAliasOf?.duration ? transformAlias(tokensSet[token.partialAliasOf.duration]) : transformDuration({ $value: token.$value.duration }, options)} ${token.partialAliasOf?.delay ? transformAlias(tokensSet[token.partialAliasOf.delay]) : transformDuration({ $value: token.$value.delay }, options)} ${token.partialAliasOf?.timingFunction ? transformAlias(tokensSet[token.partialAliasOf.timingFunction]) : transformCubicBezier({ $value: token.$value.timingFunction }, options)}`;
 }
 /** Convert typography value to multiple CSS values */
 function transformTypography(token, options) {
@@ -4225,7 +4233,7 @@ function transformTypography(token, options) {
 	return output;
 }
 /** Main CSS Transform */
-function transformCSSValue(token, { mode,...options }) {
+function transformCSSValue(token, { mode, ...options }) {
 	const selectedMode = token.mode[mode];
 	if (!selectedMode) return;
 	const tokenWithModeValue = {
@@ -4296,9 +4304,7 @@ function _printRule(rule) {
 		output.push(`${indent}:root {`);
 		indent += "  ";
 	}
-	const declarations = Object.entries(rule.declarations);
-	declarations.sort((a, b) => a[0].localeCompare(b[0], "en-us", { numeric: true }));
-	for (const [k$3, d] of declarations) output.push(`${indent}${k$3}: ${d.value};${d.description ? ` /* ${d.description} */` : ""}`);
+	for (const [k$3, d] of Object.entries(rule.declarations)) output.push(`${indent}${k$3}: ${d.value};${d.description ? ` /* ${d.description} */` : ""}`);
 	while (indent !== "") {
 		indent = indent.substring(0, indent.length - 2);
 		output.push(`${indent}}`);
@@ -4569,18 +4575,21 @@ function buildFormat({ getTransforms, exclude, utility, modeSelectors, baseSelec
 					}
 				}
 			} else if (token.type === "MULTI_VALUE") {
+				for (const [name, value] of Object.entries(token.value)) rootRule.declarations[name === "." ? localID : [localID, name].join("-")] = {
+					value,
+					description: token.token.$description
+				};
 				const shorthand = generateShorthand({
-					$type: token.token.$type,
+					token: {
+						...token.token,
+						$value: token.value
+					},
 					localID
 				});
 				if (shorthand) rootRule.declarations[token.localID ?? token.token.id] = {
 					value: shorthand,
 					description: token.token.$description
 				};
-				for (const [name, value] of Object.entries(token.value)) rootRule.declarations[name === "." ? localID : [localID, name].join("-")] = {
-					value,
-					description: token.token.$description
-				};
 			}
 		}
 	}
@@ -4645,18 +4654,21 @@ function buildFormat({ getTransforms, exclude, utility, modeSelectors, baseSelec
 					}
 				}
 			} else {
+				for (const [name, subvalue] of Object.entries(token.value)) selectorRule.declarations[`${localID}-${name}`] = {
+					value: subvalue,
+					description: token.token.$description
+				};
 				const shorthand = generateShorthand({
-					$type: token.token.$type,
+					token: {
+						...token.token,
+						$value: token.value
+					},
 					localID
 				});
 				if (shorthand) selectorRule.declarations[localID] = {
 					value: shorthand,
 					description: token.token.$description
 				};
-				for (const [name, subvalue] of Object.entries(token.value)) selectorRule.declarations[`${localID}-${name}`] = {
-					value: subvalue,
-					description: token.token.$description
-				};
 			}
 			for (const alias of aliasTokens) if (alias.localID && typeof alias.value === "string") selectorAliasDeclarations[alias.localID] = {
 				value: alias.value,
@@ -4724,7 +4736,7 @@ function cssPlugin(options) {
 					if (transformedValue !== void 0) {
 						let listingName = localID;
 						if (typeof transformedValue === "object" && generateShorthand({
-							$type: token.$type,
+							token,
 							localID
 						}) === void 0) listingName = void 0;
 						setTransform(id, {