vite-plugin-sass-dts
uap-core
Our great sponsors
vite-plugin-sass-dts | uap-core | |
---|---|---|
3 | 1 | |
107 | 716 | |
- | 1.1% | |
7.4 | 5.9 | |
4 days ago | 6 days ago | |
HTML | JavaScript | |
MIT License | GNU General Public License v3.0 or later |
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.
uap-core
-
SASS vs CSS Modules vs CSS-in-JS vs Compile time CSS-in-JS. Who wins?
import { css } from 'styled-components' // Works only on the client-side // For SSR we need have some Context to Provide User-Agent from request context to React application context const USER_AGENT = window.navigator.userAgent; // More details about browser detect regex // here - https://github.com/ua-parser/uap-core/blob/master/regexes.yaml export const checkIsIE10OrOlder = /MSIE /g.test(USER_AGENT); export const checkIsIE11 = /Trident\//g.test(USER_AGENT); export const checkIsEdge = /Edge\//g.test(USER_AGENT); export const checkIsFireFox = /Firefox\//gi.test(USER_AGENT); export const checkIsChrome = /Chrome\//gi.test(USER_AGENT); export const checkIsSafari = /Safari\//gi.test(USER_AGENT); export const checkIsYandex = /YaBrowser\//gi.test(USER_AGENT); export const styleIE11Browser = (...args) => checkIsIE11 ? css(...args) : null; export const styleEdgeBrowser = (...args) => checkIsEdge ? css(...args) : null; export const styleMicrosoftBrowsers = (...args) => checkIsIE11 || checkIsEdge || checkIsIE10OrOlder ? css(...args) : null; export const styleIsNotMicrosoftBrowsers = (...args) => !checkIsIE11 && !checkIsIE10OrOlder ? css(...args) : null; export const styleFireFoxBrowser = (...args) => checkIsFireFox ? css(...args) : null; export const styleSafariBrowser = (...args) => checkIsSafari ? css(...args) : null; export const styleYandexBrowser = (...args) => checkIsYandex ? css(...args) : null; export const browser = { ie: styleMicrosoftBrowsers, ie11: styleIE11Browser, edge: styleEdgeBrowser, notIE: styleIsNotMicrosoftBrowsers, firefox: styleFireFoxBrowser, moz: styleFireFoxBrowser, safari: styleSafariBrowser, yandex: styleYandexBrowser, };
What are some alternatives?
css-modules-typescript-loader - Webpack loader to create TypeScript declarations for CSS Modules
typescript-plugin-css-modules - A TypeScript language service plugin providing support for CSS Modules.
classnames - A simple javascript utility for conditionally joining classNames together
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