initial attempt at using tsup to build tailwind

Author: gabrielmfern

package.json

@@ -30,5 +30,14 @@
     "vite": "5.4.6",
     "vitest": "2.0.5"
   },
-  "packageManager": "[email protected]+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387"
+  "packageManager": "[email protected]+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387",
+  "pnpm": {
+    "patchedDependencies": {
+      "[email protected]": "patches/[email protected]",
+      "[email protected]": "patches/[email protected]",
+      "[email protected]": "patches/[email protected]",
+      "[email protected]": "patches/[email protected]",
+      "[email protected]": "patches/[email protected]"
+    }
+  }
 }

packages/tailwind/integrations/nextjs/package-lock.json

@@ -23,8 +23,8 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsc && NODE_ENV=production vite build --mode production && node ./copy-tailwind-types.mjs",
-    "dev": "vite build --watch",
+    "build": "tsup-node",
+    "dev": "tsup-node --watch",
     "clean": "rm -rf dist",
     "lint": "eslint .",
     "test:watch": "vitest",
@@ -56,7 +56,6 @@
     "@react-email/render": "workspace:*",
     "@responsive-email/react-email": "0.0.3",
     "@types/shelljs": "0.8.15",
-    "@vitejs/plugin-react": "4.2.1",
     "eslint-config-custom": "workspace:*",
     "eslint-plugin-regex": "1.10.0",
     "postcss": "8.4.40",
@@ -67,12 +66,12 @@
     "tsconfig": "workspace:*",
     "tsup": "7.2.0",
     "typescript": "5.1.6",
-    "vite": "5.2.14",
-    "vite-plugin-dts": "4.2.4",
-    "vitest": "1.1.1",
     "yalc": "1.0.0-pre.53"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "uuid": "11.0.3"
   }
 }

packages/tailwind/integrations/vite/package-lock.json

@@ -4,6 +4,7 @@
   "include": ["."],
   "exclude": ["dist", "build", "node_modules", "integrations/vite", "integrations/nextjs"],
   "compilerOptions": {
+    "resolveJsonModule": true,
     "strict": true,
     "noEmit": true
   }

packages/tailwind/package.json

@@ -0,0 +1,22 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  dts: true,
+  target: ["es2020"],
+  entry: ["./src/index.ts"],
+  outDir: "./dist",
+  treeshake: true,
+  noExternal: [
+    /tailwindcss\/.*/,
+    /postcss\/.*/,
+    "dlv",
+    "didyoumean",
+    "@alloc/quick-lru",
+    "postcss-selector-parser",
+    "postcss-js",
+    "postcss-nested",
+    "cssesc",
+    "camelcase-css"
+  ],
+  format: ["esm", "cjs"],
+});

packages/tailwind/tsconfig.json

@@ -0,0 +1,83 @@
+diff --git a/async.js b/async.js
+index 4c2f3c6c21e0b57be1fa5a751374f058f8234714..9026394d68a4accdcb3cee64430fc3fa03bbfe66 100644
+--- a/async.js
++++ b/async.js
+@@ -1,10 +1,10 @@
+-let postcss = require('postcss')
++let Processor = require('postcss/lib/processor')
+ 
+ let processResult = require('./process-result')
+ let parse = require('./parser')
+ 
+ module.exports = function async(plugins) {
+-  let processor = postcss(plugins)
++  let processor = new Processor(plugins)
+   return async input => {
+     let result = await processor.process(input, {
+       parser: parse,
+diff --git a/parser.js b/parser.js
+index 17ae264bb9f4461ebf9ce6466e9606c4cf5e66e3..fb36fbbf3a3931334a418ee9e66b2cbedfa2464d 100644
+--- a/parser.js
++++ b/parser.js
+@@ -1,4 +1,7 @@
+-let postcss = require('postcss')
++let Declaration = require('postcss/lib/declaration');
++let AtRule = require('postcss/lib/at-rule');
++let Rule = require('postcss/lib/rule');
++let Root = require('postcss/lib/root');
+ 
+ let IMPORTANT = /\s*!important\s*$/i
+ 
+@@ -53,14 +56,14 @@ function decl(parent, name, value) {
+ 
+   if (IMPORTANT.test(value)) {
+     value = value.replace(IMPORTANT, '')
+-    parent.push(postcss.decl({ prop: name, value, important: true }))
++    parent.push(new Declaration({ prop: name, value, important: true }))
+   } else {
+-    parent.push(postcss.decl({ prop: name, value }))
++    parent.push(new Declaration({ prop: name, value }))
+   }
+ }
+ 
+ function atRule(parent, parts, value) {
+-  let node = postcss.atRule({ name: parts[1], params: parts[3] || '' })
++  let node = new AtRule({ name: parts[1], params: parts[3] || '' })
+   if (typeof value === 'object') {
+     node.nodes = []
+     parse(value, node)
+@@ -88,7 +91,7 @@ function parse(obj, parent) {
+         decl(parent, name, i)
+       }
+     } else if (typeof value === 'object') {
+-      node = postcss.rule({ selector: name })
++      node = new Rule({ selector: name })
+       parse(value, node)
+       parent.push(node)
+     } else {
+@@ -98,7 +101,7 @@ function parse(obj, parent) {
+ }
+ 
+ module.exports = function (obj) {
+-  let root = postcss.root()
++  let root = new Root()
+   parse(obj, root)
+   return root
+ }
+diff --git a/sync.js b/sync.js
+index 745bd278cc7bb65aac13c1863244bad29282557d..3ea41890df69770f2467363355f87497df21fcc3 100644
+--- a/sync.js
++++ b/sync.js
+@@ -1,10 +1,10 @@
+-let postcss = require('postcss')
++let Processor = require('postcss/lib/processor')
+ 
+ let processResult = require('./process-result')
+ let parse = require('./parser')
+ 
+ module.exports = function (plugins) {
+-  let processor = postcss(plugins)
++  let processor = new Processor(plugins)
+   return input => {
+     let result = processor.process(input, { parser: parse, from: undefined })
+     return processResult(result)

packages/tailwind/tsup.config.ts

@@ -0,0 +1,11 @@
+diff --git a/index.js b/index.js
+index fe8618eb1355a0c3341ad7ecb49fd999d95ee229..97f7550a5008ab48de6ea4d1575c1ed93aa54b94 100644
+--- a/index.js
++++ b/index.js
+@@ -1,4 +1,5 @@
+-const { Rule, AtRule } = require('postcss')
++const Rule = require('postcss/lib/rule')
++const AtRule = require('postcss/lib/at-rule')
+ let parser = require('postcss-selector-parser')
+ 
+ /**