@unizap/unicss 2.0.2 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unizap/unicss",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "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",
@@ -28,7 +28,8 @@
     "dist/unicss.min.js",
     "bin",
     "vite-plugin-unicss.js",
-    "postcss.config.js"
+    "postcss.config.js",
+    "postcss-plugin.js"
   ],
   "scripts": {
     "build": "node build.js",

package/postcss-plugin.js

@@ -0,0 +1,141 @@
+const generateCSS = require('./dist/index.js');
+const glob = require('glob');
+const path = require('path');
+
+/**
+ * PostCSS plugin for UniCSS
+ * Processes @unicss directives and generates utility classes
+ *
+ * Usage in postcss.config.js:
+ * module.exports = {
+ *   plugins: {
+ *     '@unizap/unicss': { skipBase: false },
+ *     autoprefixer: {}
+ *   }
+ * }
+ *
+ * Usage in CSS:
+ * @unicss base;
+ * @unicss utilities;
+ *
+ * Or simply:
+ * @unicss;
+ */
+module.exports = (opts = {}) => {
+  const skipBase = opts.skipBase || false;
+
+  return {
+    postcssPlugin: 'unicss',
+
+    Once(root, { result }) {
+      // Add all source files to dependencies so PostCSS/Webpack/Vite watches them
+      const sourceFiles = getAllSourceFiles();
+      sourceFiles.forEach(file => {
+        result.messages.push({
+          type: 'dependency',
+          plugin: 'unicss',
+          file: file,
+          parent: result.opts.from
+        });
+      });
+      let hasUnicssDirective = false;
+      let baseDirective = null;
+      let utilitiesDirective = null;
+      let fullDirective = null;
+
+      // Find @unicss directives
+      root.walkAtRules('unicss', (rule) => {
+        hasUnicssDirective = true;
+        const param = rule.params.trim();
+
+        if (param === 'base') {
+          baseDirective = rule;
+        } else if (param === 'utilities') {
+          utilitiesDirective = rule;
+        } else if (param === '' || param === 'all') {
+          fullDirective = rule;
+        } else {
+          rule.warn(result, `Unknown @unicss directive: "${param}". Use "base", "utilities", or leave empty.`);
+        }
+      });
+
+      // If no directives found, do nothing
+      if (!hasUnicssDirective) {
+        return;
+      }
+
+      try {
+        // Generate CSS
+        const generatedCSS = generateCSS({ skipBase });
+
+        // Parse the generated CSS into AST
+        const postcss = require('postcss');
+        const generatedRoot = postcss.parse(generatedCSS);
+
+        // If there's a full directive (@unicss or @unicss all), replace it with everything
+        if (fullDirective) {
+          fullDirective.replaceWith(generatedRoot.nodes);
+        } else {
+          // Handle separate base and utilities directives
+          if (baseDirective) {
+            // Extract base styles (everything before utility classes)
+            const baseCSS = extractBaseStyles(generatedCSS);
+            const baseRoot = postcss.parse(baseCSS);
+            baseDirective.replaceWith(baseRoot.nodes);
+          }
+
+          if (utilitiesDirective) {
+            // Extract utility styles
+            const utilitiesCSS = extractUtilities(generatedCSS);
+            const utilitiesRoot = postcss.parse(utilitiesCSS);
+            utilitiesDirective.replaceWith(utilitiesRoot.nodes);
+          }
+        }
+      } catch (error) {
+        throw root.error(`UniCSS generation failed: ${error.message}`);
+      }
+    }
+  };
+};
+
+module.exports.postcss = true;
+
+/**
+ * Get all source files that should trigger CSS regeneration
+ */
+function getAllSourceFiles() {
+  const cwd = process.cwd();
+  const extensions = ['html', 'js', 'jsx', 'ts', 'tsx', 'vue', 'svelte'];
+  const files = [];
+
+  extensions.forEach(ext => {
+    const matches = glob.sync(`**/*.${ext}`, {
+      cwd: cwd,
+      absolute: true,
+      ignore: ['**/node_modules/**', '**/dist/**', '**/build/**', '**/.next/**']
+    });
+    files.push(...matches);
+  });
+
+  return files;
+}
+
+/**
+ * Extract base styles from generated CSS
+ * For now, we just return the full CSS when base is requested
+ * TODO: Implement intelligent splitting between base and utilities
+ */
+function extractBaseStyles(css) {
+  // Return full CSS for now - users can use @unicss without params for everything
+  return css;
+}
+
+/**
+ * Extract utility classes from generated CSS
+ * For now, we just return the full CSS when utilities is requested
+ * TODO: Implement intelligent splitting between base and utilities
+ */
+function extractUtilities(css) {
+  // Return full CSS for now - users can use @unicss without params for everything
+  return css;
+}