stringify converts a JavaScript object to a CSS string, optionally replacing values if a replacer function is specified.

import { stringify } from '@stitches/stringify'

stringify({
  body: {
    backgroundColor: 'white',
    color: 'black',

    '& > nav > ul': {
      '@media (min-width: 640px)': {
        margin: 0,
      }
    }
  }
})

body {
  background-color: white;
  color: black;
}

@media (min-width: 640px) {
  body > nav > ul {
    margin: 0;
  }
}

The actual output will not be formatted as it appears here.

Usage

From NPM, add stringify to your project:

npm install @stitches/stringify

Use stringify to serialize your CSS:

import { stringify } from '@stitches/stringify'

stringify({
  body: {
    margin: 0
  }
})

Replacer

The replacer is an optional function that alters the behavior of the stringification process, allowing you to replace entire fragments of CSS.

The replacer function takes two parameters, the property and value of a declaration, and returns a JavaScript object representing a fragment of CSS to replace it.

const replacer = (property, value) => (
  // add a prefix to "tab-size" for Firefox
  property === 'tab-size'
    ? {
      ['-moz-' + property]: value,
      [property]: value,
    }
  // add common prefixes for Safari 14
  : /^(appearance|backface-visibility|background-clip|clip-path|hyphens|mask-image|user-select)$/.test(property)
    ? {
      ['-webkit-' + property]: value,
      [property]: value,
    }
  : null
)

stringify({
  button: {
    appearance: 'none'
  },
  textarea: {
    tabSize: 2
  }
})

button {
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  -moz-tab-size: 2;
  tab-size: 2;
}

The replacer function prevents recursion by ignoring replacement of the same property-value pairs in a replaced fragment.

Examples

Stringify the content property

stringify({
  q: {
    '&::before': {
      content: '«'
    },
    '&::after': {
      content: '»'
    }
  }
})

q::before {
  content: '«';
}

q::after {
  content: '»';
}

Stringify @import rules

Arrays can be used to create multiple declarations or unnested rules with the same name.

stringify({
  '@import': [
    '"https://unpkg.com/sanitize.css"',
    '"https://unpkg.com/sanitize.css/typography.css"'
  ]
})

@import 'https://unpkg.com/sanitize.css';
@import 'https://unpkg.com/sanitize.css/typography.css';

Stringify a fallback property

stringify({
  body: {
    background: [
      'white',
      'var(--page-bg, white)'
    ]
  }
})

body {
  background: white;
  background: var(--red-color, white);
}