@syfxlin/styops is an extension library for the styled ecosystem, designed to provide a unified theme variable, similar to open-props.
# NPM
npm i @syfxlin/styops
# Yarn
yarn add @syfxlin/styops
# PNPM
pnpm add @syfxlin/styopsimport { styled } from "@linaria/atomic or any css in js library";
import { createVars, style, tokens } from "@syfxlin/styops";
const vars1 = createVars();
export const Component1 = styled.div`
color: ${vars1.c("blue1")};
width: ${vars1.s("xs")};
height: ${vars1.s(10)};
`;
const shortcut = style({
key: ["width"],
css: (value: string) => {
return `width: ${value};`;
},
});
const vars2 = createVars({ ...tokens, shortcut });
export const Component2 = styled.div`
${vars2.width("10px")}
${vars2.up("xl")} {
${vars2.width("20px")}
}
`;@syfxlin/styops is written and maintained with the help of Otstar Lin and the following contributors.
Released under the MIT License.