CSS-in-JS solution modules that include state-to-style bindings, SSR, and next-level developer experience.
# with npm
npm install @odczynflnpm/inventore-sapiente-repudiandae
# with yarn
yarn add @odczynflnpm/inventore-sapiente-repudiandae
# with pnpm
pnpm add @odczynflnpm/inventore-sapiente-repudiandae
Let's look at styled API:
import { tasty } from '@odczynflnpm/inventore-sapiente-repudiandae';
const Element = tasty({
/** The tag name of the element. */
as: 'span',
/** Default styles of the element. */
styles: {
// tokens
'@local-padding': ['2x', '1x'], // responsive styles
'@text-color': 'rgba(255, 0, 0)',
// styles
padding: '@local-padding',
color: {
// the default color
'': '#text',
// the color if `blue` mod is specified
blue: 'blue',
}, // use color token
},
/** Default attributes (example) */
role: 'article',
/** The list of styles that can be provided by props */
styleProps: ['align'],
});
Now you can use this element inside your React App:
export default function Component({ title, children }) {
return (
<>
<Heading>{title}</Heading>
<Element>{children}</Element>
</>
);
}
You can use tasty()
function to extend styling of the existing component.
const CustomElement = tasty(Element, {
/** Change tag name */
as: 'input',
/** Extend or rewrite styles */
styles: {
color: '#purple',
},
/** Add more default properties/attributes */
role: 'article',
});
Use tasty()
to define global styles for elements:
import { tasty } from '@odczynflnpm/inventore-sapiente-repudiandae';
const GlobalStyledHeading = tasty('.myButton', {
display: 'inline-block',
padding: '1x 2x',
preset: 't2',
border: true,
radius: true,
});
You can reduce the amount of CSS for your component by splitting it into variants.
import { tasty } from '@odczynflnpm/inventore-sapiente-repudiandae';
const StyledButton = tasty(Button, {
styles: {
/* default styles */
},
variants: {
// define themes using variants
default: {
// default (fallback) variant
// define new styles for `default` variant or override default styles.
},
danger: {
// define new styles for `danger` variant or override default styles.
},
},
});
Usage example:
<StyledButton variant="danger">Danger Button</StyledButton>
If the variant
prop is not provided then the default
variant will be used.
IMPORTANT: It's preferred that the component will not receive any change in
variant
prop to avoid style replacement. But this case is supported.
Documentation is work in progress.
Please follow our contributing guidelines.
TastyCSS is a project by Outpost.
Released under the MIT License.