Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/winston0410/postcss-auto-text-indent
A PostCSS Sparrow plugin that helps you append `text-indent` to a selector when `letter-spacing` is found, in order to center words correctly.
https://github.com/winston0410/postcss-auto-text-indent
css postcss postcss-sparrow tailwindcss
Last synced: 4 days ago
JSON representation
A PostCSS Sparrow plugin that helps you append `text-indent` to a selector when `letter-spacing` is found, in order to center words correctly.
- Host: GitHub
- URL: https://github.com/winston0410/postcss-auto-text-indent
- Owner: winston0410
- Created: 2020-09-07T04:50:05.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-01-11T20:12:21.000Z (almost 3 years ago)
- Last Synced: 2024-05-21T11:50:53.499Z (6 months ago)
- Topics: css, postcss, postcss-sparrow, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 272 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PostCSS Sparrow Auto Text Indent
[](https://codeclimate.com/github/winston0410/postcss-auto-text-indent/maintainability) [](https://codeclimate.com/github/winston0410/postcss-auto-text-indent/test_coverage) [](https://snyk.io/test/github/winston0410/postcss-auto-text-indent?targetFile=package.json) [](https://www.codacy.com/manual/winston0410/postcss-auto-text-indent?utm_source=github.com&utm_medium=referral&utm_content=winston0410/postcss-auto-text-indent&utm_campaign=Badge_Grade)
A PostCSS Sparrow plugin that helps you append `text-indent` to a selector when `letter-spacing` is found, in order to center words correctly.
```css
/* Before transformations */
.foo {
letter-spacing: 10px;
}
```
```css
/* After transformations */
.foo {
letter-spacing: 10px;
text-indent: 10px;
}
```
## Why do I need this plugin?
Letter spacing is added to the **right** instead of **in between** characters, thus you will need to offset it with `text-indent` or `padding-left` in order to center it correctly with `text-align: center`.
This plugin helps you achieve this automatically, which is particularly useful if you use [Tailwind CSS](https://tailwindcss.com/), as you do not need to create a new utility class for `text-indent`.
## Installation
This plugin require you to use [PostCSS Sparrow](https://www.npmjs.com/package/postcss-sparrow) for matching with selectors you want.
Download both `postcss-sparrow` and this plugin through NPM.
```shell
npm i postcss-sparrow postcss-sparrow-auto-text-indent
```
Then import this plugin as the callback for [PostCSS Sparrow](https://www.npmjs.com/package/postcss-sparrow).
```javascript
//postcss.config.js
module.exports = {
plugins: [
//Other plugins...
require('postcss-sparrow')({
transformations: [
{
selectors: ['*'],
inclusion: true,
callbacks: [
require('postcss-sparrow-auto-text-indent')
]
}
]
})
]
}
```
## Full Code example
```css
/* Before transformations */
.foo {
letter-spacing: 10px;
}
```
```javascript
//postcss.config.js
module.exports = {
plugins: [
//Other plugins...
require('postcss-sparrow')({
transformations: [
{
selectors: ['*'],
inclusion: true,
callbacks: [
require('postcss-sparrow-auto-text-indent')
]
}
]
})
]
}
```
```css
/* After transformations */
.foo {
letter-spacing: 10px;
text-indent: 10px;
}
```
## Configuration
No configuration is needed for this plugin. To prevent this plugin from appending `text-indent` to a selector, you should config the `selectors` options of [PostCSS Sparrow](https://www.npmjs.com/package/postcss-sparrow).