@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.

MIT License

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.1.2 (2021-02-25)

Bug Fixes

• text-transform: point to declaration file (7a2302a)

0.1.1 (2021-02-09)

Note: Version bump only for package @postcss-plugins/text-transform

0.1.0 (2020-10-01)

Features

• text-transform: add plugin code (6354222)