9.0.0-alpha.4 • Published 4 years ago
@stitches/vue-directive v9.0.0-alpha.4
Use stitches with Vue
Read more about stitches at @stitches/css.
Get started
npm install @stitches/vue-directive
// index.tsx
import Vue from "vue";
import { createCss } from "@stitches/css";
const css = createCss({
screens: {
sm: (cssRule) => `@media (min-width: 768px) { ${cssRule} }`,
md: (cssRule) => `@media (min-width: 1024px) { ${cssRule} }`,
},
tokens: {
colors: {
"red-primary": "red",
},
space: {
0: "0",
1: "1rem",
2: "2rem",
},
},
});
Vue.directive("css", css);
<template>
<div id="app">
<img width="25%" src="./assets/logo.png" />
<h1 v-css:sm="'margin-1'" v-css:md="'margin-2'">By screen</h1>
<h1 v-css="'color-red-primary'">Static</h1>
<h1
v-css="{
'hover:background-color-red-primary': makeRedOnHover
}"
>
Dynamic
</h1>
</div>
</template>
9.0.0-alpha.4
4 years ago
9.0.0-alpha.3
4 years ago
9.0.0-alpha.1
4 years ago
9.0.0-alpha.0
4 years ago
8.0.3
4 years ago
8.0.2
4 years ago
8.0.0
4 years ago
7.2.1
4 years ago
7.2.0
4 years ago
7.1.3
4 years ago
7.1.0
4 years ago
7.1.4
4 years ago
7.0.8
4 years ago
7.0.7
4 years ago
6.0.0
4 years ago
7.0.0
4 years ago
5.0.0
4 years ago
4.0.0
4 years ago
3.0.0
4 years ago
2.3.1
4 years ago
2.3.0
4 years ago
2.2.0
4 years ago
2.1.1
4 years ago
2.1.0
4 years ago
2.0.6
4 years ago
2.0.5
4 years ago
2.0.3
4 years ago
2.0.2
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.6.1
4 years ago
1.6.0
4 years ago