@unizap/unicss 1.2.23 → 2.0.0

package/README.md

@@ -21,6 +21,8 @@ npm i @unizap/unicss
 
 ## ⚡ Usage
 
+### CLI Usage
+
 Generate your CSS file:
 
 ```sh
@@ -33,6 +35,50 @@ Or watch for changes and output to a custom file:
 npx unicss -w -o src/output.css
 ```
 
+### Vite Integration
+
+UniCSS now supports seamless integration with Vite! Add the plugin to your `vite.config.js`:
+
+```js
+import { defineConfig } from 'vite';
+import unicss from '@unizap/unicss/vite-plugin-unicss';
+
+export default defineConfig({
+  plugins: [
+    unicss({
+      output: 'src/unicss.css',  // Output path for generated CSS
+      skipBase: false             // Optional: skip base styles
+    })
+  ]
+});
+```
+
+Then import the generated CSS in your main entry file:
+
+```js
+import './unicss.css';
+```
+
+Run Vite in development mode:
+
+```sh
+npm run dev
+```
+
+The plugin will:
+- Automatically scan all `.html`, `.js`, `.jsx`, `.ts`, `.tsx`, `.vue`, and `.svelte` files
+- Generate CSS based on the utility classes found
+- Regenerate CSS on file changes with Hot Module Replacement (HMR)
+
+### PostCSS Support
+
+UniCSS includes PostCSS configuration with the following plugins:
+- `postcss-import` - Inline @import rules
+- `postcss-nested` - Unwrap nested rules
+- `autoprefixer` - Add vendor prefixes automatically
+
+You can customize the PostCSS configuration by editing `postcss.config.js` in your project root.
+
 ---
 
 ## 🧩 Features
@@ -41,6 +87,32 @@ npx unicss -w -o src/output.css
 - Automatic CSS filter utilities (e.g. `blur-lg`, `brightness-150`)
 - Fast, modern, and easy to integrate
 - Supports custom output paths and watch mode
+- Vite plugin for seamless integration
+- PostCSS support with autoprefixer, nesting, and imports
+- Hot module replacement (HMR) in development
+
+---
+
+## 🔧 Development & Publishing
+
+### Building the package
+
+```sh
+npm run build
+```
+
+This creates:
+- `dist/index.js` - Node.js bundle for CLI
+- `dist/unicss.min.js` - Browser CDN bundle
+
+### Publishing to npm
+
+```sh
+npm run build
+npm publish
+```
+
+See [PUBLISHING.md](./PUBLISHING.md) for detailed instructions.
 
 ---
 

package/package.json

@@ -1,27 +1,48 @@
 {
   "name": "@unizap/unicss",
-  "version": "1.2.23",
+  "version": "2.0.0",
   "description": "Unicss: Build sleek interfaces straight from your markup. Fast, modern, utility-first CSS framework for rapid UI development.",
   "main": "dist/index.js",
   "unpkg": "dist/unicss.min.js",
+  "type": "commonjs",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./vite-plugin-unicss": {
+      "require": "./vite-plugin-unicss.js",
+      "default": "./vite-plugin-unicss.js"
+    },
+    "./postcss.config.js": "./postcss.config.js"
+  },
   "bin": {
     "unicss": "bin/index.js"
   },
   "files": [
     "dist/index.js",
     "dist/unicss.min.js",
-    "bin"
+    "bin",
+    "vite-plugin-unicss.js",
+    "postcss.config.js"
   ],
   "scripts": {
     "build": "node build.js",
-    "prepublishOnly": "npm version patch",
+    "build:vite": "vite build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "test:package": "node test-package.js",
+    "prepublishOnly": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
     "css",
     "utility-first",
     "css-framework",
-    "filters"
+    "filters",
+    "vite",
+    "postcss",
+    "vite-plugin"
   ],
   "author": "Unizap",
   "license": "MIT",
@@ -30,12 +51,17 @@
     "chokidar": "^3.6.0"
   },
   "devDependencies": {
-    "esbuild": "^0.25.8",
     "@babel/parser": "^7.28.0",
     "@babel/traverse": "^7.28.0",
+    "autoprefixer": "^10.4.21",
     "deepmerge": "^4.3.1",
+    "esbuild": "^0.25.8",
     "fs": "0.0.1-security",
     "glob": "^11.0.3",
-    "path": "^0.12.7"
+    "path": "^0.12.7",
+    "postcss": "^8.5.6",
+    "postcss-import": "^16.1.1",
+    "postcss-nested": "^7.0.2",
+    "vite": "^7.1.12"
   }
 }

package/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'postcss-nested': {},
+    'autoprefixer': {}
+  }
+};

package/vite-plugin-unicss.js

@@ -0,0 +1,83 @@
+const fs = require('fs');
+const path = require('path');
+const generateCSS = require('./dist/index.js');
+
+/**
+ * Vite plugin for UniCSS integration
+ * @param {Object} options - Plugin options
+ * @param {string} options.output - Output CSS file path (default: 'src/unicss.css')
+ * @param {boolean} options.skipBase - Skip base CSS styles (default: false)
+ * @returns {import('vite').Plugin}
+ */
+function unicssPlugin(options = {}) {
+  const {
+    output = 'src/unicss.css',
+    skipBase = false
+  } = options;
+
+  let isWatching = false;
+  const outputPath = path.resolve(process.cwd(), output);
+
+  function generateAndWrite() {
+    try {
+      const css = generateCSS({ skipBase });
+      const outDir = path.dirname(outputPath);
+
+      if (!fs.existsSync(outDir)) {
+        fs.mkdirSync(outDir, { recursive: true });
+      }
+
+      fs.writeFileSync(outputPath, css);
+      console.log(`UniCSS generated at ${output}`);
+      return true;
+    } catch (error) {
+      console.error(`UniCSS generation failed: ${error.message}`);
+      return false;
+    }
+  }
+
+  return {
+    name: 'vite-plugin-unicss',
+
+    configResolved(resolvedConfig) {
+      // Determine if we're in dev mode (watch mode)
+      isWatching = resolvedConfig.command === 'serve';
+    },
+
+    buildStart() {
+      // Generate CSS on build start
+      if (!generateAndWrite()) {
+        this.error('UniCSS generation failed');
+      }
+
+      // Add output file to watch list
+      if (fs.existsSync(outputPath)) {
+        this.addWatchFile(outputPath);
+      }
+    },
+
+    handleHotUpdate({ file, server }) {
+      // Regenerate CSS when watched files change
+      if (isWatching && (
+        file.endsWith('.html') ||
+        file.endsWith('.js') ||
+        file.endsWith('.jsx') ||
+        file.endsWith('.ts') ||
+        file.endsWith('.tsx') ||
+        file.endsWith('.vue') ||
+        file.endsWith('.svelte')
+      )) {
+        console.log('File changed, regenerating UniCSS...');
+        generateAndWrite();
+
+        // Trigger HMR for the CSS file
+        server.ws.send({
+          type: 'full-reload',
+          path: '*'
+        });
+      }
+    }
+  };
+}
+
+module.exports = unicssPlugin;