Customizing At-rules

A guide to adding custom at-rule tokens and aliases.

Overview

In native CSS, it's not possible to reuse queries through CSS variables. By tokenizing media queries, feature queries, container queries, and applying them with flexible syntax within the markup.

export default {    at: {        landscape: '@media(orientation:landscape)'     }}

Employ concise yet semantically meaningful markup.

<img class="aspect:2/1@landscape" … />

@layer base, theme, preset, components, general;@layer general {    @media (orientation:landscape) {        .aspect\:2\/1\@landscape {            aspect-ratio: 2/1        }    }}

You wouldn't want to write full condtions within the markup.

<div class="aspect:2/1@media(orientation:landscape)">…</div>

Basic usage

Add a media query token

Create a media query token, such as @landscape, to represent landscape orientation.

export default {    at: {        landscape: '@media(orientation:landscape)'     }}

When displayed in landscape orientation, the image is presented in a 2:1 aspect ratio.

<img class="aspect:2/1@landscape" … />

@layer base, theme, preset, components, general;@layer general {    @media (orientation:landscape) {        .aspect\:2\/1\@landscape {            aspect-ratio: 2/1        }    }}

Add a feature query token

Create a feature query token, such as @supports-backdrop, to apply styles based on backdrop-filter support.

export default {    at: {        supports: {            backdrop: 'supports(backdrop-filter:blur(0px))'         }    }}

Applies translucent background only when backdrop-filter is supported.

<div class="bg:white/.8@supports-backdrop">…</div>

@layer base, theme, preset, components, general;@layer general {    @supports (backdrop-filter:blur(0px)) {        .bg\:white\/\.8\@supports-backdrop {            background-color: rgb(255 255 255/.8)        }    }}

Add a feature name alias

Create a feature name alias to shorten the syntax of a feature query.

export default {    at: {        h: 'height'     }}

Use the name alias h:

<div class="hidden@container(h<=200)">…</div>

@layer base, theme, preset, components, general;@layer general {    @container (height<=12.5rem) {        .hidden\@container\(h\<\=200\) {            display: none        }    }}