csstools/postcss-plugins

Stars
871
Rank 52,385 (Top 2 %)
Language
CSS
License
MIT No Attribution
Created about 5 years ago
Updated 4 months ago

csstools/postcss-plugins

csstools

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

PostCSS Tools and Plugins

PostCSS Plugins

We are happy you're here!

This repository uses a monorepo architecture that contains plugins, plugin-packs and CLI tools to help you transform your CSS so every browser can understand it.

Our wish is that you can leverage the CSS that will become a standard with every browser!

A brief look into the structure

This repository leverages NPM Workspaces to handle every package/project.

PostCSS Plugins contains tools and plugins for PostCSS Preset Env.

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.

There's also a CLI that allows you to quickly debug or prototype without having to configure PostCSS before you need any toolchain.

Under sites you can find websites that we publish to better display all of this information.

Our current focus

We're trying to bring every reasonable CSS Spec into all the browsers.

First we keep track of new features through the CSSDB (see the repo). Then we do our best to create a PostCSS plugin that can convert that new syntax/function/rules so every browser can understand it.

While it's not always possible we're enabling over 30 features with these plugins!

You can keep track of our current efforts on the PostCSS Preset Env Project and also read announcements on the project's discussions.

Contributing

Thanks for being willing to contribute! Please read our contributing guide!

sanitize.css

A best-practices CSS foundation

postcss-preset-env

Convert modern CSS into something browsers understand

precss

Use Sass-like markup in your CSS

postcss-font-magician

Magically generate all the @font-face rules

postcss-normalize

Use the parts of normalize.css (or sanitize.css) you need from your browserslist

postcss-write-svg

Write SVGs directly in CSS

mdcss

Easily create and maintain style guides using CSS comments

cssdb

A database of staged CSS features

system-font-css

Use the native system font of the OS running the browser

normalize.css

A cross-browser CSS foundation

postcss-nesting

Nest style rules inside each other

postcss-custom-media

Use Custom Media Queries in CSS, following the CSS Media Queries specification

postcss-short

Use advanced shorthand properties in CSS

oldie

Compile CSS compatible with old Internet Explorer

postcss-time-machine

Fix mistakes in the design of CSS itself

postcss-logical

Use logical properties and flow-relative values in CSS

postcss-sass

Use Sass as a PostCSS plugin

postcss-custom-selectors

Use Custom Selectors in CSS

postcss-advanced-variables

Use Sass-like variables, conditionals, and iterators in CSS

react-app-rewire-postcss

Configure PostCSS in Create React App without ejecting

css-typed-om

Use CSS Typed Object Model in the browser

css-prefers-color-scheme

Use light or dark color themes in CSS

postcss-color-mod-function

Modify colors using the color-mod() function in CSS

postcss-language

Support for modern and experimental CSS within Visual Studio Code

postcss-partial-import

Inline sugary @import statements in CSS

tokenizer

Tokenize CSS according to the CSS Syntax

parser

stylelint-value-no-unknown-custom-properties

A stylelint rule to catch usage of unknown custom properties

postcss-conic-gradient

Use conic gradients in your CSS files

postcss-wcag-contrast

Check CSS for WCAG color contrast compliance

postcss-env-function

Use env() variables in CSS

postcss-focus-visible

Use the :focus-visible pseudo-selector in CSS

postcss-extend-rule

Use the @extend at-rule and functional selectors in CSS

stylelint-use-logical

Enforce usage of logical properties and values in CSS

postcss-selector-not

PostCSS plugin to transform :not() W3C CSS level 4 pseudo class to more compatible CSS (multiple css3 :not() selectors)

postcss-transform-shortcut

Use shorthand transform properties in CSS

postcss-lab-function

Use lab() and lch() color functions in CSS

postcss-input-range

Use unprefixed input range selectors in CSS

stylelint-use-nesting

Enforce nesting when it is possible in CSS

postcss-unmq

Remove media queries from CSS while preserving rules that match a hard-coded viewport

css-has-pseudo

Style elements relative to other elements

postcss-image-set-function

Use image-set() in CSS

postcss-focus-within

Use the :focus-within pseudo-selector in CSS

postcss-pseudo-class-enter

Use the :enter pseudo-class in CSS

postcss-is-pseudo-class

Match elements by inner selectors in CSS

postcss-pseudo-class-any-link

Use the :any-link pseudo-class in CSS

postcss-short-size

Use size properties in CSS

postcss-gap-properties

Use the gap, column-gap, and row-gap shorthand properties in CSS

custom-units

Use Custom Units in CSS

postcss-dir-pseudo-class

Use the :dir() pseudo-class to style by directionality in CSS

postcss-media-fn

Use media() to assign responsive values to a property

postcss-font-weights

Use common font weights in CSS

create-postcss-plugin

Quickly create new PostCSS plugins

postcss-tape

Quickly test PostCSS plugins

super-postcss

Now you’re playing with PostCSS — Super PostCSS!

postcss-register-property

Register properties in CSS

postcss-inset

Use the inset property in CSS

postcss-trig

Use trigonometry functions in CSS

postcss-export-custom-variables

Export custom media queries, custom properties, custom property sets, and custom selectors from CSS to JS

stylelint-media-use-custom-media

Enforce usage of custom media queries in CSS

postcss-at-else

Use at-else inverted media queries in CSS

postcss-list-style-safari-fix

Remove list styles in CSS without preventing VoiceOver from announcing them in Safari

postcss-resolve-nested-selector

Resolve a nested selector in a PostCSS AST

postcss-place

place-* shorthand for align-* and justify-*

css-blank-pseudo

Style form elements when they are empty

postcss-short-spacing

Omit sides within margin and padding properties in CSS

js-custom-media

Use Custom Media Queries in JS

postcss-browser-comments

Keep only the CSS you need based on comments and your browserslist

babel-plugin-import-postcss

Import processed CSS files in JS

postcss-to-nest

Transform unnested CSS into nested CSS

css-import-resolve

An algorithm for resolving imports in CSS

postcss-color-functional-notation

Use space and slash separated color notation in CSS

postcss-attribute-case-insensitive

PostCSS plugin to support case insensitive attributes

postcss-custom-utils

Read, write, and transform Custom Media and Custom Properties from almost anywhere

postcss-preset-env-www

The official website for PostCSS Preset Env

postcss-short-data

Use shorthand data attribute selectors in CSS

postcss-sass-extend

Use @extend and placeholder classes as you would in Sass

postcss-module-import

Inline import statements as CSS Modules

postcss-visitor

Transform CSS with visitor-based plugins

postcss-infrared-filter

Use an infrared photography filter in CSS

postcss-short-position

Define sides within the position property in CSS

postcss-commas

Declare multiple, comma-separated properties

postcss-short-border

Define multiple sides on border properties in CSS

postcss-double-position-gradients

Use double-position gradients in CSS

stylelint-devtool-prop-order

Enforce CSS property ordering like Chrome DevTools

cccp

Compact Client-side Compatible PostCSS

postcss-short-color

Define background-color within the color property in CSS

postcss-bob-ross-palette

Bring Bob Ross to your CSS :)

postcss-overflow-shorthand

Use the overflow shorthand in CSS

postcss-vmax

Use vmax in Internet Explorer and Edge

postcss-number-functions

Use Sass Number Functions in CSS

postcss-short-font-size

Define line-height within the font-size property in CSS

create-stylelint-plugin

Quickly create new stylelint plugins

stylelint-color-control

Control color usage in CSS

postcss-unrgba

Convert rgba() values to hex

postcss-short-text

Use a shorthand text property in CSS

postcss-plugins-directory

parse

A tool to read CSS and do things with it in JavaScript

postcss-words

Transform CSS keywords into custom values in CSS

postcss-identifiers

Use identifiers in CSS to write intelligent shorthands