@melcanz85/chaincss 1.7.3 → 1.9.0

package/transpiler.js

@@ -1,203 +1,173 @@
 const path = require('path');
 const fs = require('fs');
+const tokenModule = require('./tokens');
+const tokens = tokenModule.tokens;
+
 const chain = {
-  cssOutput : undefined,
+  cssOutput: undefined,
   catcher: {},
-
-  // Backgrounds
-  bg(bg){ this.catcher.background = bg; return this; },
-  bgColor(bgc){ this.catcher.backgroundColor = bgc; return this; },
-  bgImage(bgi){ this.catcher.backgroundImage = bgi; return this; },
-  bgRepeat(bgr){ this.catcher.backgroundRepeat = bgr; return this; },
-  bgAttachment(bga){ this.catcher.backgroundAttachment = bga; return this; },
-  bgPosition(bgp){ this.catcher.backgroundPosition = bgp; return this; },
-
-  // Border
-  border(b){ this.catcher.border = b; return this; },
-  borderStyle(bs){ this.catcher.borderStyle = bs; return this; },
-  borderWidth(bw){ this.catcher.borderWidth = bw; return this; },
-  borderColor(bc){ this.catcher.borderColor = bc; return this; },
-  borderRadius(br){ this.catcher.borderRadius = br; return this; },
-  borderSideStyle(side, value){
-    if (side === 'top') {
-      this.catcher.borderTopStyle = value;
-    } else if (side === 'right') {
-      this.catcher.borderRightStyle = value;
-    } else if (side === 'bottom') {
-      this.catcher.borderBottomStyle = value;
-    } else if (side === 'left') {
-      this.catcher.borderLeftStyle = value;
+  cachedValidProperties: [],
+
+  // Initialize properties synchronously
+  initializeProperties() {
+    try {
+      const jsonPath = path.join(__dirname, 'css-properties.json');
+      if (fs.existsSync(jsonPath)) {
+        const data = fs.readFileSync(jsonPath, 'utf8');
+        this.cachedValidProperties = JSON.parse(data);
+        
+      } else {
+        console.log('⚠️ CSS properties not cached, will load on first use');
+      }
+    } catch (error) {
+      console.error('Error loading CSS properties:', error.message);
     }
-    return this;
   },
 
-   // Margin
-  margin(m){ this.catcher.margin = m; return this; },
-  marginTop(mt){ this.catcher.marginTop = mt; return this; },
-  marginRight(mr){ this.catcher.marginRight = mr; return this; },
-  marginBottom(mb){ this.catcher.marginBottom = mb; return this; },
-  marginLeft(ml){ this.catcher.marginLeft = ml; return this; },
-
-  // Padding
-  padding(p){ this.catcher.padding = p; return this; },
-  paddingTop(pt){ this.catcher.paddingTop = pt; return this; },
-  paddingRight(pr){ this.catcher.paddingRight = pr; return this; },
-  paddingBottom(pb){ this.catcher.paddingBottom = pb; return this; },
-  paddingLeft(pl){ this.catcher.paddingLeft = pl; return this; },
-
-  // Height, Width and Max-width
-  width(w){ this.catcher.width = w; return this; },
-  minWidth(mnw){ this.catcher.minWidth = mnw; return this; },
-  maxWidth(mxw){ this.catcher.maxWidth = mxw; return this; },
-  height(h){ this.catcher.height = h; return this; },
-  minHeight(mnh){ this.catcher.minHeight = mnh; return this; },
-  maxHeight(mxh){ this.catcher.maxHeight = mxh; return this; },
-
-  // Outline
-  outline(o){ this.catcher.outline = o; return this; },
-  outlineColor(oc){ this.catcher.outlineColor = oc; return this; },
-  outlineStyle(os){ this.catcher.outlineStyle = os; return this; },
-  outlineWidth(ow){ this.catcher.outlineWidth = ow; return this; },
-  outlineOffset(oo){ this.catcher.outlineOffset = oo; return this; },
-
-  // Text 
-  color(c){ this.catcher.color = c; return this; },
-  direction(d){ this.catcher.direction = d; return this; },
-  unicodeBidi(ub){ this.catcher.unicodeBidi = ub; return this; },
-  verticalAlign(va){ this.catcher.verticalAlign = va; return this; },
-  textTransform(t){ this.catcher.textTransform = t; return this; },
-  textShadow(s){ this.catcher.textShadow = s; return this; },
-  textAlign(ta){ this.catcher.textAlign = ta; return this; },
-  textAlignLast(tal){ this.catcher.textAlignLast = tal; return this; },
-  textDecoration(value, style){
-    if (style === undefined) {
-      this.catcher.textDecoration = value;
-    } else {
-      this.catcher.textDecorationStyle = value;
+  async getCSSProperties() {
+    try {
+      const jsonPath = path.join(__dirname, 'css-properties.json');
+      
+      // Check if file already exists
+      try {
+        await fs.promises.access(jsonPath);
+        const existingData = await fs.promises.readFile(jsonPath, 'utf8');
+        const objProp = JSON.parse(existingData);
+        this.cachedValidProperties = objProp;
+        return objProp;
+      } catch {
+        const url = 'https://raw.githubusercontent.com/mdn/data/main/css/properties.json';
+        const response = await fetch(url);
+        const data = await response.json();
+        const allProperties = Object.keys(data);
+        
+         // Strip vendor prefixes and remove duplicates
+        const baseProperties = new Set();
+        
+        allProperties.forEach(prop => {
+          // Remove vendor prefixes (-webkit-, -moz-, -ms-, -o-)
+          const baseProp = prop.replace(/^-(webkit|moz|ms|o)-/, '');
+          baseProperties.add(baseProp);
+        });
+        
+        // Convert Set back to array and sort
+        const cleanProperties = Array.from(baseProperties).sort();
+        
+        // Save cleaned properties
+        await fs.promises.writeFile(jsonPath, JSON.stringify(cleanProperties, null, 2));
+        
+        this.cachedValidProperties = cleanProperties;
+        return cleanProperties;
+      }
+    } catch (error) {
+      console.error('Error loading CSS properties:', error.message);
+      return [];
     }
-    return this;
   },
 
-  // Text-spacing 
-  textIndent(ti){ this.catcher.textIndent = ti; return this; },
-  letterSpacing(ls){ this.catcher.letterSpacing = ls; return this; },
-  lineHeight(lh){ this.catcher.lineHeight = lh; return this; },
-  wordSpacing(ws){ this.catcher.wordSpacing = ws; return this; },
-  whiteSpace(sws){ this.catcher.whiteSpace = sws; return this; },
-
-  // Font 
-  font(f){ this.catcher.font = f; return this; },
-  fontFamily(ff){ this.catcher.fontFamily = ff; return this; },
-  fontStyle(fs){ this.catcher.fontStyle = fs; return this; },
-  fontWeight(fw){ this.catcher.fontWeight = fw; return this; },
-  fontVariant(fv){ this.catcher.fontVariant = fv; return this; },
-  fontSize(fsz){ this.catcher.fontSize = fsz; return this; },
-
-  // List Style
-  listStyle(ls){ this.catcher.listStyle = ls; return this; },
-  listStyleType(lst){ this.catcher.listStyleType = lst; return this; },
-  listStyleImage(lsi){ this.catcher.listStyleImage = lsi; return this; },
-  listStylePosition(lsp){ this.catcher.listStylePosition = lsp; return this; },
-
-  // Display 
-  display(d){ this.catcher.display = d; return this; },
-  flex(f){ this.catcher.flex = f; return this; },
-  alignContent(ac){ this.catcher.alignContent = ac; return this; }, 
-  alignSelf(as){ this.catcher.alignSelf = as; return this; },
-  alignItems(ai){ this.catcher.alignItems = ai; return this; },
-  justifyContent(jc){ this.catcher.justifyContent = jc; return this; },
-  flexWrap(fw){ this.catcher.flexWrap = fw; return this; },
-  flexGrow(fg){ this.catcher.flexGrow = fg; return this; },
-  flexDirection(fd){ this.catcher.flexDirection = fd; return this; },
-  order(o){ this.catcher.order = o; return this; },
-  visibility(v){ this.catcher.visibility = v; return this; },
-
-  // Position
-  position(p){ this.catcher.position = p; return this; },
-  top(t){ this.catcher.top = t; return this; },
-  left(l){ this.catcher.left = l; return this; },
-  bottom(b){ this.catcher.bottom = b; return this; },
-
-  // Overflow
-  overflow(o){ this.catcher.overflow = o; return this; },
-  overflowX(ox){ this.catcher.overflowX = ox; return this; },
-  overflowY(oy){ this.catcher.overflowY = oy; return this; },
-  overflowWrap(ow){ this.catcher.overflowWrap = ow; return this; },
+  // Synchronous version for internal use
+  getCachedProperties() {
+    return this.cachedValidProperties;
+  }
+};
 
-  animation(a){ this.catcher.animation = a; return this; },
-  textFillColor(tfc){ this.catcher.textFillColor = tfc; return this; },
-  backgroundClip(bc){ this.catcher.backgroundClip = bc; return this; },
-  gridTemplateColumns(gtc){ this.catcher.gridTemplateColumns = gtc; return this; },
-  right(r){ this.catcher.right = r; return this; },
-  transform(tf){ this.catcher.transform = tf; return this; },
-  boxShadow(bs){ this.catcher.boxShadow = bs; return this; },
-  backdropFilter(bf){ this.catcher.backdropFilter = bf; return this; },
-  gap(g){ this.catcher.gap = g; return this; },
+// Initialize properties synchronously when module loads
+chain.initializeProperties();
 
-  // Float
-  float(f){ this.catcher.float = f; return this; },
-  clear(c){ this.catcher.clear = c; return this; },
+const resolveToken = (value, useTokens) => {
+  if (!useTokens || typeof value !== 'string' || !value.startsWith('$')) {
+    return value;
+  }
   
-  // Z-index
-  zIndex(zi){ this.catcher.zIndex = zi; return this; },
-
-  // Box-sizing
-  boxSizing(bs){ this.catcher.boxSizing = bs; return this; },
-
-  // Opacity
-  opacity(o){ this.catcher.opacity = o; return this; },
+  const tokenPath = value.slice(1);
+  const tokenValue = tokens.get(tokenPath);
   
-  // Transition
-  transition(t){ this.catcher.transition = t; return this; },
-
-  // Cursor
-  cursor(c){ this.catcher.cursor = c; return this; },
-
-  content(c){ this.catcher.content = c; return this; },
-
-  accentColor(ac){ this.catcher.accentColor = ac; return this; },
-
-  all(a){ this.catcher.all = a; return this; },
-
-  // Block
-  block(...args) {
-    let objectCss = args.length === 0 ? {} : {selectors: args};
-    Object.assign(objectCss, this.catcher);
-    this.catcher = {};
-    return objectCss;
-  },
+  if (!tokenValue) {
+    return value;
+  }
+  
+  return tokenValue;
+};
 
-  // Navbar
-  navBar(...args) {
-    if (arguments.length === 0 && args.length === 0) {
-      throw new Error('navBar() requires selector argument.');
+function $(useTokens = true){
+  const catcher = {};
+  
+  // Use cached properties if available
+  const validProperties = chain.cachedValidProperties;
+  
+  const handler = {
+    get: (target, prop) => {
+      if (prop === 'block') {
+        return function(...args) {chain
+          // If no args, just return current catcher
+          if (args.length === 0) {
+            const result = { ...catcher };
+            // Clear catcher
+            Object.keys(catcher).forEach(key => delete catcher[key]);
+            return result;
+          }
+          
+          // Create result with selectors
+          const result = {
+            selectors: args,
+            ...catcher
+          };
+          
+          // Clear catcher
+          Object.keys(catcher).forEach(key => delete catcher[key]);
+          
+          return result;
+        };
+      }
+      // Convert camelCase to kebab-case for CSS property
+      const cssProperty = prop.replace(/([A-Z])/g, '-$1').toLowerCase();     
+      // Validate property exists (optional) - use cached properties
+      if (validProperties && validProperties.length > 0 && !validProperties.includes(cssProperty)) {
+        console.warn(`Warning: '${cssProperty}' may not be a valid CSS property`);
+      }
+      // Return a function that sets the value
+      return function(value) {
+        catcher[prop] = resolveToken(value, useTokens);  // ← USE IT HERE
+        return proxy;
+      };
     }
-    let objectResult = {};
-    objectResult.navUl = this.display('flex').listStyle('none').margin('0').padding('0').block(`${args[0]} ${args[1]}`);
-    objectResult.navLi = this.margin('0 10px').block(`${args[0]} ${args[1]} ${args[2]}`);
-    objectResult.navA = this.color('#fff').textDecoration('none').fontWeight('bold').borderRadius('3px').block(`${args[0]} ${args[1]} ${args[2]} ${args[3]}`);
-    objectResult.navAhover = this.textDecoration('underline').bgColor('#555').block(`${args[0]} ${args[1]} ${args[2]} ${args[3]}:hover`);
-    return objectResult;
+  };
+  
+  // Create the proxy
+  const proxy = new Proxy({}, handler);
+  
+  // Trigger async load if needed (don't await)
+  if (chain.cachedValidProperties.length === 0) {
+    chain.getCSSProperties().catch(err => {
+      console.error('Failed to load CSS properties:', err.message);
+    });
   }
+  
+  return proxy;
 };
 
-
 const run = (...args) => {
-  let str1 = '';
-  args.forEach(
-    (value)=>{
-      let str2 = `${value.selectors.toString()} {\n`;
+  let cssOutput = '';
+  
+  args.forEach((value) => {
+    if (value && value.selectors) {
+      let rule = `${value.selectors.join(', ')} {\n`;
+      
+      // Add all properties (excluding 'selectors')
       for (let key in value) {
-        if(key !== 'selectors'){
-          const kebabKey = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-          str2 += `\t${kebabKey}: ${value[key]};\n`;
+        if (key !== 'selectors' && value.hasOwnProperty(key)) {
+          const kebabKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+          rule += `  ${kebabKey}: ${value[key]};\n`;
         }
       }
-      str2 += `}\n\n`;
-      str1 += str2;
+      
+      rule += `}\n\n`;
+      cssOutput += rule;
     }
-  );
-  chain.cssOutput = str1.trim();
+  });
+  
+  chain.cssOutput = cssOutput.trim();
+  return cssOutput.trim();
 };
 
 const compile = (obj) => {
@@ -206,48 +176,29 @@ const compile = (obj) => {
   for (const key in obj) {
     if (obj.hasOwnProperty(key)) {
       const element = obj[key];
-      let selectors = element.selectors || []; // Provide default empty array if selectors is undefined
+      let selectors = element.selectors || [];
       let elementCSS = '';
+      
       for (let prop in element) {
         if (element.hasOwnProperty(prop) && prop !== 'selectors') {
           // Convert camelCase to kebab-case
-          const kebabKey = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+          const kebabKey = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
           elementCSS += `  ${kebabKey}: ${element[prop]};\n`;
         }
       }
-      selectors = selectors.join();
-      cssString += `${selectors} {\n${elementCSS}}\n`;
+      
+      cssString += `${selectors.join(', ')} {\n${elementCSS}}\n`;
     }
   }
 
-  chain.cssOutput = cssString;
+  chain.cssOutput = cssString.trim();
 };
 
-const get = (filename) => {
-  const fileExt = path.extname(filename).toLowerCase();
-  if (fileExt !== '.jcss') {
-    throw new Error(`Import error: ${filename} must have .jcss extension`);
-  }
-  // Try to resolve the path
-  const resolvedPath = path.resolve(process.cwd(), filename);
-  
-  // Check if file exists
-  const exists = fs.existsSync(resolvedPath);
-  
-  if (!exists) {
-    throw new Error('File not found: '+filename+'(resolved to: '+resolvedPath+')');
-  }
-  
-  return require(resolvedPath);
-};
-
-if (typeof global !== 'undefined') {
-  global.chain = chain;
-}
-
 module.exports = {
   chain,
+  $,
   run,
   compile,
-  get
+  createTokens: tokenModule.createTokens,
+  responsive: tokenModule.responsive
 };

package/types.d.ts

@@ -0,0 +1,148 @@
+/// <reference types="react" />
+
+declare module '@melcanz85/chaincss' {
+  // Style definition returned by .block()
+  export interface StyleDefinition {
+    selectors: string[];
+    [cssProperty: string]: any;
+  }
+
+  // Base interface for CSS properties (dynamic)
+  export interface CSSPropertyBuilder {
+    [key: string]: (value: string | number) => ChainBuilder;
+  }
+
+  // Special methods interface
+  export interface SpecialMethods {
+    block(...selectors: string[]): StyleDefinition;
+    token?(path: string): ChainBuilder;
+  }
+
+  // ChainBuilder is the intersection of both
+  export type ChainBuilder = CSSPropertyBuilder & SpecialMethods;
+
+  // The main $ function
+  export function $(): ChainBuilder;
+
+  // Run function for inline styles
+  export function run(...styles: StyleDefinition[]): string;
+
+  // Compile function for objects
+  export function compile(styles: Record<string, StyleDefinition>): void;
+
+  // Get function for importing (VM-safe version)
+  export function get(filename: string): any;
+
+  // Chain object (internal state)
+  export const chain: {
+    cssOutput: string;
+    catcher: any;
+    cachedValidProperties: string[];
+  };
+
+  // Processor function
+  export function processor(inputFile: string, outputFile: string): Promise<void>;
+
+  // Watch function
+  export function watch(inputFile: string, outputFile: string): void;
+
+  // Atomic optimizer configuration
+  export interface AtomicConfig {
+    enabled?: boolean;
+    threshold?: number;
+    naming?: 'hash' | 'readable' | 'short';
+    cache?: boolean;
+    cachePath?: string;
+    minify?: boolean;
+  }
+
+  // Prefixer configuration
+  export interface PrefixerConfig {
+    mode?: 'auto' | 'full';
+    browsers?: string[];
+    enabled?: boolean;
+    sourceMap?: boolean;
+    sourceMapInline?: boolean;
+  }
+
+  // ChainCSS configuration
+  export interface ChainCSSConfig {
+    atomic?: AtomicConfig;
+    prefixer?: PrefixerConfig;
+    sourceMaps?: boolean;
+  }
+
+  // Function to configure ChainCSS
+  export function configure(config: ChainCSSConfig): void;
+
+  // Atomic optimizer instance
+  export const atomicOptimizer: {
+    optimize(styles: Record<string, StyleDefinition>): string;
+    getStats(): {
+      totalStyles: number;
+      atomicStyles: number;
+      uniqueProperties: number;
+      savings?: string;
+    };
+  };
+
+  // Token system types
+  export interface Tokens {
+    colors: Record<string, string | Record<string, string>>;
+    spacing: Record<string, string>;
+    typography: {
+      fontFamily: Record<string, string>;
+      fontSize: Record<string, string>;
+      fontWeight: Record<string, string>;
+      lineHeight: Record<string, string>;
+    };
+    breakpoints: Record<string, string>;
+    zIndex: Record<string, string>;
+    shadows: Record<string, string>;
+    borderRadius: Record<string, string>;
+  }
+
+  export class DesignTokens {
+    constructor(tokens: Partial<Tokens>);
+    get(path: string, defaultValue?: string): string;
+    toCSSVariables(prefix?: string): string;
+    createTheme(name: string, overrides: Record<string, any>): DesignTokens;
+  }
+
+  export const tokens: DesignTokens;
+  export function createTokens(customTokens: Partial<Tokens>): DesignTokens;
+  export function responsive(values: Record<string, string> | string): string;
+
+  // React hooks types (add to your existing declare module)
+  export interface UseChainStylesOptions {
+    cache?: boolean;
+    namespace?: string;
+    watch?: boolean;
+  }
+
+  export function useChainStyles(
+    styles: Record<string, any> | (() => Record<string, any>),
+    options?: UseChainStylesOptions
+  ): Record<string, string>;
+
+  export function useDynamicChainStyles(
+    styleFactory: () => Record<string, any>,
+    deps?: any[],
+    options?: UseChainStylesOptions
+  ): Record<string, string>;
+
+  export function useThemeChainStyles(
+    styles: Record<string, any> | ((theme: any) => Record<string, any>),
+    theme: any,
+    options?: UseChainStylesOptions
+  ): Record<string, string>;
+
+  export const ChainCSSGlobal: React.FC<{ styles: Record<string, any> }>;
+
+  export function withChainStyles(
+    styles: Record<string, any> | ((props: any) => Record<string, any>),
+    options?: UseChainStylesOptions
+  ): <P extends object>(Component: React.ComponentType<P>) => React.FC<P & { chainStyles?: Record<string, string> }>;
+
+  export function cx(...classes: (string | undefined | null | false)[]): string;
+}

package/.github/workflows/publish.yml

@@ -1,22 +0,0 @@
-name: Publish Package
-
-on:
-  push:
-    tags:
-      - 'v*'
-
-permissions:
-  id-token: write
-  contents: read
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '24'
-          registry-url: 'https://registry.npmjs.org'
-      - run: npm ci
-      - run: npm publish

package/publish.sh

@@ -1,7 +0,0 @@
-#!/bin/bash
-npm version patch
-git push --tags
-git checkout main
-git merge master
-git push origin main
-git checkout master