✨ feat: init project

yunsii · Aug 26, 2023 · 1d73f32 · 1d73f32
1 parent 9ca8e41
commit 1d73f32
Show file tree

Hide file tree

Showing 17 changed files with 742 additions and 96 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,5 @@
 {
-  "cSpell.words": ["bumpp", "nuxt"]
+  "cSpell.words": ["bumpp", "nuxt"],
+  "tailwindCSS.experimental.classRegex": ["cls`([^`]*)"],
+  "css.lint.unknownAtRules": "ignore"
 }
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
     "vite",
     "webpack",
     "rollup",
-    "transform"
+    "transform",
+    "tagged-template"
   ],
   "exports": {
     ".": {
@@ -117,6 +118,7 @@
     }
   },
   "dependencies": {
+    "gogocode": "^1.0.55",
     "unplugin": "^1.4.0"
   },
   "devDependencies": {
@@ -131,6 +133,7 @@
     "@types/node": "^20.5.2",
     "bumpp": "^9.2.0",
     "chalk": "^5.3.0",
+    "clsx": "^2.0.0",
     "eslint": "^8.47.0",
     "eslint-config-prettier": "^8.10.0",
     "esno": "^0.17.0",

diff --git a/playground/cls.ts b/playground/cls.ts
@@ -0,0 +1,30 @@
+import clsx from 'clsx'
+
+function normalizeStrings(strings: string[]) {
+  const result: string[] = []
+  strings.forEach((stringItem) => {
+    stringItem
+      .split('\n')
+      .map((item) => item.trim())
+      // 支持使用 // 的行注释
+      .filter((item) => !item.startsWith('//') && !!item)
+      .forEach((item) => result.push(item))
+  })
+  return result
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates
+export default function cls(
+  strings: TemplateStringsArray,
+  ...expressions: any[]
+) {
+  const classNamesList = strings.reduce((prev, current, currentIndex) => {
+    const expression = expressions[currentIndex] || ''
+    prev.push(current, clsx(expression))
+    return prev
+  }, [] as string[])
+  const result = normalizeStrings(classNamesList).join(' ')
+  return result
+}
+
+export { cls, clsx }
diff --git a/playground/global.css b/playground/global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/playground/index.html b/playground/index.html
@@ -1,13 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
-<body>
-  <div id="app"></div>
-  <a href="/__inspect/module?id=./main.ts&index=2" target="_blank" style="text-decoration: none; margin-top:10px; display: block;">visit /__inspect/ to inspect the intermediate state</a>
-  <script type="module" src="./main.ts"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <a
+      href="/__inspect/module?id=./main.ts&index=2"
+      class="text-blue-500"
+      target="_blank"
+      style="text-decoration: none; margin-top: 10px; display: block"
+      >visit /__inspect/ to inspect the intermediate state</a
+    >
+    <script type="module" src="./main.ts"></script>
+  </body>
 </html>
diff --git a/playground/main.ts b/playground/main.ts
@@ -1 +1,23 @@
+import './global.css'
+
+import { cls } from './cls'
+
+const p1 = document.createElement('p')
+p1.className = cls`
+  cursor-pointer
+  font-bold text-xl
+  text-sky-500
+  hover:text-sky-600
+`
+p1.innerText = 'Hello, world.'
+
+const p2 = document.createElement('p')
+p2.className = cls`
+  font-bold text-xl
+  ${1}
+`
+p2.innerText = 'Today is great day.'
+
 document.getElementById('app')!.innerHTML = '__UNPLUGIN__'
+document.getElementById('app')!.appendChild(p1)
+document.getElementById('app')!.appendChild(p2)
diff --git a/playground/package.json b/playground/package.json
@@ -1,9 +1,14 @@
 {
   "private": true,
   "scripts": {
-    "dev": "nodemon -w '../src/**/*.ts' -e .ts -x vite"
+    "dev": "nodemon -w '../src/**/*.ts' -e .ts -x vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.15",
+    "postcss": "^8.4.28",
+    "tailwindcss": "^3.3.3",
     "vite": "^4.4.9",
     "vite-plugin-inspect": "^0.7.38"
   }

diff --git a/playground/postcss.config.js b/playground/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/playground/tailwind.config.js b/playground/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./**/*.ts', './**/*.html'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -4,5 +4,10 @@ import Inspect from 'vite-plugin-inspect'
 import Unplugin from '../src/vite'
 
 export default defineConfig({
-  plugins: [Inspect(), Unplugin()],
+  plugins: [
+    Inspect(),
+    Unplugin({
+      cssTags: ['cls'],
+    }),
+  ],
 })