Convert project to TypeScript (#6)

Fixes #3 by converting the project over to TypeScript and publishing index.d.ts alongside the generated index.js file, which TypeScript should automatically resolve.

Author: IanVS

.github/workflows/test.yml

@@ -27,5 +27,7 @@ jobs:
           cache: "pnpm"
       - name: Install dependencies
         run: pnpm install
+      - name: Build project
+        run: pnpm build
       - name: Run unit tests
         run: pnpm test

.gitignore

@@ -3,3 +3,7 @@ npm-debug.log
 yarn-error.log
 
 coverage/
+
+# build products
+index.js
+index.d.ts

eslint.config.mjs

@@ -1,8 +1,29 @@
+// @ts-check
+
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 import noOnlyPlugin from "eslint-plugin-no-only-tests";
 import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+// mimic CommonJS variables
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
-export default [
+export default tseslint.config(
   eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    ignores: ["coverage/*", "index.js", "index.test.mjs", "index.d.ts"],
+  },
+  {
+    languageOptions: {
+      parserOptions: {
+        project: "./tsconfig.eslint.json",
+        tsconfigRootDir: __dirname,
+      },
+    },
+  },
   {
     rules: {
       semi: "error",
@@ -24,5 +45,5 @@ export default [
       "no-only-tests": noOnlyPlugin,
     },
     rules: { "no-only-tests/no-only-tests": "error" },
-  },
-];
+  }
+);

index.test.mjs index.test.mtsindex.test.mjs renamed to index.test.mts

@@ -3,15 +3,19 @@ import path from "node:path";
 import postcss from "postcss";
 import prettier from "prettier";
 import { describe, it, expect } from "vitest";
-
-const plugin = (await import(".")).default;
+import { plugin, type PluginOptions } from "./index.js";
 
 // We don't care about formatting differences, so normalize with prettier
-function format(css) {
+function format(css: string) {
   return prettier.format(css, { parser: "css" });
 }
 
-async function run(input, output, opts, postcssOpts = {}) {
+async function run(
+  input: string,
+  output: string,
+  opts?: PluginOptions,
+  postcssOpts = {}
+) {
   const result = await postcss([plugin(opts)]).process(input, postcssOpts);
   expect(format(result.css)).toEqual(format(output));
   expect(result.warnings()).toHaveLength(0);

index.js index.tsindex.js renamed to index.ts

@@ -1,20 +1,24 @@
-const { createFilter } = require("@rollup/pluginutils");
+import { createFilter } from "@rollup/pluginutils";
+import type { PluginCreator } from "postcss";
 
 const DEFAULT_INCLUDE = "**/*.module.css";
 const DEFAULT_LAYERNAME = "components";
 
-/**
- * @type {import('postcss').PluginCreator}
- */
-module.exports = (
+type ConfigItem = {
+  include?: string;
+  layerName?: string;
+};
+export type PluginOptions = ConfigItem[];
+
+export const plugin: PluginCreator<PluginOptions> = (
   configItems = [
     {
       include: DEFAULT_INCLUDE,
       layerName: DEFAULT_LAYERNAME,
     },
   ]
 ) => {
-  const filters = [];
+  const filters: { filter: (id: string) => boolean; layerName: string }[] = [];
 
   for (const config of configItems) {
     const filter = createFilter(config.include ?? DEFAULT_INCLUDE);
@@ -23,12 +27,12 @@ module.exports = (
 
   return {
     postcssPlugin: "postcss-assign-layers",
-    async Once(root, { AtRule }) {
-      const inputFile = root.source.input.file;
+    Once(root, { AtRule }) {
+      const inputFile = root.source?.input.file;
       const layerNames = [];
 
       for (const { filter, layerName } of filters) {
-        if (filter(inputFile)) {
+        if (inputFile && filter(inputFile)) {
           layerNames.push(layerName);
         }
       }
@@ -45,5 +49,6 @@ module.exports = (
     },
   };
 };
+plugin.postcss = true;
 
-module.exports.postcss = true;
+export default plugin;

package.json

@@ -9,8 +9,10 @@
     "postcss-assign-layer"
   ],
   "scripts": {
+    "build": "tsc -p tsconfig.json",
     "test": "vitest run --coverage && eslint .",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "prepublishOnly": "pnpm build && pnpm test"
   },
   "author": "Ian VanSchooten <ian.vanschooten@gmail.com>",
   "license": "MIT",
@@ -20,7 +22,8 @@
   },
   "homepage": "https://github.com/DefinedNet/postcss-assign-layer#readme",
   "files": [
-    "index.js"
+    "index.js",
+    "index.d.ts"
   ],
   "engines": {
     "node": ">=12.0.0"
@@ -30,14 +33,20 @@
   },
   "devDependencies": {
     "@eslint/js": "^8.57.0",
+    "@types/eslint": "^8.56.6",
+    "@types/node": "^16.18.91",
+    "@types/prettier": "^2.6.0",
+    "@vitest/coverage-v8": "^0.34.0",
     "c8": "^7.11.3",
     "clean-publish": "^3.4.2",
     "eslint": "^8.57.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "postcss": "^8.3.11",
     "prettier": "^2.6.2",
-    "vite": "^2.9.9",
-    "vitest": "^0.12.6"
+    "typescript": "^5.4.2",
+    "typescript-eslint": "^7.3.1",
+    "vite": "^4.0.0",
+    "vitest": "^0.34.0"
   },
   "dependencies": {
     "@rollup/pluginutils": "^4.2.1"