Open-source alternatives to Postcss Cssnext

Laravel Mix is a frontend build tool and a configuration wrapper for Webpack that simplifies the bundling of JavaScript, TypeScript, and CSS assets. It functions as a task runner and static asset manager, providing a simplified interface to compile source files into optimized production assets. The project distinguishes itself by providing a fluent API that abstracts complex bundling configurations into human-readable method calls. It includes specialized pipelines for transforming Vue and React components into browser-compatible JavaScript and offers a system for automatic vendor prefixing a

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

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

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

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

Windi CSS is a utility-first CSS framework that generates only the CSS classes actually used in a project, scanning source files at build time to produce smaller, optimized stylesheets. It provides on-demand style generation through static analysis of HTML and template files, eliminating unused styles for leaner output. The framework offers a plugin-based extension system for adding custom utilities, variants, and design tokens without modifying the core. It includes built-in compatibility for migrating from Tailwind CSS, removing Tailwind-specific dependencies and configuration fields while

UnoCSS is an atomic CSS engine and utility-first framework that generates styles on-demand based on the specific classes used in your source code. By scanning your project files during the build process, it produces only the CSS necessary for your application, effectively minimizing bundle size and eliminating unused styles. The engine distinguishes itself through a highly modular, configuration-driven architecture that allows for deep customization of design tokens, rules, and presets. It supports advanced styling patterns such as attribute-based styling, tag-based styling, and dynamic varia

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

Flexibility is a JavaScript library and layout engine designed to polyfill CSS Flexbox capabilities. It ensures consistent element alignment and distribution across different browser versions, specifically targeting legacy environments that lack native support for the flexible box specification. The project provides cross-browser layout compatibility by simulating flexible container behavior. It manages dynamic flexbox properties to maintain a stable and predictable user interface regardless of the visitor's browser version. The system covers DOM traversal, manual coordinate calculation, and

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

Flexibility is a JavaScript layout engine and CSS compatibility layer that functions as a polyfill for the CSS Flexbox specification. It simulates flexible box layout behavior in web browsers that do not natively support the specification. The project achieves cross-browser layout consistency by implementing a programmatic system to calculate and apply alignment, direction, and wrapping properties to DOM elements. It provides utilities for both the application and extraction of these layout styles to manage the visual structure of a page. The engine operates through DOM tree traversal and ma

Magic is a CSS animation library and visual effects framework providing a collection of predefined motion styles for moving, rotating, and transforming web elements. It serves as a build-time CSS optimizer that compiles only the specific animation styles used in a project to minimize the final stylesheet size. The framework enables interactive user interface development by allowing animations to be triggered programmatically through scripts, hover events, or timing delays. It utilizes a system of timing and motion classes to manage the duration and speed of visual transitions. The project co

vanilla-extract is a type-safe CSS-in-JS library and zero-runtime CSS framework. It uses TypeScript to define styles and design tokens, compiling these definitions into static CSS files during the build process to eliminate styling overhead in the browser. The system acts as a scoped CSS generator, producing unique class names and local variables to prevent global style leakage and naming collisions. It provides a type-safe styling tool that validates CSS property values and ensures design tokens adhere to defined themes during development. The framework covers comprehensive styling utilitie

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

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

Twind is a utility-first styling library and JavaScript CSS-in-JS engine. It functions as a Tailwind CSS runtime compiler that transforms utility classes into CSS within the browser, as well as a build tool for extracting static CSS to improve page load performance. The project enables a utility-first styling workflow through a system of predefined classes and customizable theme presets. It supports the extension of styling rules and the definition of custom themes and variants to align the system with specific design requirements. The engine provides runtime CSS generation and just-in-time

GritQL is an AST-based code transformation engine and structural search tool. It uses a declarative query language to identify and rewrite source code patterns across multiple programming languages by matching abstract syntax tree nodes rather than literal text. The system functions as an automated refactoring framework for large-scale migrations and API updates. It distinguishes itself by utilizing sequential transformation pipelines and reusable blueprints that can be synced between local environments and remote repositories. The tool covers a broad range of capabilities including static a

This project is a comprehensive front-end development guide and roadmap designed to help engineers master the skills and professional standards required for modern web development. It serves as a technical reference for mastering HTML, CSS, and JavaScript, providing structured learning paths and a map of the professional competencies needed to transition from a beginner to a professional web engineer. The resource functions as a categorized directory and ecosystem overview of the JavaScript landscape. It catalogs industry-standard frameworks, libraries, and utilities, offering specific recomm

This project is a styling library and framework designed for component-based architectures, enabling developers to define and manage visual styles directly within JavaScript or TypeScript. It functions as a styling engine that generates unique class names from style definitions, ensuring encapsulated, predictable, and maintainable visual presentation across applications. By integrating with component logic, it allows for the creation of reusable UI elements with styles defined through template literals or object syntax. The library distinguishes itself through a comprehensive suite of build-t

Remark is a markdown processor that parses markdown text into a structured JSON abstract syntax tree for programmatic analysis and transformation. It functions as a markdown AST parser and processor, utilizing a plugin framework to manage extensible syntax and transformation rules. The project enables custom markdown syntax extensions and content transformation through a plugin system, allowing for the addition of non-standard markup and metadata. It also includes a markdown linter to identify style inconsistencies and ensure adherence to writing standards. The toolset covers markdown docume

ts-migrate is an automated migration tool designed to transform JavaScript source code into compiling TypeScript files. It functions as a code migration framework that uses abstract syntax trees to perform large-scale refactoring and structural changes across a project. The tool provides a customizable framework for defining plugin-based transformation rules, allowing for the automation of specific code changes. It includes specialized engines for converting JSDoc type definitions into native TypeScript annotations and a utility for suppressing compiler errors by inserting type assertions or

This project is a responsive layout framework for Angular that provides a system of directives to create adaptive user interfaces using CSS Flexbox and CSS Grid. It includes specialized libraries for managing flexible box alignment and structuring complex two-dimensional page grids. The framework features a breakpoint monitoring service to programmatically observe media query changes and trigger logic when viewport dimensions cross defined boundaries. To optimize performance, it includes a build-time CSS generator that uses SASS mixins to create static media query stylesheets, reducing the ne

This project is a development toolkit and starter kit for creating custom WordPress themes. It provides a standardized scaffolding tool to initialize a minimal codebase and directory structure, serving as a foundation for building custom site designs. The toolkit includes a build pipeline that automates the compilation of Sass into browser-ready CSS and the generation of mirrored right-to-left stylesheets. It further assists in theme preparation through a translation template generator that extracts translatable strings into portable object files. The system covers a broad range of developme

This project is an AST-based code optimizer and compressor for modern ECMAScript, JSX, and TypeScript source code. It functions as a JavaScript minifier that uses the Babel toolchain to reduce file size by removing unnecessary characters and whitespace while preserving program logic. The tool is distinguished by its ability to process experimental language proposals and transform modern syntax into browser-compatible versions. It provides specialized handling for React JSX transpilation and strips type annotations from TypeScript files to produce compressed production assets. The system cove

Recast is a JavaScript AST parser and printer designed for automated code refactoring. It converts source code into abstract syntax trees that can be modified and then printed back into source code. The project focuses on formatting-preserving transformations, storing original whitespace and indentation metadata within syntax tree nodes to reconstruct code without losing its original layout. It also generates character-level source maps to maintain precise correspondences between original input and transformed output. The toolkit includes utilities for syntax tree manipulation using a visito

Codemod is a set of software tools for performing structural source code transformations. It functions as an automated codebase migration tool that utilizes abstract syntax tree manipulations rather than simple regular expressions to execute large-scale refactors across multiple files. The project distinguishes itself through an interactive transformation interface that provides colored diffs, allowing users to manually review, accept, or modify each match. It also supports a distributed refactoring workflow, which enables the segmentation of a codebase into assigned work blocks to divide mig

SVGR is a tool that transforms static SVG files into reusable React components for direct rendering within user interface trees. It functions as an AST-based code transformer and build-time asset pipeline, parsing SVG XML into an abstract syntax tree to modify elements before generating JavaScript source code. The project integrates an external optimization engine to strip redundant metadata and minify attributes, ensuring vector images are flexible and easy to style. It uses recursive tree traversal to apply these transformations to all nested graphic elements and employs attribute mapping t