mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-07 12:33:36 +09:00
Ivan Starkov
f8c97c2e2d
## Description release 0.86.0 ## Steps for reproduction 1. click button 2. expect xyz ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 5de6) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env.example` and the `builder/env-check.js` if mandatory
CSS Vars utils
This package helps you create uniquely named css variables as well as use them.
API
import { cssVars } from "css-vars";
const myVariable = cssVars.define("my-variable"); // --my-variable-0
cssVars.use(myVariable, "fallback"); // var(--my-variable-0, fallback)
Example using style prop
import { cssVars } from "css-vars";
// icon.ts
const showVar = cssVars.define("button-show"); // --button-show-0
export const buttonCssVars = ({ show }: { show: boolean }) => ({
[showVar]: show ? "block" : "none",
});
export const Button = () => {
return <button style={{ display: cssVars.use(showVar, "none") }}></button>;
};
// panel.ts
import { Button, buttonCssVars } from "./button";
const Panel = (props) => {
const [show, setShow] = useState(false);
return (
<div {...props} style={buttonCssVars({ show })}>
<Button />
</div>
);
};
Example using stitches with :hover
import { cssVars } from "css-vars";
import {styled} from 'stitches'
// icon.ts
const showVar = cssVars.define("button-show"); // --button-show-0
const primaryBgVar = cssVars.define("button-primary-bg"); // --button-primary-bg-1
export const buttonCssVars = ({ show, variant }: { show: boolean, variant: 'primary' | 'secondary' }) => ({
[showVar]: show ? "block" : "none",
[primaryBgVar]: variant === 'primary' ? "red" : "grey",
});
export const Button = styled('button', {
display: cssVars.use(showVar, "none")
variants: {
variant: {
primary: {
background: cssVars.use(primaryBgVar, "red")
}
}
}
})
// panel.ts
import {Button, buttonCssVars} from './button'
import {styled} from 'stitches'
const Panel = styled('div', {
'&:hover': buttonCssVars({show: true})
})