• Stars
    star
    235
  • Rank 171,079 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Write CSS Properly πŸ‡¬πŸ‡§πŸ§

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) 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!

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

MIT

More Repositories

1

git-notify

πŸ™‰ πŸ“£ Communicate important updates to your team via git commit messages
TypeScript
1,346
star
2

jest-clean-console-reporter

A Jest Reporter to group, hide and prettify spammy console warnings
JavaScript
541
star
3

vscode-hacker-typer

Great for live coding presentations, impressing your friends, or just trying to look busy at work.
TypeScript
453
star
4

react-native-chat-tutorial

A step-by-step tutorial to create your own Chat app with React Native
JavaScript
277
star
5

vscode-live-frame

Run your web app inside VS Code
TypeScript
206
star
6

react-native-reversed-flat-list

[DEPRECATED] A reversed React Native FlatList, useful for creating performant bottom-anchored lists for chats and whatnot
JavaScript
136
star
7

NaNoWriMo

Wallet - A Novel for National Novel Writing Month 2018
JavaScript
28
star
8

is-it-over

It's so over. No wait, we're back.
TypeScript
27
star
9

redux-offline-example

β˜• Something brewin' here. Come back next week.
JavaScript
19
star
10

react-native-animated-playground

Shared transitions with React Native Animated
JavaScript
17
star
11

react-native-snap-demo

A "Snapchat" demo app for React Native for Beginners course
JavaScript
13
star
12

cloudflare-pages-react-sqlite-starter

Vite on Cloudflare Pages
TypeScript
12
star
13

cycle-react-native-example

Sample application for using Cycle.js with React Native (CycleConf 2016)
JavaScript
10
star
14

react-native-training-chat-server

A client library for a chat server to be used in React Native training
JavaScript
9
star
15

jevakallio.dev

My personal website
HTML
8
star
16

hello-worker

Experimenting with CloudFlare Workers and Durable Objects. Nothing to see here.
Shell
6
star
17

SharedTransitions

Experiments with React Native shared element transitions
JavaScript
6
star
18

crna-pull-request-preview

Deprecated. Go to: https://github.com/FormidableLabs/appr
JavaScript
6
star
19

react-derivable-tools

Utilities for using DerivableJS with React
JavaScript
6
star
20

needly

A tiny JavaScript dependency injector / service locator
JavaScript
4
star
21

habbit

Old habits die hard. These birds just keep dying.
TypeScript
4
star
22

jargon-of-the-day

3
star
23

react-native-snap-camera

A Camera component for React Native For Beginners course
JavaScript
2
star
24

restless-london

RESTless London Meetup website
JavaScript
2
star
25

victory-composed

Ready-made composed Victory components
JavaScript
2
star
26

react-native-snap-drag

Building blocks for React Native For Beginners course
JavaScript
2
star
27

foamblog

Open Foam
HTML
1
star
28

hidden-helsinki

JavaScript
1
star
29

party-daemons

Partykit Implementation of AI Daemons
TypeScript
1
star
30

foam-launcher

Just prototyping. Nothing to see here
JavaScript
1
star
31

pepperoni-hackathon-app

JavaScript
1
star
32

partyflags

WIP
TypeScript
1
star
33

partykit-onfetch-routing

Example of using PartyKit onFetch to do dynamic routing to rooms using cookies
TypeScript
1
star
34

kallio-prototype

Protoype for Helsinki-based city adventure game
JavaScript
1
star