hashanp / postcss-spiffing Goto Github PK

PostCSS plugin to use British English

JavaScript 60.42% CSS 39.58%

postcss-spiffing's Introduction

postcss-spiffing

My hands are of your colour, but I shame
To wear a heart so white.
- William Shakespeare, Macbeth

Shakespeare wouldn't have settled for using "color" rather than "colour" in CSS, and neither should you! He would've recognised that in doing so, he would've comprised the whole integrity of his writing.

Write CSS using proper British English anywhere with postcss-spiffing.

The main differences between this and spiffing by muan, are that this integrates with postcss and does not use regular expressions.

Install

npm install postcss-spiffing --save-dev

Example

/* Your well-spelt CSS */

body {
  background-colour: grey;
  transparency: 0.3;
  text-align: centre;
  text-transform: capitalise;
  border: 1px solid grey;
}

span {
  font-weight: plump;
}

.frame {
  background-photograph: url("/queen.png") !please;
}

.hello {
	content: "subjects";
	colour: grey;
}

will go to:

body {
  background-color: gray;
  opacity: 0.7;
  text-align: center;
  text-transform: capitalize;
  border: 1px solid gray;
}

span {
  font-weight: bold;
}

.frame {
  background-image: url("/queen.png") !important;
}

.hello {
	content: "subjects";
	color: gray;
}

Use

var postcss = require("postcss");
var spiffing = require("postcss-spiffing");
var fs = require("fs");

var css = fs.readFileSync("random.css");

console.log(postcss(spiffing()).process(css).css);

To use this with gulp, use gulp-postcss.

Changes Applied

colour goes to color
plump goes to bold
capitalise goes to capitalize
!please goes to !important
centre goes to center
grey goes to gray
background-photograph goes to background-image (list-style-photograph is supported too)
transparency goes to opacity (since transparency is the opposite of opacity it becomes (1-n))
storey goes to z-index (ground equals 1 and so on)

postcss-spiffing's People

Contributors

Stargazers

Watchers

Forkers

davguij shugar normajs arku rummysm adamfitzpatrick1 manen fussmatte yustarandomname zandergrin japanihon nicholasdev

postcss-spiffing's Issues

Transpose z-index like a floors

Map in accordance with http://en.wikipedia.org/wiki/Storey#Numbering

.a {z-index: ground;}
.b {z-index: 1;}

.a {z-index: 1;}
.b {z-index: 2;}

Transparency vs Opacity

Transparency is the opposite of opacity. The opacity value should be 1-n for transparency value n. Opaqueness might be a better choice.

PostCSS 5.0 API

!please; isn't working in my setup

Hi,

All rules are working other than !please; - which is the only one that I want!

I’ve tested it thoroughly and reduced it down to these code examples:

`gulpfile.js`

gulp.task('styles', function () {
  return gulp.src('source/styles/main.scss')
    .pipe(sass())
    .pipe(postcss([
      spiffing()
    ]))
    .pipe(gulp.dest('./dist'))
})

SCSS

.frame {
  background-photograph: url("/queen.png") !please;
}

Console error:

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: source/styles/main.scss
Error: Invalid CSS after '...l("/queen.png")': expected expression (e.g. 1px, bold), was "!please;"
        on line 18 of source/styles/_trumps.iframe-embed.scss
>>   background-photograph: url("/queen.png") !please;
   ------------------------------------------^

`package.json`

"gulp": "^3.9.0",
"gulp-postcss": "^6.1.1",
"postcss-spiffing": "^0.1.0",

Has anyone else had this particular issue? Any help would be appreciated. Thanks!

Example for utilizing ES6 Modules

Hello, I think an example of how to use the plugin with es6 modules could be helpful. Here's an proposal:

Use (ES6)

import postcss from 'postcss';
import spiffing from 'postcss-spiffing';
import * as fs from 'fs';

const css = fs.readFileSync('random.css');

console.log(postcss(spiffing()).process(css).css);

Maybe a section about loading ES6 modules in node with ESM (https://github.com/standard-things/esm) might be helpful, too:

Execute in Node >= 13

// Execute directly
node main.js

// Execute via npm scripts
// package.json
{
  ...
  "type": "module",
  "scripts": {
    "convert": "node main.js"
  }
  ....
}
// Command line
npm run convert
yarn convert