Namespaces

Namespaces are a collection of css rules manipulated in a specific manner.

@media

Reserved namespace for media queries Media Queries (opens in a new tab).

const styles = {
  '@media': {
    tablet: {
      size: 100,
    },
    darkMode: {
      bg: 'black',
    },
  },
}

Core medias

Available core auto-completions:

@layer

Represents a Cascade Layer (opens in a new tab).

const styles = {
  '@layer': {
    reset: {
      '*': {
        boxSizing: 'border-box'
      }
    },
    tokens: {
      ':root' {
        '--sl-bg-primary': 'pink'
      }
    }
  },
}

Core layers

Shoreline has 4 default layers:

Supports

The @supports (opens in a new tab) at-rule lets you specify CSS declarations that depend on a browser's support for CSS features.

const style = csx({
  '@supports': {
    '(background: color(display-p3 0 1 0))': {
      bg: 'color(display-p3 0 1 0)',
    },
  },
})