hashanp / Postcss Spiffing
PostCSS plugin to use British English
Stars: ✭ 158
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Postcss Spiffing
Postcss Alias
PostCSS plugin that allows you to create aliases for CSS properties
Stars: ✭ 47 (-70.25%)
Mutual labels: postcss, postcss-plugin
Postcss Prefix Selector
Prefix all CSS rules with a selector
Stars: ✭ 75 (-52.53%)
Mutual labels: postcss, postcss-plugin
Postcss Import
PostCSS plugin to inline @import rules content
Stars: ✭ 1,048 (+563.29%)
Mutual labels: postcss, postcss-plugin
Postcss Banner
PostCSS plugin to add text banner and footer to resulting file
Stars: ✭ 13 (-91.77%)
Mutual labels: postcss, postcss-plugin
Container Query
A PostCSS plugin and Javascript runtime combination, which allows you to write container queries in your CSS the same way you would write media queries.
Stars: ✭ 119 (-24.68%)
Mutual labels: postcss, postcss-plugin
Postcss Register Custom Props
PostCSS plugin that transforms custom property registration in CSS to JS
Stars: ✭ 20 (-87.34%)
Mutual labels: postcss, postcss-plugin
Postcss Nested Props
PostCSS plugin to unwrap nested properties.
Stars: ✭ 58 (-63.29%)
Mutual labels: postcss, postcss-plugin
Postcss Easing Gradients
PostCSS plugin to create smooth linear-gradients that approximate easing functions.
Stars: ✭ 689 (+336.08%)
Mutual labels: postcss, postcss-plugin
Postcss Plugins
The "officially unofficial" consolidated list of PostCSS plugins in a ready-to-use package
Stars: ✭ 107 (-32.28%)
Mutual labels: postcss, postcss-plugin
Rtlcss
Framework for transforming Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL)
Stars: ✭ 1,363 (+762.66%)
Mutual labels: postcss, postcss-plugin
Postcss Interpolate
PostCSS plugin for values interpolation between breakpoints.
Stars: ✭ 9 (-94.3%)
Mutual labels: postcss, postcss-plugin
Postcss Viewport Height Correction
PostCSS plugin to solve the popular problem when 100vh doesn’t fit the mobile browser screen.
Stars: ✭ 137 (-13.29%)
Mutual labels: postcss, postcss-plugin
Postcss Position
PostCSS plugin that adds shorthand declarations for position attributes
Stars: ✭ 26 (-83.54%)
Mutual labels: postcss, postcss-plugin
Postcss Icon
PostCSS plugin that adds `css icons` from icon sets
Stars: ✭ 20 (-87.34%)
Mutual labels: postcss, postcss-plugin
Postcss Triangle
PostCSS plugin to create a triangle.
Stars: ✭ 57 (-63.92%)
Mutual labels: postcss, postcss-plugin
Postcss Responsive Type
Automagical responsive typography, built on PostCSS
Stars: ✭ 363 (+129.75%)
Mutual labels: postcss, postcss-plugin
Postcss Sprites
Generate sprites from stylesheets.
Stars: ✭ 402 (+154.43%)
Mutual labels: postcss, postcss-plugin
Postcss Less
PostCSS Syntax for parsing LESS
Stars: ✭ 93 (-41.14%)
Mutual labels: postcss, postcss-plugin
Postcss Aspect Ratio Mini
A PostCSS plugin to fix an element's dimensions to an aspect ratio
Stars: ✭ 123 (-22.15%)
Mutual labels: postcss, postcss-plugin
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 tocolor
-
plump
goes tobold
-
capitalise
goes tocapitalize
-
!please
goes to!important
-
centre
goes tocenter
-
grey
goes togray
-
background-photograph
goes tobackground-image
(list-style-photograph
is supported too) -
transparency
goes toopacity
(since transparency is the opposite of opacity it becomes (1-n)) -
storey
goes toz-index
(ground
equals 1 and so on)
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].