diff --git a/plugins/postcss-design-tokens/CHANGELOG.md b/plugins/postcss-design-tokens/CHANGELOG.md index 03cdf5f2e..5b14f7ce9 100644 --- a/plugins/postcss-design-tokens/CHANGELOG.md +++ b/plugins/postcss-design-tokens/CHANGELOG.md @@ -2,8 +2,11 @@ ### 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 @@ -11,6 +14,8 @@ ``` ```css +@design-tokens url(node_modules://@your-org/your-tokens/tokens.json) format('style-dictionary3'); + .example { font-size: design-token('font-size' to vh); diff --git a/plugins/postcss-design-tokens/README.md b/plugins/postcss-design-tokens/README.md index 4b705530f..5b98a42dc 100644 --- a/plugins/postcss-design-tokens/README.md +++ b/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 [ | ] [ when(*) ]? diff --git a/plugins/postcss-design-tokens/docs/README.md b/plugins/postcss-design-tokens/docs/README.md index dd9e8cbb0..1011896cf 100644 --- a/plugins/postcss-design-tokens/docs/README.md +++ b/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 [ | ] [ when(*) ]? diff --git a/plugins/postcss-design-tokens/src/data-formats/parse-import.ts b/plugins/postcss-design-tokens/src/data-formats/parse-import.ts index f3089c72c..5260d4e83 100644 --- a/plugins/postcss-design-tokens/src/data-formats/parse-import.ts +++ b/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 } { const importAST = valueParser(statement); @@ -43,7 +46,21 @@ export async function tokensFromImport(buildIs: Array, 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; } diff --git a/plugins/postcss-design-tokens/test/imported.css b/plugins/postcss-design-tokens/test/imported.css index 6c68c5991..db848c441 100644 --- a/plugins/postcss-design-tokens/test/imported.css +++ b/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'); diff --git a/rollup/configs/externals.js b/rollup/configs/externals.js index 8a008bbd7..6095a97f5 100644 --- a/rollup/configs/externals.js +++ b/rollup/configs/externals.js @@ -59,6 +59,7 @@ export const externalsForCLI = [ export const externalsForPlugin = [ 'assert', 'fs', + 'module', 'path', 'url', 'vm',