stringify converts a JavaScript object to a CSS string, optionally replacing values if a replacer function is specified.
import { stringify } from '@secrecy/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.
From NPM, add stringify to your project:
npm install @secrecy/stitches-stringify
Use stringify to serialize your CSS:
import { stringify } from '@secrecy/stitches-stringify'
stringify({
body: {
margin: 0
}
})
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.
stringify({
q: {
'&::before': {
content: '«'
},
'&::after': {
content: '»'
}
}
})
q::before {
content: '«';
}
q::after {
content: '»';
}
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({
body: {
background: [
'white',
'var(--page-bg, white)'
]
}
})
body {
background: white;
background: var(--red-color, white);
}