uap-core
vite-plugin-sass-dts
uap-core | vite-plugin-sass-dts | |
---|---|---|
1 | 3 | |
716 | 109 | |
0.3% | - | |
6.6 | 7.4 | |
8 days ago | 7 days ago | |
JavaScript | HTML | |
GNU General Public License v3.0 or later | 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.
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, };
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.
What are some alternatives?
typescript-plugin-css-modules - A TypeScript language service plugin providing support for CSS Modules.
css-modules-typescript-loader - Webpack loader to create TypeScript declarations for CSS Modules
vite - Next generation frontend tooling. It's fast!
classnames - A simple javascript utility for conditionally joining classNames together
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