Selectors

The extensions cx and styled support selectors; on the other hand css does not because it only generates one Rule.

The syntax is similar to SASS but the only difference is that for nesting you need to use & in front of each selector.

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

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

Note: Selectors can be nested within your CSS which will be attached to the classname generated (in this case by cx)

More than one level of selectors is not supported. It might compile but it will generate the wrong result.

The support for selectors is CSS Selectors Level 3 and the more stable part of level 4 (currently in draft).

Interpolation in selectors

It’s useful to keep classnames unique, or to reference other classnames in styled-ppx, that’s why we support interpolation in selectors.

// Here `outlined` is a classname generated by `cx`, but it can be any string
let outlined = %cx(`
  padding: 4px;
  outline: 1px solid red;
`)
 
let link = %cx(`
  color: $(Color.Text.body);
 
  & .$(outlined) {
    padding: 0px;
  }
`)
 
<div className={link ++ " " ++ (isActive ? outlined : "")} />

// Here `outlined` is a classname generated by `cx`, but it can be any string
let outlined = [%cx {|
  padding: 4px;
  outline: 1px solid red;
|}];
 
let link = [%cx {|
  color: $(Color.Text.body);
 
  & .$(outlined) {
    padding: 0px;
  }
|}];
 
<div className={(link ++ " ") ++ (if (isActive) {outlined} else {""})} />;

Media queries Runtime: CSS