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>
*/