@eik/postcss-plugin 3.0.14 → 4.0.1

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [4.0.1](https://github.com/eik-lib/postcss-import-map/compare/v4.0.0...v4.0.1) (2024-08-09)
+
+
+### Bug Fixes
+
+* include type definitions ([7ad7a16](https://github.com/eik-lib/postcss-import-map/commit/7ad7a16ea7f4ca246383cf1b8797f45b0dd2995d))
+
+# [4.0.0](https://github.com/eik-lib/postcss-import-map/compare/v3.0.14...v4.0.0) (2024-07-29)
+
+
+### Code Refactoring
+
+* migrate to esm ([4e8bc12](https://github.com/eik-lib/postcss-import-map/commit/4e8bc1299323afb2ee7e74eb4d97d85869f5c904))
+* remove node-fetch dependency ([8113805](https://github.com/eik-lib/postcss-import-map/commit/81138057c767bdecfeec96db017ddf25942e8458))
+
+
+### BREAKING CHANGES
+
+* this requires using Node 18 or newer without the
+--no-experimental-fetch flag.
+* module is now ESM
+
 ## [3.0.14](https://github.com/eik-lib/postcss-import-map/compare/v3.0.13...v3.0.14) (2024-03-06)
 
 

package/README.md

@@ -19,9 +19,7 @@ const fs = require('fs');
 const css = fs.readFileSync('css/input.css', 'utf8');
 
 postcss()
-    .use(
-        plugin()
-    )
+    .use(plugin())
     .process(css, {
         // `from` option is needed here
         from: 'css/input.css',
@@ -55,8 +53,8 @@ when applaying the following Import Map:
 ```json
 {
     "imports": {
-        "normalize.css": "https://cdn.eik.dev/normalize.css@8/normalize.css",
-    },
+        "normalize.css": "https://cdn.eik.dev/normalize.css@8/normalize.css"
+    }
 }
 ```
 
@@ -74,11 +72,11 @@ body {
 
 This plugin takes the following as options:
 
-| option  | default         | type     | required | details                                                                       |
-| ------- | --------------- | -------- | -------- | ----------------------------------------------------------------------------- |
-| path    | `process.cwd()` | `string` | `false`  | Path to directory containing a eik.json file or package.json with eik config. |
-| urls    | `[]`            | `array`  | `false`  | Array of import map URLs to fetch from.                                       |
-| maps    | `[]`            | `array`  | `false`  | Array of import map as objects.                                               |
+| option | default         | type     | required | details                                                                       |
+| ------ | --------------- | -------- | -------- | ----------------------------------------------------------------------------- |
+| path   | `process.cwd()` | `string` | `false`  | Path to directory containing a eik.json file or package.json with eik config. |
+| urls   | `[]`            | `array`  | `false`  | Array of import map URLs to fetch from.                                       |
+| maps   | `[]`            | `array`  | `false`  | Array of import map as objects.                                               |
 
 The plugin will attempt to read import map URLs from [`eik.json` or `package.json`](https://eik.dev/docs/overview_eik_json) files in the root of the current working directory if present.
 

package/package.json

@@ -1,63 +1,62 @@
 {
-    "name": "@eik/postcss-plugin",
-    "version": "3.0.14",
-    "description": "PostCSS plugin that uses Eik defined import map files to transform bare import specifiers to absolute URLs in @import rules",
-    "main": "src/plugin.js",
-    "files": [
-        "CHANGELOG.md",
-        "package.json",
-        "src/"
-    ],
-    "scripts": {
-        "test": "tap test/*.js --disable-coverage --allow-empty-coverage",
-        "test:snapshot": "TAP_SNAPSHOT=1 tap test/*.js --disable-coverage --allow-empty-coverage",
-        "lint": "eslint .",
-        "lint:fix": "eslint . --fix"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/eik-lib/postcss-import-map.git"
-    },
-    "keywords": [
-        "css",
-        "postcss",
-        "postcss-plugin",
-        "import",
-        "url"
-    ],
-    "author": "Finn.no",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/eik-lib/postcss-import-map/issues"
-    },
-    "homepage": "https://github.com/eik-lib/postcss-import-map#readme",
-    "devDependencies": {
-        "@semantic-release/changelog": "6.0.3",
-        "@semantic-release/commit-analyzer": "11.1.0",
-        "@semantic-release/git": "10.0.1",
-        "@semantic-release/github": "9.2.6",
-        "@semantic-release/npm": "11.0.3",
-        "@semantic-release/release-notes-generator": "12.1.0",
-        "eslint": "8.57.0",
-        "eslint-config-airbnb-base": "15.0.0",
-        "eslint-plugin-import": "2.29.1",
-        "eslint-config-prettier": "9.1.0",
-        "fastify": "4.26.2",
-        "postcss": "8.4.31",
-        "rollup": "4.12.1",
-        "semantic-release": "23.0.2",
-        "tap": "18.7.0"
-    },
-    "dependencies": {
-        "@eik/common-config-loader": "4.0.0-next.12",
-        "css-url-parser": "1.1.3",
-        "node-fetch": "2.7.0"
-    },
-    "peerDependencies": {
-        "postcss": "^8.0.0"
-    },
-    "prettier": {
-        "singleQuote": true,
-        "tabWidth": 4
-    }
+  "name": "@eik/postcss-plugin",
+  "version": "4.0.1",
+  "description": "PostCSS plugin that uses Eik defined import map files to transform bare import specifiers to absolute URLs in @import rules",
+  "main": "src/plugin.js",
+  "types": "./types/plugin.d.ts",
+  "type": "module",
+  "files": [
+    "CHANGELOG.md",
+    "package.json",
+    "src/",
+    "types/"
+  ],
+  "scripts": {
+    "test": "tap test/*.js --disable-coverage --allow-empty-coverage",
+    "test:snapshot": "TAP_SNAPSHOT=1 tap test/*.js --disable-coverage --allow-empty-coverage",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "types": "run-s types:module types:test",
+    "types:module": "tsc",
+    "types:test": "tsc --project tsconfig.test.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eik-lib/postcss-import-map.git"
+  },
+  "keywords": [
+    "css",
+    "postcss",
+    "postcss-plugin",
+    "import",
+    "url"
+  ],
+  "author": "Finn.no",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/eik-lib/postcss-import-map/issues"
+  },
+  "homepage": "https://github.com/eik-lib/postcss-import-map#readme",
+  "devDependencies": {
+    "@eik/eslint-config": "1.0.2",
+    "@eik/prettier-config": "1.0.1",
+    "@eik/semantic-release-config": "1.0.0",
+    "@eik/typescript-config": "1.0.0",
+    "eslint": "9.8.0",
+    "fastify": "4.28.1",
+    "npm-run-all": "4.1.5",
+    "postcss": "8.4.40",
+    "prettier": "3.3.3",
+    "rollup": "4.20.0",
+    "semantic-release": "24.0.0",
+    "tap": "20.0.3",
+    "typescript": "5.5.4"
+  },
+  "dependencies": {
+    "@eik/common": "4.0.7",
+    "css-url-parser": "1.1.3"
+  },
+  "peerDependencies": {
+    "postcss": "^8.0.0"
+  }
 }

package/src/plugin.js

@@ -1,125 +1,163 @@
-/* eslint-disable no-restricted-syntax, no-shadow */
-
-const parseCssUrls = require('css-url-parser');
-const { getDefaults } = require('@eik/common-config-loader');
-const fetch = require('node-fetch');
-
-const notUrl = (url) => url.substr(0, 4) !== 'http';
-
+import parseCssUrls from "css-url-parser";
+import { helpers } from "@eik/common";
+
+/**
+ * @param {string} url
+ * @returns {boolean}
+ */
+const notUrl = (url) => url.substr(0, 4) !== "http";
+
+/**
+ * @typedef {object} ImportMap
+ * @property {Record<string, string>} imports
+ */
+
+/**
+ * @param {string[]} urls
+ * @returns {Promise<ImportMap[]>}
+ */
 async function fetchImportMaps(urls = []) {
-    try {
-        const maps = urls.map((map) =>
-            fetch(map).then((result) => {
-                if (result.status === 404) {
-                    throw new Error('Import map could not be found on server');
-                } else if (result.status >= 400 && result.status < 500) {
-                    throw new Error('Server rejected client request');
-                } else if (result.status >= 500) {
-                    throw new Error('Server error');
-                }
-                return result.json();
-            })
-        );
-        return await Promise.all(maps);
-    } catch (err) {
-        throw new Error(
-            `Unable to load import map file from server: ${err.message}`
-        );
-    }
+	try {
+		const maps = urls.map((map) =>
+			fetch(map).then((result) => {
+				if (result.status === 404) {
+					throw new Error("Import map could not be found on server");
+				} else if (result.status >= 400 && result.status < 500) {
+					throw new Error("Server rejected client request");
+				} else if (result.status >= 500) {
+					throw new Error("Server error");
+				}
+				return /** @type {Promise<ImportMap>} */ (result.json());
+			}),
+		);
+		return await Promise.all(maps);
+	} catch (err) {
+		throw new Error(
+			`Unable to load import map file from server: ${err.message}`,
+		);
+	}
 }
 
+/**
+ * @param {ImportMap} map
+ * @returns {Array<{ key: string; value: string; }>}
+ */
 const validate = (map) =>
-    Object.keys(map.imports).map((key) => {
-        const value = map.imports[key];
-
-        if (notUrl(value)) {
-            throw Error(
-                `Import specifier can NOT be mapped to a bare import statement. Import specifier "${key}" is being wrongly mapped to "${value}"`
-            );
-        }
-
-        return { key, value };
-    });
-
-module.exports = ({ path = process.cwd(), maps = [], urls = [] } = {}) => {
-    const pMaps = Array.isArray(maps) ? maps : [maps];
-    const pUrls = Array.isArray(urls) ? urls : [urls];
-
-    return {
-        postcssPlugin: '@eik/postcss-import-map',
-        prepare() {
-            // Avoid parsing things more than necessary
-            const processed = new WeakMap();
-            // Only replace once per url
-            const replaced = new Set();
-            // Eagerly start resolving
-
-            // Reused replace logic
-            const applyImportMap = (mapping, decl) => {
-                if (processed.has(decl)) {
-                    return;
-                }
-
-                let key;
-                // First check if it's possibly using syntax like url()
-                const parsedUrls = parseCssUrls(decl.params);
-                if (parsedUrls.length > 0) {
-                    // eslint-disable-next-line prefer-destructuring
-                    key = parsedUrls[0];
-                } else {
-                    // Handle the common cases where it's not wrapped in url() but may have quotes
-                    key = decl.params.replace(/["']/g, '');
-                }
-
-                // Webpack interop
-                key = key.replace(/^~/, '');
-
-                if (replaced.has(key)) {
-                    decl.remove();
-                } else if (mapping.has(key)) {
-                    // eslint-disable-next-line no-param-reassign
-                    decl.params = `'${mapping.get(key)}'`;
-                    replaced.add(key);
-                }
-
-                // Cache we've processed this
-                processed.set(decl, true);
-            };
-
-            const mapping = new Map();
-
-            return {
-                // Run initially once, this is to ensure it runs before postcss-import
-                async Once(root) {
-                    // Load eik config from eik.json or package.json
-                    const config = await getDefaults(path);
-
-                    // Fetch import maps from the server
-                    const fetched = await fetchImportMaps([
-                        ...config.map,
-                        ...pUrls,
-                    ]);
-
-                    const allImportMaps = [...fetched, ...pMaps];
-                    allImportMaps.forEach((item) => {
-                        const i = validate(item);
-                        i.forEach((obj) => {
-                            mapping.set(obj.key, obj.value);
-                        });
-                    });
-
-                    root.walkAtRules('import', (decl) => {
-                        applyImportMap(mapping, decl);
-                    });
-                },
-                AtRule: {
-                    import: async (decl) => {
-                        applyImportMap(mapping, decl);
-                    },
-                },
-            };
-        },
-    };
+	Object.keys(map.imports).map((key) => {
+		const value = map.imports[key];
+
+		if (notUrl(value)) {
+			throw Error(
+				`Import specifier can NOT be mapped to a bare import statement. Import specifier "${key}" is being wrongly mapped to "${value}"`,
+			);
+		}
+
+		return { key, value };
+	});
+
+/**
+ * @typedef {object} PluginOptions
+ * @property {string} [path=process.cwd()]
+ * @property {string[]} [urls=[]] URLs to import maps hosted on an Eik server. Takes precedence over `eik.json`.
+ * @property {ImportMap[]} [maps=[]] Inline import maps that should be used. Takes precedence over `urls` and `eik.json`.
+ */
+
+/**
+ * @typedef {object} PrepareResult
+ * @property {(root: import('postcss').Root) => Promise<void>} Once
+ * @property {{ import: (decl: import('postcss').AtRule) => Promise<void> }} AtRule
+ */
+
+/**
+ * @typedef {object} Plugin
+ * @property {string} postcssPlugin
+ * @property {() => PrepareResult} prepare
+ */
+
+/**
+ * Returns the plugin which will apply the given import maps during the build.
+ * @param {PluginOptions} options
+ * @returns {Plugin}
+ */
+export default ({ path = process.cwd(), maps = [], urls = [] } = {}) => {
+	const pMaps = Array.isArray(maps) ? maps : [maps];
+	const pUrls = Array.isArray(urls) ? urls : [urls];
+
+	return {
+		postcssPlugin: "@eik/postcss-import-map",
+		prepare() {
+			// Avoid parsing things more than necessary
+			const processed = new WeakMap();
+			// Only replace once per url
+			const replaced = new Set();
+			// Eagerly start resolving
+
+			// Reused replace logic
+			/**
+			 *
+			 * @param {Map<string, string>} mapping
+			 * @param {import('postcss').AtRule} decl
+			 * @returns {void}
+			 */
+			const applyImportMap = (mapping, decl) => {
+				if (processed.has(decl)) {
+					return;
+				}
+
+				let key;
+				// First check if it's possibly using syntax like url()
+				const parsedUrls = parseCssUrls(decl.params);
+				if (parsedUrls.length > 0) {
+					key = parsedUrls[0];
+				} else {
+					// Handle the common cases where it's not wrapped in url() but may have quotes
+					key = decl.params.replace(/["']/g, "");
+				}
+
+				// Webpack interop
+				key = key.replace(/^~/, "");
+
+				if (replaced.has(key)) {
+					decl.remove();
+				} else if (mapping.has(key)) {
+					decl.params = `'${mapping.get(key)}'`;
+					replaced.add(key);
+				}
+
+				// Cache we've processed this
+				processed.set(decl, true);
+			};
+
+			/** @type {Map<string, string>} */
+			const mapping = new Map();
+
+			return {
+				// Run initially once, this is to ensure it runs before postcss-import
+				async Once(root) {
+					// Load eik config from eik.json or package.json
+					const config = await helpers.getDefaults(path);
+
+					// Fetch import maps from the server
+					const fetched = await fetchImportMaps([...config.map, ...pUrls]);
+
+					const allImportMaps = [...fetched, ...pMaps];
+					allImportMaps.forEach((item) => {
+						const i = validate(item);
+						i.forEach((obj) => {
+							mapping.set(obj.key, obj.value);
+						});
+					});
+
+					root.walkAtRules("import", (decl) => {
+						applyImportMap(mapping, decl);
+					});
+				},
+				AtRule: {
+					import: async (decl) => {
+						applyImportMap(mapping, decl);
+					},
+				},
+			};
+		},
+	};
 };
-
-module.exports.postcss = true;

package/types/plugin.d.ts

@@ -0,0 +1,26 @@
+declare function _default({ path, maps, urls }?: PluginOptions): Plugin;
+export default _default;
+export type ImportMap = {
+    imports: Record<string, string>;
+};
+export type PluginOptions = {
+    path?: string;
+    /**
+     * URLs to import maps hosted on an Eik server. Takes precedence over `eik.json`.
+     */
+    urls?: string[];
+    /**
+     * Inline import maps that should be used. Takes precedence over `urls` and `eik.json`.
+     */
+    maps?: ImportMap[];
+};
+export type PrepareResult = {
+    Once: (root: import("postcss").Root) => Promise<void>;
+    AtRule: {
+        import: (decl: import("postcss").AtRule) => Promise<void>;
+    };
+};
+export type Plugin = {
+    postcssPlugin: string;
+    prepare: () => PrepareResult;
+};