postcss-design-tokens : prevent stack overflow (csstools#584)

Author: romainmenke

.github/ISSUE_TEMPLATE/css-issue.yml

@@ -72,6 +72,7 @@ body:
         - PostCSS Custom Media Queries
         - PostCSS Custom Properties
         - PostCSS Custom Selectors
+        - PostCSS Design Tokens
         - PostCSS Dir Pseudo Class
         - PostCSS Double Position Gradients
         - PostCSS Env Function

.github/ISSUE_TEMPLATE/plugin-issue.yml

@@ -74,6 +74,7 @@ body:
         - PostCSS Custom Media Queries
         - PostCSS Custom Properties
         - PostCSS Custom Selectors
+        - PostCSS Design Tokens
         - PostCSS Dir Pseudo Class
         - PostCSS Double Position Gradients
         - PostCSS Env Function

.github/labeler.yml

@@ -68,6 +68,10 @@
   - plugins/postcss-custom-selectors/**
   - experimental/postcss-custom-selectors/**
 
+"plugins/postcss-design-tokens":
+  - plugins/postcss-design-tokens/**
+  - experimental/postcss-design-tokens/**
+
 "plugins/postcss-dir-pseudo-class":
   - plugins/postcss-dir-pseudo-class/**
   - experimental/postcss-dir-pseudo-class/**

plugins/postcss-design-tokens/.tape.mjs

@@ -113,4 +113,8 @@ postcssTape(plugin)({
 			importAtRuleName: 'tokens'
 		}
 	},
+	'issue-583': {
+		message: 'A meaningful error message is given and no stack overflow.',
+		warnings: 1
+	},
 });

plugins/postcss-design-tokens/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Design Tokens
 
+### 1.1.1 (Unreleased)
+
+- Prevent stack overflow failures when importing files with format `style-dictionary3` that are not of that format.
+
 ### 1.1.0 (Aug 2, 2022)
 
 - Added `valueFunctionName` option to control the `design-token` function name.

plugins/postcss-design-tokens/src/data-formats/style-dictionary/v3/group.ts

@@ -7,12 +7,20 @@ export type StyleDictionaryV3TokenGroup = {
 }
 
 function extractTokens(node: StyleDictionaryV3TokenGroup, path: Array<string>, filePath: string): Map<string, StyleDictionaryV3TokenValue> {
-	const result: Map<string,StyleDictionaryV3TokenValue> = new Map();
+	const result: Map<string, StyleDictionaryV3TokenValue> = new Map();
 	for (const key in node) {
 		if (Object.hasOwnProperty.call(node, key)) {
+			if (
+				typeof node[key] !== 'object' ||
+				Array.isArray(node[key]) &&
+				node[key] === null
+			) {
+				throw new Error(`Parsing error at "${[...path, key].join('.')}"`);
+			}
+
 			const child = Object(node[key]);
 			if (!child) {
-				throw new Error('Parsing error');
+				throw new Error(`Parsing error at "${[...path, key].join('.')}"`);
 			}
 
 			if (typeof child['value'] !== 'undefined') {

plugins/postcss-design-tokens/test/issue-583.css

@@ -0,0 +1 @@
+@design-tokens url('./tokens/issue-583.json') format('style-dictionary3');

plugins/postcss-design-tokens/test/issue-583.expect.css

@@ -0,0 +1 @@
+

plugins/postcss-design-tokens/test/tokens/issue-583.json

@@ -0,0 +1,10 @@
+{
+	"color": {
+		"internal": {
+			"neutrals": {
+				"darkest": "#1E1E1E",
+				"lightest": "#FFFFFF"
+			}
+		}
+	}
+}