Examples of common solutions

Nested selectors

let link = %cx(`
  color: $(Color.Text.body);
 
  &:hover {
    color: $(Color.Text.accent);
  }
`)

let link = %cx(`
  color: $(Color.Text.body);
 
  &:hover {
    color: $(Color.Text.accent);
  }
`)

Interpolation in Media queries

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 $(Media.mobileDown) {
    grid-template-columns: 100%;
  }
`)

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 $(Media.mobileDown) {
    grid-template-columns: 100%;
  }
`)

Workaround for unsupported properties

There's no way to add unsafe behaviour on CSS definitions. Prefer to keep improving the overall safety via requests/issues than allowing a method for unsafe to all.

If this is bottle-neck, there's a handy way to workaround. The solution is to use the Array API to generate %cx%cx calls, like this example:

let block: Css.Rule.t = %css("display: block")
let randomProperty = CssJs.unsafe("aspect-ratio", "21 / 9");
let picture = %cx([block, randomProperty]);

let block: Css.Rule.t = %css("display: block")
let randomProperty = CssJs.unsafe("aspect-ratio", "21 / 9");
let picture = %cx([block, randomProperty]);

Here the lack of safety will rely on your usage of CssJs.unsafeCssJs.unsafe.