lit-style
v1.1.4
Published
PostCSS preprocessor for Tagged Templates
Downloads
26
Readme
lit-style
PostCSS preprocessor for Tagged Templates
Installation
npm i lit-style
Usage
import { process } from 'lit-style'
import * as postcssPresetEnv from 'postcss-preset-env'
// Create Tagged Templates functions
const style = process({
plugins: [postcssPresetEnv({ stage: 0 })] // For example, use postcss-preset-env
})
const color = 'green'
// 💅 Gets the result of processing by PostCSS
export const body = async () => style`
body {
& a {
color: ${color};
}
}
`
/* This results:
body a {
color: green;
}
*/
Controls return value type with directive
import { process, directive } from 'lit-style'
import * as postcssPresetEnv from 'postcss-preset-env'
const processor = process({
plugins: [postcssPresetEnv({ stage: 0 })]
})
const style = directive(processor, async css => `<style>${await css}</style>`)
const color = 'green'
export const body = async () => style`
body {
& a {
color: ${color};
}
}
`
/* 💅 This beautifully results:
<style>
body a {
color: green;
}
</style>
*/