Export CSS parser function, add CLI with --stats flag, and add stats utility

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.6",
   "description": "",
   "exports": "./lib/index.js",
+  "bin": "./lib/bin.js",
   "scripts": {
     "build": "rm -rf lib && tsc",
     "format": "prettier --write .",
@@ -36,6 +37,7 @@
   },
   "dependencies": {
     "postcss-import": "^16.1.0",
-    "postcss-selector-parser": "^6.1.2"
+    "postcss-selector-parser": "^6.1.2",
+    "ts-morph": "^27.0.2"
   }
 }

src/bin.ts

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+import fs = require('node:fs')
+import { parseArgs } from 'node:util'
+import type { Parsed } from './index'
+const { parse } = require('./index')
+
+const { positionals } = parseArgs({
+  args: process.argv.slice(2),
+  options: {},
+  strict: true,
+  allowPositionals: true,
+})
+
+if (positionals.length === 0) {
+  console.error('Error: Please provide a CSS file path')
+  console.error('Usage: mistcss <path-to-css-file>')
+  process.exit(1)
+}
+
+const cssPath = positionals[0]
+const css = fs.readFileSync(cssPath, 'utf-8')
+
+const parsed = parse(css)
+
+// Convert Sets to Arrays for JSON serialization
+const serializable = Object.fromEntries(
+  (Object.entries(parsed) as [string, Parsed[string]][]).map(([key, value]) => [
+    key,
+    {
+      ...value,
+      attributes: Object.fromEntries(
+        Object.entries(value.attributes).map(([k, v]) => [k, Array.from(v)])
+      ),
+      booleanAttributes: Array.from(value.booleanAttributes),
+      properties: Array.from(value.properties),
+    },
+  ])
+)
+
+console.log(JSON.stringify(serializable, null, 2))

src/index.ts

@@ -1,5 +1,6 @@
 import fs = require('node:fs')
 import { type PluginCreator } from 'postcss'
+import postcss = require('postcss')
 import selectorParser = require('postcss-selector-parser')
 import atImport = require('postcss-import')
 import path = require('node:path')
@@ -14,7 +15,7 @@ declare module 'postcss-selector-parser' {
   }
 }
 
-type Parsed = Record<
+export type Parsed = Record<
   string,
   {
     tag: string
@@ -164,6 +165,50 @@ function initialParsedValue(): Parsed[keyof Parsed] {
   }
 }
 
+export function parse(css: string): Parsed {
+  const parsed: Parsed = {}
+  let current: Parsed[keyof Parsed] = initialParsedValue()
+
+  // Parse the CSS using postcss
+  const root = postcss.parse(css)
+
+  root.walkRules((rule) => {
+    selectorParser((selectors) => {
+      selectors.walk((selector) => {
+        if (selector.type === 'tag') {
+          current = parsed[key(selector)] = initialParsedValue()
+          current.tag = selector.toString().toLowerCase()
+          const next = selector.next()
+          if (next?.type === 'attribute') {
+            const { attribute, value } = next as selectorParser.Attribute
+            if (value) current.rootAttribute = attribute
+          }
+        }
+
+        if (selector.type === 'attribute') {
+          const { attribute, value } = selector as selectorParser.Attribute
+          if (value) {
+            const values = (current.attributes[attribute] ??=
+              new Set<string>())
+            values.add(value)
+          } else {
+            current.booleanAttributes.add(attribute)
+          }
+        }
+      })
+    }).processSync(rule.selector, {
+      lossless: false,
+    })
+
+    rule.walkDecls(({ prop }) => {
+      if (prop.startsWith('--') && prop !== '--apply')
+        current.properties.add(prop)
+    })
+  })
+
+  return parsed
+}
+
 const _mistcss: PluginCreator<{}> = (_opts = {}) => {
   return {
     postcssPlugin: '_mistcss',
@@ -172,41 +217,8 @@ const _mistcss: PluginCreator<{}> = (_opts = {}) => {
       const from = helper.result.opts.from
       if (from === undefined || path.basename(from) !== 'mist.css') return
 
-      const parsed: Parsed = {}
-      let current: Parsed[keyof Parsed] = initialParsedValue()
-      root.walkRules((rule) => {
-        selectorParser((selectors) => {
-          selectors.walk((selector) => {
-            if (selector.type === 'tag') {
-              current = parsed[key(selector)] = initialParsedValue()
-              current.tag = selector.toString().toLowerCase()
-              const next = selector.next()
-              if (next?.type === 'attribute') {
-                const { attribute, value } = next as selectorParser.Attribute
-                if (value) current.rootAttribute = attribute
-              }
-            }
-
-            if (selector.type === 'attribute') {
-              const { attribute, value } = selector as selectorParser.Attribute
-              if (value) {
-                const values = (current.attributes[attribute] ??=
-                  new Set<string>())
-                values.add(value)
-              } else {
-                current.booleanAttributes.add(attribute)
-              }
-            }
-          })
-        }).processSync(rule.selector, {
-          lossless: false,
-        })
-
-        rule.walkDecls(({ prop }) => {
-          if (prop.startsWith('--') && prop !== '--apply')
-            current.properties.add(prop)
-        })
-      })
+      const css = root.toString()
+      const parsed = parse(css)
       const rendered = render(parsed)
       const to = path.resolve(from, '../mist.d.ts')
       fs.writeFileSync(to, rendered, 'utf-8')
@@ -225,4 +237,7 @@ const mistcss: PluginCreator<{}> = (_opts = {}) => {
 
 mistcss.postcss = true
 
+export { mistcss as default }
 module.exports = mistcss
+module.exports.parse = parse
+module.exports.default = mistcss