1 views collected around this technical thread.
This article explains how to create a custom PostCSS plugin for Vite that converts pixel units to viewport width units, covering meta tag setup, plugin configuration, TypeScript implementation, handling multi‑value properties, and troubleshooting conversion issues.
The article explains how PostCSS parses CSS into an abstract syntax tree composed of Declaration, Rule, Root, AtRule and Comment nodes, describes the rule‑ and hook‑based event listeners and depth‑first traversal used in PostCSS 8 versus the walk methods of PostCSS 7, and shows how this knowledge lets developers create custom plugins for tasks such as unit conversion, vendor prefixing, or dark‑mode generation.
The guide outlines a direction‑based RTL adaptation workflow for web front‑ends—detecting language, setting the HTML dir attribute, using a lightweight helper, configuring postcss‑rtlcss (combined mode) to generate mirrored CSS, handling SSR and third‑party components, and providing a dev switch tool for seamless LTR/RTL support.
This curated list presents recent insights and tutorials on the future of front‑end development, including Vercel's vision, PostCSS fundamentals, V8 engine internals, Vite's core mechanisms, a new ESBuild‑powered runtime, Deno versus Node, and the modern Temporal date‑time API.
This article explains what an Abstract Syntax Tree (AST) is, demonstrates how JavaScript code is transformed into an AST, describes the tokenization and parsing steps used by PostCSS to generate a CSS AST, and shows how plugin mechanisms like AutoPrefixer can extend the toolchain.
This article explains how to automatically replace literal color values with Semi Design CSS variables for dark‑mode support by parsing style files with PostCSS, calculating color similarity with chroma‑js, and applying a custom Stylelint rule that can lint and autofix the code.
An in‑depth look at Tailwind CSS reveals how it harnesses PostCSS, JavaScript configuration, and custom plugins to generate and tree‑shake CSS, detailing classic @tailwind at‑rules, screen directives, and a sample z‑index plugin with code examples.
This article explains how to achieve pixel‑perfect restoration of design drafts on mobile H5 pages by adapting to different pixel densities and screen sizes, using global CSS units like rem and vw, and automating px‑to‑vw conversion with the postcss-px-to-viewport plugin.
This article explains how to achieve pixel‑perfect reproduction of design drafts on mobile H5 pages by adapting to different screen densities and sizes, using global CSS units like vw (and optionally rem), and automating the px‑to‑vw conversion with the postcss-px-to-viewport plugin.
This article introduces CSS Next, a PostCSS plugin that brings future CSS syntax to current browsers, explains how to integrate it into a Webpack workflow, and demonstrates key features such as custom properties, @apply, calc(), custom media queries, custom selectors, and nesting with code examples compared to Sass and Less.
This article introduces PostCSS, explains its role in transforming CSS via JavaScript plugins, demonstrates how to integrate it with tools like Webpack and its JavaScript API, and provides a step‑by‑step guide for creating a simple PostCSS plugin that doubles pixel values, including handling of Less syntax.
The article examines the perceived conflict between JavaScript and CSS/UX developers, explains how community segregation and social media amplify the divide, and proposes practical steps for fostering collaboration and reducing the "JS vs CSS" war in front‑end development.
This article explains what PostCSS is, distinguishes it from CSS preprocessors, introduces popular plugins such as autoprefixer and precss, and provides detailed configuration examples for Webpack and ykit, helping developers efficiently integrate PostCSS into their front‑end workflows.