@melcanz85/chaincss 1.9.5 → 1.10.0

package/package.json

@@ -1,31 +1,42 @@
 {
   "name": "@melcanz85/chaincss",
-  "version": "1.9.5",
+  "version": "1.10.0",
   "description": "A simple package transpiler for js to css",
-  "main": "index.js",
-  "module": "index.react.js",
   "exports": {
     ".": {
-      "require": "./index.js",
-      "import": "./index.react.js"
+      "types": "./types.d.ts",
+      "node": {
+        "require": "./node/index.js"
+      },
+      "browser": {
+        "import": "./browser/index.js"
+      },
+      "default": "./browser/index.js"
+    },
+    "./node": {
+      "types": "./types.d.ts",
+      "require": "./node/index.js"
+    },
+    "./browser": {
+      "types": "./types.d.ts",
+      "import": "./browser/index.js"
     },
     "./react": {
-      "import": "./index.react.js"
+      "types": "./types.d.ts",
+      "browser": {
+        "import": "./browser/index.js"
+      },
+      "default": "./browser/index.js"
     }
   },
   "types": "types.d.ts",
   "files": [
-    "index.js",
-    "index.react.js",
-    "chaincss.js",
-    "transpiler.js",
-    "tokens.js",
-    "react-hooks.js",
-    "strVal.js",
-    "atomic-optimizer.js",
-    "cache-manager.js",
-    "prefixer.js",
-    "types.d.ts"
+    "node/",
+    "browser/",
+    "shared/",
+    "types.d.ts",
+    "README.md",
+    "LICENSE"
   ],
   "publishConfig": {
     "access": "public",
@@ -37,7 +48,7 @@
   },
   "homepage": "https://melcanz08.github.io/chaincss-website",
   "bin": {
-    "chaincss": "chaincss.js"
+    "chaincss": "./node/chaincss.js"
   },
   "dependencies": {
     "chokidar": "^3.5.3",
@@ -68,7 +79,9 @@
     "css",
     "js",
     "transpiler",
-    "compiler"
+    "compiler",
+    "css-in-js",
+    "react"
   ],
   "author": "Rommel Caneos",
   "license": "MIT"

package/shared/tokens.mjs

@@ -0,0 +1,256 @@
+class DesignTokens {
+  constructor(tokens = {}) {
+    this.tokens = this.deepFreeze({
+      colors: {},
+      spacing: {},
+      typography: {},
+      breakpoints: {},
+      zIndex: {},
+      shadows: {},
+      borderRadius: {},
+      ...tokens
+    });
+    
+    this.flattened = this.flattenTokens(this.tokens);
+  }
+
+  // Deep freeze to prevent accidental modifications
+  deepFreeze(obj) {
+    Object.keys(obj).forEach(key => {
+      if (typeof obj[key] === 'object' && obj[key] !== null) {
+        this.deepFreeze(obj[key]);
+      }
+    });
+    return Object.freeze(obj);
+  }
+
+  // Flatten nested tokens for easy access
+  flattenTokens(obj, prefix = '') {
+    return Object.keys(obj).reduce((acc, key) => {
+      const prefixed = prefix ? `${prefix}.${key}` : key;
+      
+      if (typeof obj[key] === 'object' && obj[key] !== null) {
+        Object.assign(acc, this.flattenTokens(obj[key], prefixed));
+      } else {
+        acc[prefixed] = obj[key];
+      }
+      
+      return acc;
+    }, {});
+  }
+
+  // Get token value by path (e.g., 'colors.primary')
+  get(path, defaultValue = '') {
+    return this.flattened[path] || defaultValue;
+  }
+
+  // Generate CSS variables from tokens
+  toCSSVariables(prefix = 'chain') {
+    let css = ':root {\n';
+    
+    Object.entries(this.flattened).forEach(([key, value]) => {
+      const varName = `--${prefix}-${key.replace(/\./g, '-')}`;
+      css += `  ${varName}: ${value};\n`;
+    });
+    
+    css += '}\n';
+    return css;
+  }
+
+  // Create a theme variant
+  createTheme(name, overrides) {
+    const themeTokens = { ...this.flattened };
+    
+    Object.entries(overrides).forEach(([key, value]) => {
+      if (themeTokens[key]) {
+        themeTokens[key] = value;
+      }
+    });
+    
+    return new DesignTokens(this.expandTokens(themeTokens));
+  }
+
+  // Expand flattened tokens back to nested structure
+  expandTokens(flattened) {
+    const result = {};
+    
+    Object.entries(flattened).forEach(([key, value]) => {
+      const parts = key.split('.');
+      let current = result;
+      
+      for (let i = 0; i < parts.length - 1; i++) {
+        current[parts[i]] = current[parts[i]] || {};
+        current = current[parts[i]];
+      }
+      
+      current[parts[parts.length - 1]] = value;
+    });
+    
+    return result;
+  }
+}
+
+// Default tokens
+const defaultTokens = {
+  colors: {
+    primary: '#667eea',
+    secondary: '#764ba2',
+    success: '#48bb78',
+    danger: '#f56565',
+    warning: '#ed8936',
+    info: '#4299e1',
+    light: '#f7fafc',
+    dark: '#1a202c',
+    white: '#ffffff',
+    black: '#000000',
+    gray: {
+      100: '#f7fafc',
+      200: '#edf2f7',
+      300: '#e2e8f0',
+      400: '#cbd5e0',
+      500: '#a0aec0',
+      600: '#718096',
+      700: '#4a5568',
+      800: '#2d3748',
+      900: '#1a202c'
+    }
+  },
+  
+  spacing: {
+    0: '0',
+    1: '0.25rem',
+    2: '0.5rem',
+    3: '0.75rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem',
+    8: '2rem',
+    10: '2.5rem',
+    12: '3rem',
+    16: '4rem',
+    20: '5rem',
+    24: '6rem',
+    32: '8rem',
+    40: '10rem',
+    48: '12rem',
+    56: '14rem',
+    64: '16rem',
+    xs: '0.5rem',
+    sm: '1rem',
+    md: '1.5rem',
+    lg: '2rem',
+    xl: '3rem',
+    '2xl': '4rem',
+    '3xl': '6rem'
+  },
+  
+  typography: {
+    fontFamily: {
+      sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+      serif: 'Georgia, Cambria, "Times New Roman", Times, serif',
+      mono: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+    },
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem'
+    },
+    fontWeight: {
+      hairline: '100',
+      thin: '200',
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900'
+    },
+    lineHeight: {
+      none: '1',
+      tight: '1.25',
+      snug: '1.375',
+      normal: '1.5',
+      relaxed: '1.625',
+      loose: '2'
+    }
+  },
+  
+  breakpoints: {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px'
+  },
+  
+  zIndex: {
+    0: '0',
+    10: '10',
+    20: '20',
+    30: '30',
+    40: '40',
+    50: '50',
+    auto: 'auto',
+    dropdown: '1000',
+    sticky: '1020',
+    fixed: '1030',
+    modal: '1040',
+    popover: '1050',
+    tooltip: '1060'
+  },
+  
+  shadows: {
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+    inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+    none: 'none'
+  },
+  
+  borderRadius: {
+    none: '0',
+    sm: '0.125rem',
+    base: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    xl: '0.75rem',
+    '2xl': '1rem',
+    '3xl': '1.5rem',
+    full: '9999px'
+  }
+};
+
+// Create and export tokens instance
+const tokens = new DesignTokens(defaultTokens);
+
+// Token utility functions
+const createTokens = (customTokens) => {
+  return new DesignTokens(customTokens);
+};
+
+// Generate responsive values
+const responsive = (values) => {
+  if (typeof values === 'string') return values;
+  
+  return Object.entries(values).map(([breakpoint, value]) => {
+    if (breakpoint === 'base') return value;
+    return `@media (min-width: ${tokens.get(`breakpoints.${breakpoint}`)}) { ${value} }`;
+  }).join(' ');
+};
+
+export {
+  tokens,
+  createTokens,
+  responsive,
+  DesignTokens
+};

package/types.d.ts

@@ -7,6 +7,9 @@ declare module '@melcanz85/chaincss' {
     [cssProperty: string]: any;
   }
 
+  export const createTokens: any;
+  export const responsive: any;
+
   // Base interface for CSS properties (dynamic)
   export interface CSSPropertyBuilder {
     [key: string]: (value: string | number) => ChainBuilder;

package/index.js

@@ -1,24 +0,0 @@
-const { $, run, compile, chain, tokens, createTokens } = require('./transpiler');
-const { processor, watch } = require('./chaincss');
-
-// Conditionally export React hooks if in React environment
-let reactHooks = {};
-try {
-  // Check if React is available
-  require.resolve('react');
-  reactHooks = require('./react-hooks');
-} catch {
-
-}
-
-module.exports = {
-  $,
-  run,
-  compile,
-  processor,
-  watch,
-  chain,
-  tokens,
-  createTokens,
-  ...reactHooks
-};

package/index.react.js

@@ -1,4 +0,0 @@
-export * from './react-hooks';
-
-// Re-export core for convenience
-export { $, tokens, createTokens } from './transpiler';