npm install --save-dev aliascss

<script defer src="https://cdn.jsdelivr.net/npm/aliascss@latest/dist/aliascss.js"></script>

npm install --save-dev aliascss

const config = {
  input: ['app/**/*.(jsx|tsx)', 'components/**/*.(jsx|tsx)'],
  output: {
    location: 'public/css/master.css',
    '--file': true,
  },
};
export default config;

npx aliascss --config

npx aliascss --config --watch

"scripts": {
  "aliascss-build": "aliascss --config",
  "aliascss-watch": "aliascss --config --watch"
}

(@layer and/or media) → (pseudo and/Or selector )→ property → value

<div class="@[base,md]-d-flex"></div>
<div class="md--hover-bgc-blue"></div>
<div class="--hover_h3-c-red"></div>
<div class="xs-fdc"></div>
<div class="dark-bgc-0e0e0e"></div>

color:blue           → color-blue
display:flex         → display-flex
font-size:3rem       → font-size-3rem
margin-left:32px     → margin-left-32px
left:-100px          → left--100px

margin--12px                         → margin: -12px
left--20px                           → left: -20px
box-shadow--1px-0px-2px-black        → box-shadow: -1px 0px 2px black
transform-rotateY--90deg             → transform: rotateY(-90deg)
margin-100px--100px-100px--100px     → margin: 100px -100px 100px -100px

margin-10px-20px                  → margin: 10px 20px
border-1px-solid-red              → border: 1px solid red
padding-10px-20px-10px-20px       → padding: 10px 20px 10px 20px
grid-column-1/2                   → grid-column: 1 / 2
grid-column-1/--2                 → grid-column: 1 / -2

bxs-1px-1px-red__2px-2px-blue    → box-shadow: 1px 1px red, 2px 2px blue
txs-1px-1px-red__2px-2px-blue    → text-shadow: 1px 1px red, 2px 2px blue
ff-Inter__Segoe_UI__sans-serif   → font-family: Inter, "Segoe UI", sans-serif

_  = space within a font name    → Times_New_Roman = "Times New Roman"
__ = comma separator             → Inter__Arial = Inter, Arial

m-4   → margin: 1rem
p-8   → padding: 2rem
g-2   → gap: 0.5rem
mx-4  → margin-left: 1rem; margin-right: 1rem

bgc--main-bg         → background-color: var(--main-bg)
bgc--main-bg:blue    → background-color: var(--main-bg, blue)
w--var--24x          → width: var(--24x)  [use --var-- for numeric names]
w--24x               → width: -24x        [WRONG - treated as negative]

w-fc    → width: fit-content
w-xc    → width: max-content
w-mc    → width: min-content
w-min(40%,400px)           → width: min(40%, 400px)
w-max(40%,400px)           → width: max(40%, 400px)
w-clamp(20rem,30vw,70rem)  → width: clamp(20rem, 30vw, 70rem)

display-flex, font-weight-900, align-items-center,
text-decoration-underline, position-relative,
flex-direction-column, justify-content-center

margin-200px, color-green, font-size-1.2em,
border-1px-solid-e3e3e3, background-linear-gradient-135deg-blue-red,
width-clamp(20rem,30vw,70rem), box-shadow-0px-4px-12px-black/3

<div class="c-red bgc-skyBlue bc-blue"></div>

<h1
  class="c--fg-color bg--bg-color fs-3rem"
  style="
    --fg-color: color-mix(in srgb, red, white 20%);
    --bg-color: hsl(from var(--primary) h s calc(l - 20%));
  "
>
  Hello, World
</h1>

padding(p), margin(m), gap(g), width(w), height(h),
border-width(bw), line-height(lh), letter-spacing(les),
border-radius(br), text-indent(ti), text-shadow(txs),
box-shadow(bxs), top(t), bottom(btm), right(r), left(l),
outline-width(olw), background-size(bgs), background-position(bgp),
inline-size(is), block-size, margin-block, padding-block

<div
  class="w--header-width mx-auto"
  style="--header-width: clamp(min(10vw,20rem), 300px, max(90vw,55rem))"
></div>

<section
  class="gtc--panel-layout gta--named-areas"
  style='
    --panel-layout: repeat(3, [col-start] 1fr [col-end]);
    --named-areas: "header header header" "sidebar main main" "footer footer footer"
  '
></section>

<button
  class="d-if b-1px-s-primary600 bxs--shadow-sm"
  style="--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
>
  Button
</button>

<div class="
  mh-50vh
  d-flex ai-center jc-center
  bgc-0f0c29
" style="background: linear-gradient(135deg, #0f0c29, #302b63, #24243e)">
 
  <!-- Scene wrapper: enables 3D perspective -->
  <div class="
    w-200px h-200px
    d-flex ai-center jc-center
    perspective-600px
  ">
 
    <!-- Cube root: preserve-3d + spin animation -->
    <div
      keyframes-spin="@0-[tf-rotateX-20deg__rotateY-0deg] @100-[tf-rotateX-20deg__rotateY-360deg]"
      class="pr w-120px h-120px transform-style-preserve-3d an-spin adu-8s atf-linear aici"
      >
      <!-- 6 Faces via child selector: .cube > div -->
      <!-- Front -->
      <div class="
        [pa,w-120px,h-120px,bgc-rgb-255-255-255-0.15,b-1px-s-rgba-255-255-255-0.35,br-6px,bf-blur-6px]--as-cube-face
        cube-face
        tf-translateZ-60px
      "></div>
 
      <!-- Back -->
      <div class="cube-face tf-rotateY-180deg__translateZ-60px"></div>
 
      <!-- Left -->
      <div class="cube-face tf-rotateY--90deg__translateZ-60px "></div>
 
      <!-- Right -->
      <div class="cube-face tf-rotateY-90deg__translateZ-60px"></div>
 
      <!-- Top -->
      <div class="cube-face tf-rx-90deg__tz-60px"></div>
 
      <!-- Bottom -->
      <div class="cube-face tf-rotateX--90deg__translateZ-60px"></div>
 
    </div>
  </div>
 
</div>

<div class="bgc-ccc --hover-bgc-yellow --h-bgc-yellow"></div>
<button class="bgc-blue --focus-outline-none --disabled-o-0.5"></button>
<input class="b-1px-s-gray --focus-b-1px-s-blue --invalid-b-1px-s-red">

<div class="_h3-c-white _p-fs-14px _span-fw-600">
  <h3>Hello</h3>
  <p>World</p>
  <span>Text</span>
</div>

._h3-c-white h3 { color: white; }
._p-fs-14px p { font-size: 14px; }
._span-fw-600 span { font-weight: 600; }

<div class="_div_h4-fs-20px"></div>
<!-- ._div_h4-fs-20px div h4 { font-size: 20px } -->
 
<div class="_ul_li-c-red"></div>
<!-- ._ul_li-c-red ul li { color: red } -->
 
<div class="_nav_ul_li-d-f"></div>
<!-- ._nav_ul_li-d-f nav ul li { display: flex } -->

<div class="[data-state=open]-d-flex"></div>
<div class="[data-state=close]-d-n"></div>
<div class="[aria-hidden=true]-v-hidden"></div>
<div class="[disabled]-o-0.5"></div>
<div class="[class~=code]-ff-mono"></div>
<div class="[type=checkbox]-cur-pointer"></div>

[data-state="open"] { display: flex; }
[data-state="close"] { display: none; }
[aria-hidden="true"] { visibility: hidden; }
[disabled] { opacity: 0.5; }
[class~="code"] { font-family: monospace; }
[type="checkbox"] { cursor: pointer; }

<div class="--is(_h3,_p)-c-black/8 --Is(--hover)-bgc-black/2">
  <h3>Hello</h3>
  <p>World</p>
</div>

.--is\(_h3\,_p\)-c-black\/8 :is(h3, p) {
  color: oklch(from black l c h / 0.8);
}
.--Is\(--hover\)-bgc-black\/2:is(:hover) {
  background-color: oklch(from black l c h / 0.2);
}

._div-bgc-red div { background-color: red; }

<!-- Default behavior -->
<div class="_div-bgc-red"></div>
<!-- ._div-bgc-red div { background-color: red } -->
 
<!-- With & -->
<div class="_div&-bgc-red"></div>
<!-- div ._div\&-bgc-red { background-color: red } -->
 
<!-- Class scope -->
<div class="_.card&-c-blue"></div>
<!-- .card ._.card\&-c-blue { color: blue } -->
 
<!-- Dark mode scoping -->
<div class="--is(_html[class~=dark])&-bgc--dark-bg"></div>
<!-- :is(html[class~="dark"]) .class { background-color: var(--dark-bg) } -->

<div
  class="c--grey-alt --grey:--grey-default"
  style="
    --grey-default: rgba(210,213,217,1);
    --grey-alt: rgba(186,189,194,1)
  "
>
  <h3 class="c--grey --hover-c--grey-hover --grey-hover:black">
    Hello World
  </h3>
</div>

<h1
  class="c--fg-color bg--bg-color fs-3rem"
  style="
    --fg-color: color-mix(in srgb, red, white 20%);
    --bg-color: hsl(from var(--primary) h s calc(l - 20%));
  "
>Hello World</h1>
 
<div
  class="gtc--panel-grid gta--named-areas"
  style='
    --panel-grid: repeat(3, [col-start] 1fr [col-end]);
    --named-areas: "header header header" "sidebar main main" "footer footer footer"
  '
></div>

<!-- Basic responsive -->
<div class="xs-fdc md-w-500px lg-d-g dark-bgc-0e0e0e">...</div>
 
<!-- Media + element selector -->
<div class="xs_p-fs-14px md_h3-fs-24px">...</div>
<!-- @media(max-width:576px) { .xs_p-fs-14px p { font-size:14px } } -->
 
<!-- Media + pseudo -->
<div class="md---hover-bgc-blue xs---focus-b-1px-s-red">...</div>
 
<!-- Responsive display -->
<div class="xs-dn md-df lg-dg">...</div>

@media (max-width: 576px) {
  .xs-fdc { flex-direction: column; }
}
@media (min-width: 768px) {
  .md-w-500px { width: 500px; }
}
@media (min-width: 992px) {
  .lg-d-g { display: grid; }
}
@media (prefers-color-scheme: dark) {
  .dark-bgc-0e0e0e { background-color: #0e0e0e; }
}

// aliascss.config.js
const config = {
  media: {
    prefix: {
      xs: '@media (max-width: 600px)',
      sm: '@media (min-width: 600px)',
      md: '@media (min-width: 900px)',
      lg: '@media (min-width: 1200px)',
      xl: '@media (min-width: 1536px)',
    },
  },
};
export default config;

<button class="@base-all-unset">Label</button>
<!-- @layer base { .\@base-all-unset { all: unset } } -->
 
<div class="@theme-bgc-primary500">...</div>
<!-- @layer theme { .\@theme-bgc-primary500 { background-color: var(--primary500) } } -->

<button class="b-0 c-fff bgc-blue @theme-[c-gray,br-4px,bgc-skyBlue]">
  Label
</button>
 
<div class="@base-[data-state=open][d-flex,l-0]">...</div>

<button class="@[base,xs][b-0,c-fff,bgc-blue]--as-btn btn">Label</button>
<div class="@[xs,base][data-state=open][d-flex,l-0]--as-active active">...</div>

@layer base {
  @media (max-width: 576px) {
    .btn { border: 0; color: #fff; background-color: blue; }
  }
}

// aliascss.config.js
const config = {
  media: {
    prefix: {
      '@customLayer': '@layer customLayer',
      '@reset': '@layer reset',
    },
  },
};
export default config;

<div class="@customLayer-d-flex @reset-m-0px-p-0px">...</div>

<!-- Attribute selector grouping -->
<div class="[data-state=open]-[d-flex,l-0,t-0]">...</div>
 
<!-- Media grouping -->
<div class="xs-[fdc,p-16px,fs-14px]">...</div>
 
<!-- Layer grouping -->
<div class="@theme-[bgc-primary500,c-white,br-8px]">...</div>
 
<!-- Multiple pseudo grouping -->
<input class="b-1px-s-gray --focus-[b-1px-s-blue,outline-none] --invalid-[b-1px-s-red,bgc-red/1]">
 
<!-- Dark mode grouping -->
<div class="bgc-white dark-[bgc-gray900,c-white,b-1px-s-gray700]">...</div>

[data-state="open"] { display: flex; }
[data-state="open"] { left: 0; }
[data-state="open"] { top: 0; }

<!-- Single component -->
<button class="[b-0,c-fff,bgc-blue,p-8px-16px,br-6px]--as-btn btn">
  Label
</button>
 
<!-- Component with state -->
<button class="[b-0,c-fff,bgc-blue]--as-btn --hover-[bgc-blue/8,c-white]--as-btn btn">
  Label
</button>
 
<!-- Multiple component names -->
<div class="[p-20px,bgc-white,br-8px]--as-[card,box]">...</div>
 
<!-- Attribute + component -->
<div class="[data-state=open]-[d-flex,l-0]--as-active active">...</div>
 
<!-- Layer + component -->
<div class="@[base,xs]-[b-0,c-fff,bgc-blue]--as-btn btn">...</div>

.btn { border: 0; color: #fff; background-color: blue; padding: 8px 16px; border-radius: 6px; }
.card { padding: 20px; background-color: white; border-radius: 8px; }
.box { padding: 20px; background-color: white; border-radius: 8px; }

<!-- Define and use container -->
<div
  class="container"
  class-container="df bgc--main-color oh w-100p h-100p pa t-0 l-0 aic jcc zi-100"
>
  ...
</div>
 
<!-- Use anywhere on same page -->
<section class="container">...</section>
<header class="container">...</header>

<div
  class="error"
  class-error="c-error500 b-1px-s-error500"
  class-error[--after]="bgc-error100 c-error700 b-1px-s-error700"
  class-error[--hover]="bgc-error50"
  class-error[--focus]="outline-none b-2px-s-error600"
>
  Error message
</div>

.error { color: var(--error500); border: 1px solid var(--error500); }
.error::after { background-color: var(--error100); color: var(--error700); border: 1px solid var(--error700); }
.error:hover { background-color: var(--error50); }
.error:focus { outline: none; border: 2px solid var(--error600); }

keyframes-[animation-name]="@[percentage]-aliascss @[percentage]-aliascss"

<!-- Fade out -->
<div keyframes-fadeOut="@0-o-1 @100-o-0" class="an-fadeOut adu-1s">
  Fade Out
</div>
 
<!-- Fade in -->
<div keyframes-fadeIn="@0-o-0 @100-o-1" class="an-fadeIn adu-1s">
  Fade In
</div>
 
<!-- Flash -->
<h1 keyframes-flash="@[0,50,100]-o-1 @[25,75]-o-0" class="an-flash adu-2s">
  Flash!
</h1>
 
<!-- Slide in from left -->
<div keyframes-slideIn="@0-[o-0,tf-tx--100%] @100-[o-1,tf-tx-0]"
  class="an-slideIn adu-0.5s atf-eio">
  Slide In
</div>
 
<!-- Bounce -->
<div keyframes-bounce="@[0,100]-tf-ty-0 @50-tf-ty--20px"
  class="an-bounce adu-1s atf-eio aici">
  Bounce
</div>
 
<!-- Pulse -->
<div keyframes-pulse="@0-o-1 @50-o-0.5 @100-o-1"
  class="an-pulse adu-2s aici">
  Pulse
</div>
 
<!-- Spin -->
<div keyframes-spin="@0-tf-r-0deg @100-tf-r-360deg"
  class="an-spin adu-1s atf-linear aici">
  Spin
</div>

<!-- Same style applied to 0%, 50%, 100% -->
<div keyframes-blink="@[0,100]-o-1 @50-o-0" class="an-blink adu-1s aici">...</div>
 
<!-- Complex multi-step -->
<div keyframes-wave="@[0,100]-tf-r-0deg @25-tf-r-20deg @75-tf-r--20deg"
  class="an-wave adu-1s aici">...</div>

<!-- Multiple properties at each step -->
<div
  keyframes-pop-up="
    @0-[tf-ty-0,tfo-50p-50p,bxs--shadow-down]
    @100-[tf-ty--50px,tfo-50p-50p,bxs--shadow-up]
  "
  class="an-pop-up adu-1.5s ada atf--timing-func aici afmbo"
  style="
    --shadow-up: 0 50px 3px -20px rgba(0,0,0,0.3);
    --shadow-down: 0 50px 3px -5px rgba(0,0,0,0.3);
    --timing-func: cubic-bezier(0.250, 0.460, 0.450, 0.940)
  "
></div>
 
<!-- Loading dots -->
<div
  class="d-flex ai-center jc-center gap-8px"
  keyframes-loading="@[0,100]-tf-s-1 @50-tf-s-1.5"
>
  <span class="dot"
    class-dot="br-100p b-5px-solid-555 m-10px an-loading adu-0.6s atf-eio ada aici"
  ></span>
  <span class="dot adl-0.2s"></span>
  <span class="dot adl-0.4s"></span>
</div>

adu-0d6s  → animation-duration: 0.6s
adu-1d5s  → animation-duration: 1.5s
adl-0d2s  → animation-delay: 0.2s

# Compile once
npx aliascss 'public/*.html' 'public/css/acss.css'
 
# Watch mode
npx aliascss 'app/**/*.(tsx|jsx)' 'public/css/acss.css' --watch

"scripts": {
  "aliascss-build": "aliascss 'public/*.html' 'public/css/aliascss.css'",
  "aliascss-watch": "aliascss-build --watch"
}

const config = {
 
  // Input: glob pattern or array of glob patterns
  input: [
    'app/**/*.(tsx|jsx)',
    'components/**/*.(tsx|jsx)',
    'public/*.html'
  ],
 
  // Output: master CSS file — must exist or be created manually
  output: {
    location: './public/css/acss.css',
    '--file': true, // also generate per-file .css alongside each source file
  },
 
  // Customize media/breakpoint prefixes
  media: {
    prefix: {
      xs: '@media (max-width: 600px)',
      sm: '@media (min-width: 600px)',
      md: '@media (min-width: 900px)',
      lg: '@media (min-width: 1200px)',
      xl: '@media (min-width: 1536px)',
      '@customLayer': '@layer customLayer',
    },
  },
 
  // CSS Modules support
  '--module': true,
  importModuleAs: 'x', // import x from 'file.module.css'
 
  // Minify output via cssnano
  // minify: true,
 
  // Name of extractor function
  extractorFunction: 'x',
 
  // Global classname prefix: ac-bgc-red, ac--hover-c-red
  // prefix: 'ac',
 
  // Truncate output on each rebuild (recommended: true)
  truncate: true,
 
  // Custom color tokens — use camelCase, no hyphens or underscores
  custom: {
    colors: {
      main: 'rgb(12,23,45)',
      theme: '#c6c6c6',
      themeTextColor: 'var(--theme-text-color, #c3c3c3)',
      themeBgColor: 'var(--theme-bg-color, #0e0e0e)',
      primary: 'rgba(124,143,234,1)',
    },
  },
 
  // Extend the compiler with custom properties and aliases
  extend: {
    // Override existing property compiler
    'background-color': {
      alias: 'bgc',
      values: ['transparent:t:no-color'],
      compiler: (value) => value.replace(/^-/, ''),
    },
 
    // Custom property mapped to real CSS property
    shadow: {
      property: 'box-shadow',
      compiler: (value) => {
        value = value.slice(1);
        const values = {
          '3xl': '0px 32px 64px -12px var(--shadow-color, rgba(16,24,40,0.14))',
          '2xl': '0px 24px 48px -12px var(--shadow-color, rgba(16,24,40,0.14))',
          'xl':  '0px 20px 24px -4px var(--shadow-color, rgba(16,24,40,0.14))',
          'lg':  '0px 12px 16px -4px var(--shadow-color, rgba(16,24,40,0.14))',
          'md':  '0px 4px 8px -2px var(--shadow-color, rgba(16,24,40,0.14))',
          'sm':  '0px 1px 3px var(--shadow-color, rgba(16,24,40,0.14))',
          'xs':  '0px 1px 2px var(--shadow-color, rgba(16,24,40,0.14))',
        };
        if (values.hasOwnProperty(value)) return values[value];
      },
    },
 
    // Group compiler: text-xl → font-size + line-height + letter-spacing
    text: {
      type: 'group',
      groups: {
        'xs':  'font-size:12px;letter-spacing:0.0025em;line-height:16px',
        'sm':  'font-size:14px;letter-spacing:0em;line-height:20px',
        'md':  'font-size:16px;letter-spacing:0em;line-height:24px',
        'lg':  'font-size:18px;letter-spacing:-0.0025em;line-height:26px',
        'xl':  'font-size:20px;letter-spacing:-0.005em;line-height:28px',
        '2xl': 'font-size:24px;letter-spacing:-0.00625em;line-height:30px',
        '3xl': 'font-size:28px;letter-spacing:-0.0075em;line-height:36px',
        '4xl': 'font-size:35px;letter-spacing:-0.01em;line-height:40px',
        '5xl': 'font-size:60px;letter-spacing:-0.025em;line-height:60px',
      },
    },
   
    // box-[width]-[height]-[padding]
    box: {
      type: 'group',
      compiler: (value) => {
        let result = '';
        const match = /-([-]?[\w\.]+)/;
        const property = ['width', 'height', 'padding'];
        value.match(new RegExp(match, 'g')).forEach((e, i) => {
          if (i < property.length) {
            result += `${property[i]}:${e.replace(match, '$1')
              .replace(/(\d)d(\d)/, '$1.$2')
              .replace(/([\d])p([\s]|$)/, '$1%$2')};`;
          }
        });
        return result;
      },
    },
 
    // placement-[position]-[top]-[right]-[bottom]-[left]
    placement: {
      type: 'group',
      compiler: (value) => {
        let result = '';
        const match = /-([-]?[\w\.]+)/;
        const property = ['position', 'top', 'right', 'bottom', 'left'];
        value.match(new RegExp(match, 'g')).forEach((e, i) => {
          if (i < property.length) {
            result += `${property[i]}:${e.replace(match, '$1')
              .replace(/(\d)d(\d)/, '$1.$2')
              .replace(/([\d])p([\s]|$)/, '$1%$2')};`;
          }
        });
        return result;
      },
    },
 
    // colorize-[bg]-[border]-[text]
    colorize: {
      type: 'group',
      compiler: (value, custom) => {
        let result = '';
        const match = /-([-]?[\w\.]+)/;
        const property = ['background-color', 'border-color', 'color'];
        value.match(new RegExp(match, 'g')).forEach((e, i) => {
          if (i < property.length) {
            if (e.match(/^--[a-zA-Z]/)) {
              result += `${property[i]}:var(${e});`;
            } else {
              result += `${property[i]}:${getCompiler('color').compiler(e, custom)};`;
            }
          }
        });
        return result;
      },
    },
 
    // Responsive container widths
    container: {
      type: 'group',
      compiler: (value) => value,
      groups: {
        'xs': 'display:block;margin:auto;width:var(--container-xs,448px)',
        'sm': 'display:block;margin:auto;width:var(--container-sm,688px)',
        'md': 'display:block;margin:auto;width:var(--container-md,880px)',
        'lg': 'display:block;margin:auto;width:var(--container-lg,1136px)',
        '1':  'display:block;margin:auto;width:var(--container-1,448px)',
        '2':  'display:block;margin:auto;width:var(--container-2,688px)',
        '3':  'display:block;margin:auto;width:var(--container-3,880px)',
        '4':  'display:block;margin:auto;width:var(--container-4,1136px)',
      },
    },
 
    // Responsive section padding
    section: {
      type: 'group',
      compiler: (value) => value,
      groups: {
        'xs': 'display:block;padding:var(--section-padding-xs,24px) auto',
        'sm': 'display:block;padding:var(--section-padding-sm,40px) auto',
        'md': 'display:block;padding:var(--section-padding-md,64px) auto',
        'lg': 'display:block;padding:var(--section-padding-lg,80px) auto',
      },
    },
 
    // import-var: inject CSS variable groups
    'import-var': {
      type: 'group',
      groups: {
        spacing: `
          --space-1:4px; --space-2:8px; --space-3:12px;
          --space-4:16px; --space-5:24px; --space-6:32px;
          --space-7:40px; --space-8:48px; --space-9:64px;
        `,
      },
    },
  },
 
  // Prebuilt semantic classnames with raw CSS output
  prebuild: {
    'text-xl':      'font-size:20px;line-height:30px',
    'text-lg':      'font-size:18px;line-height:28px',
    'text-md':      'font-size:16px;line-height:24px',
    'text-sm':      'font-size:14px;line-height:20px',
    'text-xs':      'font-size:12px;line-height:18px',
    'radius-xs':    'border-radius:4px',
    'radius-sm':    'border-radius:6px',
    'radius-md':    'border-radius:8px',
    'radius-lg':    'border-radius:12px',
    'radius-xl':    'border-radius:16px',
    'radius-full':  'border-radius:9999px',
    'flex-center':  'display:flex;align-items:center;justify-content:center',
    'flex-between': 'display:flex;align-items:center;justify-content:space-between',
    'flex-col':     'display:flex;flex-direction:column',
    'absolute-fill':'position:absolute;top:0;left:0;width:100%;height:100%',
    'sr-only':      'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0',
  },
 
  // Inject static CSS into every compiled output file
  statement: `
    :root {
      --bg-dark-color: rgba(111,111,111,1);
      --bg-light-color: rgba(21,21,21,1);
      --outline-color: blue;
    }
    body {
      font-family: BlinkMacSystemFont, -apple-system, "Segoe UI";
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    *, *::before, *::after {
      box-sizing: inherit;
    }
  `,
 
  // Pre-group AliasCSS classnames under a single global classname
  group: {
    container:     'df fdc bsbb aic flex-shrink-1 flex-grow-1',
    section:       'flex-shrink-0 bsbb',
    'button-base': 'bgc-gray300 oln --hover-bgc-gray400 bn --focus-outline-none cur-pointer',
    'card':        'bgc-white br-8px bxs-0px-2px-8px-black/1 p-24px',
    'input-base':  'b-1px-s-gray300 br-6px p-8px-12px fs-14px w-100p --focus-b-1px-s-blue --focus-outline-none',
  },
 
  // Classnames to skip — avoids conflicts with Bootstrap/Tailwind/custom CSS
  ignore: [
    'color-primary',
    'fs-xl',
    'container',
    'row',
    'col',
  ],
 
};
export default config;