npm - chaincss - Versions diffs - 2.0.7 → 2.1.0 - Mend

chaincss 2.0.7 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (159) hide show

package/CHANGELOG.md +30 -0
package/CODE_OF_CONDUCT.md +21 -0
package/CONTRIBUTING.md +28 -0
package/README.md +455 -226
package/demo/demo/node_modules/caniuse-db/fulldata-json/data-2.0.json +1 -0
package/demo/index.html +16 -0
package/demo/package.json +20 -0
package/demo/src/App.tsx +117 -0
package/demo/src/chaincss-barrel.ts +9 -0
package/demo/src/main.tsx +8 -0
package/demo/src/styles.chain.ts +300 -0
package/demo/vite.config.ts +46 -0
package/dist/cli/commands/build.d.ts +0 -1
package/dist/cli/commands/cache.d.ts +1 -0
package/dist/cli/commands/init.d.ts +6 -3
package/dist/cli/commands/timeline.d.ts +0 -1
package/dist/cli/commands/watch.d.ts +0 -1
package/dist/cli/index.d.ts +0 -1
package/dist/cli/index.js +3213 -5296
package/dist/cli/types.d.ts +51 -20
package/dist/cli/utils/config-loader.d.ts +0 -1
package/dist/cli/utils/file-utils.d.ts +27 -3
package/dist/cli/utils/logger.d.ts +0 -1
package/dist/compiler/Chain.d.ts +215 -0
package/dist/compiler/animations.d.ts +76 -0
package/dist/compiler/atomic-optimizer.d.ts +47 -12
package/dist/compiler/breakpoints.d.ts +46 -0
package/dist/compiler/btt.d.ts +36 -60
package/dist/compiler/cache-manager.d.ts +58 -4
package/dist/compiler/commonProps.d.ts +0 -1
package/dist/compiler/content-addressable-cache.d.ts +78 -0
package/dist/compiler/helpers.d.ts +54 -0
package/dist/compiler/index.d.ts +16 -9
package/dist/compiler/index.js +4450 -4316
package/dist/compiler/prefixer.d.ts +17 -1
package/dist/compiler/shorthands.d.ts +28 -0
package/dist/compiler/suggestions.d.ts +43 -0
package/dist/compiler/theme-contract.d.ts +16 -27
package/dist/compiler/token-resolver.d.ts +69 -0
package/dist/compiler/tokens.d.ts +33 -8
package/dist/core/auto-detector.d.ts +34 -0
package/dist/core/common-utils.d.ts +97 -0
package/dist/core/compiler.d.ts +63 -23
package/dist/core/constants.d.ts +137 -36
package/dist/core/smart-chain.d.ts +3 -0
package/dist/core/types.d.ts +122 -15
package/dist/core/utils.d.ts +134 -17
package/dist/index.d.ts +52 -8
package/dist/index.js +7090 -5578
package/dist/plugins/vite.d.ts +7 -5
package/dist/plugins/vite.js +2964 -25641
package/dist/plugins/webpack.d.ts +24 -1
package/dist/plugins/webpack.js +209 -72
package/dist/runtime/Chain.d.ts +32 -0
package/dist/runtime/auto-hooks.d.ts +11 -0
package/dist/runtime/hmr.d.ts +22 -2
package/dist/runtime/index.d.ts +3 -2
package/dist/runtime/index.js +3648 -301
package/dist/runtime/injector.d.ts +39 -72
package/dist/runtime/react.d.ts +17 -12
package/dist/runtime/svelte.d.ts +15 -0
package/dist/runtime/types.d.ts +126 -4
package/dist/runtime/utils.d.ts +0 -1
package/dist/runtime/vue.d.ts +34 -14
package/package.json +59 -66
package/src/cli/commands/build.ts +133 -0
package/src/cli/commands/cache.ts +371 -0
package/src/cli/commands/init.ts +230 -0
package/src/cli/commands/timeline.ts +435 -0
package/src/cli/commands/watch.ts +211 -0
package/src/cli/index.ts +226 -0
package/src/cli/types.ts +100 -0
package/src/cli/utils/config-loader.ts +174 -0
package/src/cli/utils/file-utils.ts +139 -0
package/src/cli/utils/logger.ts +74 -0
package/src/compiler/Chain.ts +831 -0
package/src/compiler/animations.ts +517 -0
package/src/compiler/atomic-optimizer.ts +786 -0
package/src/compiler/breakpoints.ts +347 -0
package/src/compiler/btt.ts +1147 -0
package/src/compiler/cache-manager.ts +446 -0
package/src/compiler/commonProps.ts +18 -0
package/src/compiler/content-addressable-cache.ts +478 -0
package/src/compiler/helpers.ts +407 -0
package/src/compiler/index.ts +72 -0
package/src/compiler/prefixer.ts +724 -0
package/src/compiler/shorthands.ts +558 -0
package/src/compiler/suggestions.ts +436 -0
package/src/compiler/theme-contract.ts +197 -0
package/src/compiler/token-resolver.ts +241 -0
package/src/compiler/tokens.ts +612 -0
package/src/core/auto-detector.ts +187 -0
package/src/core/common-utils.ts +423 -0
package/src/core/compiler.ts +835 -0
package/src/core/constants.ts +424 -0
package/src/core/index.ts +107 -0
package/src/core/smart-chain.ts +163 -0
package/src/core/types.ts +257 -0
package/src/core/utils.ts +598 -0
package/src/index.ts +208 -0
package/src/plugins/vite.d.ts +316 -0
package/src/plugins/vite.ts +424 -0
package/src/plugins/webpack.d.ts +289 -0
package/src/plugins/webpack.ts +416 -0
package/src/runtime/Chain.ts +242 -0
package/src/runtime/auto-hooks.tsx +127 -0
package/src/runtime/auto-vue.ts +72 -0
package/src/runtime/hmr.ts +212 -0
package/src/runtime/index.ts +82 -0
package/src/runtime/injector.ts +273 -0
package/src/runtime/react.tsx +269 -0
package/src/runtime/svelte.ts +15 -0
package/src/runtime/types.ts +256 -0
package/src/runtime/utils.ts +128 -0
package/src/runtime/vite-env.d.ts +120 -0
package/src/runtime/vue.ts +231 -0
package/tsconfig.build.json +41 -0
package/tsconfig.json +25 -0
package/tsconfig.runtimes.json +18 -0
package/dist/cli/cli.cjs +0 -7
package/dist/cli/commands/build.d.ts.map +0 -1
package/dist/cli/commands/compile.d.ts +0 -3
package/dist/cli/commands/compile.d.ts.map +0 -1
package/dist/cli/commands/init.d.ts.map +0 -1
package/dist/cli/commands/timeline.d.ts.map +0 -1
package/dist/cli/commands/watch.d.ts.map +0 -1
package/dist/cli/index.d.ts.map +0 -1
package/dist/cli/types.d.ts.map +0 -1
package/dist/cli/utils/config-loader.d.ts.map +0 -1
package/dist/cli/utils/file-utils.d.ts.map +0 -1
package/dist/cli/utils/logger.d.ts.map +0 -1
package/dist/compiler/atomic-optimizer.d.ts.map +0 -1
package/dist/compiler/btt.d.ts.map +0 -1
package/dist/compiler/cache-manager.d.ts.map +0 -1
package/dist/compiler/commonProps.d.ts.map +0 -1
package/dist/compiler/index.d.ts.map +0 -1
package/dist/compiler/prefixer.d.ts.map +0 -1
package/dist/compiler/theme-contract.d.ts.map +0 -1
package/dist/compiler/tokens.d.ts.map +0 -1
package/dist/compiler/types.d.ts +0 -57
package/dist/compiler/types.d.ts.map +0 -1
package/dist/core/compiler.d.ts.map +0 -1
package/dist/core/constants.d.ts.map +0 -1
package/dist/core/index.d.ts +0 -4
package/dist/core/index.d.ts.map +0 -1
package/dist/core/types.d.ts.map +0 -1
package/dist/core/utils.d.ts.map +0 -1
package/dist/index.d.ts.map +0 -1
package/dist/plugins/vite.d.ts.map +0 -1
package/dist/plugins/webpack.d.ts.map +0 -1
package/dist/runtime/hmr.d.ts.map +0 -1
package/dist/runtime/index.d.ts.map +0 -1
package/dist/runtime/injector.d.ts.map +0 -1
package/dist/runtime/react.d.ts.map +0 -1
package/dist/runtime/react.js +0 -324
package/dist/runtime/types.d.ts.map +0 -1
package/dist/runtime/utils.d.ts.map +0 -1
package/dist/runtime/vue.d.ts.map +0 -1
package/dist/runtime/vue.js +0 -286

package/demo/demo/node_modules/caniuse-db/fulldata-json/data-2.0.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"data":{}}

package/demo/index.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ChainCSS Demo | Zero-Runtime CSS-in-JS</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/demo/package.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "name": "chaincss-demo",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.5.0",
+    "browserslist": "^4.28.2",
+    "caniuse-lite": "^1.0.30001791",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.0.0",
+    "vite": "^5.0.0"
+  }
+}

package/demo/src/App.tsx ADDED Viewed

@@ -0,0 +1,117 @@
+import React from 'react';
+import * as S from './styles.chain';
+const features = [
+  { icon: '⚡', title: 'Zero Runtime', desc: 'Static styles compile to plain CSS. No JavaScript shipped for styling.' },
+  { icon: '🎯', title: 'Auto Detection', desc: 'smartChain() detects static vs dynamic automatically.' },
+  { icon: '🧩', title: '57 Macros', desc: 'flex(), center(), glass(), pill() — complex CSS as single method calls.' },
+  { icon: '🎨', title: 'Design Tokens', desc: 'Themeable with full token resolution system.' },
+  { icon: '🔄', title: 'Variant System', desc: 'Type-safe component variants with compound conditions.' },
+  { icon: '📱', title: 'Responsive', desc: '20 breakpoints. Mobile-first to feature queries.' },
+];
+const plans = [
+  { name: 'Starter', price: 'Free', features: ['5 components', 'Basic macros', 'Community support'], featured: false },
+  { name: 'Pro', price: '$29/mo', features: ['Unlimited components', 'All 57 macros', 'Priority support', 'Atomic CSS', 'Design tokens'], featured: true },
+  { name: 'Enterprise', price: '$99/mo', features: ['Everything in Pro', 'Theme contracts', 'SSR support', 'Custom plugins', 'Dedicated support'], featured: false },
+];
+export function App() {
+  return (
+    <div style={{ background: '#0f172a', minHeight: '100vh' }}>
+      {/* NAV */}
+      <nav className={S.nav.selectors?.[0]}>
+        <div className={S.navInner.selectors?.[0]}>
+          <span className={S.navLogo.selectors?.[0]}>ChainCSS</span>
+          <div className={S.navLinks.selectors?.[0]}>
+            {['Features', 'Pricing', 'Docs', 'GitHub'].map(item => (
+              <a key={item} href="#" className={S.navLink.selectors?.[0]}>{item}</a>
+            ))}
+          </div>
+        </div>
+      </nav>
+      {/* HERO */}
+      <section className={S.hero.selectors?.[0]}>
+        <h1 className={S.heroTitle.selectors?.[0]}>
+          Write Styles Like JavaScript.<br />Ship Zero Runtime.
+        </h1>
+        <p className={S.heroSubtitle.selectors?.[0]}>
+          ChainCSS auto-detects static vs dynamic styles. CSS where possible, JS where needed.
+        </p>
+        <div style={{ display: 'flex', gap: 16 }}>
+          <button className={S.buttonPrimary.selectors?.[0]}>Get Started →</button>
+          <button className={S.buttonSecondary.selectors?.[0]}>View on GitHub</button>
+        </div>
+      </section>
+      {/* FEATURES */}
+      <section className={S.section.selectors?.[0]}>
+        <div className={S.sectionHeader.selectors?.[0]}>
+          <h2 className={S.sectionTitle.selectors?.[0]}>Everything You Need</h2>
+          <p className={S.sectionDesc.selectors?.[0]}>550+ features. One JavaScript API. Zero runtime CSS.</p>
+        </div>
+        <div className={S.featureGrid.selectors?.[0]}>
+          {features.map(f => (
+            <div key={f.title} className={S.featureCard.selectors?.[0]}>
+              <div className={S.featureIcon.selectors?.[0]}>{f.icon}</div>
+              <h3 className={S.featureTitle.selectors?.[0]}>{f.title}</h3>
+              <p className={S.featureDesc.selectors?.[0]}>{f.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+      {/* PRICING */}
+      <section className={S.section.selectors?.[0]}>
+        <div className={S.sectionHeader.selectors?.[0]}>
+          <h2 className={S.sectionTitle.selectors?.[0]}>Simple Pricing</h2>
+          <p className={S.sectionDesc.selectors?.[0]}>Start free, scale as you grow.</p>
+        </div>
+        <div className={S.pricingGrid.selectors?.[0]}>
+          {plans.map(p => (
+            <div key={p.name} className={(p.featured ? S.pricingCardFeatured : S.pricingCard).selectors?.[0]}>
+              {p.featured && <span className={S.pricingBadge.selectors?.[0]}>POPULAR</span>}
+              <h3 className={S.pricingPlanName.selectors?.[0]}>{p.name}</h3>
+              <div className={S.pricingPrice.selectors?.[0]}>{p.price}</div>
+              <div style={{ flex: 1, marginBottom: 24 }}>
+                {p.features.map(f => (
+                  <div key={f} className={S.pricingFeature.selectors?.[0]}>✓ {f}</div>
+                ))}
+              </div>
+              <button className={(p.featured ? S.buttonPrimary : S.buttonSecondary).selectors?.[0]}>
+                Get Started
+              </button>
+            </div>
+          ))}
+        </div>
+      </section>
+      {/* FOOTER */}
+      <footer className={S.footer.selectors?.[0]}>
+        <div className={S.footerGrid.selectors?.[0]}>
+          <div>
+            <h4 className={S.footerHeading.selectors?.[0]}>ChainCSS</h4>
+            <a href="#" className={S.footerLink.selectors?.[0]}>About</a>
+            <a href="#" className={S.footerLink.selectors?.[0]}>Blog</a>
+          </div>
+          <div>
+            <h4 className={S.footerHeading.selectors?.[0]}>Product</h4>
+            <a href="#" className={S.footerLink.selectors?.[0]}>Features</a>
+            <a href="#" className={S.footerLink.selectors?.[0]}>Pricing</a>
+          </div>
+          <div>
+            <h4 className={S.footerHeading.selectors?.[0]}>Resources</h4>
+            <a href="#" className={S.footerLink.selectors?.[0]}>Docs</a>
+            <a href="#" className={S.footerLink.selectors?.[0]}>Examples</a>
+          </div>
+          <div>
+            <h4 className={S.footerHeading.selectors?.[0]}>Legal</h4>
+            <a href="#" className={S.footerLink.selectors?.[0]}>Privacy</a>
+            <a href="#" className={S.footerLink.selectors?.[0]}>Terms</a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/demo/src/chaincss-barrel.ts ADDED Viewed

@@ -0,0 +1,9 @@
+// Lightweight barrel for demo - excludes compiler/prefixer
+export { chain, enableDebug, setTokenContext, getTokenContext } from '../../src/compiler/Chain.js';
+export { recipe } from '../../src/compiler/btt.js';
+export { createTokens, DesignTokens } from '../../src/compiler/tokens.js';
+export { smartChain, buildChain, runtimeChain } from '../../src/core/smart-chain.js';
+export { createThemeContract, createTheme, validateTheme, Theme } from '../../src/compiler/theme-contract.js';
+export { helpers } from '../../src/compiler/helpers.js';
+export { animationPresets, createAnimation, getAnimationPreset } from '../../src/compiler/animations.js';
+export { shorthandMap, macros } from '../../src/compiler/shorthands.js';

package/demo/src/main.tsx ADDED Viewed

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+const root = document.getElementById('app');
+if (root) {
+  createRoot(root).render(<App />);
+}

package/demo/src/styles.chain.ts ADDED Viewed

@@ -0,0 +1,300 @@
+import { chain } from 'chaincss';
+// ═══════════════════════════════════════
+// NAVIGATION
+// ═══════════════════════════════════════
+export const nav = chain()
+  .fixed({ top: 0, left: 0, right: 0 })
+  .zIndex(1000)
+  .backdropFilter('blur(20px)')
+  .bg('rgba(15,23,42,0.9)')
+  .borderBottom('1px solid rgba(255,255,255,0.08)')
+  .$el('nav');
+export const navInner = chain()
+  .display('flex')
+  .items('center')
+  .justify('space-between')
+  .maxW(1200)
+  .mx('auto')
+  .px(24)
+  .py(16)
+  .$el('nav-inner');
+export const navLogo = chain()
+  .fs(22)
+  .fw(800)
+  .textGradient(['#6366f1', '#06b6d4'])
+  .$el('nav-logo');
+export const navLinks = chain()
+  .display('flex')
+  .items('center')
+  .gap(32)
+  .$el('nav-links');
+export const navLink = chain()
+  .fs(14)
+  .fw(500)
+  .color('#cbd5e1')
+  .transition('color 0.2s ease')
+  .hover().color('#ffffff').end()
+  .$el('nav-link');
+// ═══════════════════════════════════════
+// HERO
+// ═══════════════════════════════════════
+export const hero = chain()
+  .display('flex')
+  .flexDir('column')
+  .items('center')
+  .justify('center')
+  .minH('100vh')
+  .pt(80)
+  .pb(64)
+  .px(24)
+  .bg('#0f172a')
+  .pos('relative')
+  .ov('hidden')
+  .$el('hero');
+export const heroTitle = chain()
+  .fs('clamp(2.5rem, 6vw, 4.5rem)')
+  .fw(800)
+  .color('#ffffff')
+  .align('center')
+  .maxW(800)
+  .lh(1.1)
+  .mb(16)
+  .$el('hero-title');
+export const heroSubtitle = chain()
+  .fs(18)
+  .color('#94a3b8')
+  .align('center')
+  .maxW(600)
+  .lh(1.7)
+  .mb(32)
+  .$el('hero-subtitle');
+// ═══════════════════════════════════════
+// BUTTONS
+// ═══════════════════════════════════════
+export const buttonPrimary = chain()
+  .display('inline-flex')
+  .items('center')
+  .gap(8)
+  .px(28)
+  .py(14)
+  .bg('#6366f1')
+  .color('#ffffff')
+  .fs(16)
+  .fw(600)
+  .rounded(12)
+  .border('none')
+  .cursor('pointer')
+  .transition('all 0.2s ease')
+  .hover()
+    .bg('#4f46e5')
+    .transform('translateY(-2px)')
+    .shadow('0 10px 25px rgba(99,102,241,0.4)')
+  .end()
+  .$el('btn-primary');
+export const buttonSecondary = chain()
+  .display('inline-flex')
+  .items('center')
+  .gap(8)
+  .px(28)
+  .py(14)
+  .bg('rgba(255,255,255,0.08)')
+  .color('#ffffff')
+  .fs(16)
+  .fw(600)
+  .rounded(12)
+  .border('1px solid rgba(255,255,255,0.15)')
+  .cursor('pointer')
+  .transition('all 0.2s ease')
+  .hover()
+    .bg('rgba(255,255,255,0.15)')
+    .transform('translateY(-2px)')
+  .end()
+  .$el('btn-secondary');
+// ═══════════════════════════════════════
+// FEATURES SECTION
+// ═══════════════════════════════════════
+export const section = chain()
+  .py(80)
+  .px(24)
+  .bg('#0f172a')
+  .$el('section');
+export const sectionHeader = chain()
+  .align('center')
+  .maxW(600)
+  .mx('auto')
+  .mb(48)
+  .$el('section-header');
+export const sectionTitle = chain()
+  .fs(36)
+  .fw(800)
+  .color('#ffffff')
+  .mb(16)
+  .$el('section-title');
+export const sectionDesc = chain()
+  .fs(18)
+  .color('#94a3b8')
+  .lh(1.6)
+  .$el('section-desc');
+export const featureGrid = chain()
+  .display('grid')
+  .gridTemplateColumns('repeat(3, 1fr)')
+  .gap(24)
+  .maxW(1200)
+  .mx('auto')
+  .$el('feature-grid');
+export const featureCard = chain()
+  .bg('rgba(255,255,255,0.04)')
+  .rounded(16)
+  .p(32)
+  .border('1px solid rgba(255,255,255,0.08)')
+  .transition('all 0.3s ease')
+  .hover()
+    .transform('translateY(-4px)')
+    .border('1px solid rgba(99,102,241,0.4)')
+    .shadow('0 20px 40px rgba(0,0,0,0.3)')
+  .end()
+  .$el('feature-card');
+export const featureIcon = chain()
+  .circle(48)
+  .bg('rgba(99,102,241,0.2)')
+  .display('flex')
+  .items('center')
+  .justify('center')
+  .fs(22)
+  .mb(16)
+  .$el('feature-icon');
+export const featureTitle = chain()
+  .fs(18)
+  .fw(600)
+  .color('#ffffff')
+  .mb(8)
+  .$el('feature-title');
+export const featureDesc = chain()
+  .fs(14)
+  .color('#94a3b8')
+  .lh(1.6)
+  .$el('feature-desc');
+// ═══════════════════════════════════════
+// PRICING
+// ═══════════════════════════════════════
+export const pricingGrid = chain()
+  .display('grid')
+  .gridTemplateColumns('repeat(3, 1fr)')
+  .gap(24)
+  .maxW(1000)
+  .mx('auto')
+  .$el('pricing-grid');
+export const pricingCard = chain()
+  .bg('rgba(255,255,255,0.04)')
+  .rounded(16)
+  .p(32)
+  .border('1px solid rgba(255,255,255,0.08)')
+  .display('flex')
+  .flexDir('column')
+  .transition('all 0.3s ease')
+  .hover()
+    .transform('translateY(-8px)')
+    .border('1px solid rgba(99,102,241,0.4)')
+  .end()
+  .$el('pricing-card');
+export const pricingCardFeatured = chain()
+  .bg('rgba(99,102,241,0.1)')
+  .rounded(16)
+  .p(32)
+  .border('1px solid rgba(99,102,241,0.4)')
+  .display('flex')
+  .flexDir('column')
+  .pos('relative')
+  .transition('all 0.3s ease')
+  .hover()
+    .transform('translateY(-8px)')
+  .end()
+  .$el('pricing-card-featured');
+export const pricingBadge = chain()
+  .pill()
+  .fs(11)
+  .fw(700)
+  .bg('rgba(99,102,241,0.3)')
+  .color('#c7d2fe')
+  .mb(16)
+  .$el('pricing-badge');
+export const pricingPlanName = chain()
+  .fs(18)
+  .fw(600)
+  .color('#ffffff')
+  .mb(8)
+  .$el('pricing-plan-name');
+export const pricingPrice = chain()
+  .fs(42)
+  .fw(800)
+  .color('#ffffff')
+  .mb(16)
+  .$el('pricing-price');
+export const pricingFeature = chain()
+  .fs(14)
+  .color('#cbd5e1')
+  .py(6)
+  .display('flex')
+  .items('center')
+  .gap(8)
+  .$el('pricing-feature');
+// ═══════════════════════════════════════
+// FOOTER
+// ═══════════════════════════════════════
+export const footer = chain()
+  .bg('#0a0f1a')
+  .borderT('1px solid rgba(255,255,255,0.06)')
+  .py(48)
+  .px(24)
+  .$el('footer');
+export const footerGrid = chain()
+  .display('grid')
+  .gridTemplateColumns('repeat(4, 1fr)')
+  .gap(32)
+  .maxW(1200)
+  .mx('auto')
+  .$el('footer-grid');
+export const footerHeading = chain()
+  .fs(14)
+  .fw(600)
+  .color('#ffffff')
+  .mb(16)
+  .$el('footer-heading');
+export const footerLink = chain()
+  .fs(14)
+  .color('#64748b')
+  .transition('color 0.2s')
+  .display('block')
+  .py(4)
+  .hover().color('#ffffff').end()
+  .$el('footer-link');

package/demo/vite.config.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import chaincss from '../src/plugins/vite.js';
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const chaincssRoot = path.resolve(__dirname, '..');
+export default defineConfig({
+  plugins: [
+    // ChainCSS plugin with proper build-time extraction
+    chaincss({
+      atomic: true,
+      verbose: true,        // Show what's happening
+      injectGlobal: true,   // Auto-inject CSS
+      sourceComments: true, // Show source in generated CSS
+      prefix: false,
+      breakpoints: {
+        sm: '(max-width: 640px)',
+        md: '(max-width: 768px)',
+        lg: '(max-width: 1024px)',
+      },
+    }),
+    react(),
+  ],
+  root: __dirname,
+  resolve: {
+    alias: [
+      { find: 'chaincss/runtime', replacement: path.resolve(chaincssRoot, 'src/runtime/index.ts') },
+      { find: 'chaincss/plugin/vite', replacement: path.resolve(chaincssRoot, 'src/plugins/vite.ts') },
+      { find: 'chaincss', replacement: path.resolve(__dirname, 'src/chaincss-barrel.ts') },
+      { find: 'caniuse-db/fulldata-json/data-2.0.json', replacement: path.resolve(__dirname, 'node_modules/caniuse-db/fulldata-json/data-2.0.json') },
+      { find: 'autoprefixer', replacement: path.resolve(__dirname, 'node_modules/autoprefixer/index.js') },
+      { find: 'vue', replacement: path.resolve(__dirname, 'node_modules/vue/index.js') },
+      { find: 'svelte/store', replacement: path.resolve(__dirname, 'node_modules/svelte/store/index.js') },
+      { find: 'svelte', replacement: path.resolve(__dirname, 'node_modules/svelte/index.js') },
+    ],
+  },
+  define: { 'process.env': JSON.stringify({ NODE_ENV: 'development' }) },
+  optimizeDeps: { exclude: ['vue', 'svelte', 'svelte/store'] },
+  server: {
+    fs: { allow: [__dirname, chaincssRoot] },
+    hmr: { overlay: false },
+  },
+});

package/dist/cli/commands/build.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
 import type { BuildOptions } from '../types.js';
 export declare function buildCommand(options: BuildOptions): Promise<void>;
-//# sourceMappingURL=build.d.ts.map

package/dist/cli/commands/cache.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function cacheCommand(action: string, options: any): Promise<void>;

package/dist/cli/commands/init.d.ts CHANGED Viewed

@@ -1,5 +1,8 @@
-export declare function initCommand(options: {
+export interface InitOptions {
     force?: boolean;
     verbose?: boolean;
-}): Promise<void>;
-//# sourceMappingURL=init.d.ts.map
+    template?: 'full' | 'minimal';
+    typescript?: boolean;
+    framework?: 'react' | 'vue' | 'svelte' | 'solid';
+}
+export declare function initCommand(options: InitOptions): Promise<void>;

package/dist/cli/commands/timeline.d.ts CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export declare function timelineCommand(action: string, options: any): Promise<void>;
2	- //# sourceMappingURL=timeline.d.ts.map

package/dist/cli/commands/watch.d.ts CHANGED Viewed

@@ -3,4 +3,3 @@ export interface WatchOptions extends BuildOptions {
     debounce?: number;
 }
 export declare function watchCommand(options: WatchOptions): Promise<void>;
-//# sourceMappingURL=watch.d.ts.map

package/dist/cli/index.d.ts CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export {};
2	- //# sourceMappingURL=index.d.ts.map