update

package.json

@@ -7,8 +7,7 @@
     "build": "rm -rf lib && tsc",
     "format": "prettier --write .",
     "lint": "eslint",
-    "test": "vitest",
-    "test:postcss": "postcss test/mist.css",
+    "test": "postcss test/mist.css",
     "prepublishOnly": "npm run build",
     "prepare": "husky"
   },
@@ -31,6 +30,7 @@
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
     "prettier": "^3.2.5",
+    "tsx": "^4.19.2",
     "typescript": "^5.3.3",
     "vitest": "^1.5.0"
   },

postcss.config.js

@@ -1,7 +1,6 @@
-import atImport from 'postcss-import'
-
-import plugin from './lib/plugin.js'
-
-export default {
-  plugins: [atImport, plugin],
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('./lib/index.js')({})
+  ]
 }

src/html.ts

@@ -1,5 +1,5 @@
 // Ref: lib.dom.d.ts
-export const tagToHTMLElement = {
+module.exports = {
   a: 'HTMLAnchorElement',
   abbr: 'HTMLElement',
   address: 'HTMLElement',

src/index.ts

@@ -1,8 +1,8 @@
-import fs from 'node:fs'
-import { PluginCreator } from 'postcss'
-import selectorParser from 'postcss-selector-parser'
-import path from 'node:path'
-import { tagToHTMLElement } from './html.js'
+import fs = require('node:fs')
+import { type PluginCreator } from 'postcss'
+import selectorParser = require('postcss-selector-parser');
+import path = require('node:path');
+const html = require('./html')
 
 declare module 'postcss-selector-parser' {
   // For some reasons these aren't avaiblable in this module types
@@ -34,8 +34,8 @@ function render(parsed: Parsed): string {
       const attributeEntries = Object.entries(attributes)
 
       let htmlElement = 'HTMLElement'
-      if (tag in tagToHTMLElement) {
-        htmlElement = tagToHTMLElement[tag as keyof typeof tagToHTMLElement]
+      if (tag in html) {
+        htmlElement = html[tag as keyof typeof html]
       }
 
       let interfaceDefinition = `interface ${interfaceName} extends React.DetailedHTMLProps<React.HTMLAttributes<${htmlElement}>, ${htmlElement}> {\n`
@@ -104,7 +104,7 @@ function initialParsedValue(): Parsed[keyof Parsed] {
   }
 }
 
-const mistcss: PluginCreator<{}> = (_opts = {}) => {
+export const mistcss: PluginCreator<{}> = (_opts = {}) => {
   return {
     postcssPlugin: 'mistcss',
     Once(root, helper) {

test/mist.d.ts

@@ -1,14 +1,9 @@
-interface Mist_button
-  extends React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  > {
-  'data-variant': 'primary' | 'secondary'
+interface Mist_button extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+  'data-variant'?: 'primary' | 'secondary'
 }
 
 declare namespace JSX {
   interface IntrinsicElements {
     button: Mist_button
   }
 }
-

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "@tsconfig/node18/tsconfig.json",
   "compilerOptions": {
-    "outDir": "./lib"
-  }
+    "outDir": "./lib",
+  },
 }