• Type:

CH A PostCSS plugin for people who prefer to write English 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) Rationale
colour color There’s a u in “colour”
centre center It’s spelt “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!


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'),

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



Read More

Previous Post

CH Libinput’s bus factor is 1 (2019)

Next Post

CH Scott Forstall tells story about Steve Jobs, Microsoft, and a dead fish [video]

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top