https://github.com/ezavile/postcss-text-transform

A PostCSS plugin to transform the text
https://github.com/ezavile/postcss-text-transform

capitalize lowercase postcss postcss-plugin text text-transformations transform uppercase

Last synced: about 2 months ago
JSON representation

A PostCSS plugin to transform the text

• Host: GitHub
• URL: https://github.com/ezavile/postcss-text-transform
• Owner: ezavile
• License: mit
• Archived: true
• Created: 2017-05-23T02:29:36.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-02-09T04:37:32.000Z (almost 4 years ago)
• Last Synced: 2024-09-25T23:25:41.486Z (about 2 months ago)
• Topics: capitalize, lowercase, postcss, postcss-plugin, text, text-transformations, transform, uppercase
• Language: TypeScript
• Homepage:
• Size: 46.9 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[DEPRECATED] - Use [@postcss-plugins/text-transform](https://github.com/ezavile/postcss-plugins/tree/master/packages/text-transform) instead

# postcss-text-transform

[![Travis](https://img.shields.io/travis/ezavile/postcss-text-transform.svg?style=flat-square)](https://travis-ci.org/ezavile/postcss-text-transform)

[![Codecov](https://img.shields.io/codecov/c/github/ezavile/postcss-text-transform.svg?style=flat-square)](https://codecov.io/gh/ezavile/postcss-text-transform)

[![npm](https://img.shields.io/npm/v/postcss-text-transform.svg?style=flat-square)](https://www.npmjs.com/package/postcss-text-transform)

[![MIT License](https://img.shields.io/npm/l/postcss-text-transform.svg?style=flat-square)](http://opensource.org/licenses/MIT)

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**

```css

.u {

  @each $color in green, yellow, red {

    @text-transform $color, upperFirst, $colorTransformed {

      &-bg$(colorTransformed) {

        background-color: $color;

      }

    }

  }

}

```

And the plugin will give you:

```css

.u-bgGreen {

  background-color: green

}

.u-bgYellow {

  background-color: yellow

}

.u-bgRed {

  background-color: red

}

```

## Usage

### JavaScript

```javascript

postcss([

   require('postcss-text-transform')

]);

```

## TypeScript

```js

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

postcss([ postcssTextTransform() ]);

```

```css

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

```javascript

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]: https://github.com/postcss/postcss

[postcss-each]: https://github.com/outpunk/postcss-each

[postcss-cssnext]: https://github.com/MoOx/postcss-cssnext

[MIT License]: https://github.com/ezavile/postcss-typescript-css/blob/master/LICENSE