https://github.com/remorses/split-classnames
Split long className attributes in jsx files
https://github.com/remorses/split-classnames
Last synced: 9 months ago
JSON representation
Split long className attributes in jsx files
- Host: GitHub
- URL: https://github.com/remorses/split-classnames
- Owner: remorses
- Created: 2021-10-30T16:19:36.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-25T15:03:26.000Z (over 3 years ago)
- Last Synced: 2025-04-23T01:18:16.512Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.09 MB
- Stars: 23
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Splits long className attributes to make them more readable
Subscribe to my [Newsletter](https://xmorse.xyz) if you want to get notified about other cool projects and updates.
## Example
The following code
```tsx
function Component() {
return (
)
}
```
becomes
```tsx
import classNames from 'classnames'
function Component() {
return (
)
}
```
## Usage as a cli
```sh
npm i -g split-classnames
# split classnames on all js files in the src directory
split-classnames --dry --max 30 'src/**'
```
## Usage as an eslint plugin
Install the plugin:
```sh
npm i -D eslint-plugin-split-classnames
```
Add the plugin to your eslint config:
```json
// .eslintrc.json
{
"plugins": ["split-classnames"],
"rules": {
"split-classnames/split-classnames": [
"error",
{
"maxClassNameCharacters": 40,
"functionName": "classnames"
}
]
}
}
```
Then run eslint with `--fix` to split long classnames
```sh
eslint --fix ./src
```
## Features
- Works bot on typescript and javascript jsx
- Works on string literals (`className='something'`)
- Works on template literals (`className={`something ${anotherClass}`}`)
- Works on existing classnames calls (`className={clsx('very long classNames are slitted in groups')}`)
- Regroups already existing classnames calls
- Sorts the classes for tailwind (variants like `sm:` and `lg:` are put last)
## Sponsors
[**Notaku**](https://notaku.website)
[](https://notaku.website)