pure-vanilla-extract

A simple css template tag that allows you to write styled for @vanilla-extract in the purest form.

Usage

In your *.css.ts file...

pure.css

1import { css } from 'pure-vanilla-extract'
2import { createVar, style } from '@vanilla-extract/css'
3
4const veCompliantVar = createVar();
5
6export const style(css`
7    display: block;
8    position: relative;
9
10    ${veCompliantVar}: blue;
11    color: ${veCompliantVar};
12
13    /* Non-compliant variables can be used. They will NOT be prefixed, however. */
14    --non-compliant-var: red;
15    background-color: var(--non-compliant-var);
16
17    /* MEDIA QUERIES */
18    @media (min-width: 200px) {
19        width: 300px;
20        ${veCompliantVar}: black;
21    }
22
23    /* SELECTORS */
24    /* If a selector rule does not include an &, it will be placed at the start of the rule! */
25    :hover, &:hover {
26        /* both resolve to: &:hover */
27    }
28    :hover > div {
29        /* resolves to: &:hover > div */
30    }
31`)

pure.assignVars

Use assignVars() within a pure.css call as you would with @vanilla-extract/css.