@elmoorx/css 2.0.0-alpha.25

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Wafra Framework
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+# @wafra/css
+
+> Zero-runtime CSS system with atomic classes, theming, RTL support
+
+Part of the [Wafra Framework](https://github.com/wafra/framework) — Build fast. Run anywhere. Stay secure.
+
+## Installation
+
+```bash
+npm install @wafra/css
+```
+
+## Quick Start
+
+```typescript
+import { /* exports */ } from '@wafra/css';
+```
+
+## Features
+
+- Zero external dependencies
+- Full TypeScript support
+- Tree-shakeable
+- Edge-runtime compatible
+- Arabic/RTL friendly
+
+## Documentation
+
+See [https://wafra.dev/docs/css](https://wafra.dev/docs/css)
+
+## License
+
+MIT © Wafra Framework

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@elmoorx/css",
+  "version": "2.0.0-alpha.25",
+  "description": "Zero-runtime CSS system with atomic classes, theming, RTL support",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "build": "tsc"
+  },
+  "license": "MIT",
+  "author": "Wafra Framework",
+  "homepage": "https://wafra.dev/packages/css",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wafra/framework",
+    "directory": "packages/css"
+  },
+  "bugs": {
+    "url": "https://github.com/wafra/framework/issues"
+  },
+  "keywords": [
+    "wafra",
+    "framework",
+    "css"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts"
+  }
+}

package/src/index.ts

@@ -0,0 +1,180 @@
+/**
+ * Wafra CSS — Scoped styles + CSS Modules
+ * ============================================
+ * Two approaches, zero runtime cost:
+ *
+ *   1. Scoped <style> in components (auto-scoped by attribute)
+ *
+ *     <style scoped>
+ *       .btn { background: purple; }
+ *     </style>
+ *     <button class="btn">Click</button>
+ *
+ *     → Compiles to:
+ *     <style>.btn[data-wafra-abc123] { background: purple; }</style>
+ *     <button class="btn" data-wafra-abc123>Click</button>
+ *
+ *   2. CSS Modules (className hashing)
+ *
+ *     import styles from './Button.module.css';
+ *     <button class={styles.btn}>Click</button>
+ *
+ *     → styles.btn = "Button_btn_abc123"
+ */
+
+import { readFileSync, existsSync, mkdirSync, writeFileSync } from "node:fs";
+import { join, dirname, basename, extname } from "node:path";
+import { createHash } from "node:crypto";
+
+export interface CompiledCss {
+  // The transformed CSS — class names hashed, selectors scoped
+  css: string;
+  // Map of original className → hashed className
+  mappings: Record<string, string>;
+}
+
+/**
+ * Compile a CSS Module file.
+ * Hashes class names so they're unique per file.
+ *
+ *   const { css, mappings } = compileCssModule('./Button.module.css');
+ *   // mappings: { btn: 'Button_btn_a1b2c3', card: 'Button_card_d4e5f6' }
+ */
+export function compileCssModule(filePath: string): CompiledCss {
+  if (!existsSync(filePath)) {
+    return { css: "", mappings: {} };
+  }
+
+  const source = readFileSync(filePath, "utf-8");
+  const baseName = basename(filePath, extname(filePath));
+  const fileHash = createHash("md5")
+    .update(source)
+    .digest("hex")
+    .slice(0, 6);
+
+  const mappings: Record<string, string> = {};
+
+  // Find all class names
+  const classRegex = /\.([a-zA-Z_][a-zA-Z0-9_-]*)/g;
+  const classNames = new Set<string>();
+  let match: RegExpExecArray | null;
+  while ((match = classRegex.exec(source)) !== null) {
+    classNames.add(match[1]);
+  }
+
+  // Build mappings
+  for (const cls of classNames) {
+    mappings[cls] = `${baseName}_${cls}_${fileHash}`;
+  }
+
+  // Replace .className with .hashedName
+  let css = source;
+  for (const [original, hashed] of Object.entries(mappings)) {
+    css = css.replace(
+      new RegExp(`\\.${original}\\b`, "g"),
+      `.${hashed}`
+    );
+  }
+
+  return { css, mappings };
+}
+
+/**
+ * Compile scoped CSS — auto-scoped by a unique data attribute.
+ * Used internally by the compiler when it encounters <style scoped>.
+ */
+export function compileScopedCss(
+  source: string,
+  componentId: string
+): string {
+  // Add [data-wafra-<id>] to every selector
+  // Simple approach: split on `{` and modify each selector
+  return source.replace(
+    /([^{}]+)\{/g,
+    (_, selectors: string) => {
+      const scoped = selectors
+        .split(",")
+        .map((s) => {
+          const trimmed = s.trim();
+          if (!trimmed) return trimmed;
+          // Don't scope :global() selectors
+          if (trimmed.startsWith(":global")) {
+            return trimmed.replace(/^:global\(/, "").replace(/\)$/, "");
+          }
+          // Don't scope @keyframes, @media, etc.
+          if (trimmed.startsWith("@")) return trimmed;
+          // Add data attribute to the last selector
+          return `${trimmed}[data-wafra-${componentId}]`;
+        })
+        .join(", ");
+      return `  ${scoped} {`;
+    }
+  );
+}
+
+/**
+ * Generate a unique component ID for scoped CSS.
+ */
+export function generateComponentId(filePath: string): string {
+  return createHash("md5")
+    .update(filePath)
+    .digest("hex")
+    .slice(0, 8);
+}
+
+/**
+ * Bundle all CSS into a single file.
+ */
+export function bundleCss(cssFiles: string[]): string {
+  return cssFiles.join("\n\n/* === next file === */\n\n");
+}
+
+/**
+ * Minify CSS (very simplified — production would use lightningcss).
+ */
+export function minifyCss(css: string): string {
+  return css
+    .replace(/\/\*[\s\S]*?\*\//g, "")  // comments
+    .replace(/\s+/g, " ")               // whitespace
+    .replace(/\s*([{}:;,])\s*/g, "$1")  // around punctuation
+    .replace(/;}/g, "}")                // trailing semicolons
+    .trim();
+}
+
+/**
+ * Process a Wafra component file with <style scoped> blocks.
+ * Extracts the CSS, scopes it, and replaces the block with nothing
+ * (the CSS gets bundled into the global stylesheet).
+ */
+export function processComponentStyles(
+  source: string,
+  filePath: string
+): { code: string; css: string } {
+  const componentId = generateComponentId(filePath);
+  let extractedCss = "";
+  let code = source;
+
+  // Extract <style scoped>...</style> blocks
+  const styleRegex = /<style\s+scoped>([\s\S]*?)<\/style>/g;
+  code = code.replace(styleRegex, (_, css: string) => {
+    const scoped = compileScopedCss(css, componentId);
+    extractedCss += scoped + "\n";
+    return "";
+  });
+
+  // Also extract regular <style> blocks (not scoped)
+  const plainStyleRegex = /<style>([\s\S]*?)<\/style>/g;
+  code = code.replace(plainStyleRegex, (_, css: string) => {
+    extractedCss += css + "\n";
+    return "";
+  });
+
+  // Inject data-wafra-<id> attribute on the root element
+  // (In a real impl, the compiler would do this automatically)
+  code = code.replace(
+    /return\s+h\s*\(\s*['"](\w+)['"]\s*,\s*\{/,
+    (match, tag) => `${match} 'data-wafra-${componentId}': '',`
+  );
+
+  return { code, css: extractedCss };
+}