uap-core
css-modules-typescript-loader
uap-core | css-modules-typescript-loader | |
---|---|---|
1 | 2 | |
717 | 198 | |
0.4% | 0.0% | |
6.6 | 0.0 | |
6 days ago | 7 months ago | |
JavaScript | JavaScript | |
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, };
css-modules-typescript-loader
-
SASS vs CSS Modules vs CSS-in-JS vs Compile time CSS-in-JS. Who wins?
Or for Webpack CSS Modules TypeScript loader
- Real-world CSS vs. CSS-in-JS performance comparison
What are some alternatives?
typescript-plugin-css-modules - A TypeScript language service plugin providing support for CSS Modules.
vite-plugin-sass-dts - This is a plugin that automatically creates a type file when using the CSS module type-safely.
chakra-ui - ⚡️ Simple, Modular & Accessible UI Components for your React Applications
vite - Next generation frontend tooling. It's fast!
clsx - A tiny (239B) utility for constructing `className` strings conditionally.
classnames - A simple javascript utility for conditionally joining classNames together
vanilla-extract - Zero-runtime Stylesheets-in-TypeScript
extract-loader - webpack loader to extract HTML and CSS from the bundle
pug-loader - Pug loader for Webpack renders pug to HTML or template function
personal_web - Source code of my personal website: https://pustelto.com