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

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-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

react-toolbox - A set of React components implementing Google's Material Design specification with the power of CSS Modules

•    Javascript

---

React Toolbox uses CSS Modules by default to import stylesheets written using PostCSS & postcss-preset-env features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules. Although we recommend webpack, you are free to use whatever module bundler you want as long as it can compile and require PostCSS files located in your node_modules. If you are experiencing require errors, make sure your configuration satisfies this requirement.

material-design react ui-kits css-modules components react-component toolkit

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-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-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-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-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

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-js - PostCSS for React Inline Styles, Free Style and other CSS-in-JS

•    Javascript

---

PostCSS for React Inline Styles, Radium, JSS and other CSS-in-JS.For example, to use Stylelint, RTLCSS or postcss-write-svg plugins in your workflow.

postcss postcss-runner js inline react css cssinjs

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

react-css-components - Define React presentational components with CSS

•    Javascript

---

Define React presentational components with CSS (or even SASS or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.

css-in-js react webpack css-modules react-dom css postcss postcss-plugin webpack-loader

postcss-normalize - Use the parts of normalize.css you need from your browserlist

•    CSS

---

PostCSS Normalize lets you use the parts of normalize.css you need, based on your project’s browserlist. Use @import-normalize to determine where normalize.css rules will be included. Duplicate @import-normalize rules will be removed. See all the Options for more information.

postcss css postcss-plugin normalize.css normalize browsers bugs fixes usability browserslist browserlist

postcss-normalize - Use the parts of normalize.css you need from your browserslist

•    CSS

---

PostCSS Normalize lets you use the parts of normalize.css you need from your browserslist. Use @import-normalize to determine where normalize.css rules should be included. Duplicate @import-normalize rules will be removed. See all the Options for more information.

postcss css postcss-plugin normalizes browsers fixes

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-font-magician - Magically generate all the @font-face rules

•    Javascript

---

Font Magician is a PostCSS plugin that magically generates all of your @font-face rules. Never write a @font-face rule again. Just use the font and font-family properties as if they were magic.

postcss css postcss-plugin fonts faces generate generation weights styles variants typography type

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-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