Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/keplersj/jest-runner-stylelint
Stylelint runner for Jest
https://github.com/keplersj/jest-runner-stylelint
css jest less scss stylelint
Last synced: about 2 months ago
JSON representation
Stylelint runner for Jest
- Host: GitHub
- URL: https://github.com/keplersj/jest-runner-stylelint
- Owner: keplersj
- Created: 2017-11-14T04:17:10.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-06-18T02:21:26.000Z (3 months ago)
- Last Synced: 2024-07-19T00:44:23.846Z (2 months ago)
- Topics: css, jest, less, scss, stylelint
- Language: JavaScript
- Homepage: https://keplersj.com/projects/jest-runner-stylelint/
- Size: 2.52 MB
- Stars: 20
- Watchers: 3
- Forks: 10
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-jest - jest-runner-stylelint
README
[](https://travis-ci.org/keplersj/jest-runner-stylelint)
[](https://badge.fury.io/js/jest-runner-stylelint)
[](https://codecov.io/gh/keplersj/jest-runner-stylelint)
[](https://github.com/jest-community/awesome-jest)
jest-runner-stylelint
Stylelint runner for Jest
## Usage
### Install
Install `jest`, `jest-runner-stylelint`, and `stylelint`
```bash
npm install --save-dev jest jest-runner-stylelint stylelint
# or with yarn
yarn add --dev jest jest-runner-stylelint stylelint
```
### Configure stylelint
You must have stylelint configured before it'll lint any of your files. Please follow the [stylelint documentation on configuration](https://stylelint.io/user-guide/configuration) to create your config.
### Add it to your Jest config
#### Using Built-in Preset
This package includes a [Jest preset](https://jestjs.io/docs/en/configuration#preset-string) which configures Jest to run stylelint on all files supported by styleint. To use it set the following in your package.json:
```json
{
"jest": {
"preset": "jest-runner-stylelint"
}
}
```
or jest.config.js:
```js
module.exports = {
preset: "jest-runner-stylelint",
};
```
#### Manually
In your `package.json`
```json
{
"jest": {
"runner": "stylelint",
"moduleFileExtensions": [
"css",
"sass",
"scss",
"less",
"sss",
"htm",
"html",
"md",
"markdown",
"mdx",
"js",
"jsx",
"ts",
"tsx",
"vue"
],
"testMatch": [
"**/*.css",
"**/*.sass",
"**/*.scss",
"**/*.less",
"**/*.sss",
"**/*.htm",
"**/*.html",
"**/*.md",
"**/*.markdown",
"**/*.mdx",
"**/*.js",
"**/*.jsx",
"**/*.ts",
"**/*.tsx",
"**/*.vue"
]
}
}
```
Or in `jest.config.js`
```js
module.exports = {
runner: "stylelint",
moduleFileExtensions: [
"css",
"sass",
"scss",
"less",
"sss",
"htm",
"html",
"md",
"markdown",
"mdx",
"js",
"jsx",
"ts",
"tsx",
"vue",
],
testMatch: [
"**/*.css",
"**/*.sass",
"**/*.scss",
"**/*.less",
"**/*.sss",
"**/*.htm",
"**/*.html",
"**/*.md",
"**/*.markdown",
"**/*.mdx",
"**/*.js",
"**/*.jsx",
"**/*.ts",
"**/*.tsx",
"**/*.vue",
],
};
```
### Run Jest
```bash
npx jest
# or with yarn
yarn jest
```
## Toggle `--fix` in watch mode
`jest-stylelint-runner` comes with a watch plugin that allows you to toggle the `--fix` value while in watch mode without having to update your configuration.
To use this watch plugin simply add this to your Jest configuration.
```js
{
watchPlugins: ['jest-runner-stylelint/watch-fix'],
}
```
After this run Jest in watch mode and you will see the following line in your watch usage menu.
```
› Press F to override Stylelint --fix.
```
## Options
This project uses [cosmiconfig](https://github.com/davidtheclark/cosmiconfig), so you can provide config via:
- a `jest-runner-stylelint` property in your `package.json`
- a `jest-runner-stylelint.config.js` JS file
- a `.jest-runner-stylelintrc` JSON file
In `package.json`
```json
{
"jest-runner-stylelint": {
"cliOptions": {
// Options here
}
}
}
```
or in `jest-runner-stylelint.config.js`
```js
module.exports = {
cliOptions: {
// Options here
},
};
```
### cliOptions
Follow the [stylelint documentation on configuration](https://stylelint.io/user-guide/cli#options) to create your cli options.