@@ -47,7 +47,9 @@ Or enable plugins directly in CSS using [`postcss-use`]:
47
47
* [ ` short ` ] adds and extends numerous shorthand properties.
48
48
* [ ` stylelint ` ] contains plugins that lint your stylesheets.
49
49
* [ ` postcss-hamster ` ] for vertical rhythm, typography, modular scale functions.
50
- * [ ` 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.
50
+ * [ ` postcss-preset-env ` ] lets you convert modern CSS into something most
51
+ browsers can understand, determining the polyfills you need based
52
+ on your targeted browsers or runtime environments.
51
53
* [ ` postcss-ui-theme ` ] gives you syntax sugar and allow you change theme.
52
54
53
55
[ `postcss-preset-env` ] : https://github.com/jonathantneal/postcss-preset-env/
@@ -66,7 +68,8 @@ Or enable plugins directly in CSS using [`postcss-use`]:
66
68
67
69
* [ ` postcss-apply ` ] supports custom properties sets references.
68
70
* [ ` postcss-attribute-case-insensitive ` ] supports case insensitive attributes.
69
- * [ ` postcss-bidirection ` ] generate left-to-right and right-to-left styles with single syntax.
71
+ * [ ` postcss-bidirection ` ] generate left-to-right and right-to-left styles
72
+ with single syntax.
70
73
* [ ` postcss-color-function ` ] supports functions to transform colors.
71
74
* [ ` postcss-color-gray ` ] supports the ` gray() ` function.
72
75
* [ ` postcss-color-hex-alpha ` ] supports ` #rrggbbaa ` and ` #rgba ` notation.
@@ -90,7 +93,8 @@ Or enable plugins directly in CSS using [`postcss-use`]:
90
93
* [ ` postcss-font-normalize ` ] to normalize font, especially ` font-family ` .
91
94
* [ ` postcss-font-variant ` ] transpiles human-readable ` font-variant `
92
95
to more widely supported CSS.
93
- * [ ` postcss-font-family-system-ui ` ] transforms W3C CSS ` font-family: system-ui ` to a practical font list.
96
+ * [ ` postcss-font-family-system-ui ` ] transforms W3C CSS ` font-family: system-ui `
97
+ to a practical font list.
94
98
* [ ` postcss-font-display ` ] add ` font-display ` css rule.
95
99
* [ ` postcss-host ` ] makes the Shadow DOM’s ` :host ` selector work properly
96
100
with pseudo-classes.
@@ -151,7 +155,8 @@ by one line of code.
151
155
and other old browsers.
152
156
* [ ` pixrem ` ] generates pixel fallbacks for ` rem ` units.
153
157
* [ ` postcss-fixie ` ] adds easy and painless IE hacks
154
- * [ ` postcss-safe-area ` ] adds browser fallbacks for ` safe-area-inset ` ` env ` variables.
158
+ * [ ` postcss-safe-area ` ] adds browser fallbacks for ` safe-area-inset ` ` env `
159
+ variables.
155
160
* [ ` webp-in-css ` ] to use WebP background images in CSS.
156
161
* [ ` postcss-clamp ` ] transform ` clamp() ` to combination of ` min/max `
157
162
@@ -165,7 +170,8 @@ See also [`oldie`] plugins pack.
165
170
* [ ` postcss-aspect-ratio ` ] fix an element's dimensions to an aspect ratio.
166
171
* [ ` postcss-atroot ` ] place rules directly at the root node.
167
172
* [ ` postcss-bem-fix ` ] adds at-rules for BEM and SUIT style classes.
168
- * [ ` postcss-click ` ] allows to use the ` :click ` pseudo class and implement it in JavaScript.
173
+ * [ ` postcss-click ` ] allows to use the ` :click ` pseudo class and implement
174
+ it in JavaScript.
169
175
* [ ` postcss-compact-mq ` ] provides compact syntax for media queries based
170
176
on viewport width.
171
177
* [ ` postcss-conditionals ` ] adds ` @if ` statements.
@@ -220,8 +226,10 @@ for targeting all button elements.
220
226
selector.
221
227
* [ ` csstyle ` ] adds components workflow to your styles.
222
228
* [ ` postcss-percentage ` ] support Sass-like ` percentage() ` function.
223
- * [ ` postcss-custom-css-units ` ] Define custom css units and convert them to CSS variables.
224
- * [ ` postcss-easy-z ` ] lets you organize z-indices by declaring relations between them.
229
+ * [ ` postcss-custom-css-units ` ] Define custom css units and convert them
230
+ to CSS variables.
231
+ * [ ` postcss-easy-z ` ] lets you organize z-indices by declaring relations
232
+ between them.
225
233
226
234
[ Rust-style pattern matching ] : https://doc.rust-lang.org/book/match.html
227
235
@@ -265,27 +273,33 @@ for targeting all button elements.
265
273
and inline files.
266
274
* [ ` postcss-assets-rebase ` ] rebases assets from ` url() ` .
267
275
* [ ` postcss-at2x ` ] handles retina background images via use of ` at-2x ` keyword.
268
- * [ ` postcss-background-image-auto-size ` ] generates CSS rules ` width ` and ` height ` for ` background-image ` automatically.
269
- * [ ` postcss-border-9-patch ` ] generates 9-patch like border styles via a custom rule.
276
+ * [ ` postcss-background-image-auto-size ` ] generates CSS rules ` width `
277
+ and ` height ` for ` background-image ` automatically.
278
+ * [ ` postcss-border-9-patch ` ] generates 9-patch like border styles
279
+ via a custom rule.
270
280
* [ ` postcss-cachebuster ` ] adds version parameter to images and fonts
271
281
* [ ` postcss-copy-assets ` ] copies assets referenced by relative ` url() ` s
272
282
into a build directory.
273
283
* [ ` postcss-data-packer ` ] moves embedded Base64 data to a separate file.
274
284
* [ ` postcss-easysprites ` ] combine images to sprites, based on their
275
285
image.png` #hash ` and aspect ratio (` @2x ` ).
276
- * [ ` postcss-icon-blender ` ] create custom SVG icon sets from over 80,000 free and open-source icons
286
+ * [ ` postcss-icon-blender ` ] create custom SVG icon sets from over 80,000 free
287
+ and open-source icons
277
288
* [ ` postcss-image-set ` ] adds ` background-image ` with first image
278
289
for ` image-set() ` .
279
290
* [ ` postcss-image-inliner ` ] inlines local and remote images.
280
291
* [ ` postcss-instagram ` ] adds Instagram filters to ` filter ` .
281
292
* [ ` postcss-filter-tint ` ] adds tint filter to elements such as images.
282
- * [ ` postcss-foft-classes ` ] adds guarding classes to blocks using web fonts for better font loading strategies.
293
+ * [ ` postcss-foft-classes ` ] adds guarding classes to blocks using web fonts
294
+ for better font loading strategies.
283
295
* [ ` postcss-font-awesome ` ] adds an easy shortcut to font-awesome unicode codes
284
296
* [ ` postcss-font-pack ` ] simplifies font declarations and validates they match
285
297
configured font packs.
286
- * [ ` postcss-fontsize ` ] generates ` rem ` unit ` font-size ` and ` line-height ` with ` px ` fallbacks.
298
+ * [ ` postcss-fontsize ` ] generates ` rem ` unit ` font-size ` and ` line-height `
299
+ with ` px ` fallbacks.
287
300
* [ ` postcss-fontpath ` ] adds font links for different browsers.
288
- * [ ` postcss-font-grabber ` ] it grabs remote fonts in ` @font-face ` , download them and update your CSS.
301
+ * [ ` postcss-font-grabber ` ] it grabs remote fonts in ` @font-face ` ,
302
+ download them and update your CSS.
289
303
* [ ` postcss-lazyimagecss ` ] adds image width and height automatically.
290
304
* [ ` postcss-lazysprite ` ] generates sprites from the directory of images.
291
305
* [ ` postcss-placehold ` ] makes it easy to drop in placeholder images.
@@ -298,7 +312,8 @@ loosely resembles the original.
298
312
* [ ` postcss-svg ` ] insert inline SVG to CSS and allows to manage it colors.
299
313
* [ ` postcss-svg-fallback ` ] converts SVG in your CSS to PNG files for IE 8.
300
314
* [ ` postcss-svgo ` ] processes inline SVG through [ SVGO] .
301
- * [ ` postcss-unicode-characters ` ] makes it easier to write ` unicode-range ` descriptors.
315
+ * [ ` postcss-unicode-characters ` ] makes it easier to write ` unicode-range `
316
+ descriptors.
302
317
* [ ` postcss-url ` ] rebases or inlines ` url() ` s.
303
318
* [ ` postcss-urlrev ` ] adds MD5 hash strings to ` url() ` s.
304
319
* [ ` postcss-write-svg ` ] write inline SVGs in CSS.
@@ -327,12 +342,16 @@ loosely resembles the original.
327
342
328
343
* [ ` postcss-calc ` ] reduces ` calc() ` to values
329
344
(when expressions involve the same units).
330
- * [ ` postcss-remove-nested-calc ` ] ` calc(100vw - calc(20% - 10px)) ` to ` calc(100vw - (20% - 10px)) ` for IE 11 compatibility.
331
- * [ ` postcss-class-name-shortener ` ] shortens CSS class names to optimize website performance.
332
- * [ ` postcss-combine-duplicated-selectors ` ] automatically join identical css selectors.
345
+ * [ ` postcss-remove-nested-calc ` ] ` calc(100vw - calc(20% - 10px)) ` to
346
+ ` calc(100vw - (20% - 10px)) ` for IE 11 compatibility.
347
+ * [ ` postcss-class-name-shortener ` ] shortens CSS class names to optimize
348
+ website performance.
349
+ * [ ` postcss-combine-duplicated-selectors ` ] automatically join identical
350
+ selectors.
333
351
* [ ` postcss-filter-mq ` ] Filter all matching or non-matching media queries.
334
352
* [ ` postcss-import ` ] inlines the stylesheets referred to by ` @import ` rules.
335
- * [ ` postcss-nested-import ` ] inlines stylesheets referred to by ` @import ` rules inside nested rule blocks.
353
+ * [ ` postcss-nested-import ` ] inlines stylesheets referred to by ` @import ` rules
354
+ inside nested rule blocks.
336
355
* [ ` postcss-partial-import ` ] inlines standard imports and Sass-like partials.
337
356
* [ ` postcss-reference ` ] emulates Less’s ` @import ` .
338
357
* [ ` postcss-remove-root ` ] removes all instances of ` :root ` from a stylesheet.
@@ -345,7 +364,8 @@ loosely resembles the original.
345
364
* [ ` stylehacks ` ] removes CSS hacks based on browser support.
346
365
* [ ` postcss-mq-optimize ` ] removes invalid media queries or its expressions.
347
366
* [ ` postcss-uncss ` ] removes unused CSS from your stylesheets.
348
- * [ ` postcss-html-filter ` ] filters out CSS that does not apply to the HTML you provide.
367
+ * [ ` postcss-html-filter ` ] filters out CSS that does not apply to the HTML
368
+ you provide.
349
369
* [ ` postcss-no-important ` ] delete declarations !important.
350
370
* [ ` postcss-deep-scopable ` ] unified deep scoped style for Vue.js.
351
371
* [ ` postcss-deadcss ` ] helps to find dead CSS in stylesheets.
@@ -363,7 +383,8 @@ See also plugins in modular minifier [`cssnano`].
363
383
* [ ` postcss-all-link-colors ` ] insert colors for link-related pseudo-classes.
364
384
* [ ` postcss-border ` ] adds shorthand for width and color of all borders
365
385
in ` border ` property.
366
- * [ ` postcss-border-shortcut ` ] PostCSS plugin for assign default ` border ` type if not expressed.
386
+ * [ ` postcss-border-shortcut ` ] PostCSS plugin for assign default ` border ` type
387
+ if not expressed.
367
388
* [ ` postcss-button ` ] creates buttons.
368
389
* [ ` postcss-center ` ] centers elements.
369
390
* [ ` postcss-circle ` ] inserts a circle with color.
@@ -380,12 +401,15 @@ See also plugins in modular minifier [`cssnano`].
380
401
* [ ` postcss-hidden ` ] allows for easy ways to hide elements.
381
402
* [ ` postcss-input-style ` ] adds new pseudo-elements for cross-browser styling
382
403
of inputs.
383
- * [ ` postcss-nested-ancestors ` ] reference any parent/ancestor selector in nested CSS.
384
- * [ ` postcss-parent-selector ` ] adds a parent selector to the beginning of all rules.
404
+ * [ ` postcss-nested-ancestors ` ] reference any parent/ancestor selector
405
+ in nested CSS.
406
+ * [ ` postcss-parent-selector ` ] adds a parent selector to the beginning
407
+ of all rules.
385
408
* [ ` postcss-position ` ] adds shorthand declarations for position attributes.
386
409
* [ ` postcss-property-lookup ` ] allows referencing property values without
387
410
a variable.
388
- * [ ` postcss-range-value ` ] range value with a max and min value between two screen sizes.
411
+ * [ ` postcss-range-value ` ] range value with a max and min value between
412
+ two screen sizes.
389
413
* [ ` postcss-responsive-type ` ] changes ` font-size ` depends on screen size.
390
414
* [ ` postcss-scrib ` ] define your own aliases/shortcuts for properties or values.
391
415
* [ ` postcss-short-font-size ` ] extends ` font-size ` to define line-height
@@ -406,26 +430,32 @@ See also plugins in modular minifier [`cssnano`].
406
430
* [ ` postcss-verthorz ` ] adds vertical and horizontal spacing declarations.
407
431
* [ ` font-magician ` ] generates all the ` @font-face ` rules needed in CSS.
408
432
* [ ` postcss-animation ` ] PostCSS plugin that adds ` @keyframes ` from animate.css.
409
- * [ ` postcss-magic-animations ` ] PostCSS plugin that adds ` @keyframes ` from Magic Animations.
433
+ * [ ` postcss-magic-animations ` ] PostCSS plugin that adds ` @keyframes `
434
+ from Magic Animations.
410
435
411
436
412
437
## Others
413
438
414
- * [ ` postcss-add-root-selector ` ] intelligently wraps all rules in a custom selector.
415
- * [ ` postcss-alter-property-value ` ] alters your CSS declarations from a rule based configuration.
439
+ * [ ` postcss-add-root-selector ` ] intelligently wraps all rules
440
+ in a custom selector.
441
+ * [ ` postcss-alter-property-value ` ] alters your CSS declarations
442
+ from a rule based configuration.
416
443
* [ ` postcss-attribute-selector-prefix ` ] adds a prefix to attribute selectors
417
444
* [ ` postcss-auto-rem ` ] compiles pixel units to ` rem ` without configuration.
418
445
* [ ` postcss-autoreset ` ] automatically adds reset styles.
419
446
* [ ` postcss-bem-to-js ` ] creates a JavaScript definition file for BEM-style CSS.
420
447
* [ ` postcss-bom ` ] adds a UTF-8 BOM to files.
421
- * [ ` postcss-blurry-gradient-workaround ` ] fixes blurry CSS gradients with too many explicit end-stops.
448
+ * [ ` postcss-blurry-gradient-workaround ` ] fixes blurry CSS gradients
449
+ with too many explicit end-stops.
422
450
* [ ` postcss-camelcaser ` ] transforms selectors to CamelCase.
423
451
* [ ` postcss-class-prefix ` ] adds a prefix/namespace to class selectors.
424
452
* [ ` postcss-classes-to-mixins ` ] converts classes to Sass, Less and Stylus mixins
425
453
* [ ` postcss-currency ` ] replaces name of currency with symbols.
426
- * [ ` postcss-d-ts ` ] generates ` .d.ts ` declaration for TypeScript ` import ` from used CSS classes and ids
454
+ * [ ` postcss-d-ts ` ] generates ` .d.ts ` declaration for TypeScript ` import `
455
+ from used CSS classes and ids
427
456
* [ ` postcss-eol ` ] replaces EOL of files.
428
- * [ ` postcss-extract-value ` ] extracts values from css properties and puts them into variables.
457
+ * [ ` postcss-extract-value ` ] extracts values from css properties and puts them
458
+ into variables.
429
459
* [ ` postcss-fakeid ` ] transforms ` #foo ` IDs to attribute selectors ` [id="foo"] ` .
430
460
* [ ` postcss-filter-stream ` ] blacklist files / folders that you don’t want
431
461
to process with a PostCSS plugin.
@@ -442,50 +472,60 @@ See also plugins in modular minifier [`cssnano`].
442
472
* [ ` postcss-inline-rtl ` ] converts your CSS to right-to-left,
443
473
but inline (adding just what you need).
444
474
* [ ` postcss-join-transitions ` ] joins conflicting transition declarations.
445
- * [ ` postcss-letter-tracking ` ] generates relative, Photoshop-compatible letter tracking for improved letter spacing.
475
+ * [ ` postcss-letter-tracking ` ] generates relative, Photoshop-compatible
476
+ letter tracking for improved letter spacing.
446
477
* [ ` postcss-light-text ` ] adds ` -webkit- ` antialiasing for light text.
447
478
* [ ` postcss-modules ` ] allows to use CSS Modules everywhere.
448
- * [ ` postcss-momentum-scrolling ` ] adding momentum style scrolling behavior (` -webkit-overflow-scrolling:touch ` ) for elements with overflow (scroll, auto) on iOS.
479
+ * [ ` postcss-momentum-scrolling ` ] adding momentum style scrolling behavior
480
+ (` -webkit-overflow-scrolling:touch ` ) for elements with overflow on iOS.
449
481
* [ ` postcss-mq-keyframes ` ] moves any animation keyframes in media queries
450
482
to the end of the file.
451
- * [ ` postcss-mq-last ` ] gives media query rules precedence by moving them to the end of the file.
483
+ * [ ` postcss-mq-last ` ] gives media query rules precedence by moving them
484
+ to the end of the file.
452
485
* [ ` postcss-node-modules-replacer ` ] replaces path than includes ` node_modules `
453
486
to ` ~ ` .
454
- * [ ` postcss-plugin-namespace ` ] add a css selector to all rules, so that css file don't affect other element.
487
+ * [ ` postcss-plugin-namespace ` ] add a css selector to all rules,
488
+ so that CSS file don’t affect other element.
455
489
* [ ` postcss-prefix-hover ` ] adds a prefixed to any selector containing ` :hover ` .
456
490
* [ ` postcss-pseudo-content-insert ` ] adds ` content: '' ` to ` :before ` and ` :after `
457
491
if it is missing.
458
- * [ ` postcss-pseudo-element-cases ` ] converts ` .style::BEFORE ` into ` .style::before ` and vice versa.
459
- * [ ` postcss-pseudo-element-colons ` ] converts ` .style:before ` into ` .style::before ` and vice versa.
492
+ * [ ` postcss-pseudo-element-cases ` ] converts ` .style::BEFORE `
493
+ into ` .style::before ` and vice versa.
494
+ * [ ` postcss-pseudo-element-colons ` ] converts ` .style:before `
495
+ into ` .style::before ` and vice versa.
460
496
* [ ` postcss-pseudo-elements-content ` ] adds ` content: '' ` to ` :before-c `
461
497
and ` :after-c ` .
462
498
* [ ` postcss-pxtorem ` ] converts pixel units to ` rem ` .
463
499
* [ ` postcss-raw ` ] protects nodes inside ` @raw ` at-rules from being touched
464
500
by other plugins.
465
501
* [ ` postcss-remove-prefixes ` ] removes vendor prefixes.
466
- * [ ` postcss-rtlcss ` ] creates left-to-right and right-to-left rules in a single CSS file.
502
+ * [ ` postcss-rtlcss ` ] creates left-to-right and right-to-left rules
503
+ in a single CSS file.
467
504
* [ ` postcss-safe-important ` ] adds ` !important ` to style declarations safely.
468
- * [ ` postcss-sanitize ` ] remove properties and values using rules (css sanitization) .
505
+ * [ ` postcss-sanitize ` ] remove properties and values using rules.
469
506
* [ ` postcss-scopify ` ] adds a user input scope to each selector.
470
507
* [ ` postcss-select ` ] select rules based off a selector list.
471
508
* [ ` postcss-selector-prefixer ` ] adds a prefix to css selectors.
472
509
* [ ` postcss-shorthand-expand ` ] expands shorthand properties.
473
510
* [ ` postcss-simple-trig ` ] calculate trigonometric functions: sin/cos/tan.
474
511
* [ ` postcss-sorting ` ] sort rules content with specified order.
475
- * [ ` postcss-sort-media-queries ` ] combine and sort CSS media queries with mobile first or desktop first methods
512
+ * [ ` postcss-sort-media-queries ` ] combine and sort CSS media queries
513
+ with mobile first or desktop first methods.
476
514
* [ ` postcss-style-guide ` ] generates a style guide automatically.
477
515
* [ ` css-declaration-sorter ` ] sorts CSS declarations fast and automatically
478
516
in a certain order.
479
517
* [ ` perfectionist ` ] formats poorly written CSS and renders a “pretty” result.
480
518
* [ ` rtlcss ` ] mirrors styles for right-to-left locales.
481
519
* [ ` stylefmt ` ] modern CSS formatter that works well with ` stylelint ` .
482
520
* [ ` postcss-autocorrect ` ] corrects typos and notifies in the console.
483
- * [ ` postcss-px-to-viewport ` ] generates viewport units (` vw ` , ` vh ` , ` vmin ` , ` vmax ` ) from ` px ` units.
521
+ * [ ` postcss-px-to-viewport ` ] generates viewport units
522
+ (` vw ` , ` vh ` , ` vmin ` , ` vmax ` ) from ` px ` units.
484
523
* [ ` postcss-viewport-height-correction ` ] solves the popular problem when ` 100vh `
485
524
doesn’t fit the mobile browser screen.
486
525
* [ ` postcss-unit-processor ` ] flexible processing of CSS units.
487
526
* [ ` postcss-rem-to-px ` ] converts ` rem ` values to ` px ` values.
488
- * [ ` postcss-design-tokens ` ] provides a function to retrieve design tokens expressed in JS or JSON, within CSS.
527
+ * [ ` postcss-design-tokens ` ] provides a function to retrieve design tokens
528
+ expressed in JS or JSON, within CSS.
489
529
490
530
491
531
[ flexbox bugs ] : https://github.com/philipwalton/flexbugs
@@ -508,7 +548,8 @@ See also plugins in modular minifier [`cssnano`].
508
548
509
549
* [ ` postcss-browser-reporter ` ] displays warning messages from other plugins
510
550
right in your browser.
511
- * [ ` postcss-forced-variables ` ] provides warnings and errors when specified properties don't use variables.
551
+ * [ ` postcss-forced-variables ` ] provides warnings and errors when specified
552
+ properties don’t use variables.
512
553
* [ ` postcss-reporter ` ] logs warnings and other messages from other plugins
513
554
in the console.
514
555
@@ -536,7 +577,8 @@ See also plugins in modular minifier [`cssnano`].
536
577
* [ ` postcss-spanish-stylesheets ` ] Spanish Style Sheets.
537
578
* [ ` postcss-nope ` ] lets you write ` nope ` instead of ` none ` .
538
579
* [ ` postcss-glitch ` ] add glitch effect to your text.
539
- * [ ` postcss-khaleesi ` ] translate CSS values and properties to ` khaleesi meme ` language.
580
+ * [ ` postcss-khaleesi ` ] translate CSS values and properties to
581
+ ` khaleesi meme ` language.
540
582
541
583
[ `postcss-background-image-auto-size` ] : https://github.com/JustClear/postcss-background-image-auto-size
542
584
[ `postcss-letter-tracking` ] : https://github.com/letsjaam/postcss-letter-tracking
0 commit comments