[{"data":1,"prerenderedAt":3856},["ShallowReactive",2],{"navigation_en":3,"-docs-getting-started-tooling-scanner":407,"-docs-getting-started-tooling-scanner-surround":3851},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":43,"body":409,"description":3843,"extension":3844,"links":3845,"meta":3846,"navigation":3847,"path":44,"seo":3848,"sitemap":3849,"stem":45,"__hash__":3850},"docs_gettingStarted/docs/getting-started/05.tooling/02.scanner.md",{"type":410,"value":411,"toc":3808},"minimark",[412,416,421,471,475,487,969,973,979,1132,1136,1139,1247,1251,1254,1291,1295,1309,1313,1319,1387,1391,1400,1480,1484,1489,1552,1568,1572,1575,1579,1585,1589,1592,1690,1694,1706,1710,1713,1750,1754,1761,1765,1910,1914,2118,2122,2125,2446,2449,2456,2463,2467,2546,2564,2572,2585,3617,3633,3637,3640,3643,3647,3708,3712,3804],[413,414,415],"p",{},"The scanner reads your project's source files, finds Styleframe utility class names, and auto-generates the corresponding CSS. You write classes in your templates, and the scanner handles CSS generation at build time — similar to Tailwind CSS JIT mode.",[417,418,420],"h2",{"id":419},"why-use-the-scanner","Why Use the Scanner?",[422,423,424,432,438,449,459,465],"ul",{},[425,426,427,431],"li",{},[428,429,430],"strong",{},"Zero manual registration",": Use utility classes directly in your markup without pre-defining every value",[425,433,434,437],{},[428,435,436],{},"Automatic CSS generation",": Only the CSS you use gets generated",[425,439,440,443,444,448],{},[428,441,442],{},"Arbitrary value support",": Use bracket syntax like ",[445,446,447],"code",{},"_padding:[2.5rem]"," for one-off values",[425,450,451,454,455,458],{},[428,452,453],{},"Modifier auto-detection",": Compound class names like ",[445,456,457],{},"_hover:background:primary"," are recognized and registered automatically",[425,460,461,464],{},[428,462,463],{},"HMR support",": Template changes trigger incremental rescans during development",[425,466,467,470],{},[428,468,469],{},"Framework-agnostic",": Built-in extractors for HTML, Vue, React, Svelte, Solid, Astro, MDX, and more",[417,472,474],{"id":473},"setup","Setup",[476,477,478,479,482,483,486],"warning",{},"The scanner needs registered utility and modifier factories to match against. Use ",[445,480,481],{},"useUtilitiesPreset()"," and ",[445,484,485],{},"useModifiersPreset()"," to register all built-in factories, or register individual ones as needed.",[488,489,490,495,506,696,700,707,852,856,859],"steps",{},[491,492,494],"h3",{"id":493},"enable-the-scanner-in-your-vite-config","Enable the scanner in your Vite config",[413,496,497,498,501,502,505],{},"Add the ",[445,499,500],{},"scanner"," option with ",[445,503,504],{},"content"," glob patterns to the Styleframe plugin:",[507,508,514],"pre",{"className":509,"code":510,"filename":511,"language":512,"meta":513,"style":513},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineConfig } from 'vite';\nimport styleframe from '@styleframe/plugin/vite';\n\nexport default defineConfig({\n    plugins: [\n        styleframe({\n            scanner: {\n                // Glob patterns for files to scan\n                content: ['./src/**/*.{html,vue,jsx,tsx,svelte,astro}'],\n            },\n        }),\n    ],\n});\n","vite.config.ts","ts","",[445,515,516,552,572,578,596,609,619,630,637,661,667,678,686],{"__ignoreMap":513},[517,518,521,525,529,533,536,539,542,546,549],"span",{"class":519,"line":520},"line",1,[517,522,524],{"class":523},"s7zQu","import",[517,526,528],{"class":527},"sMK4o"," {",[517,530,532],{"class":531},"sTEyZ"," defineConfig",[517,534,535],{"class":527}," }",[517,537,538],{"class":523}," from",[517,540,541],{"class":527}," '",[517,543,545],{"class":544},"sfazB","vite",[517,547,548],{"class":527},"'",[517,550,551],{"class":527},";\n",[517,553,555,557,560,563,565,568,570],{"class":519,"line":554},2,[517,556,524],{"class":523},[517,558,559],{"class":531}," styleframe ",[517,561,562],{"class":523},"from",[517,564,541],{"class":527},[517,566,567],{"class":544},"@styleframe/plugin/vite",[517,569,548],{"class":527},[517,571,551],{"class":527},[517,573,575],{"class":519,"line":574},3,[517,576,577],{"emptyLinePlaceholder":206},"\n",[517,579,581,584,587,590,593],{"class":519,"line":580},4,[517,582,583],{"class":523},"export",[517,585,586],{"class":523}," default",[517,588,532],{"class":589},"s2Zo4",[517,591,592],{"class":531},"(",[517,594,595],{"class":527},"{\n",[517,597,599,603,606],{"class":519,"line":598},5,[517,600,602],{"class":601},"swJcz","    plugins",[517,604,605],{"class":527},":",[517,607,608],{"class":531}," [\n",[517,610,612,615,617],{"class":519,"line":611},6,[517,613,614],{"class":589},"        styleframe",[517,616,592],{"class":531},[517,618,595],{"class":527},[517,620,622,625,627],{"class":519,"line":621},7,[517,623,624],{"class":601},"            scanner",[517,626,605],{"class":527},[517,628,629],{"class":527}," {\n",[517,631,633],{"class":519,"line":632},8,[517,634,636],{"class":635},"sHwdD","                // Glob patterns for files to scan\n",[517,638,640,643,645,648,650,653,655,658],{"class":519,"line":639},9,[517,641,642],{"class":601},"                content",[517,644,605],{"class":527},[517,646,647],{"class":531}," [",[517,649,548],{"class":527},[517,651,652],{"class":544},"./src/**/*.{html,vue,jsx,tsx,svelte,astro}",[517,654,548],{"class":527},[517,656,657],{"class":531},"]",[517,659,660],{"class":527},",\n",[517,662,664],{"class":519,"line":663},10,[517,665,666],{"class":527},"            },\n",[517,668,670,673,676],{"class":519,"line":669},11,[517,671,672],{"class":527},"        }",[517,674,675],{"class":531},")",[517,677,660],{"class":527},[517,679,681,684],{"class":519,"line":680},12,[517,682,683],{"class":531},"    ]",[517,685,660],{"class":527},[517,687,689,692,694],{"class":519,"line":688},13,[517,690,691],{"class":527},"}",[517,693,675],{"class":531},[517,695,551],{"class":527},[491,697,699],{"id":698},"register-utility-and-modifier-factories","Register utility and modifier factories",[413,701,702,703,706],{},"Open your ",[445,704,705],{},"styleframe.config.ts"," and register the factories the scanner will match against:",[507,708,710],{"className":509,"code":709,"filename":705,"language":512,"meta":513,"style":513},"import { styleframe } from 'styleframe';\nimport { useUtilitiesPreset } from '@styleframe/theme';\nimport { useModifiersPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Register utility factories for the scanner to match against\nuseUtilitiesPreset(s);\n\n// Register modifier factories for modifier detection\nuseModifiersPreset(s);\n\nexport default s;\n",[445,711,712,734,756,777,781,800,804,809,819,823,828,837,841],{"__ignoreMap":513},[517,713,714,716,718,721,723,725,727,730,732],{"class":519,"line":520},[517,715,524],{"class":523},[517,717,528],{"class":527},[517,719,720],{"class":531}," styleframe",[517,722,535],{"class":527},[517,724,538],{"class":523},[517,726,541],{"class":527},[517,728,729],{"class":544},"styleframe",[517,731,548],{"class":527},[517,733,551],{"class":527},[517,735,736,738,740,743,745,747,749,752,754],{"class":519,"line":554},[517,737,524],{"class":523},[517,739,528],{"class":527},[517,741,742],{"class":531}," useUtilitiesPreset",[517,744,535],{"class":527},[517,746,538],{"class":523},[517,748,541],{"class":527},[517,750,751],{"class":544},"@styleframe/theme",[517,753,548],{"class":527},[517,755,551],{"class":527},[517,757,758,760,762,765,767,769,771,773,775],{"class":519,"line":574},[517,759,524],{"class":523},[517,761,528],{"class":527},[517,763,764],{"class":531}," useModifiersPreset",[517,766,535],{"class":527},[517,768,538],{"class":523},[517,770,541],{"class":527},[517,772,751],{"class":544},[517,774,548],{"class":527},[517,776,551],{"class":527},[517,778,779],{"class":519,"line":580},[517,780,577],{"emptyLinePlaceholder":206},[517,782,783,787,790,793,795,798],{"class":519,"line":598},[517,784,786],{"class":785},"spNyl","const",[517,788,789],{"class":531}," s ",[517,791,792],{"class":527},"=",[517,794,720],{"class":589},[517,796,797],{"class":531},"()",[517,799,551],{"class":527},[517,801,802],{"class":519,"line":611},[517,803,577],{"emptyLinePlaceholder":206},[517,805,806],{"class":519,"line":621},[517,807,808],{"class":635},"// Register utility factories for the scanner to match against\n",[517,810,811,814,817],{"class":519,"line":632},[517,812,813],{"class":589},"useUtilitiesPreset",[517,815,816],{"class":531},"(s)",[517,818,551],{"class":527},[517,820,821],{"class":519,"line":639},[517,822,577],{"emptyLinePlaceholder":206},[517,824,825],{"class":519,"line":663},[517,826,827],{"class":635},"// Register modifier factories for modifier detection\n",[517,829,830,833,835],{"class":519,"line":669},[517,831,832],{"class":589},"useModifiersPreset",[517,834,816],{"class":531},[517,836,551],{"class":527},[517,838,839],{"class":519,"line":680},[517,840,577],{"emptyLinePlaceholder":206},[517,842,843,845,847,850],{"class":519,"line":688},[517,844,583],{"class":523},[517,846,586],{"class":523},[517,848,849],{"class":531}," s",[517,851,551],{"class":527},[491,853,855],{"id":854},"use-utility-classes-in-your-templates","Use utility classes in your templates",[413,857,858],{},"Write utility classes directly in your markup. The scanner detects them and generates the CSS automatically.",[507,860,865],{"className":861,"code":862,"filename":863,"language":864,"meta":513,"style":513},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Use utility classes directly — the scanner generates the CSS -->\n\u003Cdiv class=\"_display:flex _padding:1rem _gap:0.5rem\">\n    \u003Cp class=\"_font-size:1.25rem _color:primary\">Hello world\u003C/p>\n    \u003Cbutton class=\"_background:primary _hover:background:secondary _padding:0.75rem\">\n        Click me\n    \u003C/button>\n\u003C/div>\n","component.html","html",[445,866,867,872,896,927,947,952,961],{"__ignoreMap":513},[517,868,869],{"class":519,"line":520},[517,870,871],{"class":635},"\u003C!-- Use utility classes directly — the scanner generates the CSS -->\n",[517,873,874,877,880,883,885,888,891,893],{"class":519,"line":554},[517,875,876],{"class":527},"\u003C",[517,878,879],{"class":601},"div",[517,881,882],{"class":785}," class",[517,884,792],{"class":527},[517,886,887],{"class":527},"\"",[517,889,890],{"class":544},"_display:flex _padding:1rem _gap:0.5rem",[517,892,887],{"class":527},[517,894,895],{"class":527},">\n",[517,897,898,901,903,905,907,909,912,914,917,920,923,925],{"class":519,"line":574},[517,899,900],{"class":527},"    \u003C",[517,902,413],{"class":601},[517,904,882],{"class":785},[517,906,792],{"class":527},[517,908,887],{"class":527},[517,910,911],{"class":544},"_font-size:1.25rem _color:primary",[517,913,887],{"class":527},[517,915,916],{"class":527},">",[517,918,919],{"class":531},"Hello world",[517,921,922],{"class":527},"\u003C/",[517,924,413],{"class":601},[517,926,895],{"class":527},[517,928,929,931,934,936,938,940,943,945],{"class":519,"line":580},[517,930,900],{"class":527},[517,932,933],{"class":601},"button",[517,935,882],{"class":785},[517,937,792],{"class":527},[517,939,887],{"class":527},[517,941,942],{"class":544},"_background:primary _hover:background:secondary _padding:0.75rem",[517,944,887],{"class":527},[517,946,895],{"class":527},[517,948,949],{"class":519,"line":598},[517,950,951],{"class":531},"        Click me\n",[517,953,954,957,959],{"class":519,"line":611},[517,955,956],{"class":527},"    \u003C/",[517,958,933],{"class":601},[517,960,895],{"class":527},[517,962,963,965,967],{"class":519,"line":621},[517,964,922],{"class":527},[517,966,879],{"class":601},[517,968,895],{"class":527},[417,970,972],{"id":971},"configuration","Configuration",[413,974,975,976,978],{},"The scanner is configured through the ",[445,977,500],{}," option in the Vite plugin.",[980,981,982,1001],"table",{},[983,984,985],"thead",{},[986,987,988,992,995,998],"tr",{},[989,990,991],"th",{},"Option",[989,993,994],{},"Type",[989,996,997],{},"Default",[989,999,1000],{},"Description",[1002,1003,1004,1023,1045,1068,1088,1109],"tbody",{},[986,1005,1006,1012,1017,1020],{},[1007,1008,1009],"td",{},[445,1010,1011],{},"scanner.content",[1007,1013,1014],{},[445,1015,1016],{},"string[]",[1007,1018,1019],{},"—",[1007,1021,1022],{},"Glob patterns for files to scan for utility class names. Required.",[986,1024,1025,1030,1035,1038],{},[1007,1026,1027],{},[445,1028,1029],{},"scanner.extractors",[1007,1031,1032],{},[445,1033,1034],{},"Extractor[]",[1007,1036,1037],{},"Built-in",[1007,1039,1040,1041,1044],{},"Custom extractor functions for file types not supported by default. Each extractor receives ",[445,1042,1043],{},"(content: string, filePath: string)"," and returns an array of class name strings.",[986,1046,1047,1052,1057,1059],{},[1007,1048,1049],{},[445,1050,1051],{},"scanner.utilities",[1007,1053,1054],{},[445,1055,1056],{},"object",[1007,1058,1019],{},[1007,1060,1061,1062,1067],{},"Custom utility class syntax configuration. See ",[1063,1064,1066],"a",{"href":1065},"#custom-utility-syntax","Custom Utility Syntax",".",[986,1069,1070,1075,1080,1085],{},[1007,1071,1072],{},[445,1073,1074],{},"scanner.utilities.pattern",[1007,1076,1077],{},[445,1078,1079],{},"RegExp",[1007,1081,1082],{},[445,1083,1084],{},"/_[a-zA-Z]…/g",[1007,1086,1087],{},"Regex with global flag to extract utility class candidates from file content.",[986,1089,1090,1095,1100,1102],{},[1007,1091,1092],{},[445,1093,1094],{},"scanner.utilities.parse",[1007,1096,1097],{},[445,1098,1099],{},"(className: string) => ParsedUtility | null",[1007,1101,1037],{},[1007,1103,1104,1105,1108],{},"Decomposes a class name string into structured parts (name, value, modifiers). Return ",[445,1106,1107],{},"null"," for non-matching strings.",[986,1110,1111,1116,1121,1126],{},[1007,1112,1113],{},[445,1114,1115],{},"scanner.utilities.selector",[1007,1117,1118],{},[445,1119,1120],{},"UtilitySelectorFn",[1007,1122,1123],{},[445,1124,1125],{},"defaultUtilitySelectorFn",[1007,1127,1128,1129,1067],{},"Generates a raw class name from its parts. Must be the inverse of ",[445,1130,1131],{},"parse",[491,1133,1135],{"id":1134},"content-patterns","Content Patterns",[413,1137,1138],{},"Specify which files the scanner should search using glob patterns:",[507,1140,1142],{"className":509,"code":1141,"filename":511,"language":512,"meta":513,"style":513},"styleframe({\n    scanner: {\n        content: [\n            './src/**/*.{html,vue,jsx,tsx}',       // Source files\n            './components/**/*.svelte',            // Svelte components\n            './pages/**/*.astro',                  // Astro pages\n            './content/**/*.mdx',                  // MDX content\n        ],\n    },\n})\n",[445,1143,1144,1152,1161,1170,1186,1200,1214,1228,1235,1240],{"__ignoreMap":513},[517,1145,1146,1148,1150],{"class":519,"line":520},[517,1147,729],{"class":589},[517,1149,592],{"class":531},[517,1151,595],{"class":527},[517,1153,1154,1157,1159],{"class":519,"line":554},[517,1155,1156],{"class":601},"    scanner",[517,1158,605],{"class":527},[517,1160,629],{"class":527},[517,1162,1163,1166,1168],{"class":519,"line":574},[517,1164,1165],{"class":601},"        content",[517,1167,605],{"class":527},[517,1169,608],{"class":531},[517,1171,1172,1175,1178,1180,1183],{"class":519,"line":580},[517,1173,1174],{"class":527},"            '",[517,1176,1177],{"class":544},"./src/**/*.{html,vue,jsx,tsx}",[517,1179,548],{"class":527},[517,1181,1182],{"class":527},",",[517,1184,1185],{"class":635},"       // Source files\n",[517,1187,1188,1190,1193,1195,1197],{"class":519,"line":598},[517,1189,1174],{"class":527},[517,1191,1192],{"class":544},"./components/**/*.svelte",[517,1194,548],{"class":527},[517,1196,1182],{"class":527},[517,1198,1199],{"class":635},"            // Svelte components\n",[517,1201,1202,1204,1207,1209,1211],{"class":519,"line":611},[517,1203,1174],{"class":527},[517,1205,1206],{"class":544},"./pages/**/*.astro",[517,1208,548],{"class":527},[517,1210,1182],{"class":527},[517,1212,1213],{"class":635},"                  // Astro pages\n",[517,1215,1216,1218,1221,1223,1225],{"class":519,"line":621},[517,1217,1174],{"class":527},[517,1219,1220],{"class":544},"./content/**/*.mdx",[517,1222,548],{"class":527},[517,1224,1182],{"class":527},[517,1226,1227],{"class":635},"                  // MDX content\n",[517,1229,1230,1233],{"class":519,"line":632},[517,1231,1232],{"class":531},"        ]",[517,1234,660],{"class":527},[517,1236,1237],{"class":519,"line":639},[517,1238,1239],{"class":527},"    },\n",[517,1241,1242,1244],{"class":519,"line":663},[517,1243,691],{"class":527},[517,1245,1246],{"class":531},")\n",[491,1248,1250],{"id":1249},"default-ignore-patterns","Default Ignore Patterns",[413,1252,1253],{},"The scanner automatically skips these directories:",[422,1255,1256,1261,1266,1271,1276,1281,1286],{},[425,1257,1258],{},[445,1259,1260],{},"**/node_modules/**",[425,1262,1263],{},[445,1264,1265],{},"**/.git/**",[425,1267,1268],{},[445,1269,1270],{},"**/dist/**",[425,1272,1273],{},[445,1274,1275],{},"**/build/**",[425,1277,1278],{},[445,1279,1280],{},"**/.next/**",[425,1282,1283],{},[445,1284,1285],{},"**/.nuxt/**",[425,1287,1288],{},[445,1289,1290],{},"**/coverage/**",[417,1292,1294],{"id":1293},"class-name-format","Class Name Format",[413,1296,1297,1298,1301,1302,1304,1305,1308],{},"By default, Styleframe utility class names start with an underscore ",[445,1299,1300],{},"_"," and use colons ",[445,1303,605],{}," as separators. You can ",[1063,1306,1307],{"href":1065},"change this convention"," to match your project's needs.",[491,1310,1312],{"id":1311},"basic-utilities","Basic Utilities",[413,1314,1315,1316],{},"Format: ",[445,1317,1318],{},"_name:value",[980,1320,1321,1334],{},[983,1322,1323],{},[986,1324,1325,1328,1331],{},[989,1326,1327],{},"Class Name",[989,1329,1330],{},"Utility",[989,1332,1333],{},"Value",[1002,1335,1336,1353,1370],{},[986,1337,1338,1343,1348],{},[1007,1339,1340],{},[445,1341,1342],{},"_margin:sm",[1007,1344,1345],{},[445,1346,1347],{},"margin",[1007,1349,1350],{},[445,1351,1352],{},"sm",[986,1354,1355,1360,1365],{},[1007,1356,1357],{},[445,1358,1359],{},"_display:flex",[1007,1361,1362],{},[445,1363,1364],{},"display",[1007,1366,1367],{},[445,1368,1369],{},"flex",[986,1371,1372,1377,1382],{},[1007,1373,1374],{},[445,1375,1376],{},"_hidden",[1007,1378,1379],{},[445,1380,1381],{},"hidden",[1007,1383,1384],{},[445,1385,1386],{},"default",[491,1388,1390],{"id":1389},"with-modifiers","With Modifiers",[413,1392,1315,1393,1396,1397],{},[445,1394,1395],{},"_modifier:name:value"," or ",[445,1398,1399],{},"_mod1:mod2:name:value",[980,1401,1402,1414],{},[983,1403,1404],{},[986,1405,1406,1408,1410,1412],{},[989,1407,1327],{},[989,1409,363],{},[989,1411,1330],{},[989,1413,1333],{},[1002,1415,1416,1437,1460],{},[986,1417,1418,1422,1427,1432],{},[1007,1419,1420],{},[445,1421,457],{},[1007,1423,1424],{},[445,1425,1426],{},"hover",[1007,1428,1429],{},[445,1430,1431],{},"background",[1007,1433,1434],{},[445,1435,1436],{},"primary",[986,1438,1439,1444,1452,1456],{},[1007,1440,1441],{},[445,1442,1443],{},"_dark:hover:background:primary",[1007,1445,1446,1449,1450],{},[445,1447,1448],{},"dark",", ",[445,1451,1426],{},[1007,1453,1454],{},[445,1455,1431],{},[1007,1457,1458],{},[445,1459,1436],{},[986,1461,1462,1467,1471,1475],{},[1007,1463,1464],{},[445,1465,1466],{},"_sm:margin:lg",[1007,1468,1469],{},[445,1470,1352],{},[1007,1472,1473],{},[445,1474,1347],{},[1007,1476,1477],{},[445,1478,1479],{},"lg",[491,1481,1483],{"id":1482},"arbitrary-values","Arbitrary Values",[413,1485,1315,1486],{},[445,1487,1488],{},"_name:[css-value]",[980,1490,1491,1502],{},[983,1492,1493],{},[986,1494,1495,1497,1499],{},[989,1496,1327],{},[989,1498,1330],{},[989,1500,1501],{},"CSS Value",[1002,1503,1504,1520,1536],{},[986,1505,1506,1510,1515],{},[1007,1507,1508],{},[445,1509,447],{},[1007,1511,1512],{},[445,1513,1514],{},"padding",[1007,1516,1517],{},[445,1518,1519],{},"2.5rem",[986,1521,1522,1527,1531],{},[1007,1523,1524],{},[445,1525,1526],{},"_background:[#1E3A8A]",[1007,1528,1529],{},[445,1530,1431],{},[1007,1532,1533],{},[445,1534,1535],{},"#1E3A8A",[986,1537,1538,1543,1547],{},[1007,1539,1540],{},[445,1541,1542],{},"_margin:[10px_20px]",[1007,1544,1545],{},[445,1546,1347],{},[1007,1548,1549],{},[445,1550,1551],{},"10px 20px",[1553,1554,1555,1558,1559,1561,1562,1564,1565,1067],"tip",{},[428,1556,1557],{},"Pro tip:"," Use underscores ",[445,1560,1300],{}," in place of spaces within brackets. For example, ",[445,1563,1542],{}," generates ",[445,1566,1567],{},"margin: 10px 20px",[417,1569,1571],{"id":1570},"how-it-works","How It Works",[413,1573,1574],{},"The scanner processes your files in five steps:",[491,1576,1578],{"id":1577},"_1-extraction","1. Extraction",[413,1580,1581,1582,1584],{},"The scanner reads your source files and extracts all strings matching the ",[445,1583,1318],{}," pattern. Each file type has a specialized extractor optimized for its syntax.",[491,1586,1588],{"id":1587},"_2-parsing","2. Parsing",[413,1590,1591],{},"Each extracted class name is parsed into a structured representation:",[507,1593,1595],{"className":509,"code":1594,"language":512,"meta":513,"style":513},"// \"_hover:background:primary\" is parsed as:\n{\n    raw: \"_hover:background:primary\",\n    name: \"background\",\n    value: \"primary\",\n    modifiers: [\"hover\"],\n    isArbitrary: false,\n}\n",[445,1596,1597,1602,1606,1623,1638,1653,1672,1685],{"__ignoreMap":513},[517,1598,1599],{"class":519,"line":520},[517,1600,1601],{"class":635},"// \"_hover:background:primary\" is parsed as:\n",[517,1603,1604],{"class":519,"line":554},[517,1605,595],{"class":527},[517,1607,1608,1612,1614,1617,1619,1621],{"class":519,"line":574},[517,1609,1611],{"class":1610},"sBMFI","    raw",[517,1613,605],{"class":527},[517,1615,1616],{"class":527}," \"",[517,1618,457],{"class":544},[517,1620,887],{"class":527},[517,1622,660],{"class":527},[517,1624,1625,1628,1630,1632,1634,1636],{"class":519,"line":580},[517,1626,1627],{"class":1610},"    name",[517,1629,605],{"class":527},[517,1631,1616],{"class":527},[517,1633,1431],{"class":544},[517,1635,887],{"class":527},[517,1637,660],{"class":527},[517,1639,1640,1643,1645,1647,1649,1651],{"class":519,"line":598},[517,1641,1642],{"class":1610},"    value",[517,1644,605],{"class":527},[517,1646,1616],{"class":527},[517,1648,1436],{"class":544},[517,1650,887],{"class":527},[517,1652,660],{"class":527},[517,1654,1655,1658,1660,1662,1664,1666,1668,1670],{"class":519,"line":611},[517,1656,1657],{"class":1610},"    modifiers",[517,1659,605],{"class":527},[517,1661,647],{"class":601},[517,1663,887],{"class":527},[517,1665,1426],{"class":544},[517,1667,887],{"class":527},[517,1669,657],{"class":601},[517,1671,660],{"class":527},[517,1673,1674,1677,1679,1683],{"class":519,"line":621},[517,1675,1676],{"class":1610},"    isArbitrary",[517,1678,605],{"class":527},[517,1680,1682],{"class":1681},"sfNiH"," false",[517,1684,660],{"class":527},[517,1686,1687],{"class":519,"line":632},[517,1688,1689],{"class":527},"}\n",[491,1691,1693],{"id":1692},"_3-matching","3. Matching",[413,1695,1696,1697,1699,1700,1702,1703,1705],{},"Parsed classes are matched against registered utility and modifier factories on the Styleframe root instance. A class like ",[445,1698,457],{}," requires both a ",[445,1701,1431],{}," utility factory and a ",[445,1704,1426],{}," modifier factory to be registered.",[491,1707,1709],{"id":1708},"_4-registration","4. Registration",[413,1711,1712],{},"For matched utilities that don't already exist:",[422,1714,1715,1732,1745],{},[425,1716,1717,1720,1721,1723,1724,1727,1728,1731],{},[428,1718,1719],{},"Token values"," (e.g., ",[445,1722,1342],{},"): The factory's ",[445,1725,1726],{},"autogenerate"," function is called with ",[445,1729,1730],{},"@sm"," to resolve the design token",[425,1733,1734,1720,1737,1723,1739,1742,1743],{},[428,1735,1736],{},"Arbitrary values",[445,1738,447],{},[445,1740,1741],{},"create"," method is called with the literal CSS value ",[445,1744,1519],{},[425,1746,1747,1749],{},[428,1748,363],{},": Detected modifier factories are passed to the utility registration and merged when duplicate utility+value pairs appear across files",[491,1751,1753],{"id":1752},"_5-css-generation","5. CSS Generation",[413,1755,1756,1757,1760],{},"The registered utilities are transpiled to CSS alongside all other Styleframe declarations and served through the ",[445,1758,1759],{},"virtual:styleframe.css"," module.",[417,1762,1764],{"id":1763},"supported-file-types","Supported File Types",[980,1766,1767,1777],{},[983,1768,1769],{},[986,1770,1771,1774],{},[989,1772,1773],{},"Extension",[989,1775,1776],{},"Extraction Strategy",[1002,1778,1779,1795,1813,1831,1851,1864,1874,1884,1900],{},[986,1780,1781,1789],{},[1007,1782,1783,1449,1786],{},[445,1784,1785],{},".html",[445,1787,1788],{},".htm",[1007,1790,1791,1794],{},[445,1792,1793],{},"class=\"...\""," attributes",[986,1796,1797,1802],{},[1007,1798,1799],{},[445,1800,1801],{},".vue",[1007,1803,1804,1805,1808,1809,1812],{},"Template ",[445,1806,1807],{},"class"," bindings + ",[445,1810,1811],{},"\u003Cscript>"," string literals",[986,1814,1815,1820],{},[1007,1816,1817],{},[445,1818,1819],{},".svelte",[1007,1821,1822,1824,1825,1828,1829],{},[445,1823,1807],{}," attributes + ",[445,1826,1827],{},"class:_directive"," syntax + ",[445,1830,1811],{},[986,1832,1833,1841],{},[1007,1834,1835,1449,1838],{},[445,1836,1837],{},".jsx",[445,1839,1840],{},".tsx",[1007,1842,1843,1846,1847,1850],{},[445,1844,1845],{},"className=\"...\""," + ",[445,1848,1849],{},"className={...}"," expressions",[986,1852,1853,1861],{},[1007,1854,1855,1449,1858],{},[445,1856,1857],{},".js",[445,1859,1860],{},".ts",[1007,1862,1863],{},"String literals (single, double, and template)",[986,1865,1866,1871],{},[1007,1867,1868],{},[445,1869,1870],{},".astro",[1007,1872,1873],{},"HTML + JSX + frontmatter",[986,1875,1876,1881],{},[1007,1877,1878],{},[445,1879,1880],{},".mdx",[1007,1882,1883],{},"HTML + JSX patterns",[986,1885,1886,1897],{},[1007,1887,1888,1449,1891,1449,1894],{},[445,1889,1890],{},".php",[445,1892,1893],{},".erb",[445,1895,1896],{},".twig",[1007,1898,1899],{},"HTML attribute extraction",[986,1901,1902,1907],{},[1007,1903,1904],{},[445,1905,1906],{},".blade.php",[1007,1908,1909],{},"HTML attribute extraction (Laravel Blade)",[417,1911,1913],{"id":1912},"framework-examples","Framework Examples",[1915,1916,1917,1964,2030,2078],"tabs",{},[1918,1919,1922],"tabs-item",{"icon":1920,"label":1921},"i-lucide-code","React",[507,1923,1928],{"className":1924,"code":1925,"filename":1926,"language":1927,"meta":513,"style":513},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export function Button({ children }) {\n    return (\n        \u003Cbutton className=\"_padding:md _background:primary _hover:background:secondary _font-weight:bold\">\n            {children}\n        \u003C/button>\n    );\n}\n","Button.tsx","tsx",[445,1929,1930,1935,1940,1945,1950,1955,1960],{"__ignoreMap":513},[517,1931,1932],{"class":519,"line":520},[517,1933,1934],{},"export function Button({ children }) {\n",[517,1936,1937],{"class":519,"line":554},[517,1938,1939],{},"    return (\n",[517,1941,1942],{"class":519,"line":574},[517,1943,1944],{},"        \u003Cbutton className=\"_padding:md _background:primary _hover:background:secondary _font-weight:bold\">\n",[517,1946,1947],{"class":519,"line":580},[517,1948,1949],{},"            {children}\n",[517,1951,1952],{"class":519,"line":598},[517,1953,1954],{},"        \u003C/button>\n",[517,1956,1957],{"class":519,"line":611},[517,1958,1959],{},"    );\n",[517,1961,1962],{"class":519,"line":621},[517,1963,1689],{},[1918,1965,1967],{"icon":1920,"label":1966},"Vue",[507,1968,1973],{"className":1969,"code":1970,"filename":1971,"language":1972,"meta":513,"style":513},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n    \u003Cbutton class=\"_padding:md _background:primary _hover:background:secondary _font-weight:bold\">\n        \u003Cslot />\n    \u003C/button>\n\u003C/template>\n","Button.vue","vue",[445,1974,1975,1984,2003,2014,2022],{"__ignoreMap":513},[517,1976,1977,1979,1982],{"class":519,"line":520},[517,1978,876],{"class":527},[517,1980,1981],{"class":601},"template",[517,1983,895],{"class":527},[517,1985,1986,1988,1990,1992,1994,1996,1999,2001],{"class":519,"line":554},[517,1987,900],{"class":527},[517,1989,933],{"class":601},[517,1991,882],{"class":785},[517,1993,792],{"class":527},[517,1995,887],{"class":527},[517,1997,1998],{"class":544},"_padding:md _background:primary _hover:background:secondary _font-weight:bold",[517,2000,887],{"class":527},[517,2002,895],{"class":527},[517,2004,2005,2008,2011],{"class":519,"line":574},[517,2006,2007],{"class":527},"        \u003C",[517,2009,2010],{"class":601},"slot",[517,2012,2013],{"class":527}," />\n",[517,2015,2016,2018,2020],{"class":519,"line":580},[517,2017,956],{"class":527},[517,2019,933],{"class":601},[517,2021,895],{"class":527},[517,2023,2024,2026,2028],{"class":519,"line":598},[517,2025,922],{"class":527},[517,2027,1981],{"class":601},[517,2029,895],{"class":527},[1918,2031,2033],{"icon":1920,"label":2032},"Svelte",[507,2034,2039],{"className":2035,"code":2036,"filename":2037,"language":2038,"meta":513,"style":513},"language-svelte shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton class=\"_padding:md _background:primary _hover:background:secondary _font-weight:bold\">\n    \u003Cslot />\n\u003C/button>\n\n\u003C!-- Svelte class directive syntax is also supported -->\n\u003Cbutton class:_margin:sm={hasMargin}>\n    \u003Cslot />\n\u003C/button>\n","Button.svelte","svelte",[445,2040,2041,2046,2051,2056,2060,2065,2070,2074],{"__ignoreMap":513},[517,2042,2043],{"class":519,"line":520},[517,2044,2045],{},"\u003Cbutton class=\"_padding:md _background:primary _hover:background:secondary _font-weight:bold\">\n",[517,2047,2048],{"class":519,"line":554},[517,2049,2050],{},"    \u003Cslot />\n",[517,2052,2053],{"class":519,"line":574},[517,2054,2055],{},"\u003C/button>\n",[517,2057,2058],{"class":519,"line":580},[517,2059,577],{"emptyLinePlaceholder":206},[517,2061,2062],{"class":519,"line":598},[517,2063,2064],{},"\u003C!-- Svelte class directive syntax is also supported -->\n",[517,2066,2067],{"class":519,"line":611},[517,2068,2069],{},"\u003Cbutton class:_margin:sm={hasMargin}>\n",[517,2071,2072],{"class":519,"line":621},[517,2073,2050],{},[517,2075,2076],{"class":519,"line":632},[517,2077,2055],{},[1918,2079,2081],{"icon":1920,"label":2080},"HTML",[507,2082,2085],{"className":861,"code":2083,"filename":2084,"language":864,"meta":513,"style":513},"\u003Cbutton class=\"_padding:md _background:primary _hover:background:secondary _font-weight:bold\">\n    Click me\n\u003C/button>\n","index.html",[445,2086,2087,2105,2110],{"__ignoreMap":513},[517,2088,2089,2091,2093,2095,2097,2099,2101,2103],{"class":519,"line":520},[517,2090,876],{"class":527},[517,2092,933],{"class":601},[517,2094,882],{"class":785},[517,2096,792],{"class":527},[517,2098,887],{"class":527},[517,2100,1998],{"class":544},[517,2102,887],{"class":527},[517,2104,895],{"class":527},[517,2106,2107],{"class":519,"line":554},[517,2108,2109],{"class":531},"    Click me\n",[517,2111,2112,2114,2116],{"class":519,"line":574},[517,2113,922],{"class":527},[517,2115,933],{"class":601},[517,2117,895],{"class":527},[417,2119,2121],{"id":2120},"custom-extractors","Custom Extractors",[413,2123,2124],{},"For file types not in the default list, provide a custom extractor function. An extractor receives the file content and path, and returns an array of class name strings.",[507,2126,2128],{"className":509,"code":2127,"filename":511,"language":512,"meta":513,"style":513},"import { defineConfig } from 'vite';\nimport styleframe from '@styleframe/plugin/vite';\n\nexport default defineConfig({\n    plugins: [\n        styleframe({\n            scanner: {\n                content: ['./src/**/*.mytpl'],\n                extractors: [\n                    (content, filePath) => {\n                        if (!filePath.endsWith('.mytpl')) return [];\n\n                        // Extract all underscore-prefixed class names\n                        const matches = content.match(\n                            /_[a-zA-Z][a-zA-Z0-9-]*(?::[a-zA-Z0-9._-]+|\\[[^\\]]+\\])*/g\n                        );\n                        return matches ?? [];\n                    },\n                ],\n            },\n        }),\n    ],\n});\n",[445,2129,2130,2150,2166,2170,2182,2190,2198,2206,2225,2234,2254,2293,2297,2302,2325,2379,2387,2402,2408,2416,2421,2430,2437],{"__ignoreMap":513},[517,2131,2132,2134,2136,2138,2140,2142,2144,2146,2148],{"class":519,"line":520},[517,2133,524],{"class":523},[517,2135,528],{"class":527},[517,2137,532],{"class":531},[517,2139,535],{"class":527},[517,2141,538],{"class":523},[517,2143,541],{"class":527},[517,2145,545],{"class":544},[517,2147,548],{"class":527},[517,2149,551],{"class":527},[517,2151,2152,2154,2156,2158,2160,2162,2164],{"class":519,"line":554},[517,2153,524],{"class":523},[517,2155,559],{"class":531},[517,2157,562],{"class":523},[517,2159,541],{"class":527},[517,2161,567],{"class":544},[517,2163,548],{"class":527},[517,2165,551],{"class":527},[517,2167,2168],{"class":519,"line":574},[517,2169,577],{"emptyLinePlaceholder":206},[517,2171,2172,2174,2176,2178,2180],{"class":519,"line":580},[517,2173,583],{"class":523},[517,2175,586],{"class":523},[517,2177,532],{"class":589},[517,2179,592],{"class":531},[517,2181,595],{"class":527},[517,2183,2184,2186,2188],{"class":519,"line":598},[517,2185,602],{"class":601},[517,2187,605],{"class":527},[517,2189,608],{"class":531},[517,2191,2192,2194,2196],{"class":519,"line":611},[517,2193,614],{"class":589},[517,2195,592],{"class":531},[517,2197,595],{"class":527},[517,2199,2200,2202,2204],{"class":519,"line":621},[517,2201,624],{"class":601},[517,2203,605],{"class":527},[517,2205,629],{"class":527},[517,2207,2208,2210,2212,2214,2216,2219,2221,2223],{"class":519,"line":632},[517,2209,642],{"class":601},[517,2211,605],{"class":527},[517,2213,647],{"class":531},[517,2215,548],{"class":527},[517,2217,2218],{"class":544},"./src/**/*.mytpl",[517,2220,548],{"class":527},[517,2222,657],{"class":531},[517,2224,660],{"class":527},[517,2226,2227,2230,2232],{"class":519,"line":639},[517,2228,2229],{"class":601},"                extractors",[517,2231,605],{"class":527},[517,2233,608],{"class":531},[517,2235,2236,2239,2242,2244,2247,2249,2252],{"class":519,"line":663},[517,2237,2238],{"class":527},"                    (",[517,2240,504],{"class":2241},"sHdIc",[517,2243,1182],{"class":527},[517,2245,2246],{"class":2241}," filePath",[517,2248,675],{"class":527},[517,2250,2251],{"class":785}," =>",[517,2253,629],{"class":527},[517,2255,2256,2259,2262,2265,2268,2270,2273,2275,2277,2280,2282,2285,2288,2291],{"class":519,"line":669},[517,2257,2258],{"class":523},"                        if",[517,2260,2261],{"class":601}," (",[517,2263,2264],{"class":527},"!",[517,2266,2267],{"class":531},"filePath",[517,2269,1067],{"class":527},[517,2271,2272],{"class":589},"endsWith",[517,2274,592],{"class":601},[517,2276,548],{"class":527},[517,2278,2279],{"class":544},".mytpl",[517,2281,548],{"class":527},[517,2283,2284],{"class":601},")) ",[517,2286,2287],{"class":523},"return",[517,2289,2290],{"class":601}," []",[517,2292,551],{"class":527},[517,2294,2295],{"class":519,"line":680},[517,2296,577],{"emptyLinePlaceholder":206},[517,2298,2299],{"class":519,"line":688},[517,2300,2301],{"class":635},"                        // Extract all underscore-prefixed class names\n",[517,2303,2305,2308,2311,2314,2317,2319,2322],{"class":519,"line":2304},14,[517,2306,2307],{"class":785},"                        const",[517,2309,2310],{"class":531}," matches",[517,2312,2313],{"class":527}," =",[517,2315,2316],{"class":531}," content",[517,2318,1067],{"class":527},[517,2320,2321],{"class":589},"match",[517,2323,2324],{"class":601},"(\n",[517,2326,2328,2331,2333,2336,2339,2342,2345,2348,2350,2352,2355,2358,2361,2364,2367,2370,2372,2375],{"class":519,"line":2327},15,[517,2329,2330],{"class":527},"                            /",[517,2332,1300],{"class":544},[517,2334,2335],{"class":527},"[",[517,2337,2338],{"class":544},"a-zA-Z",[517,2340,2341],{"class":527},"][",[517,2343,2344],{"class":544},"a-zA-Z0-9-",[517,2346,2347],{"class":527},"]*(?:",[517,2349,605],{"class":544},[517,2351,2335],{"class":527},[517,2353,2354],{"class":544},"a-zA-Z0-9._-",[517,2356,2357],{"class":527},"]+|",[517,2359,2360],{"class":531},"\\[",[517,2362,2363],{"class":527},"[^",[517,2365,2366],{"class":531},"\\]",[517,2368,2369],{"class":527},"]+",[517,2371,2366],{"class":531},[517,2373,2374],{"class":527},")*/",[517,2376,2378],{"class":2377},"sbssI","g\n",[517,2380,2382,2385],{"class":519,"line":2381},16,[517,2383,2384],{"class":601},"                        )",[517,2386,551],{"class":527},[517,2388,2390,2393,2395,2398,2400],{"class":519,"line":2389},17,[517,2391,2392],{"class":523},"                        return",[517,2394,2310],{"class":531},[517,2396,2397],{"class":527}," ??",[517,2399,2290],{"class":601},[517,2401,551],{"class":527},[517,2403,2405],{"class":519,"line":2404},18,[517,2406,2407],{"class":527},"                    },\n",[517,2409,2411,2414],{"class":519,"line":2410},19,[517,2412,2413],{"class":531},"                ]",[517,2415,660],{"class":527},[517,2417,2419],{"class":519,"line":2418},20,[517,2420,666],{"class":527},[517,2422,2424,2426,2428],{"class":519,"line":2423},21,[517,2425,672],{"class":527},[517,2427,675],{"class":531},[517,2429,660],{"class":527},[517,2431,2433,2435],{"class":519,"line":2432},22,[517,2434,683],{"class":531},[517,2436,660],{"class":527},[517,2438,2440,2442,2444],{"class":519,"line":2439},23,[517,2441,691],{"class":527},[517,2443,675],{"class":531},[517,2445,551],{"class":527},[417,2447,1066],{"id":2448},"custom-utility-syntax",[413,2450,2451,2452,2455],{},"The default ",[445,2453,2454],{},"_modifier:property:value"," format can be replaced entirely. This is useful when you want to adopt a different naming convention — such as BEM, a Tailwind-like syntax, or a custom prefix that matches your team's standards.",[413,2457,2458,2459,2462],{},"The scanner's ",[445,2460,2461],{},"utilities"," config accepts three functions that control how class names are detected, decomposed, and reconstructed.",[491,2464,2466],{"id":2465},"the-three-functions","The Three Functions",[980,2468,2469,2485],{},[983,2470,2471],{},[986,2472,2473,2476,2479,2482],{},[989,2474,2475],{},"Function",[989,2477,2478],{},"Purpose",[989,2480,2481],{},"Input",[989,2483,2484],{},"Output",[1002,2486,2487,2508,2527],{},[986,2488,2489,2494,2497,2499],{},[1007,2490,2491],{},[445,2492,2493],{},"pattern",[1007,2495,2496],{},"Find class candidates in source files",[1007,2498,1019],{},[1007,2500,2501,2503,2504,2507],{},[445,2502,1079],{}," with ",[445,2505,2506],{},"g"," flag",[986,2509,2510,2514,2517,2522],{},[1007,2511,2512],{},[445,2513,1131],{},[1007,2515,2516],{},"Decompose a class name into parts",[1007,2518,2519],{},[445,2520,2521],{},"string",[1007,2523,2524],{},[445,2525,2526],{},"ParsedUtility | null",[986,2528,2529,2534,2537,2542],{},[1007,2530,2531],{},[445,2532,2533],{},"selector",[1007,2535,2536],{},"Generate a class name from parts",[1007,2538,2539],{},[445,2540,2541],{},"{ name, value, modifiers }",[1007,2543,2544],{},[445,2545,2521],{},[2547,2548,2549,482,2551,2553,2554,2557,2558,2560,2561,2563],"note",{},[445,2550,1131],{},[445,2552,2533],{}," are inverses of each other. For any valid utility class, ",[445,2555,2556],{},"selector(parse(className))"," should reproduce the original class name. The scanner uses ",[445,2559,1131],{}," to decompose detected classes, and the transpiler uses ",[445,2562,2533],{}," to generate CSS selectors.",[491,2565,2567,2568,2571],{"id":2566},"example-sf-prefix-with-dash-separators","Example: ",[445,2569,2570],{},"sf-"," Prefix with Dash Separators",[413,2573,2574,2575,2577,2578,2581,2582,2584],{},"This example replaces the default ",[445,2576,2454],{}," format with ",[445,2579,2580],{},"sf-modifier-property-value"," using dashes and an ",[445,2583,2570],{}," prefix.",[488,2586,2588,2593,2596,2771,2775,2790,3370,3374,3381,3550,3554],{"level":2587},"4",[2589,2590,2592],"h4",{"id":2591},"define-the-shared-selector-function","Define the shared selector function",[413,2594,2595],{},"Create a shared file so both configs use the same function:",[507,2597,2600],{"className":509,"code":2598,"filename":2599,"language":512,"meta":513,"style":513},"// Generates class names like: sf-margin-sm, sf-hover-background-primary\nexport const selectorFn = ({ name, value, modifiers }) => {\n    const parts = [\n        ...modifiers,\n        name,\n        ...(value === 'default' ? [] : [value]),\n    ].filter(Boolean);\n    \n    return `sf-${parts.join('-')}`;\n};\n","selector.ts",[445,2601,2602,2607,2642,2654,2664,2671,2706,2724,2729,2766],{"__ignoreMap":513},[517,2603,2604],{"class":519,"line":520},[517,2605,2606],{"class":635},"// Generates class names like: sf-margin-sm, sf-hover-background-primary\n",[517,2608,2609,2611,2614,2617,2619,2622,2625,2627,2630,2632,2635,2638,2640],{"class":519,"line":554},[517,2610,583],{"class":523},[517,2612,2613],{"class":785}," const",[517,2615,2616],{"class":531}," selectorFn ",[517,2618,792],{"class":527},[517,2620,2621],{"class":527}," ({",[517,2623,2624],{"class":2241}," name",[517,2626,1182],{"class":527},[517,2628,2629],{"class":2241}," value",[517,2631,1182],{"class":527},[517,2633,2634],{"class":2241}," modifiers",[517,2636,2637],{"class":527}," })",[517,2639,2251],{"class":785},[517,2641,629],{"class":527},[517,2643,2644,2647,2650,2652],{"class":519,"line":574},[517,2645,2646],{"class":785},"    const",[517,2648,2649],{"class":531}," parts",[517,2651,2313],{"class":527},[517,2653,608],{"class":601},[517,2655,2656,2659,2662],{"class":519,"line":580},[517,2657,2658],{"class":527},"        ...",[517,2660,2661],{"class":531},"modifiers",[517,2663,660],{"class":527},[517,2665,2666,2669],{"class":519,"line":598},[517,2667,2668],{"class":531},"        name",[517,2670,660],{"class":527},[517,2672,2673,2675,2677,2680,2683,2685,2687,2689,2692,2695,2697,2699,2701,2704],{"class":519,"line":611},[517,2674,2658],{"class":527},[517,2676,592],{"class":601},[517,2678,2679],{"class":531},"value",[517,2681,2682],{"class":527}," ===",[517,2684,541],{"class":527},[517,2686,1386],{"class":544},[517,2688,548],{"class":527},[517,2690,2691],{"class":527}," ?",[517,2693,2694],{"class":601}," [] ",[517,2696,605],{"class":527},[517,2698,647],{"class":601},[517,2700,2679],{"class":531},[517,2702,2703],{"class":601},"])",[517,2705,660],{"class":527},[517,2707,2708,2710,2712,2715,2717,2720,2722],{"class":519,"line":621},[517,2709,683],{"class":601},[517,2711,1067],{"class":527},[517,2713,2714],{"class":589},"filter",[517,2716,592],{"class":601},[517,2718,2719],{"class":531},"Boolean",[517,2721,675],{"class":601},[517,2723,551],{"class":527},[517,2725,2726],{"class":519,"line":632},[517,2727,2728],{"class":601},"    \n",[517,2730,2731,2734,2737,2739,2742,2745,2747,2750,2752,2754,2757,2759,2761,2764],{"class":519,"line":639},[517,2732,2733],{"class":523},"    return",[517,2735,2736],{"class":527}," `",[517,2738,2570],{"class":544},[517,2740,2741],{"class":527},"${",[517,2743,2744],{"class":531},"parts",[517,2746,1067],{"class":527},[517,2748,2749],{"class":589},"join",[517,2751,592],{"class":531},[517,2753,548],{"class":527},[517,2755,2756],{"class":544},"-",[517,2758,548],{"class":527},[517,2760,675],{"class":531},[517,2762,2763],{"class":527},"}`",[517,2765,551],{"class":527},[517,2767,2768],{"class":519,"line":663},[517,2769,2770],{"class":527},"};\n",[2589,2772,2774],{"id":2773},"configure-the-scanner-in-your-vite-config","Configure the scanner in your Vite config",[413,2776,2777,2778,2780,2781,2783,2784,2786,2787,2789],{},"Provide all three functions — ",[445,2779,2493],{}," to find ",[445,2782,2570],{}," candidates, ",[445,2785,1131],{}," to split them into parts, and ",[445,2788,2533],{}," to reconstruct them:",[507,2791,2793],{"className":509,"code":2792,"filename":511,"language":512,"meta":513,"style":513},"import { defineConfig } from 'vite';\nimport styleframe from '@styleframe/plugin/vite';\nimport { selectorFn } from './selector';\n\nexport default defineConfig({\n    plugins: [\n        styleframe({\n            scanner: {\n                content: ['./src/**/*.{html,vue,jsx,tsx}'],\n                utilities: {\n                    // Match all sf- prefixed class candidates\n                    pattern: /sf-[a-zA-Z][a-zA-Z0-9-]*/g,\n                    // Decompose: \"sf-hover-margin-sm\" → { modifiers: [\"hover\"], name: \"margin\", value: \"sm\" }\n                    parse: (className) => {\n                        if (!className.startsWith('sf-')) return null;\n                        const parts = className.slice(3).split('-');\n                        \n                        if (parts.length \u003C 2) {\n                            return {\n                                raw: className,\n                                name: parts[0],\n                                value: 'default',\n                                modifiers: [],\n                                isArbitrary: false,\n                            };\n                        }\n                        \n                        const value = parts[parts.length - 1];\n                        const name = parts[parts.length - 2];\n                        const modifiers = parts.slice(0, -2);\n                        \n                        return {\n                            raw: className,\n                            name,\n                            value,\n                            modifiers,\n                            isArbitrary: false,\n                        };\n                    },\n                    selector: selectorFn,\n                },\n            },\n        }),\n    ],\n});\n",[445,2794,2795,2815,2831,2853,2857,2869,2877,2885,2893,2911,2920,2925,2952,2957,2975,3005,3045,3050,3074,3081,3092,3110,3125,3136,3148,3154,3160,3165,3194,3221,3251,3256,3263,3275,3283,3291,3299,3311,3317,3322,3334,3340,3345,3354,3361],{"__ignoreMap":513},[517,2796,2797,2799,2801,2803,2805,2807,2809,2811,2813],{"class":519,"line":520},[517,2798,524],{"class":523},[517,2800,528],{"class":527},[517,2802,532],{"class":531},[517,2804,535],{"class":527},[517,2806,538],{"class":523},[517,2808,541],{"class":527},[517,2810,545],{"class":544},[517,2812,548],{"class":527},[517,2814,551],{"class":527},[517,2816,2817,2819,2821,2823,2825,2827,2829],{"class":519,"line":554},[517,2818,524],{"class":523},[517,2820,559],{"class":531},[517,2822,562],{"class":523},[517,2824,541],{"class":527},[517,2826,567],{"class":544},[517,2828,548],{"class":527},[517,2830,551],{"class":527},[517,2832,2833,2835,2837,2840,2842,2844,2846,2849,2851],{"class":519,"line":574},[517,2834,524],{"class":523},[517,2836,528],{"class":527},[517,2838,2839],{"class":531}," selectorFn",[517,2841,535],{"class":527},[517,2843,538],{"class":523},[517,2845,541],{"class":527},[517,2847,2848],{"class":544},"./selector",[517,2850,548],{"class":527},[517,2852,551],{"class":527},[517,2854,2855],{"class":519,"line":580},[517,2856,577],{"emptyLinePlaceholder":206},[517,2858,2859,2861,2863,2865,2867],{"class":519,"line":598},[517,2860,583],{"class":523},[517,2862,586],{"class":523},[517,2864,532],{"class":589},[517,2866,592],{"class":531},[517,2868,595],{"class":527},[517,2870,2871,2873,2875],{"class":519,"line":611},[517,2872,602],{"class":601},[517,2874,605],{"class":527},[517,2876,608],{"class":531},[517,2878,2879,2881,2883],{"class":519,"line":621},[517,2880,614],{"class":589},[517,2882,592],{"class":531},[517,2884,595],{"class":527},[517,2886,2887,2889,2891],{"class":519,"line":632},[517,2888,624],{"class":601},[517,2890,605],{"class":527},[517,2892,629],{"class":527},[517,2894,2895,2897,2899,2901,2903,2905,2907,2909],{"class":519,"line":639},[517,2896,642],{"class":601},[517,2898,605],{"class":527},[517,2900,647],{"class":531},[517,2902,548],{"class":527},[517,2904,1177],{"class":544},[517,2906,548],{"class":527},[517,2908,657],{"class":531},[517,2910,660],{"class":527},[517,2912,2913,2916,2918],{"class":519,"line":663},[517,2914,2915],{"class":601},"                utilities",[517,2917,605],{"class":527},[517,2919,629],{"class":527},[517,2921,2922],{"class":519,"line":669},[517,2923,2924],{"class":635},"                    // Match all sf- prefixed class candidates\n",[517,2926,2927,2930,2932,2935,2937,2939,2941,2943,2945,2948,2950],{"class":519,"line":680},[517,2928,2929],{"class":601},"                    pattern",[517,2931,605],{"class":527},[517,2933,2934],{"class":527}," /",[517,2936,2570],{"class":544},[517,2938,2335],{"class":527},[517,2940,2338],{"class":544},[517,2942,2341],{"class":527},[517,2944,2344],{"class":544},[517,2946,2947],{"class":527},"]*/",[517,2949,2506],{"class":2377},[517,2951,660],{"class":527},[517,2953,2954],{"class":519,"line":688},[517,2955,2956],{"class":635},"                    // Decompose: \"sf-hover-margin-sm\" → { modifiers: [\"hover\"], name: \"margin\", value: \"sm\" }\n",[517,2958,2959,2962,2964,2966,2969,2971,2973],{"class":519,"line":2304},[517,2960,2961],{"class":589},"                    parse",[517,2963,605],{"class":527},[517,2965,2261],{"class":527},[517,2967,2968],{"class":2241},"className",[517,2970,675],{"class":527},[517,2972,2251],{"class":785},[517,2974,629],{"class":527},[517,2976,2977,2979,2981,2983,2985,2987,2990,2992,2994,2996,2998,3000,3002],{"class":519,"line":2327},[517,2978,2258],{"class":523},[517,2980,2261],{"class":601},[517,2982,2264],{"class":527},[517,2984,2968],{"class":531},[517,2986,1067],{"class":527},[517,2988,2989],{"class":589},"startsWith",[517,2991,592],{"class":601},[517,2993,548],{"class":527},[517,2995,2570],{"class":544},[517,2997,548],{"class":527},[517,2999,2284],{"class":601},[517,3001,2287],{"class":523},[517,3003,3004],{"class":527}," null;\n",[517,3006,3007,3009,3011,3013,3016,3018,3021,3023,3026,3028,3030,3033,3035,3037,3039,3041,3043],{"class":519,"line":2381},[517,3008,2307],{"class":785},[517,3010,2649],{"class":531},[517,3012,2313],{"class":527},[517,3014,3015],{"class":531}," className",[517,3017,1067],{"class":527},[517,3019,3020],{"class":589},"slice",[517,3022,592],{"class":601},[517,3024,3025],{"class":2377},"3",[517,3027,675],{"class":601},[517,3029,1067],{"class":527},[517,3031,3032],{"class":589},"split",[517,3034,592],{"class":601},[517,3036,548],{"class":527},[517,3038,2756],{"class":544},[517,3040,548],{"class":527},[517,3042,675],{"class":601},[517,3044,551],{"class":527},[517,3046,3047],{"class":519,"line":2389},[517,3048,3049],{"class":601},"                        \n",[517,3051,3052,3054,3056,3058,3060,3063,3066,3069,3072],{"class":519,"line":2404},[517,3053,2258],{"class":523},[517,3055,2261],{"class":601},[517,3057,2744],{"class":531},[517,3059,1067],{"class":527},[517,3061,3062],{"class":531},"length",[517,3064,3065],{"class":527}," \u003C",[517,3067,3068],{"class":2377}," 2",[517,3070,3071],{"class":601},") ",[517,3073,595],{"class":527},[517,3075,3076,3079],{"class":519,"line":2410},[517,3077,3078],{"class":523},"                            return",[517,3080,629],{"class":527},[517,3082,3083,3086,3088,3090],{"class":519,"line":2418},[517,3084,3085],{"class":601},"                                raw",[517,3087,605],{"class":527},[517,3089,3015],{"class":531},[517,3091,660],{"class":527},[517,3093,3094,3097,3099,3101,3103,3106,3108],{"class":519,"line":2423},[517,3095,3096],{"class":601},"                                name",[517,3098,605],{"class":527},[517,3100,2649],{"class":531},[517,3102,2335],{"class":601},[517,3104,3105],{"class":2377},"0",[517,3107,657],{"class":601},[517,3109,660],{"class":527},[517,3111,3112,3115,3117,3119,3121,3123],{"class":519,"line":2432},[517,3113,3114],{"class":601},"                                value",[517,3116,605],{"class":527},[517,3118,541],{"class":527},[517,3120,1386],{"class":544},[517,3122,548],{"class":527},[517,3124,660],{"class":527},[517,3126,3127,3130,3132,3134],{"class":519,"line":2439},[517,3128,3129],{"class":601},"                                modifiers",[517,3131,605],{"class":527},[517,3133,2290],{"class":601},[517,3135,660],{"class":527},[517,3137,3139,3142,3144,3146],{"class":519,"line":3138},24,[517,3140,3141],{"class":601},"                                isArbitrary",[517,3143,605],{"class":527},[517,3145,1682],{"class":1681},[517,3147,660],{"class":527},[517,3149,3151],{"class":519,"line":3150},25,[517,3152,3153],{"class":527},"                            };\n",[517,3155,3157],{"class":519,"line":3156},26,[517,3158,3159],{"class":527},"                        }\n",[517,3161,3163],{"class":519,"line":3162},27,[517,3164,3049],{"class":601},[517,3166,3168,3170,3172,3174,3176,3178,3180,3182,3184,3187,3190,3192],{"class":519,"line":3167},28,[517,3169,2307],{"class":785},[517,3171,2629],{"class":531},[517,3173,2313],{"class":527},[517,3175,2649],{"class":531},[517,3177,2335],{"class":601},[517,3179,2744],{"class":531},[517,3181,1067],{"class":527},[517,3183,3062],{"class":531},[517,3185,3186],{"class":527}," -",[517,3188,3189],{"class":2377}," 1",[517,3191,657],{"class":601},[517,3193,551],{"class":527},[517,3195,3197,3199,3201,3203,3205,3207,3209,3211,3213,3215,3217,3219],{"class":519,"line":3196},29,[517,3198,2307],{"class":785},[517,3200,2624],{"class":531},[517,3202,2313],{"class":527},[517,3204,2649],{"class":531},[517,3206,2335],{"class":601},[517,3208,2744],{"class":531},[517,3210,1067],{"class":527},[517,3212,3062],{"class":531},[517,3214,3186],{"class":527},[517,3216,3068],{"class":2377},[517,3218,657],{"class":601},[517,3220,551],{"class":527},[517,3222,3224,3226,3228,3230,3232,3234,3236,3238,3240,3242,3244,3247,3249],{"class":519,"line":3223},30,[517,3225,2307],{"class":785},[517,3227,2634],{"class":531},[517,3229,2313],{"class":527},[517,3231,2649],{"class":531},[517,3233,1067],{"class":527},[517,3235,3020],{"class":589},[517,3237,592],{"class":601},[517,3239,3105],{"class":2377},[517,3241,1182],{"class":527},[517,3243,3186],{"class":527},[517,3245,3246],{"class":2377},"2",[517,3248,675],{"class":601},[517,3250,551],{"class":527},[517,3252,3254],{"class":519,"line":3253},31,[517,3255,3049],{"class":601},[517,3257,3259,3261],{"class":519,"line":3258},32,[517,3260,2392],{"class":523},[517,3262,629],{"class":527},[517,3264,3266,3269,3271,3273],{"class":519,"line":3265},33,[517,3267,3268],{"class":601},"                            raw",[517,3270,605],{"class":527},[517,3272,3015],{"class":531},[517,3274,660],{"class":527},[517,3276,3278,3281],{"class":519,"line":3277},34,[517,3279,3280],{"class":531},"                            name",[517,3282,660],{"class":527},[517,3284,3286,3289],{"class":519,"line":3285},35,[517,3287,3288],{"class":531},"                            value",[517,3290,660],{"class":527},[517,3292,3294,3297],{"class":519,"line":3293},36,[517,3295,3296],{"class":531},"                            modifiers",[517,3298,660],{"class":527},[517,3300,3302,3305,3307,3309],{"class":519,"line":3301},37,[517,3303,3304],{"class":601},"                            isArbitrary",[517,3306,605],{"class":527},[517,3308,1682],{"class":1681},[517,3310,660],{"class":527},[517,3312,3314],{"class":519,"line":3313},38,[517,3315,3316],{"class":527},"                        };\n",[517,3318,3320],{"class":519,"line":3319},39,[517,3321,2407],{"class":527},[517,3323,3325,3328,3330,3332],{"class":519,"line":3324},40,[517,3326,3327],{"class":601},"                    selector",[517,3329,605],{"class":527},[517,3331,2839],{"class":531},[517,3333,660],{"class":527},[517,3335,3337],{"class":519,"line":3336},41,[517,3338,3339],{"class":527},"                },\n",[517,3341,3343],{"class":519,"line":3342},42,[517,3344,666],{"class":527},[517,3346,3348,3350,3352],{"class":519,"line":3347},43,[517,3349,672],{"class":527},[517,3351,675],{"class":531},[517,3353,660],{"class":527},[517,3355,3357,3359],{"class":519,"line":3356},44,[517,3358,683],{"class":531},[517,3360,660],{"class":527},[517,3362,3364,3366,3368],{"class":519,"line":3363},45,[517,3365,691],{"class":527},[517,3367,675],{"class":531},[517,3369,551],{"class":527},[2589,3371,3373],{"id":3372},"set-the-same-selector-on-the-styleframe-instance","Set the same selector on the Styleframe instance",[413,3375,3376,3377,3380],{},"The transpiler reads ",[445,3378,3379],{},"utilities.selector"," from the Styleframe instance to generate CSS selectors that match your class names:",[507,3382,3384],{"className":509,"code":3383,"filename":705,"language":512,"meta":513,"style":513},"import { styleframe } from 'styleframe';\nimport { useUtilitiesPreset } from '@styleframe/theme';\nimport { useModifiersPreset } from '@styleframe/theme';\nimport { selectorFn } from './selector';\n\nconst s = styleframe({\n    utilities: {\n        selector: selectorFn,\n    },\n});\n\nuseUtilitiesPreset(s);\nuseModifiersPreset(s);\n\nexport default s;\n",[445,3385,3386,3406,3426,3446,3466,3470,3484,3493,3504,3508,3516,3520,3528,3536,3540],{"__ignoreMap":513},[517,3387,3388,3390,3392,3394,3396,3398,3400,3402,3404],{"class":519,"line":520},[517,3389,524],{"class":523},[517,3391,528],{"class":527},[517,3393,720],{"class":531},[517,3395,535],{"class":527},[517,3397,538],{"class":523},[517,3399,541],{"class":527},[517,3401,729],{"class":544},[517,3403,548],{"class":527},[517,3405,551],{"class":527},[517,3407,3408,3410,3412,3414,3416,3418,3420,3422,3424],{"class":519,"line":554},[517,3409,524],{"class":523},[517,3411,528],{"class":527},[517,3413,742],{"class":531},[517,3415,535],{"class":527},[517,3417,538],{"class":523},[517,3419,541],{"class":527},[517,3421,751],{"class":544},[517,3423,548],{"class":527},[517,3425,551],{"class":527},[517,3427,3428,3430,3432,3434,3436,3438,3440,3442,3444],{"class":519,"line":574},[517,3429,524],{"class":523},[517,3431,528],{"class":527},[517,3433,764],{"class":531},[517,3435,535],{"class":527},[517,3437,538],{"class":523},[517,3439,541],{"class":527},[517,3441,751],{"class":544},[517,3443,548],{"class":527},[517,3445,551],{"class":527},[517,3447,3448,3450,3452,3454,3456,3458,3460,3462,3464],{"class":519,"line":580},[517,3449,524],{"class":523},[517,3451,528],{"class":527},[517,3453,2839],{"class":531},[517,3455,535],{"class":527},[517,3457,538],{"class":523},[517,3459,541],{"class":527},[517,3461,2848],{"class":544},[517,3463,548],{"class":527},[517,3465,551],{"class":527},[517,3467,3468],{"class":519,"line":598},[517,3469,577],{"emptyLinePlaceholder":206},[517,3471,3472,3474,3476,3478,3480,3482],{"class":519,"line":611},[517,3473,786],{"class":785},[517,3475,789],{"class":531},[517,3477,792],{"class":527},[517,3479,720],{"class":589},[517,3481,592],{"class":531},[517,3483,595],{"class":527},[517,3485,3486,3489,3491],{"class":519,"line":621},[517,3487,3488],{"class":601},"    utilities",[517,3490,605],{"class":527},[517,3492,629],{"class":527},[517,3494,3495,3498,3500,3502],{"class":519,"line":632},[517,3496,3497],{"class":601},"        selector",[517,3499,605],{"class":527},[517,3501,2839],{"class":531},[517,3503,660],{"class":527},[517,3505,3506],{"class":519,"line":639},[517,3507,1239],{"class":527},[517,3509,3510,3512,3514],{"class":519,"line":663},[517,3511,691],{"class":527},[517,3513,675],{"class":531},[517,3515,551],{"class":527},[517,3517,3518],{"class":519,"line":669},[517,3519,577],{"emptyLinePlaceholder":206},[517,3521,3522,3524,3526],{"class":519,"line":680},[517,3523,813],{"class":589},[517,3525,816],{"class":531},[517,3527,551],{"class":527},[517,3529,3530,3532,3534],{"class":519,"line":688},[517,3531,832],{"class":589},[517,3533,816],{"class":531},[517,3535,551],{"class":527},[517,3537,3538],{"class":519,"line":2304},[517,3539,577],{"emptyLinePlaceholder":206},[517,3541,3542,3544,3546,3548],{"class":519,"line":2327},[517,3543,583],{"class":523},[517,3545,586],{"class":523},[517,3547,849],{"class":531},[517,3549,551],{"class":527},[2589,3551,3553],{"id":3552},"use-the-custom-class-names-in-your-templates","Use the custom class names in your templates",[507,3555,3557],{"className":861,"code":3556,"filename":863,"language":864,"meta":513,"style":513},"\u003Cdiv class=\"sf-display-flex sf-padding-1rem sf-gap-0.5rem\">\n    \u003Cbutton class=\"sf-background-primary sf-hover-background-secondary\">\n        Click me\n    \u003C/button>\n\u003C/div>\n",[445,3558,3559,3578,3597,3601,3609],{"__ignoreMap":513},[517,3560,3561,3563,3565,3567,3569,3571,3574,3576],{"class":519,"line":520},[517,3562,876],{"class":527},[517,3564,879],{"class":601},[517,3566,882],{"class":785},[517,3568,792],{"class":527},[517,3570,887],{"class":527},[517,3572,3573],{"class":544},"sf-display-flex sf-padding-1rem sf-gap-0.5rem",[517,3575,887],{"class":527},[517,3577,895],{"class":527},[517,3579,3580,3582,3584,3586,3588,3590,3593,3595],{"class":519,"line":554},[517,3581,900],{"class":527},[517,3583,933],{"class":601},[517,3585,882],{"class":785},[517,3587,792],{"class":527},[517,3589,887],{"class":527},[517,3591,3592],{"class":544},"sf-background-primary sf-hover-background-secondary",[517,3594,887],{"class":527},[517,3596,895],{"class":527},[517,3598,3599],{"class":519,"line":574},[517,3600,951],{"class":531},[517,3602,3603,3605,3607],{"class":519,"line":580},[517,3604,956],{"class":527},[517,3606,933],{"class":601},[517,3608,895],{"class":527},[517,3610,3611,3613,3615],{"class":519,"line":598},[517,3612,922],{"class":527},[517,3614,879],{"class":601},[517,3616,895],{"class":527},[476,3618,3619,3620,3622,3623,3626,3627,3629,3630,3632],{},"When you customize ",[445,3621,2533],{},", you ",[428,3624,3625],{},"must"," set the same function on both the scanner config (",[445,3628,1115],{},") and the Styleframe instance (",[445,3631,3379],{},"). If these differ, the generated CSS selectors will not match the class names in your markup.",[417,3634,3636],{"id":3635},"caching","Caching",[413,3638,3639],{},"The scanner uses content-hash-based caching to avoid re-scanning unchanged files. When a file is scanned, its content is hashed and stored alongside the result. On subsequent scans, the hash is compared before re-processing.",[413,3641,3642],{},"During development with HMR, only changed files are re-scanned. The Vite plugin invalidates the cache for the changed file and rescans it incrementally. If new utility values are registered, the CSS is regenerated.",[417,3644,3646],{"id":3645},"best-practices","Best Practices",[422,3648,3649,3663,3674,3687,3696,3702],{},[425,3650,3651,3654,3655,3658,3659,3662],{},[428,3652,3653],{},"Be specific with glob patterns",": Use precise patterns like ",[445,3656,3657],{},"./src/**/*.tsx"," instead of ",[445,3660,3661],{},"./**/*"," to avoid scanning unnecessary files",[425,3664,3665,3668,3669,482,3671,3673],{},[428,3666,3667],{},"Register all needed factories",": The scanner can only match against registered factories — use ",[445,3670,481],{},[445,3672,485],{}," for comprehensive coverage",[425,3675,3676,3679,3680,3682,3683,3686],{},[428,3677,3678],{},"Prefer design tokens over arbitrary values",": While ",[445,3681,447],{}," works, ",[445,3684,3685],{},"_padding:lg"," with a design token is more consistent and maintainable",[425,3688,3689,3692,3693],{},[428,3690,3691],{},"Avoid dynamic class names",": The scanner performs static analysis and cannot detect runtime-constructed strings like ",[445,3694,3695],{},"`_margin:${size}`",[425,3697,3698,3701],{},[428,3699,3700],{},"Pre-register dynamic values",": If you need dynamic class names, define them explicitly in your config rather than relying on scanner detection",[425,3703,3704,3707],{},[428,3705,3706],{},"Exclude non-production files",": Keep test files and fixtures out of your content patterns to avoid generating unused CSS",[417,3709,3711],{"id":3710},"faq","FAQ",[3713,3714,3715,3725,3732,3744,3751,3755,3767,3777],"accordion",{},[3716,3717,3720,3721,3724],"accordion-item",{"icon":3718,"label":3719},"i-lucide-circle-help","How is this different from Tailwind CSS JIT?","Both scan source files and generate only the CSS you use. The key differences: Styleframe uses TypeScript-based factory functions instead of a fixed utility catalog, the class name format uses ",[445,3722,3723],{},"_property:value"," with colons instead of shorthand names, and you have full control over auto-generation behavior through factory functions.",[3716,3726,3728,3729,3731],{"icon":3718,"label":3727},"What happens if the scanner finds a class with no matching factory?","The scanner logs a warning listing unmatched class names. No CSS is generated for those classes. This typically means you need to register the corresponding utility factory using ",[445,3730,481],{}," or an individual composable.",[3716,3733,3735,3736,3739,3740,3743],{"icon":3718,"label":3734},"Can I use the scanner without the Vite plugin?","Yes. The ",[445,3737,3738],{},"@styleframe/scanner"," package provides a standalone programmatic API. Use ",[445,3741,3742],{},"createScanner()"," to integrate the scanner into any build tool or custom workflow.",[3716,3745,3747,3748,3750],{"icon":3718,"label":3746},"Does the scanner detect dynamic class names?","No. The scanner performs static analysis and can only detect class names that appear as literal strings in your source files. Template literal interpolations like ",[445,3749,3695],{}," cannot be resolved. For dynamic values, pre-register the utilities in your config file.",[3716,3752,3754],{"icon":3718,"label":3753},"How does caching work during development?","The scanner caches results per file using content hashing. When a file changes during HMR, only that file is invalidated and re-scanned. Unchanged files return cached results instantly.",[3716,3756,3758,3759,3762,3763,3766],{"icon":3718,"label":3757},"Can I add support for a custom file type?","Yes. Provide a custom extractor function via the ",[445,3760,3761],{},"extractors"," option. Your extractor receives the file content and path, and returns an array of class name strings. See the ",[1063,3764,2121],{"href":3765},"#custom-extractors"," section above for an example.",[3716,3768,3770,3771,3773,3774,1067],{"icon":3718,"label":3769},"Does the scanner work with class name utilities like clsx or classnames?","Yes. The JSX/TSX extractor handles ",[445,3772,1849],{}," expressions and extracts string literals from within braced expressions, including patterns like ",[445,3775,3776],{},"clsx({ '_margin:sm': true })",[3716,3778,3780,3781,3783,3784,1449,3786,3788,3789,3791,3792,3794,3795,3797,3798,3800,3801,3803],{"icon":3718,"label":3779},"Can I change the utility class naming convention?","Yes. Provide a ",[445,3782,2461],{}," config with ",[445,3785,2493],{},[445,3787,1131],{},", and ",[445,3790,2533],{}," functions to replace the default ",[445,3793,2454],{}," format. You must also set the same ",[445,3796,2533],{}," function on the Styleframe instance via ",[445,3799,3379],{},". See ",[1063,3802,1066],{"href":1065}," for a full example.",[3805,3806,3807],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":513,"searchDepth":554,"depth":554,"links":3809},[3810,3811,3816,3820,3825,3832,3833,3834,3835,3840,3841,3842],{"id":419,"depth":554,"text":420},{"id":473,"depth":554,"text":474,"children":3812},[3813,3814,3815],{"id":493,"depth":574,"text":494},{"id":698,"depth":574,"text":699},{"id":854,"depth":574,"text":855},{"id":971,"depth":554,"text":972,"children":3817},[3818,3819],{"id":1134,"depth":574,"text":1135},{"id":1249,"depth":574,"text":1250},{"id":1293,"depth":554,"text":1294,"children":3821},[3822,3823,3824],{"id":1311,"depth":574,"text":1312},{"id":1389,"depth":574,"text":1390},{"id":1482,"depth":574,"text":1483},{"id":1570,"depth":554,"text":1571,"children":3826},[3827,3828,3829,3830,3831],{"id":1577,"depth":574,"text":1578},{"id":1587,"depth":574,"text":1588},{"id":1692,"depth":574,"text":1693},{"id":1708,"depth":574,"text":1709},{"id":1752,"depth":574,"text":1753},{"id":1763,"depth":554,"text":1764},{"id":1912,"depth":554,"text":1913},{"id":2120,"depth":554,"text":2121},{"id":2448,"depth":554,"text":1066,"children":3836},[3837,3838],{"id":2465,"depth":574,"text":2466},{"id":2566,"depth":574,"text":3839},"Example: sf- Prefix with Dash Separators",{"id":3635,"depth":554,"text":3636},{"id":3645,"depth":554,"text":3646},{"id":3710,"depth":554,"text":3711},"Automatically detect utility class names in your source files and generate the corresponding CSS at build time — no manual value definitions needed.","md",null,{},{"icon":46},{"title":43,"description":3843},{"loc":44},"L8Ad5bXK9gvCBLZ6VyDz7oGtpXrzKqYkamVLBnio-zA",[3852,3854],{"title":38,"path":39,"stem":40,"description":3853,"icon":41,"children":-1},"Use the Styleframe CLI to initialize projects and build optimized CSS from your configuration files.",{"title":48,"path":49,"stem":50,"description":3855,"icon":51,"children":-1},"Sync your Styleframe design tokens with Figma using the plugin and CLI commands for bidirectional token synchronization.",1776621128755]