precss - Use Sass-like markup in your CSS

•    Javascript

---

PreCSS lets you use Sass-like markup and staged CSS features in CSS. PreCSS combines Sass-like syntactical sugar — like variables, conditionals, and iterators — with emerging CSS features — like color functions, logical and custom properties, media query ranges, and image sets.

postcss css postcss-plugin sass scss variables conditionals iterations iterators iterables iterate contents eaches elses fors ifs includes imports medias queries query mixins defaults functions colors customs dirs system-ui image-set logical properties blocks inlines starts ends any-link font-variant overflow-wrap caniuse

postcss-simple-vars - PostCSS plugin for Sass-like variables

•    Javascript

---

PostCSS plugin for Sass-like variables.You can use variables inside values, selectors and at-rule’s parameters.

postcss css postcss-plugin sass variables vars

postcss-scss - SCSS parser for PostCSS.

•    Javascript

---

A SCSS parser for PostCSS.This module does not compile SCSS. It simply parses mixins as custom at-rules & variables as properties, so that PostCSS plugins can then transform SCSS source code alongside CSS.

css postcss postcss-syntax parser scss sass

postcss-nested - PostCSS plugin to unwrap nested rules like how Sass does it.

•    Javascript

---

PostCSS plugin to unwrap nested rules like how Sass does it.Use postcss-current-selector after this plugin if you want to use current selector in properties or variables values.

postcss css postcss-plugin sass nested

postcss - Transforming styles with JS plugins

•    Javascript

---

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and JetBrains. The Autoprefixer PostCSS plugin is one of the most popular CSS processors.

postcss css parser ast framework rework preprocessor source-map transform manipulation transpiler

postcss-mixins - PostCSS plugin for mixins

•    Javascript

---

PostCSS plugin for mixins.Note, that you must set this plugin before postcss-simple-vars and postcss-nested.

postcss css postcss-plugin mixins sass

postcss-write-svg - Write SVGs directly in CSS

•    Javascript

---

Write SVG lets you write SVGs directly in CSS. @svg at-rules generate SVG elements available to CSS. Within an @svg, descendant at-rules (like @rect) are interpreted as elements, while declarations (like width) are interpreted as attributes.

postcss css postcss-plugin markups customs svgs scalable vectors graphics multiplexing syntaxes params vars variables

postcss-cssnext - :cyclone: PostCSS plugin to use tomorrow's CSS syntax, today.

•    Javascript

---

PostCSS plugin to use tomorrow’s CSS syntax, today. PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today. It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.

postcss css cssnext postcss-plugins postcss-plugin w3c

postcss-inline-svg - PostCSS plugin to reference an SVG file and control its attributes with CSS syntax

•    Javascript

---

PostCSS plugin to reference an SVG file and control its attributes with CSS syntax. See PostCSS docs for examples for your environment.

postcss css postcss-plugin svg inline

gulp-postcss - Pipe CSS through PostCSS processors with a single parse

•    Javascript

---

PostCSS gulp plugin to pipe CSS through several plugins, but parse CSS only once.Install required postcss plugins separately. E.g. for autoprefixer, you need to install autoprefixer package.

postcss gulp-plugin gulpplugin postcss-runner css

postcss-modules - PostCSS plugin to use CSS Modules everywhere

•    Javascript

---

A PostCSS plugin to use CSS Modules everywhere. Not only at the client side. getJSON may also return a Promise.

postcss css postcss-plugin modules css-modules components

postcss-sorting - PostCSS plugin to keep rules and at-rules content in order.

•    Javascript

---

PostCSS plugin to keep rules and at-rules content in order. Also available as Sublime Text, Atom, VS Code, and Emacs plugin.

postcss-plugins css formatting postcss postcss-plugin sorting order

postcss-icss-selectors - PostCSS plugin for css modules to local-scope classes and ids

•    Javascript

---

See PostCSS docs for examples for your environment. Converts every new local name in #id or .class defintion to global alias. By default returns [name]__[local]---[hash:base64:5].

css-modules postcss css postcss-plugin

crayon - Crayon.css is a list of css variables linking color names to hex values.

•    CSS

---

Crayon.css is a list of css variables linking color names to hexadecimal values, usable with postCSS or with your favourite CSS preprocessor, being it Stylus, Sass or Less. Read more on http://riccardoscalco.github.io/crayon/.

postcss-assets - An asset manager for PostCSS

•    Javascript

---

PostCSS Assets is an asset manager for CSS. It isolates stylesheets from environmental changes, gets image sizes and inlines files. Note: all of the listed options below are parameters for the assets object, not the top level postcss options object.

postcss assets base64 css image path postcss-plugin size url

postcss-preset-env - Convert modern CSS into something browsers understand

•    CSS

---

PostCSS Preset Env lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments. Without any configuration options, PostCSS Preset Env enables Stage 2 features and supports all browsers.

postcss css postcss-plugin specifications specs features lists stages w3c csswg future next

postcss-import - PostCSS plugin to inline @import rules content

•    Javascript

---

PostCSS plugin to transform @import rules by inlining content.This plugin can consume local files, node modules or web_modules. To resolve path of an @import rule, it can look into root directory (by default process.cwd()), web_modules, node_modules or local modules. When importing a module, it will look for index.css or file referenced in package.json in the style or main fields. You can also provide manually multiples paths where to look at.

postcss npm css modules postcss-plugin import node-modules

autoprefixer - Parse CSS and add vendor prefixes to rules by Can I Use

•    Javascript

---

PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Taobao.Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. You can try the interactive demo of Autoprefixer.

css postcss-plugins prefixer autoprefixer prefix postcss postcss-plugin

grunt-postcss - Apply several post-processors to your CSS using PostCSS.

•    Javascript

---

Apply several post-processors to your CSS using PostCSS. An array of PostCSS compatible post-processors. You can also use a function that returns an array of PostCSS post-processors.

gruntplugin postcss-runner css postprocessor postcss

postcss-pxtorem - Convert pixel units to rem (root em) units using PostCSS

•    Javascript

---

A plugin for PostCSS that generates rem units from pixel units. Pixels are the easiest unit to use (opinion). The only issue with them is that they don't let browsers change the default font size of 16. This script converts every px value to a rem from the properties you choose to allow the browser to set the font size.

postcss rem-units pixel-units css rem pixel px postcss-plugin