@postcss-plugins/text-transform
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

@postcss-plugins/text-transform

npm

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.

MIT License

Package Sidebar

Install

npm i @postcss-plugins/text-transform

Weekly Downloads

2

Version

0.1.2

License

MIT

Unpacked Size

382 kB

Total Files

9

Last publish

Collaborators

  • ezavile