ezavile / postcss-text-transform

A PostCSS plugin to transform the text

[DEPRECATED] - Use @postcss-plugins/text-transform instead

postcss-text-transform

A PostCSS plugin to transform the text.

Installation

npm install postcss-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, $colorTransformed {
      &-bg$(colorTransformed) {
        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

JavaScript

postcss([
   require('postcss-text-transform')
]);

TypeScript

import * as postcssTextTransform from 'postcss-text-transform';

postcss([ postcssTextTransform() ]);

@text-transform $text, transformation, $textTransformed { ... }

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.
• upperCase - Converts string, as space separated words, to upper case.
• upperFirst - Converts the first character of string to upper case.

Testing

This will build scripts, run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.

npm test

See PostCSS docs for examples for your environment.

Contributing

• ⇄ Pull requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests (npm test).

MIT License

postcss-text-transform's Issues

plugin code

Create a rule to transform the text

.componentNameLowerFirst {
  @each $color in green, yellow, red {
    @textTransform $color, upperFirst, $colorTransformed {
      &--bg$(colorTransformed) {
        background-color: $color;
      }
    }
  }
}

result:

.componentNameUpperFirst--bgGreen {
   background-color: green
}

.componentNameUpperFirst--bgYellow {
   background-color: yellow
}

.componentNameUpperFirst--bgRed {
   background-color: red
}

type of transformation:

• capitalize
• camelCase
• lowerFirst
• lowerCase
• upperCase
• upperFirst

change the way to call the rule

right now we use @textTransform but it's considered a warning on stylelint
https://stylelint.io/user-guide/rules/at-rule-name-case/

So, we have to change to @text-transform

architecture

Add configuration files to start to code

Generate typescript declaration file

Be able to use the plugin with TypeScript

import * as postcssTextTransform from 'postcss-text-transform';

postcss([ postcssTextTransform() ]);

Create warning message when there are not commas between the params

@text-transform $text transformation $textTransformed {}

Throw a message because there are not commas