PostCSS is a surprisingly flexible software that makes it conceivable to turn into CSS types with JavaScript plugins. Its flexibility lies in how it’s constructed.
The core a part of PostCSS is a Node.js module that you’ll set up with npm, and it has an ecosystem of greater than 200 plugins you’ll make a choice to make use of on your undertaking.
PostCSS is neither a preprocessor, nor a postprocessor, as other PostCSS plugins might fall into both of those classes, or either one of them; it is dependent totally on you what you are making of it. With PostCSS, you don’t want to be informed a distinct syntax like on the subject of Sass or LESS; you’ll in an instant begin to use it.
PostCSS takes your present CSS document and turns it into JavaScript-readable knowledge, then the JavaScript plugins carry out the adjustments, and PostCSS returns the altered model of the unique document. Sounds cool, doesn’t it?
On this publish we can check out 10 PostCSS plugins to come up with an perception into one of the good stuff you’ll reach with this superior software.
1. Autoprefixer
Autoprefixer is one of the crucial well known PostCss plugin, because it’s utilized by notable tech corporations equivalent to Google, Twitter, and Shopify. It provides supplier prefixes to CSS regulations the place it’s important.
Autoprefixer makes use of knowledge from Can I Use. This manner it doesn’t get dated, and will all the time observe the newest regulations. You’ll be able to take a look at the way it works on its interactive demo site.
2. CSSnext
CSSnext is a CSS transpiler that lets you use long term CSS syntax on present websites. W3C has many new CSS regulations that aren’t lately applied by means of browsers, however may just allow builders to put in writing extra subtle CSS quicker and more uncomplicated. CSSnext has been made to bridge this hole.
It’s price to try its features to look what you’ll accomplish with it, for instance you’ll use customized media queries, customized selectors, color modifiers, SVG filters, and new pseudoclasses on your designs.
3. PreCSS
PreCSS is without doubt one of the PstCSS plugins that paintings like a CSS preprocessor. It makes it conceivable to benefit from a Sass-like markup on your sytlesheet recordsdata.
Via introducing PreCSS into your workflow you’ll use variables, if-else statements, for loops, mixins, @prolong and @import regulations, nesting, and lots of different to hand options on your CSS code. PreCSS’s Github documentation will provide you with detailed directions on the right way to profit from it.
4. StyleLint
StyleLint is a contemporary CSS linter that proofreads and validates your CSS code. It makes it simple to keep away from mistakes and pushes you to observe constant coding conventions.
StyleLint understands the newest CSS syntax, so it may be used in conjunction with the in the past discussed PreCSS plugin. It additionally lets you make your personal configuration, or even tests in case your settings are legitimate.
5. PostCSS Assets
The PostCSS Property plugin is a to hand asset supervisor in your CSS recordsdata. It may be an excellent selection if you happen to generally tend to have bother with URL paths, as PostCSS Property isolates your stylesheet recordsdata from environmental adjustments.
You want to outline load paths, relative paths, and a base trail, and the plugin will robotically glance up the property you want. For instance you’ll write the next code if you want the correct URL of the foobar.jpg symbol:
frame {
background: get to the bottom of('foobar.jpg');
}
PostCSS Property additionally looks after the property cache, as you’ll set the cachebuster variable to true if you wish to have URL paths to be robotically modified in case an asset is changed. This good plugin additionally calculates the scale (width and top) of symbol recordsdata, and even resizes them the usage of a preset ratio.
6. CSSNano
If you want optimized and minified CSS recordsdata for a manufacturing website, it’s price to try CSSNano. It’s a modular plugin that is composed of many smaller, single-responsibility PostCSS plugins. It doesn’t simplest carry out fundamental minification tactics equivalent to taking away whitespaces, but additionally has complex choices that make centered optimizations conceivable.
Amongst many different options, CSSNano is in a position to rebasing z-index values, lowering customized identifiers, changing duration, time and color values, and taking away old-fashioned supplier prefixes.
7. Font Magician
In case you are keen on subtle typography, you’re going to certainly just like the Font Magician PostCSS plugin. The magic of Font Magician is based in its capacity of robotically producing all of the important @font-face regulations.
The way it works is beautiful easy, you simplest want to upload the font-family: "My Fav Font"; CSS rule to an HTML component, and Font Magician does the remainder of the paintings. It could possibly upload Google Fonts, the native reproduction of a font, Bootstrap typography, and too can load fonts asynchronously. Right here’s its interactive demo site.
8. Write SVG
Have you ever ever questioned about how cool it will be to put in writing SVG proper into your CSS recordsdata? With the assistance of the Write SVG PostCSS plugin you’ll simply do so purpose.
This to hand plugin, for instance, makes it conceivable to retailer your SVG backgrounds and icons on your CSS document, and later upload them to the related HTML component within the following approach:
@svg sq. {
@rect {
fill: var(--color, black);
width: 100%;
top: 100%;
}
}
.instance {
background: white svg(sq. param(--color #00b1ff)) quilt;
}
9. Lost Grid
Misplaced Grid is a brilliant PostCSS plugin that will provide you with an excellent CSS grid machine that doesn’t simplest works with undeniable CSS but additionally with preprocessor languages (Sass, LESS, Stylus). It makes use of the calc() CSS serve as to create beautiful grids that you’ll simply use with out spending an excessive amount of time with customization.
Misplaced Grid has just about easy regulations, for instance defining a column with 25% width doesn’t takes greater than this little code snippet:
div {
lost-column: 1/4;
}
10. PostCSS Sprites
The PostCSS Sprite plugin makes it simple to generate symbol sprites, i.e. collections of pictures positioned right into a unmarried document. After environment a couple of choices, the plugin takes the photographs out of your stylesheet document, merges them right into a sprite, then updates the picture references anywhere it’s important.
You’ll be able to use other filters and groupers to resolve which pictures you wish to have to position into the sprite, and you’ll set the scale of the output symbol as neatly.
The publish 10 Awesome PostCSS Plugins to Make You a CSS Wizard gave the impression first on Hongkiat.
WordPress Website Development Source: https://www.hongkiat.com/blog/postcss-plugins/