mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-08 21:15:18 +09:00
Bogdan Chadkin
50010c7f0d
Here "include" often have list of extensions and forgotten .tsx so such modules are left unchecked. Replaced with just "src" which consider all typescript extensions. Ideally stop using tsc to build artifacts, switch to esbuild and remove complex configuration from all tsconfig.json.
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})
})