@postcss-plugins/text-transform
A PostCSS plugin to transform the text.
Installation
yarn add @postcss-plugins/text-transform
What is this? For example, you have the following CSS file (I'm using postcss-each and postcss-cssnext):
backgrounds.css
.u {
@each $color in green, yellow, red {
@text-transform $color, upperFirst, $transformed {
&-bg$(transformed) {
background-color: $color;
}
}
}
}
And the plugin will give you:
.u-bgGreen {
background-color: green;
}
.u-bgYellow {
background-color: yellow;
}
.u-bgRed {
background-color: red;
}
Usage
postcss([require('@postcss-plugins/text-transform')]);
@text-transform $color, transformation, $textTransformed {
.u-bg$(transformed) {
background-color: $color;
}
}
Transformations
- camelCase - Converts to camel case.
- capitalize - Converts the first character of string to upper case and the remaining to lower case.
- lowerCase - Converts string, as space separated words, to lower case.
- lowerFirst - Converts the first character of string to lower case.
- pascalCase - Converts to pascal case.
- upperCase - Converts string, as space separated words, to upper case.
- upperFirst - Converts the first character of string to upper case.
Testing
yarn test
Contributing
- ⇄ Pull requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.