"This plugin saves us from many tiny plugins with unknown properties" ‒ @ai proposal postcss/issues/645
-
You don’t need the extra files in your CSS codebase for mixins. -
You don’t need mixins for vendor prefixing (use autoprefixer plugin) -
You can use postcss-utilities with LESS, SASS, vanilla CSS or whatever you choice.
-
aspect-ratio -
border-color -
border-radius -
border-style -
border-width -
center -
center-block -
circle -
clear-fix -
hd breakpoint -
hide-visually -
hr -
margin -
no-hover -
no-js -
padding -
position -
reset-list -
reset-text -
size -
min-size -
max-size -
sticky-footer -
text-hide -
text-stroke -
triangle -
truncate -
word-wrap
. cfx { @util clearfix; } . rounded-top { @util border-top-radius ( four px ); } @util no-hover { . box { background-color : # six hundred and sixty-six ; } }
. cfx : after { content : '' ; display : block; clear : both; } . rounded-top { border-top-left-radius : four px ; border-top-right-radius : four px ; } . no-hover . box { background-color : # six hundred and sixty-six ; }
npm install postcss-cli postcss-utilities --save-dev
"scripts" : { "postcss" : " postcss input.css -u postcss-utilities -o output.css " }
Use with styled-jsx
npm install --save styled-jsx styled-jsx-plugin-postcss postcss-utilities
"postcss" : { "plugins" : { "postcss-utilities" : {} } }
{ "plugins" : [ " styled-jsx/babel " ] }
export default ( ) => (
< div >
< p > only this paragraph will get the style :) < / p >
< style jsx > { `
p {
color: red;
@util center;
}
` } < / style >
< / div >
)
postcss ( [ require ( 'postcss-utilities' ) ( { /* options*/ } ) ] )
-
Do you think that we should include a new utility? Create an issue with you proposal . -
Found an issue? Report it! . -
Would you like to contribute with code or documentation? Send a pull request