design tokens : fix documentation and unit conversion (#799)

romainmenke · web-flow · commit a4bf0ee540e3 · 2023-01-24T18:35:51.000+01:00
diff --git a/plugins/postcss-design-tokens/CHANGELOG.md b/plugins/postcss-design-tokens/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changes to PostCSS Design Tokens
 
+### Unreleased 
+
+- Fix unit conversion
+
 ### 2.0.0 (January 24, 2023)
 
 - Updated: Support for Node v14+ (major).
diff --git a/plugins/postcss-design-tokens/README.md b/plugins/postcss-design-tokens/README.md
@@ -14,7 +14,8 @@
 	"size": {
 		"spacing": {
 			"small": { "value": "16px" },
-			"medium": { "value": "18px" }
+			"medium": { "value": "18px" },
+			"medium-alias": { "value": "{size.spacing.medium}" }
 		}
 	},
 	"viewport": {
@@ -35,7 +36,7 @@
 
 @media (min-width: design-token('viewport.medium')) {
 	.foo {
-			padding-bottom: design-token('size.spacing.medium' to rem);
+		padding-bottom: design-token('size.spacing.medium-alias' to rem);
 	}
 }
 
@@ -50,7 +51,7 @@
 
 @media (min-width: 35rem) {
 	.foo {
-			padding-bottom: 1.1rem;
+		padding-bottom: 1.125rem;
 	}
 }
 ```
@@ -212,7 +213,7 @@ postcssDesignTokens({
 
 @media (min-width: design-token('viewport.medium')) {
 	.foo {
-			padding-bottom: design-token('size.spacing.medium' to rem);
+		padding-bottom: design-token('size.spacing.medium-alias' to rem);
 	}
 }
 
@@ -227,7 +228,7 @@ postcssDesignTokens({
 
 @media (min-width: 35rem) {
 	.foo {
-			padding-bottom: 0.9rem;
+		padding-bottom: 0.9rem;
 	}
 }
 ```
diff --git a/plugins/postcss-design-tokens/dist/index.cjs b/plugins/postcss-design-tokens/dist/index.cjs
diff --git a/plugins/postcss-design-tokens/dist/index.mjs b/plugins/postcss-design-tokens/dist/index.mjs
diff --git a/plugins/postcss-design-tokens/src/data-formats/style-dictionary/v3/value.ts b/plugins/postcss-design-tokens/src/data-formats/style-dictionary/v3/value.ts
@@ -131,15 +131,17 @@ function formatFloat(value: number): string {
 	}
 
 	let fixedPrecision = value.toFixed(5);
-	for (let i = fixedPrecision.length; i > 0; i--) {
+	for (let i = fixedPrecision.length - 1; i >= 0; i--) {
 		if (fixedPrecision[i] === '.') {
 			break;
 		}
 
-		if (fixedPrecision[i] !== '0') {
-			fixedPrecision = fixedPrecision.slice(0, i + 1);
+		if (fixedPrecision[i] === '0') {
+			fixedPrecision = fixedPrecision.slice(0, i);
 			continue;
 		}
+
+		break;
 	}
 
 	return fixedPrecision;
diff --git a/plugins/postcss-design-tokens/test/examples/example.css b/plugins/postcss-design-tokens/test/examples/example.css
@@ -9,6 +9,6 @@
 
 @media (min-width: design-token('viewport.medium')) {
 	.foo {
-			padding-bottom: design-token('size.spacing.medium' to rem);
+		padding-bottom: design-token('size.spacing.medium-alias' to rem);
 	}
 }
diff --git a/plugins/postcss-design-tokens/test/examples/example.expect.css b/plugins/postcss-design-tokens/test/examples/example.expect.css
@@ -7,6 +7,6 @@
 
 @media (min-width: 35rem) {
 	.foo {
-			padding-bottom: 1.1rem;
+		padding-bottom: 1.125rem;
 	}
 }
diff --git a/plugins/postcss-design-tokens/test/examples/example.rootFontSize-20.expect.css b/plugins/postcss-design-tokens/test/examples/example.rootFontSize-20.expect.css
@@ -7,6 +7,6 @@
 
 @media (min-width: 35rem) {
 	.foo {
-			padding-bottom: 0.9rem;
+		padding-bottom: 0.9rem;
 	}
 }
diff --git a/plugins/postcss-design-tokens/test/examples/tokens.json b/plugins/postcss-design-tokens/test/examples/tokens.json
@@ -7,7 +7,8 @@
 	"size": {
 		"spacing": {
 			"small": { "value": "16px" },
-			"medium": { "value": "18px" }
+			"medium": { "value": "18px" },
+			"medium-alias": { "value": "{size.spacing.medium}" }
 		}
 	},
 	"viewport": {
diff --git a/plugins/postcss-design-tokens/test/units.expect.css b/plugins/postcss-design-tokens/test/units.expect.css
@@ -8,7 +8,7 @@
 
 .px-to-rem {
 	padding-bottom: 0.5rem;
-	padding-bottom: 1.1rem;
+	padding-bottom: 1.125rem;
 	padding-bottom: 2rem;
 }
 
diff --git a/plugins/postcss-design-tokens/test/units.rootFontSize-NaN.expect.css b/plugins/postcss-design-tokens/test/units.rootFontSize-NaN.expect.css
@@ -8,7 +8,7 @@
 
 .px-to-rem {
 	padding-bottom: 0.5rem;
-	padding-bottom: 1.1rem;
+	padding-bottom: 1.125rem;
 	padding-bottom: 2rem;
 }
 
diff --git a/plugins/postcss-design-tokens/test/units.rootFontSize-invalid.expect.css b/plugins/postcss-design-tokens/test/units.rootFontSize-invalid.expect.css
@@ -8,7 +8,7 @@
 
 .px-to-rem {
 	padding-bottom: 0.5rem;
-	padding-bottom: 1.1rem;
+	padding-bottom: 1.125rem;
 	padding-bottom: 2rem;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,8 @@`
`14`	`14`	`"size": {`
`15`	`15`	`"spacing": {`
`16`	`16`	`"small": { "value": "16px" },`
`17`		`- "medium": { "value": "18px" }`
	`17`	`+ "medium": { "value": "18px" },`
	`18`	`+ "medium-alias": { "value": "{size.spacing.medium}" }`
`18`	`19`	`}`
`19`	`20`	`},`
`20`	`21`	`"viewport": {`
`@@ -35,7 +36,7 @@`
`35`	`36`
`36`	`37`	`@media (min-width: design-token('viewport.medium')) {`
`37`	`38`	`.foo {`
`38`		`- padding-bottom: design-token('size.spacing.medium' to rem);`
	`39`	`+ padding-bottom: design-token('size.spacing.medium-alias' to rem);`
`39`	`40`	`}`
`40`	`41`	`}`
`41`	`42`
`@@ -50,7 +51,7 @@`
`50`	`51`
`51`	`52`	`@media (min-width: 35rem) {`
`52`	`53`	`.foo {`
`53`		`- padding-bottom: 1.1rem;`
	`54`	`+ padding-bottom: 1.125rem;`
`54`	`55`	`}`
`55`	`56`	`}`
`56`	`57`	```
`@@ -212,7 +213,7 @@ postcssDesignTokens({`
`212`	`213`
`213`	`214`	`@media (min-width: design-token('viewport.medium')) {`
`214`	`215`	`.foo {`
`215`		`- padding-bottom: design-token('size.spacing.medium' to rem);`
	`216`	`+ padding-bottom: design-token('size.spacing.medium-alias' to rem);`
`216`	`217`	`}`
`217`	`218`	`}`
`218`	`219`
`@@ -227,7 +228,7 @@ postcssDesignTokens({`
`227`	`228`
`228`	`229`	`@media (min-width: 35rem) {`
`229`	`230`	`.foo {`
`230`		`- padding-bottom: 0.9rem;`
	`231`	`+ padding-bottom: 0.9rem;`
`231`	`232`	`}`
`232`	`233`	`}`
`233`	`234`	```
Original file line number	Diff line number	Diff line change
`@@ -131,15 +131,17 @@ function formatFloat(value: number): string {`
`131`	`131`	`}`
`132`	`132`
`133`	`133`	`let fixedPrecision = value.toFixed(5);`
`134`		`- for (let i = fixedPrecision.length; i > 0; i--) {`
	`134`	`+ for (let i = fixedPrecision.length - 1; i >= 0; i--) {`
`135`	`135`	`if (fixedPrecision[i] === '.') {`
`136`	`136`	`break;`
`137`	`137`	`}`
`138`	`138`
`139`		`- if (fixedPrecision[i] !== '0') {`
`140`		`- fixedPrecision = fixedPrecision.slice(0, i + 1);`
	`139`	`+ if (fixedPrecision[i] === '0') {`
	`140`	`+ fixedPrecision = fixedPrecision.slice(0, i);`
`141`	`141`	`continue;`
`142`	`142`	`}`
	`143`	`+`
	`144`	`+ break;`
`143`	`145`	`}`
`144`	`146`
`145`	`147`	`return fixedPrecision;`
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,6 @@`
`9`	`9`
`10`	`10`	`@media (min-width: design-token('viewport.medium')) {`
`11`	`11`	`.foo {`
`12`		`- padding-bottom: design-token('size.spacing.medium' to rem);`
	`12`	`+ padding-bottom: design-token('size.spacing.medium-alias' to rem);`
`13`	`13`	`}`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,6 @@`
`7`	`7`
`8`	`8`	`@media (min-width: 35rem) {`
`9`	`9`	`.foo {`
`10`		`- padding-bottom: 1.1rem;`
	`10`	`+ padding-bottom: 1.125rem;`
`11`	`11`	`}`
`12`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`
`9`	`9`	`.px-to-rem {`
`10`	`10`	`padding-bottom: 0.5rem;`
`11`		`- padding-bottom: 1.1rem;`
	`11`	`+ padding-bottom: 1.125rem;`
`12`	`12`	`padding-bottom: 2rem;`
`13`	`13`	`}`
`14`	`14`