fix module resolution (#1080)

romainmenke · web-flow · commit 2cea66cd2075 · 2023-08-21T14:28:19.000+02:00
diff --git a/plugins/postcss-design-tokens/.tape.mjs b/plugins/postcss-design-tokens/.tape.mjs
@@ -94,6 +94,9 @@ postcssTape(plugin)({
 		message: "supports value parsing (G)",
 		warnings: 2
 	},
+	'imported-double-slash': {
+		message: "supports 'node_modules://'",
+	},
 	'examples/example': {
 		message: 'minimal example',
 		options: {},
diff --git a/plugins/postcss-design-tokens/CHANGELOG.md b/plugins/postcss-design-tokens/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changes to PostCSS Design Tokens
 
+### Unreleased (minor)
+
+- Add support for the shorter `node_modules:package` syntax
+- Fix node module resolution
+
 ### 3.0.1
 
 _July 24, 2023_
diff --git a/plugins/postcss-design-tokens/README.md b/plugins/postcss-design-tokens/README.md
@@ -321,8 +321,8 @@ The `@design-tokens` rule is used to import design tokens from a JSON file into
 You can also import tokens from an `npm` package:
 
 ```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('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');
 ```
 
 ```
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/docs/README.md b/plugins/postcss-design-tokens/docs/README.md
@@ -190,8 +190,8 @@ The `@design-tokens` rule is used to import design tokens from a JSON file into
 You can also import tokens from an `npm` package:
 
 ```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('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');
 ```
 
 ```
diff --git a/plugins/postcss-design-tokens/src/data-formats/parse-import.ts b/plugins/postcss-design-tokens/src/data-formats/parse-import.ts
@@ -7,8 +7,6 @@ import { DEFAULT_CONDITION } from '../constants';
 import module from 'module';
 import type { Helpers, Root } from 'postcss';
 
-const require = module.createRequire(import.meta.url);
-
 function parseImport(statement: string): { filePath: string, format: string, conditions: Array<string> } {
 	const importAST = valueParser(statement);
 
@@ -48,18 +46,21 @@ export async function tokensFromImport(root: Root, postcssHelpers: Helpers, buil
 	}
 
 	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}`);
+
+	try {
+		if (filePath.startsWith('node_modules://')) {
+			const require = module.createRequire(path.dirname(sourceFilePath));
+
+			resolvedPath = require.resolve(filePath.slice(15));
+		} else if (filePath.startsWith('node_modules:')) {
+			const require = module.createRequire(path.dirname(sourceFilePath));
+
+			resolvedPath = require.resolve(filePath.slice(13));
+		} else {
+			resolvedPath = path.resolve(path.dirname(sourceFilePath), filePath);
 		}
-	} else {
-		resolvedPath = path.resolve(path.dirname(sourceFilePath), filePath);
+	} catch (e) {
+		throw new Error(`Failed to read ${filePath} with error ${(e as Error).message}`);
 	}
 
 	if (alreadyImported.has(resolvedPath)) {
diff --git a/plugins/postcss-design-tokens/test/imported-double-slash.css b/plugins/postcss-design-tokens/test/imported-double-slash.css
@@ -0,0 +1,5 @@
+@design-tokens url(node_modules://style-dictionary-design-tokens-example/style-dictionary.tokens.json) format('style-dictionary3');
+
+.foo {
+	color: design-token('color.font.base');
+}
diff --git a/plugins/postcss-design-tokens/test/imported-double-slash.expect.css b/plugins/postcss-design-tokens/test/imported-double-slash.expect.css
@@ -0,0 +1,3 @@
+.foo {
+	color: #111111;
+}
diff --git 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/plugins/postcss-global-data/.tape.mjs b/plugins/postcss-global-data/.tape.mjs
@@ -20,7 +20,7 @@ postcssTape(plugin)({
 		plugins: [
 			plugin({
 				files: [
-					'node_modules://open-props/media.min.css',
+					'node_modules:open-props/media.min.css',
 					'node_modules://open-props/open-props.min.css',
 				]
 			}),
diff --git a/plugins/postcss-global-data/CHANGELOG.md b/plugins/postcss-global-data/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changes to PostCSS global-data
 
+### Unreleased (minor)
+
+- Add support for the shorter `node_modules:package` syntax
+- Fix node module resolution
+
 ### 2.0.1
 
 _July 24, 2023_
diff --git a/plugins/postcss-global-data/dist/index.cjs b/plugins/postcss-global-data/dist/index.cjs
@@ -1 +1 @@
-"use strict";var e=require("path"),r=require("fs");const t=require("module").createRequire("undefined"==typeof document?require("url").pathToFileURL(__filename).href:document.currentScript&&document.currentScript.src||new URL("index.cjs",document.baseURI).href);function parseImport(s,n,o,a){var c;let i="";if(o.startsWith("node_modules://"))try{i=t.resolve(o.slice(15),{paths:[e.dirname(o)]})}catch(e){throw new Error(`Failed to read ${o} with error ${e.message}`)}else i=e.resolve(o);if(a.has(i))return!1;a.add(i),n.result.messages.push({type:"dependency",plugin:"postcss-global-data",file:i,parent:null==(c=s.source)||null==(c=c.input)?void 0:c.file});const u=r.readFileSync(i,"utf8");return n.postcss.parse(u,{from:i})}const creator=e=>{const r=Object.assign({files:[]},e);return{postcssPlugin:"postcss-global-data",prepare(){let e=new Set,t=new Set;return{Once:(s,n)=>{r.files.forEach((r=>{if(e.has(r))return;const o=parseImport(s,n,r,e);o&&o.each((e=>{s.append(e),t.add(e)}))}))},OnceExit:()=>{t.forEach((e=>{e.remove()})),t=new Set,e=new Set}}}}};creator.postcss=!0,module.exports=creator;
+"use strict";var e=require("path"),s=require("fs"),r=require("module");function parseImport(t,o,a,n){var c;let l="";try{if(a.startsWith("node_modules://")){l=r.createRequire(process.cwd()).resolve(a.slice(15))}else if(a.startsWith("node_modules:")){l=r.createRequire(process.cwd()).resolve(a.slice(13))}else l=e.resolve(a)}catch(e){throw new Error(`Failed to read ${a} with error ${e.message}`)}if(n.has(l))return!1;n.add(l),o.result.messages.push({type:"dependency",plugin:"postcss-global-data",file:l,parent:null==(c=t.source)||null==(c=c.input)?void 0:c.file});const i=s.readFileSync(l,"utf8");return o.postcss.parse(i,{from:l})}const creator=e=>{const s=Object.assign({files:[]},e);return{postcssPlugin:"postcss-global-data",prepare(){let e=new Set,r=new Set;return{Once:(t,o)=>{s.files.forEach((s=>{if(e.has(s))return;const a=parseImport(t,o,s,e);a&&a.each((e=>{t.append(e),r.add(e)}))}))},OnceExit:()=>{r.forEach((e=>{e.remove()})),r=new Set,e=new Set}}}}};creator.postcss=!0,module.exports=creator;
diff --git a/plugins/postcss-global-data/dist/index.mjs b/plugins/postcss-global-data/dist/index.mjs
@@ -1 +1 @@
-import e from"path";import t from"fs";import r from"module";const s=r.createRequire(import.meta.url);function parseImport(r,o,a,n){var l;let p="";if(a.startsWith("node_modules://"))try{p=s.resolve(a.slice(15),{paths:[e.dirname(a)]})}catch(e){throw new Error(`Failed to read ${a} with error ${e.message}`)}else p=e.resolve(a);if(n.has(p))return!1;n.add(p),o.result.messages.push({type:"dependency",plugin:"postcss-global-data",file:p,parent:null==(l=r.source)||null==(l=l.input)?void 0:l.file});const i=t.readFileSync(p,"utf8");return o.postcss.parse(i,{from:p})}const creator=e=>{const t=Object.assign({files:[]},e);return{postcssPlugin:"postcss-global-data",prepare(){let e=new Set,r=new Set;return{Once:(s,o)=>{t.files.forEach((t=>{if(e.has(t))return;const a=parseImport(s,o,t,e);a&&a.each((e=>{s.append(e),r.add(e)}))}))},OnceExit:()=>{r.forEach((e=>{e.remove()})),r=new Set,e=new Set}}}}};creator.postcss=!0;export{creator as default};
+import e from"path";import s from"fs";import r from"module";function parseImport(t,o,a,n){var l;let c="";try{if(a.startsWith("node_modules://")){c=r.createRequire(process.cwd()).resolve(a.slice(15))}else if(a.startsWith("node_modules:")){c=r.createRequire(process.cwd()).resolve(a.slice(13))}else c=e.resolve(a)}catch(e){throw new Error(`Failed to read ${a} with error ${e.message}`)}if(n.has(c))return!1;n.add(c),o.result.messages.push({type:"dependency",plugin:"postcss-global-data",file:c,parent:null==(l=t.source)||null==(l=l.input)?void 0:l.file});const i=s.readFileSync(c,"utf8");return o.postcss.parse(i,{from:c})}const creator=e=>{const s=Object.assign({files:[]},e);return{postcssPlugin:"postcss-global-data",prepare(){let e=new Set,r=new Set;return{Once:(t,o)=>{s.files.forEach((s=>{if(e.has(s))return;const a=parseImport(t,o,s,e);a&&a.each((e=>{t.append(e),r.add(e)}))}))},OnceExit:()=>{r.forEach((e=>{e.remove()})),r=new Set,e=new Set}}}}};creator.postcss=!0;export{creator as default};
diff --git a/plugins/postcss-global-data/src/parse-import.ts b/plugins/postcss-global-data/src/parse-import.ts
@@ -3,23 +3,23 @@ import fs from 'fs';
 import type { Helpers, Root } from 'postcss';
 import module from 'module';
 
-const require = module.createRequire(import.meta.url);
-
 export function parseImport(root: Root, postcssHelpers: Helpers, filePath: string, alreadyImported: Set<string>) {
 	let resolvedPath = '';
 
-	if (filePath.startsWith('node_modules://')) {
-		try {
-			resolvedPath = require.resolve(filePath.slice(15), {
-				paths: [
-					path.dirname(filePath),
-				],
-			});
-		} catch (e) {
-			throw new Error(`Failed to read ${filePath} with error ${(e as Error).message}`);
+	try {
+		if (filePath.startsWith('node_modules://')) {
+			const require = module.createRequire(process.cwd());
+
+			resolvedPath = require.resolve(filePath.slice(15));
+		} else if (filePath.startsWith('node_modules:')) {
+			const require = module.createRequire(process.cwd());
+
+			resolvedPath = require.resolve(filePath.slice(13));
+		} else {
+			resolvedPath = path.resolve(filePath);
 		}
-	} else {
-		resolvedPath = path.resolve(filePath);
+	} catch (e) {
+		throw new Error(`Failed to read ${filePath} with error ${(e as Error).message}`);
 	}
 
 	if (alreadyImported.has(resolvedPath)) {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +@design-tokens url(node_modules://style-dictionary-design-tokens-example/style-dictionary.tokens.json) format('style-dictionary3');
++
 +.foo {
 +	color: design-token('color.font.base');
 +}
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-@design-tokens url(node_modules://style-dictionary-design-tokens-example/style-dictionary.tokens.json) format('style-dictionary3');`
	`1`	`+@design-tokens url(node_modules:style-dictionary-design-tokens-example/style-dictionary.tokens.json) format('style-dictionary3');`