vite-plugin-sass-dts
postcss-ts-classnames
Our great sponsors
| vite-plugin-sass-dts | postcss-ts-classnames | |
|---|---|---|
| 3 | 1 | |
| 107 | 71 | |
| - | - | |
| 7.4 | 10.0 | |
| 4 days ago | about 3 years ago | |
| HTML | TypeScript | |
| MIT License | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
vite-plugin-sass-dts
-
Type Safe Tailwind and SCSS Modules
To generate types for SCSS modules, we use vite-plugin-sass-dts. We simply need to add this to our list of Vite plugins:
-
SASS vs CSS Modules vs CSS-in-JS vs Compile time CSS-in-JS. Who wins?
Vite plugin sass dts that will generate TypeScript declarations for our CSS Modules.
-
Type-safe development with Vite x React x CSS Modules x TypeScript
When developing with React and CSS Modules, you may find that the styling part is not type-safe.Introducing a more mold-safe styling method. With vite-plugin-sass-dts, which automatically creates a d.ts file from the* .module.scss file. Introducing how to use classnames-generics, which allows you to use classnames more type-safely. increase.
postcss-ts-classnames
-
Type Safe Tailwind and SCSS Modules
First we need to generate types. For Tailwind, we can do this using postcss-ts-classnames, which essentially creates a big union type of all the classes it finds in the bundled app. Importantly, this happens after unused classes are purged, so we don't get the entire list of possible Tailwind classes. This is ideal for performance reasons, but does mean there is a small lag between a class being used in code and the generated types being updated.
What are some alternatives?
css-modules-typescript-loader - Webpack loader to create TypeScript declarations for CSS Modules
Tailwind CSS - A utility-first CSS framework for rapid UI development.
classnames - A simple javascript utility for conditionally joining classNames together
typescript-plugin-css-modules - A TypeScript language service plugin providing support for CSS Modules.
vite - Next generation frontend tooling. It's fast!
classnames-generics - Use the classnames library more type-safely.
razzle - ✨ Create server-rendered universal JavaScript applications with no configuration
vanilla-extract - Zero-runtime Stylesheets-in-TypeScript
linaria - Zero-runtime CSS in JS library
compiled - A familiar and performant compile time CSS-in-JS library for React.
google-sheet-addon-svelte-starter - A Google Sheet addon template using Svelte 3 + Vite
uap-core - The regex file necessary to build language ports of Browserscope's user agent parser.