(()=>{var e,t,a,n,i,r,d,s={9663(e,t,a){"use strict";a.d(t,{$n:()=>r.$n,Ab:()=>r.Ab,As:()=>r.As,Aw:()=>r.Aw,Bx:()=>r.Bx,C0:()=>r.C0,D7:()=>r.D7,Eg:()=>r.Eg,Ex:()=>r.Ex,Fw:()=>r.Fw,G5:()=>r.G5,GD:()=>r.GD,Ge:()=>r.Ge,HF:()=>r.HF,J6:()=>r.J6,K6:()=>r.K6,KS:()=>r.KS,Lp:()=>r.Lp,ML:()=>r.ML,Mk:()=>r.Mk,NG:()=>r.NG,N_:()=>r.N_,PE:()=>d,Pl:()=>r.Pl,Pq:()=>r.Pq,QB:()=>r.QB,R3:()=>r.R3,RG:()=>r.RG,RP:()=>r.RP,Rc:()=>r.Rc,UC:()=>r.UC,UQ:()=>r.UQ,X6:()=>r.X6,YW:()=>r.YW,ZZ:()=>r.ZZ,a9:()=>r.a9,bL:()=>r.bL,bS:()=>r.bS,bz:()=>r.bz,co:()=>r.co,dY:()=>r.dY,dd:()=>r.dd,fS:()=>r.fS,fx:()=>r.fx,g6:()=>r.g6,gz:()=>r.gz,hG:()=>r.hG,hI:()=>r.hI,hM:()=>r.hM,i6:()=>r.i6,i7:()=>r.i7,kC:()=>r.kC,kv:()=>r.kv,ky:()=>r.ky,l0:()=>r.l0,lv:()=>r.lv,mI:()=>r.mI,mT:()=>r.mT,n6:()=>r.n6,nD:()=>r.nD,nl:()=>r.nl,oz:()=>r.oz,so:()=>r.so,tU:()=>r.tU,uO:()=>r.uO,ue:()=>r.ue,uo:()=>r.uo,v7:()=>r.v7,vN:()=>r.vN,vd:()=>r.vd,vj:()=>r.vj,vw:()=>r.vw,x5:()=>r.x5,yL:()=>r.yL,zE:()=>r.zE,zV:()=>r.zV,zq:()=>r.zq});var n=a(4848),i=a(3454);a(2858);var r=a(3104);function d(){return(0,n.jsxs)("div",{className:"project-layout",children:[(0,n.jsx)(o,{activeProject:"cssx"}),(0,n.jsx)("div",{className:"project-layout-content",children:(0,n.jsx)(i.P,{})})]})}let s=[{id:"startupjs",name:"StartupJS fullstack framework",label:"SJS",url:"https://startupjs.org"},{id:"cssx",name:"CSSX styling",label:"CSSX",url:"https://cssx.dev"},{id:"teamplay",name:"TeamPlay ORM",label:"TP",url:"https://teamplay.dev"},{id:"ui",name:"StartupJS UI Library",label:"UI",url:"https://ui.startupjs.org"}];function o(e){let{activeProject:t}=e;return(0,n.jsx)("nav",{className:"project-sidebar",children:s.map(e=>(0,n.jsxs)("a",{href:e.url,className:`project-sidebar-button project-sidebar-button--${e.id} ${e.id===t?"active":""}`,"aria-label":e.name,children:[(0,n.jsx)("span",{className:"project-sidebar-button__text",children:e.label}),(0,n.jsx)("span",{className:"project-sidebar-button__tooltip",children:e.name})]},e.id))})}},3853(e,t,a){"use strict";a.d(t,{Y:()=>n,z:()=>i});let n={pages:[{title:"Babel Configuration",routePath:"/api/babel",lang:"en",toc:[{id:"cssxjsbabel",text:"cssxjs/babel",depth:2,charIndex:61},{id:"options",text:"Options",depth:2,charIndex:223},{id:"example-configuration",text:"Example Configuration",depth:2,charIndex:887},{id:"platform-detection",text:"Platform Detection",depth:2,charIndex:1132},{id:"caching",text:"Caching",depth:2,charIndex:1570},{id:"what-gets-transformed",text:"What Gets Transformed",depth:2,charIndex:1782},{id:"before-transform",text:"Before Transform",depth:3,charIndex:2117},{id:"after-transform",text:"After Transform",depth:3,charIndex:2408},{id:"typescript",text:"TypeScript",depth:2,charIndex:2632}],frontmatter:{},version:"",_relativePath:"api/babel.md",description:"CSSX uses a Babel preset to transform styles at build time."},{title:"css Template",routePath:"/api/css",lang:"en",toc:[{id:"basic-usage",text:"Basic Usage",depth:2,charIndex:74},{id:"when-to-use",text:"When to Use",depth:2,charIndex:402},{id:"placement",text:"Placement",depth:2,charIndex:633},{id:"syntax",text:"Syntax",depth:2,charIndex:1027},{id:"the-u-unit",text:"The `u` Unit",depth:2,charIndex:1297},{id:"supported-features",text:"Supported Features",depth:2,charIndex:1474},{id:"media-queries",text:"Media Queries",depth:3,charIndex:1497},{id:"css-variables",text:"CSS Variables",depth:3,charIndex:1628},{id:"part-selectors",text:"Part Selectors",depth:3,charIndex:1751},{id:"limitations",text:"Limitations",depth:2,charIndex:1865},{id:"comparison",text:"Comparison",depth:2,charIndex:2061},{id:"see-also",text:"See Also",depth:2,charIndex:2734}],frontmatter:{},version:"",_relativePath:"api/css.md",description:"The css template literal lets you write styles using plain CSS syntax."},{title:"API Reference",routePath:"/api/",lang:"en",toc:[{id:"imports",text:"Imports",depth:2,charIndex:63},{id:"sections",text:"Sections",depth:2,charIndex:214},{id:"quick-reference",text:"Quick Reference",depth:2,charIndex:596}],frontmatter:{},version:"",_relativePath:"api/index.md",description:"This section documents all exports from the cssxjs package."},{title:"JSX Props",routePath:"/api/jsx-props",lang:"en",toc:[{id:"stylename",text:"styleName",depth:2,charIndex:49},{id:"array-pattern-recommended",text:"Array Pattern (Recommended)",depth:3,charIndex:446},{id:"dynamic-styles",text:"Dynamic Styles",depth:3,charIndex:1352},{id:"part",text:"part",depth:2,charIndex:1690},{id:"how-parts-work",text:"How Parts Work",depth:3,charIndex:2238},{id:"matcher",text:"matcher",depth:2,charIndex:2499}],frontmatter:{},version:"",_relativePath:"api/jsx-props.md",description:"CSSX extends JSX with custom props for styling."},{title:"pug Template",routePath:"/api/pug",lang:"en",toc:[{id:"basic-usage",text:"Basic Usage",depth:2,charIndex:124},{id:"why-pug",text:"Why Pug?",depth:2,charIndex:422},{id:"class-names",text:"Class Names",depth:2,charIndex:677},{id:"dynamic-classes",text:"Dynamic Classes",depth:3,charIndex:895},{id:"attributes",text:"Attributes",depth:2,charIndex:1104},{id:"content",text:"Content",depth:2,charIndex:1360},{id:"text-content",text:"Text Content",depth:3,charIndex:1372},{id:"children",text:"Children",depth:3,charIndex:1546},{id:"control-flow",text:"Control Flow",depth:2,charIndex:1659},{id:"conditionals",text:"Conditionals",depth:3,charIndex:1676},{id:"loops",text:"Loops",depth:3,charIndex:1824},{id:"components",text:"Components",depth:2,charIndex:1942},{id:"complete-example",text:"Complete Example",depth:2,charIndex:2174},{id:"mixing-jsx-and-pug",text:"Mixing JSX and Pug",depth:2,charIndex:3492},{id:"disabling-pug",text:"Disabling Pug",depth:2,charIndex:3823},{id:"quick-reference",text:"Quick Reference",depth:2,charIndex:3968},{id:"see-also",text:"See Also",depth:2,charIndex:4437}],frontmatter:{},version:"",_relativePath:"api/pug.md",description:"The pug template literal lets you write JSX using Pug syntax. This is optional — CSSX works great with standard JSX."},{title:"styl() Function",routePath:"/api/styl-function",lang:"en",toc:[{id:"when-to-use",text:"When to Use",depth:2,charIndex:112},{id:"signature",text:"Signature",depth:2,charIndex:381},{id:"basic-usage",text:"Basic Usage",depth:2,charIndex:771},{id:"with-arrayobject-syntax",text:"With Array/Object Syntax",depth:2,charIndex:1042},{id:"with-inline-styles",text:"With Inline Styles",depth:2,charIndex:1282},{id:"with-part-styles",text:"With Part Styles",depth:2,charIndex:1544},{id:"combining-with-props",text:"Combining with Props",depth:2,charIndex:2091},{id:"style-arrays",text:"Style Arrays",depth:2,charIndex:2674},{id:"comparison-with-stylename",text:"Comparison with styleName",depth:2,charIndex:2903}],frontmatter:{},version:"",_relativePath:"api/styl-function.md",description:"The styl() function is an alternative to the styleName prop that returns props to spread onto a component."},{title:"styl Template",routePath:"/api/styl",lang:"en",toc:[{id:"basic-usage",text:"Basic Usage",depth:2,charIndex:76},{id:"placement",text:"Placement",depth:2,charIndex:381},{id:"stylus-syntax",text:"Stylus Syntax",depth:2,charIndex:955},{id:"minimal-syntax",text:"Minimal Syntax",depth:3,charIndex:973},{id:"parent-reference-",text:"Parent Reference (&)",depth:3,charIndex:1185},{id:"variables",text:"Variables",depth:3,charIndex:1409},{id:"mixins",text:"Mixins",depth:3,charIndex:1558},{id:"global-configuration",text:"Global Configuration",depth:2,charIndex:1736},{id:"the-u-unit",text:"The `u` Unit",depth:2,charIndex:2226},{id:"supported-css-features",text:"Supported CSS Features",depth:2,charIndex:2443},{id:"media-queries",text:"Media Queries",depth:3,charIndex:2470},{id:"viewport-units",text:"Viewport Units",depth:3,charIndex:2575},{id:"css-variables",text:"CSS Variables",depth:3,charIndex:2645},{id:"selectors",text:"Selectors",depth:2,charIndex:2816},{id:"part-selector",text:"Part Selector",depth:3,charIndex:3514},{id:"style-priority",text:"Style Priority",depth:2,charIndex:3757},{id:"limitations",text:"Limitations",depth:2,charIndex:4003},{id:"see-also",text:"See Also",depth:2,charIndex:4189}],frontmatter:{},version:"",_relativePath:"api/styl.md",description:"The styl template literal lets you write styles using Stylus syntax."},{title:"CSS Variables API",routePath:"/api/variables",lang:"en",toc:[{id:"variables",text:"variables",depth:2,charIndex:74},{id:"setdefaultvariables",text:"setDefaultVariables",depth:2,charIndex:981},{id:"defaultvariables",text:"defaultVariables",depth:2,charIndex:1652},{id:"dimensions",text:"dimensions",depth:2,charIndex:1879},{id:"variable-resolution-order",text:"Variable Resolution Order",depth:2,charIndex:2227}],frontmatter:{},version:"",_relativePath:"api/variables.md",description:"CSSX provides a reactive system for CSS variables that works at runtime."},{title:"Button Component",routePath:"/examples/button",lang:"en",toc:[{id:"usage",text:"Usage",depth:2,charIndex:748},{id:"key-concepts",text:"Key Concepts",depth:2,charIndex:933}],frontmatter:{},version:"",_relativePath:"examples/button.md",description:"A simple button with variants and sizes."},{title:"Card with Parts",routePath:"/examples/card",lang:"en",toc:[{id:"styling-from-parent",text:"Styling from Parent",depth:2,charIndex:1119},{id:"key-concepts",text:"Key Concepts",depth:2,charIndex:2164}],frontmatter:{},version:"",_relativePath:"examples/card.md",description:"A customizable card component using the part system for external styling."},{title:"Form Components",routePath:"/examples/form",lang:"en",toc:[{id:"usage",text:"Usage",depth:2,charIndex:1323},{id:"key-concepts",text:"Key Concepts",depth:2,charIndex:1538}],frontmatter:{},version:"",_relativePath:"examples/form.md",description:"Reusable form input with validation states."},{title:"Examples",routePath:"/examples/",lang:"en",toc:[{id:"components",text:"Components",depth:2,charIndex:60},{id:"patterns",text:"Patterns",depth:2,charIndex:388}],frontmatter:{},version:"",_relativePath:"examples/index.md",description:"Complete, copy-paste examples demonstrating CSSX features."},{title:"Responsive Layout",routePath:"/examples/layout",lang:"en",toc:[{id:"key-concepts",text:"Key Concepts",depth:2,charIndex:733}],frontmatter:{},version:"",_relativePath:"examples/layout.md",description:"Dashboard layout that adapts to screen size using media queries."},{title:"List with Selection",routePath:"/examples/list",lang:"en",toc:[{id:"usage",text:"Usage",depth:2,charIndex:1487},{id:"key-concepts",text:"Key Concepts",depth:2,charIndex:1813}],frontmatter:{},version:"",_relativePath:"examples/list.md",description:"Interactive list component with selection state."},{title:"Modal Dialog",routePath:"/examples/modal",lang:"en",toc:[{id:"usage",text:"Usage",depth:2,charIndex:1929},{id:"key-concepts",text:"Key Concepts",depth:2,charIndex:2375}],frontmatter:{},version:"",_relativePath:"examples/modal.md",description:"Accessible modal with backdrop and parts for customization."},{title:"Navigation Tabs",routePath:"/examples/tabs",lang:"en",toc:[{id:"usage",text:"Usage",depth:2,charIndex:1737},{id:"key-concepts",text:"Key Concepts",depth:2,charIndex:2050}],frontmatter:{},version:"",_relativePath:"examples/tabs.md",description:"Animated tab navigation with accessibility support."},{title:"Theme System",routePath:"/examples/theme",lang:"en",toc:[{id:"theme-configuration",text:"Theme Configuration",depth:2,charIndex:63},{id:"themed-app-component",text:"Themed App Component",depth:2,charIndex:1332},{id:"key-concepts",text:"Key Concepts",depth:2,charIndex:2811}],frontmatter:{},version:"",_relativePath:"examples/theme.md",description:"Complete dark/light theme implementation using CSS variables."},{title:"Animations",routePath:"/guide/animations",lang:"en",toc:[{id:"transitions",text:"Transitions",depth:2,charIndex:160},{id:"transition-syntax",text:"Transition Syntax",depth:3,charIndex:772},{id:"supported-timing-functions",text:"Supported Timing Functions",depth:3,charIndex:1047},{id:"keyframe-animations",text:"Keyframe Animations",depth:2,charIndex:1432},{id:"keyframe-syntax",text:"Keyframe Syntax",depth:3,charIndex:1869},{id:"animation-properties",text:"Animation Properties",depth:3,charIndex:2165},{id:"individual-properties",text:"Individual Properties",depth:3,charIndex:2658},{id:"using-with-reanimated-components",text:"Using with Reanimated Components",depth:2,charIndex:2972},{id:"with-pressable",text:"With Pressable",depth:3,charIndex:3707},{id:"multiple-animations",text:"Multiple Animations",depth:2,charIndex:4501},{id:"complete-example",text:"Complete Example",depth:2,charIndex:4707},{id:"how-it-works",text:"How It Works",depth:2,charIndex:6012},{id:"next-steps",text:"Next Steps",depth:2,charIndex:6419}],frontmatter:{},version:"",_relativePath:"guide/animations.md",description:"CSSX compiles CSS animations and transitions to a format compatible with Reanimated v4. Use standard CSS syntax and apply styles to Reanimated components."},{title:"Caching with teamplay",routePath:"/guide/caching",lang:"en",toc:[{id:"how-it-works",text:"How It Works",depth:2,charIndex:311},{id:"setup",text:"Setup",depth:2,charIndex:940},{id:"step-1-install-teamplay",text:"Step 1: Install teamplay",depth:3,charIndex:950},{id:"step-2-wrap-components-with-observer",text:"Step 2: Wrap Components with observer",depth:3,charIndex:1014},{id:"automatic-detection",text:"Automatic Detection",depth:2,charIndex:1642},{id:"manual-configuration",text:"Manual Configuration",depth:2,charIndex:1812},{id:"what-gets-cached",text:"What Gets Cached",depth:2,charIndex:2045},{id:"cache-key-components",text:"Cache Key Components",depth:3,charIndex:2226},{id:"automatic-invalidation",text:"Automatic Invalidation",depth:3,charIndex:2449},{id:"performance-impact",text:"Performance Impact",depth:2,charIndex:2908},{id:"using-with-startupjs",text:"Using with startupjs",depth:2,charIndex:4007},{id:"best-practices",text:"Best Practices",depth:2,charIndex:4345},{id:"wrap-all-styled-components",text:"Wrap All Styled Components",depth:3,charIndex:4364},{id:"debugging",text:"Debugging",depth:2,charIndex:5023},{id:"next-steps",text:"Next Steps",depth:2,charIndex:5415}],frontmatter:{},version:"",_relativePath:"guide/caching.md",description:"CSSX can cache style computations to improve rendering performance. This is particularly useful when components re-render frequently but their styles don't change. Note: Caching currently requires the teamplay library. In future versions, CSSX may include built-in caching that works independently."},{title:"Component Parts",routePath:"/guide/component-parts",lang:"en",toc:[{id:"the-problem",text:"The Problem",depth:2,charIndex:173},{id:"the-solution-part-and-part",text:"The Solution: `part` and `:part()`",depth:2,charIndex:693},{id:"step-1-expose-parts-in-the-component",text:"Step 1: Expose Parts in the Component",depth:3,charIndex:800},{id:"step-2-style-parts-from-the-parent",text:"Step 2: Style Parts from the Parent",depth:3,charIndex:1351},{id:"how-it-works",text:"How It Works",depth:2,charIndex:1815},{id:"the-root-part",text:"The `root` Part",depth:3,charIndex:2219},{id:"complete-example",text:"Complete Example",depth:2,charIndex:2822},{id:"nested-parts",text:"Nested Parts",depth:2,charIndex:4190},{id:"part-naming-conventions",text:"Part Naming Conventions",depth:2,charIndex:4527},{id:"multiple-and-conditional-parts",text:"Multiple and Conditional Parts",depth:2,charIndex:5028},{id:"multiple-parts-space-separated",text:"Multiple Parts (Space-Separated)",depth:3,charIndex:5167},{id:"conditional-parts-array-syntax",text:"Conditional Parts (Array Syntax)",depth:3,charIndex:5546},{id:"object-only-syntax",text:"Object-Only Syntax",depth:3,charIndex:6433},{id:"limitations",text:"Limitations",depth:3,charIndex:6593},{id:"compound-selectors-with-parts",text:"Compound Selectors with Parts",depth:2,charIndex:7479},{id:"best-practices",text:"Best Practices",depth:2,charIndex:7780},{id:"always-expose-a-root-part",text:"Always Expose a `root` Part",depth:3,charIndex:7799},{id:"document-available-parts",text:"Document Available Parts",depth:3,charIndex:8131},{id:"keep-parts-stable",text:"Keep Parts Stable",depth:3,charIndex:8396},{id:"next-steps",text:"Next Steps",depth:2,charIndex:8511}],frontmatter:{},version:"",_relativePath:"guide/component-parts.md",description:"One of CSSX's most powerful features is the ability to style internal parts of child components from the parent. This is similar to CSS Shadow Parts in web components."},{title:"Introduction",routePath:"/guide/",lang:"en",toc:[{id:"why-cssx",text:"Why CSSX?",depth:2,charIndex:327},{id:"the-problem",text:"The Problem",depth:3,charIndex:341},{id:"the-solution",text:"The Solution",depth:3,charIndex:845},{id:"key-features",text:"Key Features",depth:2,charIndex:1513},{id:"true-css-syntax",text:"True CSS Syntax",depth:3,charIndex:1530},{id:"cross-platform",text:"Cross-Platform",depth:3,charIndex:1835},{id:"component-composition-with-part",text:"Component Composition with `:part()`",depth:3,charIndex:2050},{id:"dynamic-css-variables",text:"Dynamic CSS Variables",depth:3,charIndex:2358},{id:"material-design-grid",text:"Material Design Grid",depth:3,charIndex:2532},{id:"performance-optimized",text:"Performance Optimized",depth:3,charIndex:2715},{id:"how-it-works",text:"How It Works",depth:2,charIndex:2908},{id:"next-steps",text:"Next Steps",depth:2,charIndex:4198}],frontmatter:{},version:"",_relativePath:"guide/index.md",description:"CSSX is a CSS-in-JS library that lets you write actual CSS syntax directly inside your JavaScript/TypeScript files. Unlike other CSS-in-JS solutions that use JavaScript objects to represent styles, CSSX uses real CSS — either plain CSS or Stylus syntax — giving you the full power of CSS with all its familiar syntax."},{title:"Installation",routePath:"/guide/installation",lang:"en",toc:[{id:"install-the-package",text:"Install the Package",depth:2,charIndex:0},{id:"configure-babel",text:"Configure Babel",depth:2,charIndex:73},{id:"verify-installation",text:"Verify Installation",depth:2,charIndex:431},{id:"separate-style-files-optional",text:"Separate Style Files (Optional)",depth:2,charIndex:914},{id:"metro-config-for-hot-reloading-optional",text:"Metro Config for Hot Reloading (Optional)",depth:3,charIndex:1506},{id:"web-support",text:"Web Support",depth:2,charIndex:2213},{id:"pure-react-web-projects",text:"Pure React Web Projects",depth:3,charIndex:2421},{id:"typescript-support",text:"TypeScript Support",depth:2,charIndex:2706},{id:"next-steps",text:"Next Steps",depth:2,charIndex:2986}],frontmatter:{},version:"",_relativePath:"guide/installation.mdx"},{title:"Pug Templates (Optional)",routePath:"/guide/pug",lang:"en",toc:[{id:"why-pug",text:"Why Pug?",depth:2,charIndex:167},{id:"basic-syntax",text:"Basic Syntax",depth:2,charIndex:554},{id:"pug--cssx-integration",text:"Pug + CSSX Integration",depth:2,charIndex:1013},{id:"class-names--stylename",text:"Class Names → styleName",depth:3,charIndex:1040},{id:"multiple-classes",text:"Multiple Classes",depth:3,charIndex:1243},{id:"dynamic-classes",text:"Dynamic Classes",depth:3,charIndex:1373},{id:"attributes",text:"Attributes",depth:2,charIndex:1603},{id:"content-and-interpolation",text:"Content and Interpolation",depth:2,charIndex:1896},{id:"text-content",text:"Text Content",depth:3,charIndex:1926},{id:"children",text:"Children",depth:3,charIndex:2183},{id:"conditional-rendering",text:"Conditional Rendering",depth:3,charIndex:2339},{id:"loops",text:"Loops",depth:3,charIndex:2496},{id:"components",text:"Components",depth:2,charIndex:2614},{id:"complete-example",text:"Complete Example",depth:2,charIndex:2850},{id:"pug-vs-jsx-comparison",text:"Pug vs JSX Comparison",depth:2,charIndex:4355},{id:"tips",text:"Tips",depth:2,charIndex:5046},{id:"keep-pug-simple",text:"Keep Pug Simple",depth:3,charIndex:5055},{id:"mix-jsx-and-pug",text:"Mix JSX and Pug",depth:3,charIndex:5416},{id:"disabling-pug",text:"Disabling Pug",depth:2,charIndex:5770},{id:"next-steps",text:"Next Steps",depth:2,charIndex:5936}],frontmatter:{},version:"",_relativePath:"guide/pug.md",description:"CSSX includes optional support for Pug syntax as an alternative to JSX. This is entirely optional — you can use CSSX with standard JSX without ever touching Pug."},{title:"Basic Usage",routePath:"/guide/usage",lang:"en",toc:[{id:"quick-start",text:"Quick Start",depth:2,charIndex:91},{id:"writing-styles",text:"Writing Styles",depth:2,charIndex:500},{id:"styl-stylus",text:"styl (Stylus)",depth:3,charIndex:636},{id:"css-plain-css",text:"css (Plain CSS)",depth:3,charIndex:806},{id:"applying-styles-with-stylename",text:"Applying Styles with styleName",depth:2,charIndex:1021},{id:"the-recommended-pattern",text:"The Recommended Pattern",depth:3,charIndex:1182},{id:"modifier-classes",text:"Modifier Classes",depth:2,charIndex:2722},{id:"dynamic-values",text:"Dynamic Values",depth:2,charIndex:3232},{id:"style-placement",text:"Style Placement",depth:2,charIndex:3564},{id:"the-u-unit",text:"The `u` Unit",depth:2,charIndex:4007},{id:"css-support",text:"CSS Support",depth:2,charIndex:4197},{id:"supported",text:"Supported",depth:3,charIndex:4280},{id:"not-supported",text:"Not Supported",depth:3,charIndex:5779},{id:"example-replacing-hover",text:"Example: Replacing :hover",depth:3,charIndex:6779},{id:"best-practices",text:"Best Practices",depth:2,charIndex:7344},{id:"next-steps",text:"Next Steps",depth:2,charIndex:7749}],frontmatter:{},version:"",_relativePath:"guide/usage.md",description:"This guide covers the essentials of CSSX: writing styles and applying them to components."},{title:"CSS Variables",routePath:"/guide/variables",lang:"en",toc:[{id:"basic-usage",text:"Basic Usage",depth:2,charIndex:174},{id:"setting-default-variables",text:"Setting Default Variables",depth:2,charIndex:715},{id:"dynamic-variables-runtime-updates",text:"Dynamic Variables (Runtime Updates)",depth:2,charIndex:1272},{id:"variable-priority",text:"Variable Priority",depth:2,charIndex:2086},{id:"using-variables-in-complex-values",text:"Using Variables in Complex Values",depth:2,charIndex:2526},{id:"practical-example-theme-system",text:"Practical Example: Theme System",depth:2,charIndex:2893},{id:"variables-with-u-units",text:"Variables with `u` Units",depth:2,charIndex:4555},{id:"tips-and-best-practices",text:"Tips and Best Practices",depth:2,charIndex:4786},{id:"naming-convention",text:"Naming Convention",depth:3,charIndex:4814},{id:"always-provide-fallbacks",text:"Always Provide Fallbacks",depth:3,charIndex:5384},{id:"group-related-variables",text:"Group Related Variables",depth:3,charIndex:5615},{id:"next-steps",text:"Next Steps",depth:2,charIndex:5936}],frontmatter:{},version:"",_relativePath:"guide/variables.md",description:"CSSX supports CSS custom properties (var()) with a twist: you can change variable values at runtime, and your components will automatically re-render with the new values."},{title:"",routePath:"/",lang:"en",toc:[],frontmatter:{pageType:"home",hero:{name:"CSSX",text:"CSS-in-JS with actual CSS",tagline:"Write CSS in React Native using... CSS!",actions:[{theme:"brand",text:"Get Started",link:"/guide/installation"},{theme:"alt",text:"Introduction",link:"/guide/"}]},features:[{title:"Real CSS Syntax",details:"Write CSS using familiar Stylus syntax with variables, mixins, and all CSS features — no JavaScript object notation",icon:"🎨"},{title:"React Native + Web",details:"Same styles work on iOS, Android, and Web via react-native-web. Write once, run everywhere",icon:"📱"},{title:"Component Parts",details:"Style internal elements of child components using :part() selectors, similar to CSS Shadow Parts",icon:"🧩"},{title:"Dynamic CSS Variables",details:"Use var(--name) with runtime updates. Change themes instantly and components re-render automatically",icon:"⚡"},{title:"8px Grid System",details:"Built-in 'u' unit (1u = 8px) for consistent spacing following Material Design guidelines",icon:"📐"},{title:"Performance Caching",details:"Optional style caching with teamplay prevents unnecessary re-renders for optimal performance",icon:"🚀"}]},version:"",_relativePath:"index.md"}]},i={"###en":"4b251df8"}},1014(e,t,a){"use strict";a.d(t,{A:()=>n});let n={github:'<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>'}},2650(e,t,a){"use strict";a.d(t,{A:()=>n});let n={languagesText:{en:"Languages"},themeText:{en:"Theme"},versionsText:{en:"Versions"},menuTitle:{en:"Menu"},outlineTitle:{en:"ON THIS PAGE"},scrollToTopText:{en:"Back to top"},lastUpdatedText:{en:"Last Updated"},prevPageText:{en:"Previous page"},nextPageText:{en:"Next page"},sourceCodeText:{en:"Source Code"},searchPlaceholderText:{en:"Search"},searchPanelCancelText:{en:"Cancel"},searchNoResultsText:{en:"No matching results"},searchSuggestedQueryText:{en:"Try searching for different keywords"},"overview.filterNameText":{en:"Filter"},"overview.filterPlaceholderText":{en:"Search API"},"overview.filterNoResultText":{en:"No matching API found"},openInText:{en:"Open in {{name}}"},copyMarkdownText:{en:"Copy Markdown"},copyMarkdownLinkText:{en:"Copy Markdown link"},editLinkText:{en:"📝 Edit this page"},codeButtonGroupCopyButtonText:{en:"Copy code"},notFoundText:{en:"PAGE NOT FOUND"},takeMeHomeText:{en:"Take me home"}}},8369(e,t,a){"use strict";a.d(t,{A:()=>n});let n=[[a(4220).A,{}]]},5344(){},948(e,t,a){"use strict";a.r(t),a.d(t,{onSearch:()=>n});let n=()=>{}},3974(e,t,a){"use strict";a.d(t,{J:()=>A});var n=a(6540),i=a(4764);let r=(0,i.lazyWithPreload)(()=>a.e("25").then(a.bind(a,2448))),d=(0,i.lazyWithPreload)(()=>a.e("936").then(a.bind(a,5755))),s=(0,i.lazyWithPreload)(()=>a.e("837").then(a.bind(a,2383))),o=(0,i.lazyWithPreload)(()=>a.e("255").then(a.bind(a,6258))),l=(0,i.lazyWithPreload)(()=>a.e("365").then(a.bind(a,892))),p=(0,i.lazyWithPreload)(()=>a.e("646").then(a.bind(a,3765))),h=(0,i.lazyWithPreload)(()=>a.e("925").then(a.bind(a,1340))),c=(0,i.lazyWithPreload)(()=>a.e("118").then(a.bind(a,4581))),x=(0,i.lazyWithPreload)(()=>a.e("816").then(a.bind(a,2011))),m=(0,i.lazyWithPreload)(()=>a.e("326").then(a.bind(a,5437))),u=(0,i.lazyWithPreload)(()=>a.e("322").then(a.bind(a,6401))),g=(0,i.lazyWithPreload)(()=>a.e("300").then(a.bind(a,2375))),y=(0,i.lazyWithPreload)(()=>a.e("874").then(a.bind(a,9809))),b=(0,i.lazyWithPreload)(()=>a.e("916").then(a.bind(a,7999))),I=(0,i.lazyWithPreload)(()=>a.e("115").then(a.bind(a,6110))),f=(0,i.lazyWithPreload)(()=>a.e("836").then(a.bind(a,6911))),v=(0,i.lazyWithPreload)(()=>a.e("35").then(a.bind(a,9558))),S=(0,i.lazyWithPreload)(()=>a.e("622").then(a.bind(a,9082))),P=(0,i.lazyWithPreload)(()=>a.e("374").then(a.bind(a,9973))),C=(0,i.lazyWithPreload)(()=>a.e("1").then(a.bind(a,5312))),w=(0,i.lazyWithPreload)(()=>a.e("217").then(a.bind(a,3312))),k=(0,i.lazyWithPreload)(()=>a.e("63").then(a.bind(a,8650))),T=(0,i.lazyWithPreload)(()=>a.e("849").then(a.bind(a,6920))),j=(0,i.lazyWithPreload)(()=>a.e("352").then(a.bind(a,5291))),W=(0,i.lazyWithPreload)(()=>a.e("722").then(a.bind(a,1497))),E=(0,i.lazyWithPreload)(()=>a.e("232").then(a.bind(a,43))),A=[{path:"/api/babel",element:n.createElement(r),filePath:"api/babel.md",preload:async()=>(await r.preload(),a.e("25").then(a.bind(a,2448))),lang:"en",version:""},{path:"/api/css",element:n.createElement(d),filePath:"api/css.md",preload:async()=>(await d.preload(),a.e("936").then(a.bind(a,5755))),lang:"en",version:""},{path:"/api/",element:n.createElement(s),filePath:"api/index.md",preload:async()=>(await s.preload(),a.e("837").then(a.bind(a,2383))),lang:"en",version:""},{path:"/api/jsx-props",element:n.createElement(o),filePath:"api/jsx-props.md",preload:async()=>(await o.preload(),a.e("255").then(a.bind(a,6258))),lang:"en",version:""},{path:"/api/pug",element:n.createElement(l),filePath:"api/pug.md",preload:async()=>(await l.preload(),a.e("365").then(a.bind(a,892))),lang:"en",version:""},{path:"/api/styl-function",element:n.createElement(p),filePath:"api/styl-function.md",preload:async()=>(await p.preload(),a.e("646").then(a.bind(a,3765))),lang:"en",version:""},{path:"/api/styl",element:n.createElement(h),filePath:"api/styl.md",preload:async()=>(await h.preload(),a.e("925").then(a.bind(a,1340))),lang:"en",version:""},{path:"/api/variables",element:n.createElement(c),filePath:"api/variables.md",preload:async()=>(await c.preload(),a.e("118").then(a.bind(a,4581))),lang:"en",version:""},{path:"/examples/button",element:n.createElement(x),filePath:"examples/button.md",preload:async()=>(await x.preload(),a.e("816").then(a.bind(a,2011))),lang:"en",version:""},{path:"/examples/card",element:n.createElement(m),filePath:"examples/card.md",preload:async()=>(await m.preload(),a.e("326").then(a.bind(a,5437))),lang:"en",version:""},{path:"/examples/form",element:n.createElement(u),filePath:"examples/form.md",preload:async()=>(await u.preload(),a.e("322").then(a.bind(a,6401))),lang:"en",version:""},{path:"/examples/",element:n.createElement(g),filePath:"examples/index.md",preload:async()=>(await g.preload(),a.e("300").then(a.bind(a,2375))),lang:"en",version:""},{path:"/examples/layout",element:n.createElement(y),filePath:"examples/layout.md",preload:async()=>(await y.preload(),a.e("874").then(a.bind(a,9809))),lang:"en",version:""},{path:"/examples/list",element:n.createElement(b),filePath:"examples/list.md",preload:async()=>(await b.preload(),a.e("916").then(a.bind(a,7999))),lang:"en",version:""},{path:"/examples/modal",element:n.createElement(I),filePath:"examples/modal.md",preload:async()=>(await I.preload(),a.e("115").then(a.bind(a,6110))),lang:"en",version:""},{path:"/examples/tabs",element:n.createElement(f),filePath:"examples/tabs.md",preload:async()=>(await f.preload(),a.e("836").then(a.bind(a,6911))),lang:"en",version:""},{path:"/examples/theme",element:n.createElement(v),filePath:"examples/theme.md",preload:async()=>(await v.preload(),a.e("35").then(a.bind(a,9558))),lang:"en",version:""},{path:"/guide/animations",element:n.createElement(S),filePath:"guide/animations.md",preload:async()=>(await S.preload(),a.e("622").then(a.bind(a,9082))),lang:"en",version:""},{path:"/guide/caching",element:n.createElement(P),filePath:"guide/caching.md",preload:async()=>(await P.preload(),a.e("374").then(a.bind(a,9973))),lang:"en",version:""},{path:"/guide/component-parts",element:n.createElement(C),filePath:"guide/component-parts.md",preload:async()=>(await C.preload(),a.e("1").then(a.bind(a,5312))),lang:"en",version:""},{path:"/guide/",element:n.createElement(w),filePath:"guide/index.md",preload:async()=>(await w.preload(),a.e("217").then(a.bind(a,3312))),lang:"en",version:""},{path:"/guide/installation",element:n.createElement(k),filePath:"guide/installation.mdx",preload:async()=>(await k.preload(),a.e("63").then(a.bind(a,8650))),lang:"en",version:""},{path:"/guide/pug",element:n.createElement(T),filePath:"guide/pug.md",preload:async()=>(await T.preload(),a.e("849").then(a.bind(a,6920))),lang:"en",version:""},{path:"/guide/usage",element:n.createElement(j),filePath:"guide/usage.md",preload:async()=>(await j.preload(),a.e("352").then(a.bind(a,5291))),lang:"en",version:""},{path:"/guide/variables",element:n.createElement(W),filePath:"guide/variables.md",preload:async()=>(await W.preload(),a.e("722").then(a.bind(a,1497))),lang:"en",version:""},{path:"/",element:n.createElement(E),filePath:"index.md",preload:async()=>(await E.preload(),a.e("232").then(a.bind(a,43))),lang:"en",version:""}]},6701(e,t,a){"use strict";a.d(t,{A:()=>n});let n={base:"/",title:"CSSX",description:"CSS-in-JS with actual CSS",icon:"",route:{cleanUrls:!0},themeConfig:{enableContentAnimation:!0,socialLinks:[{icon:"github",mode:"link",content:"https://github.com/startupjs/cssx"}],footer:{message:"© 2026 StartupJS. All Rights Reserved."},hideNavbar:"auto",sidebar:{"/":[{text:"Guide",items:[{text:"Introduction",link:"/guide/index.html"},{text:"Installation",link:"/guide/installation.html"},{text:"Usage",link:"/guide/usage.html"},{text:"Component Parts",link:"/guide/component-parts.html"},{text:"CSS Variables",link:"/guide/variables.html"},{text:"Animations",link:"/guide/animations.html"},{text:"Pug Templates",link:"/guide/pug.html"},{text:"Caching",link:"/guide/caching.html"}],collapsed:!1,collapsible:!0},{text:"API",items:[{text:"Overview",link:"/api/index.html"},{text:"styl Template",link:"/api/styl.html"},{text:"css Template",link:"/api/css.html"},{text:"pug Template",link:"/api/pug.html"},{text:"styl() Function",link:"/api/styl-function.html"},{text:"CSS Variables",link:"/api/variables.html"},{text:"JSX Props",link:"/api/jsx-props.html"},{text:"Babel Config",link:"/api/babel.html"}],collapsed:!1,collapsible:!0},{text:"Examples",items:[{text:"Overview",link:"/examples/index.html"},{text:"Button",link:"/examples/button.html"},{text:"Card with Parts",link:"/examples/card.html"},{text:"Form Input",link:"/examples/form.html"},{text:"Modal Dialog",link:"/examples/modal.html"},{text:"Tabs",link:"/examples/tabs.html"},{text:"List",link:"/examples/list.html"},{text:"Theme System",link:"/examples/theme.html"},{text:"Responsive Layout",link:"/examples/layout.html"}],collapsed:!1,collapsible:!0}]},nav:[{text:"Docs",link:"/guide/index.html",activeMatch:"/guide/.*"},{text:"API",link:"/api/index.html",activeMatch:"/api/.*"}]},lang:"en",locales:[],logo:"",logoText:"",logoHref:"",multiVersion:{default:"",versions:[]},search:{},markdown:{showLineNumbers:!1,defaultWrapCode:!1,shiki:{}}}}},o={};function l(e){var t=o[e];if(void 0!==t)return t.exports;var a=o[e]={exports:{}};return s[e].call(a.exports,a,a.exports,l),a.exports}l.m=s,l.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return l.d(t,{a:t}),t},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,l.t=function(a,n){if(1&n&&(a=this(a)),8&n||"object"==typeof a&&a&&(4&n&&a.__esModule||16&n&&"function"==typeof a.then))return a;var i=Object.create(null);l.r(i);var r={};e=e||[null,t({}),t([]),t(t)];for(var d=2&n&&a;("object"==typeof d||"function"==typeof d)&&!~e.indexOf(d);d=t(d))Object.getOwnPropertyNames(d).forEach(e=>{r[e]=()=>a[e]});return r.default=()=>a,l.d(i,r),i},l.d=(e,t)=>{for(var a in t)l.o(t,a)&&!l.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},l.f={},l.e=e=>Promise.all(Object.keys(l.f).reduce((t,a)=>(l.f[a](e,t),t),[])),l.k=e=>""+e+".css",l.u=e=>"static/js/async/"+e+"."+({1:"628cda69",115:"7b866410",118:"8babc3f8",217:"17d88b3d",232:"59e1fe67",25:"75e56739",255:"731a649f",300:"bcb3f016",322:"c90213e6",326:"5eb3cdfb",35:"4f4500a4",352:"d5a28770",365:"d578a3f1",374:"0f6cd24d",435:"d4ae03cf",622:"8d98e1a4",63:"c10d4676",646:"97123981",722:"376d09e8",816:"a73d004b",836:"8ae0a61a",837:"20895be2",849:"3b3f9817",874:"67fe1ddc",916:"17725450",925:"b0ea0851",936:"df2a392b"})[e]+".js",l.miniCssF=e=>""+e+".css",l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},l.l=function(e,t,n,i){if(a[e])return void a[e].push(t);if(void 0!==n)for(var r,d,s=document.getElementsByTagName("script"),o=0;o<s.length;o++){var p=s[o];if(p.getAttribute("src")==e){r=p;break}}r||(d=!0,(r=document.createElement("script")).timeout=120,l.nc&&r.setAttribute("nonce",l.nc),r.src=e),a[e]=[t];var h=function(t,n){r.onerror=r.onload=null,clearTimeout(c);var i=a[e];if(delete a[e],r.parentNode&&r.parentNode.removeChild(r),i&&i.forEach(function(e){return e(n)}),t)return t(n)},c=setTimeout(h.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=h.bind(null,r.onerror),r.onload=h.bind(null,r.onload),d&&document.head.appendChild(r)},l.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n=[],l.O=(e,t,a,i)=>{if(t){i=i||0;for(var r=n.length;r>0&&n[r-1][2]>i;r--)n[r]=n[r-1];n[r]=[t,a,i];return}for(var d=1/0,r=0;r<n.length;r++){for(var[t,a,i]=n[r],s=!0,o=0;o<t.length;o++)(!1&i||d>=i)&&Object.keys(l.O).every(e=>l.O[e](t[o]))?t.splice(o--,1):(s=!1,i<d&&(d=i));if(s){n.splice(r--,1);var p=a();void 0!==p&&(e=p)}}return e},l.p="/",i={410:0},l.f.j=function(e,t){var a=l.o(i,e)?i[e]:void 0;if(0!==a)if(a)t.push(a[2]);else{var n=new Promise((t,n)=>a=i[e]=[t,n]);t.push(a[2]=n);var r=l.p+l.u(e),d=Error();l.l(r,function(t){if(l.o(i,e)&&(0!==(a=i[e])&&(i[e]=void 0),a)){var n=t&&("load"===t.type?"missing":t.type),r=t&&t.target&&t.target.src;d.message="Loading chunk "+e+" failed.\n("+n+": "+r+")",d.name="ChunkLoadError",d.type=n,d.request=r,a[1](d)}},"chunk-"+e,e)}},l.O.j=e=>0===i[e],r=(e,t)=>{var a,n,[r,d,s]=t,o=0;if(r.some(e=>0!==i[e])){for(a in d)l.o(d,a)&&(l.m[a]=d[a]);if(s)var p=s(l)}for(e&&e(t);o<r.length;o++)n=r[o],l.o(i,n)&&i[n]&&i[n][0](),i[n]=0;return l.O(p)},(d=self.rspackChunk=self.rspackChunk||[]).forEach(r.bind(null,0)),d.push=r.bind(null,d.push.bind(d)),l.O(void 0,["14","783","535","841"],()=>l(2531)),l.O(void 0,["14","783","535","841"],()=>l(5344)),l.O(void 0,["14","783","535","841"],()=>l(9663));var p=l.O(void 0,["14","783","535","841"],()=>l(5686));p=l.O(p)})();