design-tokens : implement require.resolve (#591)

* design-tokens : resolve node_modules

* docs and changelog

Author: romainmenke

plugins/postcss-design-tokens/CHANGELOG.md

@@ -2,15 +2,20 @@
 
 ### Unreleased
 
+- Added support for design token file imports from npm packages.
 - Added support for arbitrary unit assignment to unit-less design tokens.
 
+npm package : `@your-org/your-tokens`
+
 ```json
 {
 	"font-size": 0.2
 }
 ```
 
 ```css
+@design-tokens url(node_modules://@your-org/your-tokens/tokens.json) format('style-dictionary3');
+
 .example {
 	font-size: design-token('font-size' to vh);
 

plugins/postcss-design-tokens/README.md

@@ -282,6 +282,13 @@ The `@design-tokens` rule is used to import design tokens from a JSON file into
 @design-tokens url('./tokens-dark-mode.json') format('style-dictionary3') when('dark');
 ```
 
+You can also import tokens from an `npm` pacakge:
+
+```pcss
+@design-tokens url('node_modules://my-npm-package/tokens.json') format('style-dictionary3');
+@design-tokens url('node_modules://my-npm-package/tokens-dark-mode.json') format('style-dictionary3') when('dark');
+```
+
 ```
 @design-tokens [ <url> | <string> ]
                [ when(<theme-condition>*) ]?

plugins/postcss-design-tokens/docs/README.md

@@ -185,6 +185,13 @@ The `@design-tokens` rule is used to import design tokens from a JSON file into
 @design-tokens url('./tokens-dark-mode.json') format('style-dictionary3') when('dark');
 ```
 
+You can also import tokens from an `npm` pacakge:
+
+```pcss
+@design-tokens url('node_modules://my-npm-package/tokens.json') format('style-dictionary3');
+@design-tokens url('node_modules://my-npm-package/tokens-dark-mode.json') format('style-dictionary3') when('dark');
+```
+
 ```
 @design-tokens [ <url> | <string> ]
                [ when(<theme-condition>*) ]?

plugins/postcss-design-tokens/src/data-formats/parse-import.ts

@@ -4,6 +4,9 @@ import { extractStyleDictionaryTokens } from './style-dictionary/style-dictionar
 import path from 'path';
 import { promises as fsp } from 'fs';
 import { DEFAULT_CONDITION } from '../constants';
+import module from 'module';
+
+const require = module.createRequire(import.meta.url);
 
 function parseImport(statement: string): { filePath: string, format: string, conditions: Array<string> } {
 	const importAST = valueParser(statement);
@@ -43,7 +46,21 @@ export async function tokensFromImport(buildIs: Array<string>, sourceFilePath: s
 		return false;
 	}
 
-	const resolvedPath = path.resolve(path.dirname(sourceFilePath), filePath);
+	let resolvedPath = '';
+	if (filePath.startsWith('node_modules://')) {
+		try {
+			resolvedPath = require.resolve(filePath.slice(15), {
+				paths: [
+					path.dirname(sourceFilePath),
+				],
+			});
+		} catch (e) {
+			throw new Error(`Failed to read ${filePath} with error ${(e as Error).message}`);
+		}
+	} else {
+		resolvedPath = path.resolve(path.dirname(sourceFilePath), filePath);
+	}
+
 	if (alreadyImported.has(resolvedPath)) {
 		return false;
 	}

plugins/postcss-design-tokens/test/imported.css

@@ -1 +1 @@
-@design-tokens url('../../../node_modules/style-dictionary-design-tokens-example/style-dictionary.tokens.json') format('style-dictionary3');
+@design-tokens url(node_modules://style-dictionary-design-tokens-example/style-dictionary.tokens.json) format('style-dictionary3');

rollup/configs/externals.js

@@ -59,6 +59,7 @@ export const externalsForCLI = [
 export const externalsForPlugin = [
 	'assert',
 	'fs',
+	'module',
 	'path',
 	'url',
 	'vm',