feat: add types, esm build

.gitignore

@@ -1,5 +1,6 @@
 /node_modules
 /coverage
+/dist
 *.log
 
 # https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored

package.json

@@ -2,11 +2,20 @@
   "name": "postcss-theme-colors",
   "version": "1.0.0-0",
   "description": "Theming with cc()",
-  "main": "index.js",
   "files": [
-    "index.js"
+    "dist"
   ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
   "scripts": {
+    "build": "rm -rf dist && pkgroll",
     "prepare": "npm test",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -21,11 +30,13 @@
     "@csstools/postcss-relative-color-syntax": "^2.0.13",
     "@vitest/coverage-v8": "^1.5.0",
     "colorjs.io": "^0.5.0",
+    "pkgroll": "^2.0.2",
     "postcss": "^8.4.38",
     "postcss-custom-properties": "^13.3.7",
     "postcss-functions": "^4.0.2",
     "postcss-nested": "^6.0.1",
     "postcss-nesting": "^12.1.1",
+    "typescript": "^5.4.5",
     "vitest": "^1.5.0"
   },
   "packageManager": "yarn@4.1.1"

index.js → src/index.ts

@@ -1,14 +1,31 @@
-const postcss = require('postcss')
+import postcss from 'postcss'
+import type {PluginCreator} from 'postcss'
 
-const defaults = {
+type Options = {
+  colors: Record<string, string>
+  groups: ColorGroup
+  function?: string
+  useCustomProperties?: boolean
+  darkThemeSelector?: string
+}
+
+const defaults: Options = {
   function: 'cc',
   groups: {},
   colors: {},
   useCustomProperties: false,
   darkThemeSelector: 'html[data-theme="dark"]',
 }
 
-const resolveColor = (options, theme, group, defaultValue) => {
+type ColorScheme = 'dark' | 'light'
+type ColorGroup = Record<string, [string, string]>
+
+const resolveColor = (
+  options: Options,
+  theme: ColorScheme,
+  group: string,
+  defaultValue: string
+) => {
   const [lightColor, darkColor] = options.groups[group] || []
   const color = theme === 'dark' ? darkColor : lightColor
   if (!color) {
@@ -22,10 +39,7 @@ const resolveColor = (options, theme, group, defaultValue) => {
   return options.colors[color] || defaultValue
 }
 
-/**
- * @type {import('postcss').PluginCreator}
- */
-module.exports = (options) => {
+const themeColors: PluginCreator<Options> = (options) => {
   options = Object.assign({}, defaults, options)
   const reGroup = new RegExp(`\\b${options.function}\\(([^)]+)\\)`, 'g')
 
@@ -61,4 +75,6 @@ module.exports = (options) => {
   }
 }
 
-module.exports.postcss = true
+themeColors.postcss = true
+
+export default themeColors

test/index.spec.js

@@ -1,7 +1,7 @@
 import Color from 'colorjs.io'
 import postcss from 'postcss'
 import {describe, it, expect} from 'vitest'
-import themeColors from '..'
+import themeColors from '../src'
 
 const colors = {
   C01: '#eee',

tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    /* Base Options: */
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    /* Strictness */
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    /* If transpiling with TypeScript: */
+    "module": "NodeNext",
+    "outDir": "dist",
+    "sourceMap": true,
+    /* AND if you're building for a library: */
+    "declaration": true,
+    /* AND if you're building for a library in a monorepo: */
+    "composite": true,
+    "declarationMap": true,
+    "noEmit": true
+  }
+}