Permalink
Fetching contributors…
Cannot retrieve contributors at this time
314 lines (255 sloc) 4.05 KB

Features

Expanded properties.

A much more readable syntax and less repetitions compared to CSS.

border: {
  color: 'black',
  width: 1,
  style: 'solid'
}

will output:

border: 1px solid black;

See properties section for more details.

Using arrays for space separated properties.

padding: [5, 10, 5],
margin: [10, 5]

will output

padding: 5px 10px 5px;
margin: 10px 5px

Supported properties:

  • backgroundSize
  • backgroundPosition
  • border
  • borderBottom
  • borderLeft
  • borderTop
  • borderRight
  • borderRadius
  • borderImage
  • borderWidth
  • borderStyle
  • borderColor
  • boxShadow
  • flex
  • margin
  • padding
  • outline
  • transformOrigin
  • transform
  • transition

Using arrays for multi value properties.

transition: [
  ['opacity', '200ms'],
  ['width', '300ms']
]

will output

transition: opacity 200ms, width 300ms;

Use objects inside of arrays.

transition: [{
    property: 'opacity',
    duration: '200ms'
  }, {
    property: 'width',
    duration: '300ms'
}]

will output:

transition: opacity 200ms, width 300ms;

Fallbacks are supported.

JSS has a fallbacks api which is also supported.

button: {
  background: {
    image: 'linear-gradient(red, green)'
  },
  fallbacks: {
    background: {
      color: 'red',
      repeat: 'no-repeat',
      position: [0 , 0]
    }
  }
}

will output:

foo {
  background: red no-repeat 0 0;
  background: linear-gradient(red, green);
}

Supported properties.

A list of all properties supported in expanded syntax and their corresponding defaults.

padding: {
  top: 10 // Props right, bottom, left will get 0 as defaults, as opposite to `padding: 10px`.
}

Will output:

padding: 10px 0 0 0;

padding

padding: {
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
}

margin

margin: {
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
}

font

font: {
  style: null,
  variant: null,
  weight: null,
  stretch: null,
  size: null,
  family: null,
  lineHeight: null
}

background

Unlike pure CSS, background-size property can be written inside common background property.

background: {
  attachment: null,
  color: null,
  image: null,
  position: null, // Accepts array notation (e.g., `[0, 0]`, `['center', 'top']`)
  repeat: null,
  size: null, // Accepts array notation (e.g., `['100%', '50%']`) and keywords (`contain`, `cover`)
}

border

Same goes for borderTop, borderRight, borderBottom, borderLeft.

Unlike pure CSS, border-radius property can be written inside common border property.

border: {
  width: null,
  style: null,
  color: null
}

outline

outline: {
  width: null,
  style: null,
  color: null
}

listStyle

listStyle: {
  type: null,
  position: null,
  image: null
}

transition

transition: {
  property: null,
  duration: null,
  timingFunction: null,
  delay: null
}

animation

animation: {
  name: null,
  duration: null,
  timingFunction: null,
  delay: null,
  iterationCount: null,
  direction: null,
  fillMode: null,
  playState: null
}

boxShadow

boxShadow: {
  x: 0,
  y: 0,
  blur: null,
  spread: null,
  color: null,
  inset: null // If you want to add inset you need to write "inset: 'inset'"
}

textShadow

textShadow: {
  x: 0,
  y: 0,
  blur: null,
  color: null
}

flex

flex: {
  basis: null,
  direction: null,
  flow: null,
  grow: null,
  shrink: null,
  wrap: null
}

align

align: {
  self: null,
  items: null,
  content: null
}

grid

grid: {
  templateColumns: null,
  templateRows: null,
  templateAreas: null,
  template: null,
  autoColumns: null,
  autoRows: null,
  autoFlow: null,
  column: null,
  rowStart: null,
  rowEnd: null,
  columnStart: null,
  columnEnd: null,
  area: null,
  gap: null,
  rowGap: null,
  columnGap: null,
},