Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/davesnx/styled-ppx/llms.txt

Use this file to discover all available pages before exploring further.

%cx and %styled.* support @media and any other CSS at-rule nested inside the declaration block. The %css extension does not — it only accepts a single property: value declaration.

​
Basic usage

Nest @media directly inside the CSS string, alongside plain declarations: 
let container = %cx(`
  display: grid;
  grid-column-gap: 48px;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;

  @media screen and (max-width: 767px) {
    grid-template-columns: 100%;
  }
`)

​
Interpolation in media queries

Define your breakpoints as module-level string variables and interpolate them with $(...) for a single source of truth across your codebase: 
module Media = {
  let mobileDown = "(max-width: 767px)"
}

let container = %cx(`
  display: grid;
  grid-column-gap: 48px;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;

  @media screen and $(Media.mobileDown) {
    grid-template-columns: 100%;
  }
`)
Inside at-rule preludes, $(...) is treated as a raw string splice — the identifier’s runtime string value is inserted verbatim. This is the same string-like behaviour used for selector interpolation.

​
Supported at-rules

Any standard CSS at-rule is accepted in a declaration block:
At-ruleExample use case
@mediaResponsive breakpoints
@supportsFeature detection
@containerContainer queries
For keyframe animations, use the dedicated %keyframe extension rather than writing @keyframes inline inside a declaration block.

Build docs developers (and LLMs) love

Get started for freeTalk to us