Media queries

The extensions cx and styled support media-queries (and any at_rule (opens in a new tab)); on the other hand, css does not because it only generates one Rule.

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%;
  }
`)

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

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%;
  }
`)

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%;
  }
|}];

React's Ref Selectors