PostCSS Plugins

本文目录结构

PostCSS Plugins

控制

有两个办法让 PostCSS 的魔法更加直观使用。

譬如，使用 postcss-plugin-context 将一个插件的样式上下文环境限制： :

.css-example.is-test-for-css4-browsers {
  color: gray(255, 50%);
}
@context postcss-preset-env {
  .css-example.is-fallback-for-all-browsers {
    color: gray(255, 50%);
  }
}

或者可以使用 [postcss-use] 直接在 CSS 里启用插件：

@use autoprefixer(browsers: ['last 2 versions']);

:fullscreen a {
  display: flex;
}

打包

• postcss-utilities includes the most commonly used mixins, shortcuts and helpers to use as @util rules.
• atcss contains plugins that transform your CSS according to special annotation comments.
• cssnano contains plugins that optimize CSS size for use in production.
• oldie contains plugins that transform your CSS for older Internet Explorer compatibility.
• precss contains plugins that allow you to use Sass-like CSS.
• rucksack contains plugins to speed up CSS development with new features and shortcuts.
• level4 contains only plugins that let you write CSS4 without the IE9 fallbacks.
• short adds and extends numerous shorthand properties.
• stylelint contains plugins that lint your stylesheets.
• postcss-hamster for vertical rhythm, typography, modular scale functions.
• 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.
• postcss-ui-theme gives you syntax sugar and allow you change theme.

面向未来的 CSS 语法

• postcss-apply supports custom properties sets references.
• postcss-attribute-case-insensitive supports case insensitive attributes.
• postcss-color-function supports functions to transform colors.
• postcss-color-gray supports the gray() function.
• postcss-color-hex-alpha supports #rrggbbaa and #rgba notation.
• postcss-color-hsl: transforms CSS Colors 4 hsl() to more compatible hsl() or hsla().
• postcss-color-hwb transforms hwb() to widely compatible rgb().
• postcss-color-rebeccapurple supports the rebeccapurple color.
• postcss-color-rgb: transforms CSS Colors 4 rgb() to more compatible rgb() or rgba().
• postcss-conic-gradient supports the conic-gradient background.
• postcss-custom-media supports custom aliases for media queries.
• postcss-custom-properties supports variables, using syntax from the W3C Custom Properties.
• postcss-custom-selectors adds custom aliases for selectors.
• postcss-extend supports spec-approximate @extend for rules and placeholders, recursively.
• postcss-font-format-keywords transforms keywords in @font-face rule’s format() function to widely supported strings.
• postcss-font-normalize to normalize font, especially font-family.
• postcss-font-variant transpiles human-readable font-variant to more widely supported CSS.
• postcss-font-family-system-ui transforms W3C CSS font-family: system-ui to a practical font list.
• postcss-font-display add font-display css rule.
• postcss-host makes the Shadow DOM’s :host selector work properly with pseudo-classes.
• postcss-initial supports initial keyword and all: initial to clean inherit styles.
• postcss-logical-properties transforms start and end properties to left and right depending on the writing direction of the document.
• postcss-bidirection generate left-to-right and right-to-left styles with single syntax.
• postcss-media-minmax adds <= and => statements to media queries.
• postcss-pseudo-class-any-link adds :any-link pseudo-class.
• postcss-selector-not transforms CSS4 :not() to CSS3 :not().
• postcss-selector-matches transforms CSS4 :matches() to more compatible CSS.
• postcss-start-to-end lets you control your layout (LTR or RTL) through logical rather than direction / physical rules.
• postcss-subgrid provides a basic shim for the CSS display: subgrid spec.
• mq4-hover-shim supports the @media (hover) feature.

See also [posctss-preset-env] plugins pack to add future CSS syntax by one line of code.

向下兼容

• postcss-color-rgba-fallback transforms rgba() to hexadecimal.
• postcss-disabled adds a [disabled] attribute and/or a .disabled class when the :disabled pseudo class is present.
• postcss-epub adds the -epub- prefix to relevant properties.
• postcss-esplit splits your CSS exceeding 4095 selectors for IE.
• postcss-fallback adds fallback function to avoid duplicate declarations.
• postcss-filter-gradient adds gradient filter for the old IE.
• postcss-flexibility adds -js- prefix for Flexibility polyfill.
• postcss-gradient-transparency-fix transforms transparent values in gradients to support Safari’s different color interpolation.
• postcss-hash-classname append hash string to your css class name.
• postcss-mqwidth-to-class converts min/max-width media queries to classes.
• postcss-opacity adds opacity filter for IE8.
• postcss-page-break adds page-break- fallback to break- properties.
• postcss-pseudoelements Convert :: selectors into : selectors for IE 8 compatibility.
• postcss-redundant-color-vars adds custom property for certain border and box-shadow declarations to fix a known Safari bug
• postcss-replace-overflow-wrap replace overflow-wrap with word-wrap.
• postcss-round-subpixels plugin that rounds sub-pixel values to the nearest full pixel.
• postcss-unmq removes media queries while preserving desktop rules for IE≤8.
• postcss-vmin generates vm fallback for vmin unit in IE9.
• postcss-will-change inserts 3D hack before will-change property.
• autoprefixer adds vendor prefixes for you, using data from Can I Use.
• postcss-pie makes IE several of the most useful CSS3 decoration features.
• cssgrace provides various helpers and transpiles CSS 3 for IE and other old browsers.
• pixrem generates pixel fallbacks for rem units.
• postcss-fixie adds easy and painless IE hacks
• postcss-safe-area adds browser fallbacks for safe-area-inset env variables.
• webp-in-css to use WebP background images in CSS.

See also oldie plugins pack.

语言扩展

• postcss-aspect-ratio fix an element’s dimensions to an aspect ratio.
• postcss-atroot place rules directly at the root node.
• postcss-bem-fix adds at-rules for BEM and SUIT style classes.
• postcss-click allows to use the :click pseudo class and implement it in JavaScript.
• postcss-compact-mq provides compact syntax for media queries based on viewport width.
• postcss-conditionals adds @if statements.
• postcss-css-variables supports variables for selectors, and at-rules using W3C similar syntax.
• postcss-current-selector to get current selector in declaration.
• postcss-define-property to define properties shortcut.
• postcss-define-function to implement Sass @function directive.
• postcss-each adds @each statement.
• postcss-for adds @for loops.
• postcss-at-rules-variables adds support for custom properties in @for, @each, @if, etc.
• postcss-functions enables exposure of JavaScript functions.
• postcss-if-media inline or nest media queries within CSS rules & properties.
• postcss-inline-media inline multiple media queries into CSS property values.
• postcss-local-constants adds support for localized constants.
• postcss-map enables configuration maps.
• postcss-match adds @match for Rust-style pattern matching.
• postcss-mixins enables mixins more powerful than Sass’, defined within stylesheets or in JS.
• postcss-media-variables adds support for var() and calc() in @media rules
• postcss-modular-scale adds a modular scale ms() function.
• postcss-namespace prefix a namespace to a selector.
• postcss-nested unwraps nested rules.
• postcss-nested-props unwraps nested properties.
• postcss-nested-vars supports nested Sass-style variables.
• postcss-pseudo-class-any-button adds :any-button pseudo-class for targeting all button elements.
• postcss-pseudo-class-enter transforms :enter into :hover and :focus.
• postcss-quantity-queries enables quantity queries.
• postcss-ref refers properties from another rule.
• postcss-reverse-media reverse/Invert media query parameters.
• postcss-sassy-mixins enables mixins with Sass keywords.
• postcss-map-get adds the ability to use Sass like map function map-get.
• postcss-simple-extend lightweight extending of silent classes, like Sass’ @extend.
• postcss-simple-vars supports for Sass-style variables.
• postcss-strip-units strips units off of property values.
• postcss-vertical-rhythm adds a vertical rhythm unit based on font-size and line-height.
• postcss-vertical-rhythm-function adds a vertical rhythm vr() function that is unit agnostic and works in situations where the font-size cannot be calculated during build time.
• postcss-responsive-properties allows you to write responsive property values.
• postcss-text-remove-gap remove space before and after text strings, added by line-height and extra space in glyph itself.
• postcss-closest plugin to modify closest matching part of current selector.
• csstyle adds components workflow to your styles.
• postcss-percentage support Sass-like percentage() function.
• postcss-state-selector write CSS based on component’s state.

See also precss plugins pack to add them by one line of code.

颜色

• postcss-ase-colors replaces color names with values read from an ASE palette file.
• postcss-brand-colors inserts company brand colors in the brand-colors module.
• postcss-color-alpha transforms #hex.a, black(alpha) and white(alpha) to rgba().
• postcss-color-hcl transforms hcl(H, C, L) and hcl(H, C, L, alpha) to #rgb and rgba().
• postcss-color-hexa transforms hexa(hex, alpha) into rgba format.
• postcss-color-mix mixes two colors together.
• postcss-color-palette transforms CSS 2 color keywords to a custom palette.
• postcss-color-pantone transforms pantone color to RGB.
• postcss-color-scale adds a color scale cs() function.
• postcss-color-short adds shorthand color declarations.
• postcss-color-yiq sets foreground colors using the YIQ color space.
• postcss-colorblind transforms colors using filters to simulate colorblindness.
• postcss-contrast checks background-color and gives either white or black.
• postcss-dark-theme-class to force dark or light theme by custom switcher.
• postcss-hexrgba adds shorthand hex rgba(hex, alpha) method.
• postcss-rgb-plz converts 3 or 6 digit hex values to rgb.
• postcss-rgba-hex converts rgba values to hex analogues.
• postcss-shades-of-gray helps keeping grayscale colors consistent to a gray palette.
• colorguard helps maintain a consistent color palette.
• postcss-get-color get the prominent colors from an image.
• postcss-randomcolor supports function to use random color.

图片与字体

• postcss-assets allows you to simplify URLs, insert image dimensions, and inline files.
• postcss-assets-rebase rebases assets from url().
• postcss-at2x handles retina background images via use of at-2x keyword.
• postcss-background-image-auto-size generates CSS rules width and height for background-image automatically.
• postcss-border-9-patch generates 9-patch like border styles via a custom rule.
• postcss-cachebuster adds version parameter to images and fonts
• postcss-copy-assets copies assets referenced by relative url()s into a build directory.
• postcss-data-packer moves embedded Base64 data to a separate file.
• postcss-easysprites combine images to sprites, based on their image.png#hash and aspect ratio (@2x).
• postcss-image-set adds background-image with first image for image-set().
• postcss-image-inliner inlines local and remote images.
• postcss-instagram adds Instagram filters to filter.
• postcss-filter-tint adds tint filter to elements such as images.
• postcss-foft-classes adds guarding classes to blocks using web fonts for better font loading strategies.
• postcss-font-awesome adds an easy shortcut to font-awesome unicode codes
• postcss-font-pack simplifies font declarations and validates they match configured font packs.
• postcss-fontsize generates rem unit font-size and line-height with px fallbacks.
• postcss-fontpath adds font links for different browsers.
• postcss-lazyimagecss adds image width and height automatically.
• postcss-lazysprite generates sprites from the directory of images.
• postcss-placehold makes it easy to drop in placeholder images.
• postcss-resemble-image provides a gradient fallback for an image that loosely resembles the original.
• postcss-responsive-images adds stylesheets for making your images responsive.
• postcss-sprites generates CSS sprites from stylesheets.
• postcss-svg insert inline SVG to CSS and allows to manage it colors.
• postcss-svg-fallback converts SVG in your CSS to PNG files for IE 8.
• postcss-svgo processes inline SVG through SVGO.
• postcss-unicode-characters makes it easier to write unicode-range descriptors.
• postcss-url rebases or inlines url()s.
• postcss-urlrev adds MD5 hash strings to url()s.
• postcss-write-svg write inline SVGs in CSS.
• postcss-inline-svg inline SVG images and customize their styles.
• webpcss adds URLs for WebP images for browsers that support WebP.
• postcss-font-grabber it grabs remote fonts in @font-face, download them and update your CSS.

网格

• postcss-grid adds a semantic grid system.
• postcss-grid-kiss transforms ASCII-art grids into CSS Grid layout.
• postcss-grid-system creates grids based on a fixed column width.
• postcss-grid-fluid creates fluid grids.
• postcss-layout a plugin for some common CSS layout patterns and a Grid system.
• postcss-maze is a mobile first, semantic responsive grid to suit any design pattern.
• postcss-neat is a semantic and fluid grid framework.
• postcss-oldschool-grid is a grid system with wrapping columns and padding gutters.
• postcss-simple-grid create grid with one line.
• lost feature-rich calc() grid system by Jeet author.

优化

• postcss-calc reduces calc() to values (when expressions involve the same units).
• postcss-class-name-shortener shortens CSS class names to optimize website performance.
• postcss-combine-duplicated-selectors automatically join identical css selectors.
• postcss-filter-mq Filter all matching or non-matching media queries.
• postcss-import inlines the stylesheets referred to by @import rules.
• postcss-nested-import inlines stylesheets referred to by @import rules inside nested rule blocks.
• postcss-partial-import inlines standard imports and Sass-like partials.
• postcss-reference emulates Less’s [@import (reference)].
• postcss-remove-root removes all instances of :root from a stylesheet.
• postcss-single-charset ensures that there is one and only one @charset rule at the top of file.
• postcss-zindex rebases positive z-index values.
• postcss-unprefix Unprefixes vendor prefixes in legacy CSS.
• css-byebye removes the CSS rules that you don’t want.
• css-mqpacker joins matching CSS media queries into a single statement.
• stylehacks removes CSS hacks based on browser support.
• postcss-mq-optimize removes invalid media queries or its expressions.
• postcss-uncss removes unused CSS from your stylesheets.
• postcss-html-filter filters out CSS that does not apply to the HTML you provide.
• postcss-no-important delete declarations !important.

See also plugins in modular minifier cssnano.

快捷工具

• postcss-alias creates shorter aliases for properties.
• postcss-alias-atrules creates shorter aliases for at-rules.
• postcss-all-link-colors insert colors for link-related pseudo-classes.
• postcss-border adds shorthand for width and color of all borders in border property.
• postcss-border-shortcut PostCSS plugin for assign default border type if not expressed.
• postcss-button creates buttons.
• postcss-center centers elements.
• postcss-circle inserts a circle with color.
• postcss-clearfix adds fix and fix-legacy properties to the clear declaration.
• postcss-crip shorthand properties for Crips that are too lazy to write.
• postcss-default-unit adds default unit to numeric CSS properties.
• postcss-easings replaces easing names from easings.net with cubic-bezier() functions.
• postcss-filter adds shorthand for black and white filter.
• postcss-focus adds :focus selector to every :hover.
• postcss-generate-preset allows quick generation of rules. Useful for creating repetitive utilities.
• postcss-hidden allows for easy ways to hide elements.
• postcss-input-style adds new pseudo-elements for cross-browser styling of inputs.
• postcss-nested-ancestors reference any parent/ancestor selector in nested CSS.
• postcss-parent-selector adds a parent selector to the beginning of all rules.
• postcss-position adds shorthand declarations for position attributes.
• postcss-property-lookup allows referencing property values without a variable.
• postcss-responsive-type changes font-size depends on screen size.
• postcss-scrib define your own aliases/shortcuts for properties or values.
• postcss-short-font-size extends font-size to define line-height s a second value.
• postcss-short-position extends position to define edges as additional values.
• postcss-short-spacing extends margin and padding to allow or omitted edges.
• postcss-short-text adds a text shortcut property for several text-related properties.
• postcss-size adds a size shortcut that sets width and height with one declaration.
• postcss-speech-bubble adds speech bubbles of different kinds with just a couple of lines of CSS.
• postcss-transform-shortcut allows shorthand transform properties in CSS.
• postcss-triangle creates a triangle.
• postcss-typescale sets type based on a typographic scale.
• postcss-verthorz adds vertical and horizontal spacing declarations.
• font-magician generates all the @font-face rules needed in CSS.
• postcss-animation PostCSS plugin that adds @keyframes from animate.css.
• postcss-magic-animations PostCSS plugin that adds @keyframes from Magic Animations.

其它

• postcss-alter-property-value alters your CSS declarations from a rule based configuration.
• postcss-attribute-selector-prefix adds a prefix to attribute selectors
• postcss-autoreset automatically adds reset styles.
• postcss-bem-to-js creates a JavaScript definition file for BEM-style CSS.
• postcss-bom adds a UTF-8 BOM to files.
• postcss-camelcaser transforms selectors to CamelCase.
• postcss-class-prefix adds a prefix/namespace to class selectors.
• postcss-classes-to-mixins converts classes to Sass, Less and Stylus mixins
• postcss-currency replaces name of currency with symbols.
• postcss-eol replaces EOL of files.
• postcss-extract-value extracts values from css properties and puts them into variables.
• postcss-fakeid transforms #foo IDs to attribute selectors [id="foo"].
• postcss-filter-stream blacklist files / folders that you don’t want to process with a PostCSS plugin.
• postcss-flexbox easy way to understand and start using CSS3 Flexbox.
• postcss-flexboxfixer unprefixes -webkit- only flexbox in legacy CSS.
• postcss-flexbugs-fixes fixes some of known flexbox bugs.
• postcss-gradientfixer unprefixes -webkit- only gradients in legacy CSS.
• postcss-hash replaces output file names with hash algorithms for cache busting.
• postcss-ie8 strips out unsupported properties and media queries for IE8.
• postcss-increase-specificity increases the specificity of your selectors.
• postcss-inline-rtl converts your CSS to right-to-left, but inline (adding just what you need).
• postcss-join-transitions joins conflicting transition declarations.
• postcss-letter-tracking generates relative, Photoshop-compatible letter tracking for improved letter spacing.
• postcss-light-text adds -webkit- antialiasing for light text.
• postcss-modules allows to use CSS Modules everywhere.
• postcss-mq-keyframes moves any animation keyframes in media queries to the end of the file.
• postcss-mq-last gives media query rules precedence by moving them to the end of the file.
• postcss-node-modules-replacer replaces path than includes node_modules to ~.
• postcss-plugin-namespace add a css selector to all rules, so that css file don’t affect other element.
• postcss-pseudo-content-insert adds content: '' to :before and :after if it is missing.
• postcss-pseudo-element-cases converts .style::BEFORE into .style::before and vice versa.
• postcss-pseudo-element-colons converts .style:before into .style::before and vice versa.
• postcss-pseudo-elements-content adds content: '' to :before-c and :after-c.
• postcss-pxtorem converts pixel units to rem.
• postcss-raw protects nodes inside @raw at-rules from being touched by other plugins.
• postcss-remove-prefixes removes vendor prefixes.
• postcss-safe-important adds !important to style declarations safely.
• postcss-sanitize remove properties and values using rules (css sanitization).
• postcss-scopify adds a user input scope to each selector.
• postcss-select select rules based off a selector list.
• postcss-selector-prefixer adds a prefix to css selectors.
• postcss-shorthand-expand expands shorthand properties.
• postcss-simple-trig calculate trigonometric functions: sin/cos/tan.
• postcss-sorting sort rules content with specified order.
• postcss-style-guide generates a style guide automatically.
• css-declaration-sorter sorts CSS declarations fast and automatically in a certain order.
• perfectionist formats poorly written CSS and renders a “pretty” result.
• rtlcss mirrors styles for right-to-left locales.
• stylefmt modern CSS formatter that works well with stylelint.
• postcss-autocorrect corrects typos and notifies in the console.
• postcss-px-to-viewport generates viewport units (vw, vh, vmin, vmax) from px units.

分析

• postcss-bem-linter lints CSS for conformance to SUIT CSS methodology.
• postcss-cssstats returns an object with CSS statistics.
• postcss-regexp-detect search for regexp in CSS declarations.
• css2modernizr creates a Modernizr config file that requires only the tests that your CSS uses.
• doiuse lints CSS for browser support, using data from Can I Use.
• immutable-css lints CSS for class mutations.
• list-selectors lists and categorizes the selectors used in your CSS, for code review.

反馈报告

• postcss-browser-reporter displays warning messages from other plugins right in your browser.
• postcss-forced-variables provides warnings and errors when specified properties don’t use variables.
• postcss-reporter logs warnings and other messages from other plugins in the console.

有趣的项目

• postcss-australian-stylesheets Australian Style Sheets.
• postcss-andalusian-stylesheets Andalusian Style Sheets.
• postcss-aze-stylesheets Azerbaijanian Style Sheets.
• postcss-canadian-stylesheets Canadian Style Sheets.
• postcss-chinese-stylesheets Chinese Style Sheets.
• postcss-czech-stylesheets Czech Style Sheets.
• postcss-german-stylesheets German Style Sheets.
• postcss-italian-stylesheets Italian Style Sheets.
• postcss-russian-stylesheets Russian Style Sheets.
• postcss-swedish-stylesheets Swedish Style Sheets.
• postcss-tatar-stylesheets Tatar Style Sheets
• postcss-trolling Trolling Style Sheets.
• postcss-lolcat-stylesheets Lolspeak Style Sheets.
• postcss-imperial adds CSS support for Imperial and US customary units of length.
• postcss-russian-units adds CSS support for russian units of length.
• postcss-pointer Replaces pointer: cursor with cursor: pointer.
• postcss-spiffing lets you use British English in your CSS.
• postcss-spanish-stylesheets Spanish Style Sheets.
• postcss-nope lets you write nope instead of none.
• postcss-glitch add glitch effect to your text.