A PostCSS plugin for people who prefer to write English properly
source link: https://github.com/jevakallio/css-properly
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
css-properly
PostCSS plugin for people who prefer to write English properly.
.foo { colour: black; background-colour: lightgrey; text-align: centre; }
Supported translations:
From (Proper) To (American) Rationalecolour
color
There's a u
in "colour"
centre
center
It's spelled "centre"
capitalise
capitalize
Don't even get me started
padding-ton
padding-top
When you're thinking of your favourite bear
z-index
z-index
It's the same but it's pronounced "zed", not "zee"
behaviour
behavior
Oh, behave!
Pull requests for further translations welcome!
Usage
As a PostCSS plugin
Assuming you are using npm to manage dependencies, install css-properly
with:
npm install --save-dev css-properly
Check your project for existing PostCSS config: postcss.config.js
in the project root, "postcss"
section in package.json
or postcss
in bundle config.
If you already use PostCSS, add the plugin to plugins list:
module.exports = { plugins: [ + require('css-properly'), require('autoprefixer') ] }
If you do not use PostCSS, add it according to official docs and set this plugin in settings.
As a standalone tool using PostCSS CLI
First, install postcss-cli
and css-properly
globally:
npm install -g postcss-cli css-properly
Follow your heart:
postcss [input.css] --use css-properly [-o|--output output.css] [--watch|-w] postcss <input.css>... --use css-properly --dir <output-directory> [--watch|-w] postcss <input-directory> --use css-properly --dir <output-directory> [--watch|-w] postcss <input-glob-pattern> --use css-properly --dir <output-directory> [--watch|-w] postcss <input.css>... --use css-properly --replace
License
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK