23 open-source projects similar to macbre/analyze-css, ranked by shared indexed features. Tags may describe platforms or build tools rather than the same primary purpose. Check each project’s use case, license, and deployment requirements before treating it as a replacement.
This is a Webpack extension used to extract CSS from JavaScript files into separate, standalone stylesheets for production builds. It functions as a CSS bundler and asset optimizer that separates styles from script bundles to enable parallel loading and prevent flashes of unstyled content. The project provides utilities for generating JavaScript module exports that map local style definitions to application components. It also implements dynamic theme management by conditionally loading different CSS variants via resource queries and supports long-term browser caching through the use of conte
Uncss is a build pipeline CSS optimizer and optimization tool designed to remove unused styles from stylesheets. It analyzes HTML files to identify and strip selectors that do not match any elements in the markup, reducing the final stylesheet size and overall web page weight. The tool functions as a DOM-based CSS analyzer that can simulate runtime document states. It provides mechanisms to preserve required selectors through the use of literal names, regular expressions, and specialized CSS comment markers to ensure styles triggered by user interactions are not deleted. The project supports
PostCSS is a CSS post-processor and abstract syntax tree transformation tool that parses stylesheets into a structured tree for programmatic analysis and modification. It functions as a plugin-driven pipeline where JavaScript plugins can modify, insert, or delete nodes to transform styles. The project provides a framework for building a custom plugin ecosystem to extend the CSS language with non-standard features such as loops, conditionals, and shorthand properties. It supports multi-syntax parsing through pluggable parsers and stringifiers, allowing it to process various style formats and c
cssnano is a CSS compression tool and minifier that reduces the file size and gzip footprint of stylesheets. It operates as a build pipeline optimizer and code transformer that removes whitespace and comments while shortening colors and gradients into their smallest possible representations. The tool uses a modular plugin architecture and preset-based optimization levels to balance compression intensity with browser compatibility. It allows for the adjustment of output based on a target list of supported browsers to ensure minified styles remain compatible across different environments. The
StyleX is a type-safe CSS-in-JS library and atomic CSS compiler that transforms JavaScript style definitions into optimized static CSS and type-safe class names. It functions as a multi-framework styling tool, generating standard CSS assets compatible with various JavaScript UI frameworks and server components. The system includes a CSS design token system and theme engine for managing shared constants and composing visual schemes. It allows for the creation of light, dark, and custom themes through variable overrides and token inheritance. The project covers component styling through object
Layui is a web UI component library, frontend layout framework, and CSS asset optimizer. It provides a collection of pre-styled visual elements and layout patterns used to build browser-native web interfaces. The framework enables the composition of structured web pages through standardized design assets and CSS components. It includes tools for compressing stylesheets and resolving imports to improve loading speeds across different web browsers. The library covers web UI development and frontend layout composition, facilitating rapid interface prototyping by assembling functional frontends
loadCSS is an asynchronous CSS loader and non-blocking stylesheet injector. It provides a technical implementation for loading stylesheets without blocking the browser rendering process to maintain a responsive user interface. The project implements a specific CSS loading pattern to detect when asynchronous stylesheets have finished loading across different web browsers. This allows for the execution of callback functions only after a stylesheet has fully loaded to ensure consistent visual behavior. The tool covers programmatic stylesheet insertion, dynamic injection based on application log
PurgeCSS is a build-pipeline CSS purger and optimizer designed to reduce the final size of stylesheets. It functions as a tree shaking tool that scans HTML and JavaScript files to identify and remove unused selectors from CSS. The tool optimizes CSS payloads by performing static content analysis to detect which styles are actually used in the markup. It uses regex-based pattern matching to find potential class names without executing code and employs a PostCSS-based AST transformation to safely delete unused rules. The project provides capabilities for frontend build automation, allowing the
Loading And Blocking JavaScript: On-demand parallel loader for JavaScript with execution order dependencies
This project is a web development boilerplate and starter kit providing a pre-configured foundation for creating high-performance, responsive websites. It functions as a development kit for building progressive web apps, incorporating a front-end build pipeline and responsive site templates. The kit distinguishes itself through a multi-device testing workflow that synchronizes clicks, scrolls, and form inputs across multiple browsers and devices in real-time. It also includes a dedicated setup for offline functionality using service workers and web manifests to enable native-like installation
PurifyCSS is a CSS unused style remover and payload optimizer that analyzes HTML and templates to identify and delete unused CSS selectors from stylesheets. It functions as a frontend build automation tool that integrates into development pipelines to automatically strip redundant styles and minify assets during the compilation phase. The tool provides specific optimization for single page applications, identifying and removing redundant CSS while ensuring necessary styles are preserved across dynamic views and states. The utility covers a range of capabilities including static content analy
node-prune is a utility for cleaning and shrinking Node.js dependency folders by removing source files and documentation not required for runtime execution. It functions as a package cleaner that deletes non-essential files, such as markdown and TypeScript files, from installed npm dependencies to reduce installation size. The tool optimizes deployment artifacts and container images by stripping unnecessary files from third-party library directories. This process is used to minimize Docker image sizes and reduce the footprint of final application bundles. The project provides a command-line
Yeoman is a scaffolding tool framework and Node.js project generator designed to automate project initialization. It generates standardized directory structures and application skeletons using customizable scripts to reduce manual boilerplate creation. The system functions as a development workflow automator that enables the creation of reusable project blueprints. These blueprints are distributed as independent packages, allowing for standardized starting code and custom project templating across different teams or projects. The toolkit provides a command line interface that uses interactiv
Critical is a tool for extracting and inlining the minimum CSS required to render above-the-fold content. It identifies the styles necessary for the initial visible portion of a page to reduce render-blocking requests and improve page load speed. The project generates resolution-specific stylesheets to optimize the initial paint across different device dimensions. It includes a utility to rebase asset URLs within extracted styles, ensuring that images and fonts load correctly when stylesheets are moved to different directories or content delivery networks. The tool provides a command-line in
Linaria is a zero-runtime CSS-in-JS library and static CSS generator. It evaluates JavaScript expressions at build time to extract styles from tagged template literals into standalone, static CSS files, removing the need for a runtime style injection engine. The library distinguishes itself by mapping component props to CSS custom properties, enabling dynamic styling and runtime property updates without regenerating stylesheets. It utilizes a build-time evaluation engine to resolve interpolations and a hashing system to generate scoped class names that prevent style collisions. The project c
Component is a frontend build tool and package manager designed for modular web application development. It functions as an asset pipeline orchestrator and module dependency resolver, fetching and organizing local or remote code packages according to specific versioning rules. The system provides a development environment that supports local module linking via symlinks for real-time testing without publishing to a registry. It includes a programmable build pipeline to transform scripts and styles into production assets and an event-driven file watching system to trigger automatic recompilatio
Front-end Integrated Solution - 前端集成解决方案, 最新版请进入 FIS3 https://github.com/fex-team/fis3
Webpack is a module bundler that maps project dependencies into a directed acyclic graph to transform diverse file types into optimized, browser-ready assets. It functions as a build pipeline orchestrator, using entry points to recursively resolve imports and bundle modules, scripts, and static assets into a unified output. The project is distinguished by its plugin-based architecture and loader-driven transformation pipeline. It utilizes an event-driven hook system that allows developers to intercept and modify the build process at specific lifecycle stages, enabling custom code transformati
astroturf lets you write CSS in your JavaScript files without adding any runtime layer, and with your existing CSS processing pipeline.
This project is a cross-platform mobile project template and TypeScript boilerplate designed for bootstrapping React Native applications using the Expo ecosystem. It provides a pre-configured architecture with a standardized folder structure to accelerate initial development. The template distinguishes itself through a feature-based project architecture and a comprehensive automation suite. It integrates file-based routing for navigation, a utility-first mobile UI kit for styling, and a server state management layer for fetching and caching remote API data. The setup includes a mobile CI/CD p
North is a responsive web design methodology and Sass-based CSS architecture framework. It provides a system for building mobile-first user interfaces using fluid grids and progressive enhancement techniques to ensure a consistent experience across different browser capabilities and screen sizes. The project features a standardized CSS naming system that uses Sass mixins to programmatically generate class names, distinguishing between components, layouts, and states. It also functions as a frontend project scaffolding tool, providing a generator to bootstrap new environments with pre-configur