Gathering detailed insights and metrics for @odczynflnpm/inventore-sapiente-repudiandae
Gathering detailed insights and metrics for @odczynflnpm/inventore-sapiente-repudiandae
Installations
npm install @odczynflnpm/inventore-sapiente-repudiandaeDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
20.12.2
NPM Version
10.5.0
Score
30.8
Supply Chain
48.1
Quality
69.4
Maintenance
100
Vulnerability
97.3
License
Releases
4
Languages
1
JavaScript
JavaScript (100%)
Developer
odczynflnpm
Download Statistics
Total Downloads
476
Last Day
8
Last Week
55
Last Month
268
Last Year
397
GitHub Statistics
MIT License
3,065 Commits
1 Watchers
1 Branches
1 Contributors
Updated on May 23, 2025
Maintainers
1
Package Meta Information
Latest Version
1.0.0
Package Id
@odczynflnpm/inventore-sapiente-repudiandae@1.0.0
Unpacked Size
18.97 kB
Size
7.14 kB
File Count
8
NPM Version
10.5.0
Node Version
20.12.2
Published on
May 05, 2024
Total Downloads
Cumulative downloads
Total Downloads
476
Last Day
0%
8
Compared to previous day
Last Week
-3.5%
55
Compared to previous week
Last Month
665.7%
268
Compared to previous month
Last Year
402.5%
397
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
34
@lambrioanpm/tenetur-aut-fugiat@odczynflnpm/alias-aperiam-accusamus@odczynflnpm/aliquid-expedita-repellat@odczynflnpm/architecto-voluptate-tempore@odczynflnpm/assumenda-adipisci-nulla@odczynflnpm/error-laborum-ab@odczynflnpm/et-tempore-deleniti@odczynflnpm/exercitationem-molestiae-maxime@odczynflnpm/explicabo-voluptatem-ad@odczynflnpm/hic-laboriosam-dolore@odczynflnpm/iste-adipisci-sit@odczynflnpm/modi-fuga-possimus@odczynflnpm/mollitia-praesentium-deserunt@odczynflnpm/nam-a-doloremque@odczynflnpm/nihil-ratione-expedita@odczynflnpm/nulla-laborum-molestiae@odczynflnpm/officiis-laboriosam-quam@odczynflnpm/quaerat-neque-odit@odczynflnpm/quas-deserunt-optio@odczynflnpm/quas-inventore-quam@odczynflnpm/quibusdam-debitis-hic@odczynflnpm/quo-provident-delectus@odczynflnpm/repellendus-commodi-sunt@odczynflnpm/repellendus-modi-quas@odczynflnpm/rerum-at-dignissimos@odczynflnpm/sequi-placeat-earum@odczynflnpm/totam-fuga-incidunt@odczynflnpm/totam-illum-necessitatibus@odczynflnpm/voluptas-odit-illum@odczynflnpm/voluptatibus-blanditiis-nonmol-web3-crypto-1mol-web3-crypto-2skyler-first-codetul-crypto-fuc-3
TastyCSS
CSS-in-JS solution modules that include state-to-style bindings, SSR, and next-level developer experience.
Installation
1# with npm
2npm install @odczynflnpm/inventore-sapiente-repudiandae
3
4# with yarn
5yarn add @odczynflnpm/inventore-sapiente-repudiandae
6
7# with pnpm
8pnpm add @odczynflnpm/inventore-sapiente-repudiandaeUsage of Tasty API
Let's look at styled API:
1import { tasty } from '@odczynflnpm/inventore-sapiente-repudiandae'; 2 3const Element = tasty({ 4 /** The tag name of the element. */ 5 as: 'span', 6 /** Default styles of the element. */ 7 styles: { 8 // tokens 9 '@local-padding': ['2x', '1x'], // responsive styles 10 '@text-color': 'rgba(255, 0, 0)', 11 // styles 12 padding: '@local-padding', 13 color: { 14 // the default color 15 '': '#text', 16 // the color if `blue` mod is specified 17 blue: 'blue', 18 }, // use color token 19 }, 20 /** Default attributes (example) */ 21 role: 'article', 22 /** The list of styles that can be provided by props */ 23 styleProps: ['align'], 24});
Now you can use this element inside your React App:
1export default function Component({ title, children }) { 2 return ( 3 <> 4 <Heading>{title}</Heading> 5 <Element>{children}</Element> 6 </> 7 ); 8}
Extend base options
You can use tasty() function to extend styling of the existing component.
1const CustomElement = tasty(Element, { 2 /** Change tag name */ 3 as: 'input', 4 /** Extend or rewrite styles */ 5 styles: { 6 color: '#purple', 7 }, 8 /** Add more default properties/attributes */ 9 role: 'article', 10});
Define global styles
Use tasty() to define global styles for elements:
1import { tasty } from '@odczynflnpm/inventore-sapiente-repudiandae'; 2 3const GlobalStyledHeading = tasty('.myButton', { 4 display: 'inline-block', 5 padding: '1x 2x', 6 preset: 't2', 7 border: true, 8 radius: true, 9});
Style variants
You can reduce the amount of CSS for your component by splitting it into variants.
1import { tasty } from '@odczynflnpm/inventore-sapiente-repudiandae'; 2 3const StyledButton = tasty(Button, { 4 styles: { 5 /* default styles */ 6 }, 7 variants: { 8 // define themes using variants 9 default: { 10 // default (fallback) variant 11 // define new styles for `default` variant or override default styles. 12 }, 13 danger: { 14 // define new styles for `danger` variant or override default styles. 15 }, 16 }, 17});
Usage example:
1<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
variantprop to avoid style replacement. But this case is supported.
Documentation is work in progress.
Contributing
Please follow our contributing guidelines.
License
TastyCSS is a project by Outpost.
Released under the MIT License.
No vulnerabilities found.
No security vulnerabilities found.