10 Repos
Systems for localizing CSS class names to prevent conflicts.
Distinguishing note: Focuses on build-time style scoping.
Explore 10 awesome GitHub repositories matching user interface & experience · Scoped CSS Modules. Refine with filters or upvote what's useful.
Solid is a declarative JavaScript framework for building user interfaces through fine-grained reactivity. By utilizing a compile-time template transformation process, it converts JSX into direct DOM manipulation instructions, eliminating the need for a virtual tree. This architecture allows the framework to track dependencies at the individual element level, ensuring that state changes trigger surgical updates to the interface. The framework distinguishes itself through its isomorphic rendering pipeline, which shares reactive logic across server and client environments to support both initial
Defines component styles in external files with local scoping.
This is a foundational project structure for building scalable web applications using React. It provides a standardized directory structure and build tools to accelerate the bootstrapping of new projects, featuring a Redux architecture for predictable state management through unidirectional data flow and an immutable store. The project is distinguished by a command-line interface for generating standardized components, containers, and routes from predefined templates. It implements an offline-first framework using service workers to enable progressive web app functionality, alongside a compon
Utilizes CSS modules to localize class names, preventing style collisions through build-time scoping.
Snowpack is an ESM-powered frontend build tool and development server that serves native ES modules directly to the browser. By eliminating the bundling process during development, it enables nearly instant server startup and unbundled frontend development. The project features a framework-aware hot module reload system that preserves component state during updates, with specific Fast Refresh integration for React, Preact, Svelte, and Vue. It also acts as a modern web transpiler, automatically converting TypeScript, JSX, and CSS Modules into browser-compatible code without requiring manual co
Transforms CSS module files to generate unique class names and enforce style isolation.
Microbundle is a zero-configuration JavaScript module bundler designed to package small libraries and modules into optimized distribution files. It serves as a JavaScript library packager and TypeScript compiler, converting source code into compatible module formats for both browser and server-side runtimes. The tool functions as a bundle size optimizer by mangling object properties and analyzing bundle composition to reduce final file sizes. It also acts as a CSS module processor, converting style imports into external stylesheets or scoped modules to prevent global namespace collisions. It
Converts style imports into external stylesheets or inline strings to support scoped styling.
styled-jsx is a CSS-in-JS library and styling framework for JSX components. It functions as a scoped CSS engine that uses compile-time transformations to generate unique class names, preventing style leakage between components. The system includes a server-side CSS renderer that flushes styles into HTML to prevent layout flicker during the first paint. It ensures security compliance by attaching per-request nonces to generated style tags to satisfy Content Security Policy requirements. The framework covers global CSS management with deduplication, dynamic styling via template interpolation,
Isolates styles to specific components using build-time scoping to prevent CSS leakage and naming conflicts.
parcel-css is a high-performance CSS bundler and processor written in Rust. It provides tools for parsing, transforming, and bundling stylesheets, utilizing a structured abstract syntax tree with typed property representations to ensure accurate analysis and modification. The project features a syntax lowerer that transpiles modern CSS into compatible versions based on target browser requirements and an automated system for managing vendor prefixes. It also includes a module scoper that isolates class and ID identifiers to prevent global namespace collisions. Additional capabilities include
Isolates CSS class and ID identifiers to prevent global namespace collisions via unique string rewriting.
High performance, maintainable stylesheets.
Composes isolated CSS files that automatically scope selectors to prevent leaks and collisions.
This project is a utility and integration layer for mapping scoped CSS module identifiers to React components. It functions as a wrapper and style manager that translates class names into unique local identifiers to prevent style leakage across an application. The system includes a composition tool for merging multiple CSS module identifiers on single elements and an integration layer that connects SASS, SCSS, and LESS preprocessed style maps to component markup. It covers component styling through encapsulated style mapping and the distribution of styles to child elements. The library also
Translates CSS module class names into unique identifiers to prevent style leakage across components.
css-loader ist ein Webpack-Modul, das CSS-Dateien in JavaScript-Module umwandelt und deren interne Abhängigkeiten während des Bundling-Prozesses auflöst. Es fungiert als CSS-Asset-Resolver, der Import-Regeln und url-Funktionen in Modul-Identifikatoren übersetzt, um Stylesheets in einen Abhängigkeitsgraphen zu integrieren. Das Projekt implementiert CSS Modules, um globale Stil-Kollisionen zu verhindern, indem Klassen- und ID-Selektoren lokal mit eindeutigen Identifikatoren gekapselt werden. Es enthält ein System für Interoperable CSS (ICSS), das die gemeinsame Nutzung und Komposition von Stilen über verschiedene Klassen und Module hinweg durch wiederverwendbare Wertdeklarationen ermöglicht. Das Tool bietet Funktionen für die Asset-Pfad-Auflösung und die Generierung von Source-Maps, um gebündelte Stile mit den ursprünglichen Quelldateien zu verknüpfen. Es unterstützt zudem den Export von Stilen als konstruierbare Stylesheets und die Steuerung der Loader-Sequenzierung innerhalb einer Build-Pipeline.
Localizes CSS class names to prevent style collisions between different components.
Reui is a React UI component library and front-end framework distributed under the MIT license. It provides a collection of reusable, pre-built React components for building modern web application interfaces. The library is built on a component-based architecture that uses declarative rendering through JSX, with state management handled by React Hooks. It employs CSS Modules for scoped styling and Tailwind CSS for utility-first styling, while TypeScript provides static type checking across the codebase. The project organizes components using a file-based structure and uses a module bundler bu
Encapsulates styles per component using CSS Modules to prevent global class name collisions and improve style isolation.