feat: change to use vite tool (#7)

nashtech-garage · Dec 16, 2024 · 770579d · 770579d
1 parent 8fcef70
commit 770579d
Show file tree

Hide file tree

Showing 21 changed files with 3,709 additions and 1,554 deletions.
diff --git a/.github/workflows/publish-nt-css.yml b/.github/workflows/publish-nt-css.yml
@@ -28,15 +28,12 @@ jobs:
                   export PNPM_HOME=$HOME/.local/share/pnpm
                   export PATH=$PNPM_HOME:$PATH
 
-            - name: Install postcss-cli globally
-              run: pnpm add -g postcss-cli
-
             - name: Install dependencies
               run: pnpm install
               working-directory: apps/nt-stylesheet
 
             - name: Build CSS framework
-              run: pnpm run build:css
+              run: pnpm run build
               working-directory: apps/nt-stylesheet
 
             - name: Publish to npm

diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+shared-workspace-lockfile=false
diff --git a/apps/nt-stylesheet/.npmrc b/apps/nt-stylesheet/.npmrc
@@ -0,0 +1 @@
+install-strategy=shallow
diff --git a/apps/nt-stylesheet/README.md b/apps/nt-stylesheet/README.md
@@ -35,7 +35,7 @@ You can customize nt-stylesheet by editing the `tailwind.config.js` file. Add yo
 
 ```js
 /** @type {import('tailwindcss').Config} */
-const ntTheme = require('nt-stylesheet/themes')
+const ntTheme = require('nt-stylesheet/dist/theme.cjs')
 
 module.exports = {
     content: ['*.{html,js}'],

diff --git a/apps/nt-stylesheet/index.html b/apps/nt-stylesheet/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+        />
+        <title>Vite with Tailwind CSS</title>
+        <link href="dist/theme.css" rel="stylesheet" />
+    </head>
+    <body>
+        <h1 class="text-neutral-10">Test Heading</h1>
+    </body>
+</html>
diff --git a/apps/nt-stylesheet/init-tailwind.js b/apps/nt-stylesheet/init-tailwind.js
@@ -0,0 +1,107 @@
+import fs from 'fs'
+import { exec } from 'child_process'
+import readline from 'readline'
+
+const isNotDevEnvironment =
+    !process.env.INIT_CWD || process.env.INIT_CWD !== process.cwd()
+
+const createTailwindConfig = (rl) => {
+    const tailwindConfigContent = `/** @type {import('tailwindcss').Config} */
+const ntTheme = require('nt-stylesheet/dist/theme.cjs');
+module.exports = {
+    content: ['*.{html,js}'],
+    theme: {
+        extend: ntTheme.theme.extend,
+    },
+    plugins: [],
+};
+    `
+    fs.writeFile(
+        'tailwind.config.js',
+        tailwindConfigContent,
+        (writeError) => {
+            if (writeError) {
+                console.error(
+                    `Error writing tailwind.config.js: ${writeError.message}`,
+                )
+                rl.close()
+                return
+            }
+            console.log(
+                'tailwind.config.js has been initialized and customized successfully!',
+            )
+            rl.close()
+        },
+    )
+}
+
+const createPostCSSConfig = (rl) => {
+    const postcssConfigContent = `module.exports = {
+    plugins: {
+        'postcss-import': {},
+        'tailwindcss/nesting': 'postcss-nesting',
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
+    `
+
+    fs.writeFile(
+        'postcss.config.js',
+        postcssConfigContent,
+        (writeError) => {
+            if (writeError) {
+                console.error(
+                    `Error writing postcss.config.js: ${writeError.message}`,
+                )
+                rl.close()
+                return
+            }
+            console.log(
+                'postcss.config.js has been created successfully!',
+            )
+            rl.close()
+        },
+    )
+}
+
+if (!isNotDevEnvironment) {
+    const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout,
+    })
+
+    rl.question(
+        'Do you want to initialize Tailwind CSS? (y/n) ',
+        (answer) => {
+            if (answer.toLowerCase() === 'y') {
+                exec('npx tailwindcss init', (error, _, stderr) => {
+                    if (error) {
+                        console.error(
+                            `Error initializing Tailwind CSS: ${error.message}`,
+                        )
+                        rl.close()
+                        return
+                    }
+                    if (stderr) {
+                        console.error(
+                            `Error initializing Tailwind CSS: ${stderr}`,
+                        )
+                        rl.close()
+                        return
+                    }
+
+                    createTailwindConfig(rl)
+                    createPostCSSConfig(rl)
+                })
+            } else {
+                console.log('Tailwind CSS initialization skipped.')
+                rl.close()
+            }
+        },
+    )
+} else {
+    console.log(
+        'Development environment detected, skipping Tailwind CSS initialization.',
+    )
+}
diff --git a/apps/nt-stylesheet/main.ts b/apps/nt-stylesheet/main.ts
@@ -0,0 +1,5 @@
+import './styles/styles.scss'
+
+import ntTheme from './themes'
+
+export default ntTheme
diff --git a/apps/nt-stylesheet/nx.json b/apps/nt-stylesheet/nx.json
@@ -1,5 +1,4 @@
 {
-    "$schema": "./node_modules/nx/schemas/nx-schema.json",
     "namedInputs": {
         "default": ["{projectRoot}/**/*", "sharedGlobals"],
         "production": ["default"],

diff --git a/apps/nt-stylesheet/package.json b/apps/nt-stylesheet/package.json
@@ -1,28 +1,42 @@
 {
     "name": "nt-stylesheet",
-    "version": "1.0.5-rc.4",
+    "version": "1.1.0",
     "description": "",
     "packageManager": "[email protected]",
     "scripts": {
-        "build:css": "pnpm exec postcss src/styles.scss -o dist/styles.css",
-        "publish:css": "pnpm rollup -c && npm publish dist/apps/nt-stylesheet"
+        "postinstall": "node init-tailwind.js",
+        "build": "pnpm vite build"
     },
     "engines": {
         "node": "20"
     },
     "keywords": [],
     "author": "",
     "license": "ISC",
+    "type": "module",
+    "files": [
+        "dist"
+    ],
+    "main": "./dist/theme.umd.cjs",
+    "module": "./dist/theme.js",
+    "exports": {
+        ".": {
+            "import": "./dist/theme.js",
+            "require": "./dist/theme.umd.cjs"
+        }
+    },
     "devDependencies": {
         "@types/node": "20.4.9",
-        "autoprefixer": "^10.4.20",
-        "nx": "^20.0.5",
-        "postcss": "^8.4.49",
-        "postcss-import": "^16.1.0",
-        "tailwindcss": "^3.4.0",
-        "typescript": "^5.6.3"
+        "nx": "^20.2.2",
+        "typescript": "^5.7.2",
+        "vite": "^6.0.3",
+        "vite-plugin-sass-dts": "^1.3.29"
     },
     "dependencies": {
-        "postcss-nesting": "^13.0.1"
+        "postcss": "^8.4.49",
+        "autoprefixer": "^10.4.20",
+        "postcss-import": "^16.1.0",
+        "postcss-nesting": "^13.0.1",
+        "tailwindcss": "^3.4.16"
     }
 }