eslint-plugin-tailwindcss
Advanced tools
Comparing version 1.6.0 to 1.7.0
@@ -35,3 +35,3 @@ # Use a consistent orders for the Tailwind CSS classnames, based on property then on variants (tailwindcss/classnames-order) | ||
### `callees` (default: `["ctl"]`) | ||
### `callees` (default: `["classnames", "clsx", "ctl"]`) | ||
@@ -38,0 +38,0 @@ If you use some utility library like [@netlify/classnames-template-literals](https://github.com/netlify/classnames-template-literals), you can add its name to the list to make sure it gets parsed by this rule. |
@@ -33,3 +33,3 @@ # Avoid contradicting Tailwind CSS classnames (e.g. "w-3 w-5") (no-contradicting-classname) | ||
### `callees` (default: `["ctl"]`) | ||
### `callees` (default: `["classnames", "clsx", "ctl"]`) | ||
@@ -36,0 +36,0 @@ If you use some utility library like [@netlify/classnames-template-literals](https://github.com/netlify/classnames-template-literals), you can add its name to the list to make sure it gets parsed by this rule. |
@@ -33,3 +33,3 @@ # Detect classnames which do not belong to Tailwind CSS (no-custom-classname) | ||
### `callees` (default: `["ctl"]`) | ||
### `callees` (default: `["classnames", "clsx", "ctl"]`) | ||
@@ -60,6 +60,10 @@ If you use some utility library like [@netlify/classnames-template-literals](https://github.com/netlify/classnames-template-literals), you can add its name to the list to make sure it gets parsed by this rule. | ||
The `whitelist` options should be set to `['skin\-(summer|xmas)', 'custom\-[1-3]']` | ||
The `whitelist` options should be set to: | ||
- `['skin\\-(summer|xmas)', 'custom\\-[1-3]']` | ||
- or if you don't like regular expressions (but you should): | ||
`['skin\\-summer', 'skin\\-xmas', 'custom\\-1', 'custom\\-2', 'custom\\-3']` | ||
## Further Reading | ||
This rule will not fix the issue but will let you know about the issue. |
@@ -8,3 +8,2 @@ /** | ||
const docsUrl = require('../util/docsUrl'); | ||
const defaultGroups = require('../config/groups').groups; | ||
const customConfig = require('../util/customConfig'); | ||
@@ -15,2 +14,3 @@ const astUtil = require('../util/ast'); | ||
const removeDuplicatesFromArray = require('../util/removeDuplicatesFromArray'); | ||
const getOption = require('../util/settings'); | ||
@@ -68,8 +68,7 @@ //------------------------------------------------------------------------------ | ||
create: function (context) { | ||
const configuration = context.options[0] || {}; | ||
const callees = configuration.callees || ['ctl']; | ||
const twConfig = configuration.config || 'tailwind.config.js'; | ||
const groupsConfig = configuration.groups || defaultGroups; | ||
const prependCustom = configuration.prependCustom || false; | ||
const removeDuplicates = !(configuration.removeDuplicates === false); | ||
const callees = getOption(context, 'callees'); | ||
const twConfig = getOption(context, 'config'); | ||
const groupsConfig = getOption(context, 'groups'); | ||
const prependCustom = getOption(context, 'prependCustom'); | ||
const removeDuplicates = getOption(context, 'removeDuplicates'); | ||
@@ -76,0 +75,0 @@ const mergedConfig = customConfig.resolve(twConfig); |
@@ -14,3 +14,3 @@ /** | ||
const removeDuplicatesFromArray = require('../util/removeDuplicatesFromArray'); | ||
const resolveConfig = require('tailwindcss/resolveConfig'); | ||
const getOption = require('../util/settings'); | ||
@@ -56,5 +56,4 @@ //------------------------------------------------------------------------------ | ||
create: function (context) { | ||
const configuration = context.options[0] || {}; | ||
const callees = configuration.callees || ['ctl']; | ||
const twConfig = configuration.config || 'tailwind.config.js'; | ||
const callees = getOption(context, 'callees'); | ||
const twConfig = getOption(context, 'config'); | ||
@@ -61,0 +60,0 @@ const mergedConfig = customConfig.resolve(twConfig); |
@@ -14,2 +14,3 @@ /** | ||
const removeDuplicatesFromArray = require('../util/removeDuplicatesFromArray'); | ||
const getOption = require('../util/settings'); | ||
@@ -60,6 +61,5 @@ //------------------------------------------------------------------------------ | ||
create: function (context) { | ||
const configuration = context.options[0] || {}; | ||
const callees = configuration.callees || ['ctl']; | ||
const twConfig = configuration.config || 'tailwind.config.js'; | ||
const whitelist = configuration.whitelist || []; | ||
const callees = getOption(context, 'callees'); | ||
const twConfig = getOption(context, 'config'); | ||
const whitelist = getOption(context, 'whitelist'); | ||
@@ -66,0 +66,0 @@ const mergedConfig = customConfig.resolve(twConfig); |
{ | ||
"name": "eslint-plugin-tailwindcss", | ||
"version": "1.6.0", | ||
"version": "1.7.0", | ||
"description": "Rules enforcing best practices while using Tailwind CSS", | ||
@@ -25,3 +25,3 @@ "keywords": [ | ||
"requireindex": "~1.1.0", | ||
"tailwindcss": "^2.1.1" | ||
"tailwindcss": "^2.1.2" | ||
}, | ||
@@ -28,0 +28,0 @@ "devDependencies": { |
@@ -7,3 +7,3 @@ # eslint-plugin-tailwindcss | ||
Rules enforcing best practices and consistency using [Tailwind CSS](https://tailwindcss.com/) v2.1.1 | ||
Rules enforcing best practices and consistency using [Tailwind CSS](https://tailwindcss.com/) v2.1.2 | ||
@@ -13,3 +13,3 @@ > **🎉 Since v1.5.0, the plugin will parse the `tailwind.config.js` file and use the correct values based on your own settings.** | ||
> 👍 Most of [the new JIT mode features](https://tailwindcss.com/docs/just-in-time-mode#new-features) are also supported. | ||
![detected-errors](https://user-images.githubusercontent.com/704026/117103443-ac1b0780-ad7a-11eb-9c17-41f0de3e4dc4.png) | ||
@@ -48,5 +48,5 @@ | ||
"rules": { | ||
"tailwindcss/classnames-order": 2, | ||
"tailwindcss/no-custom-classname": 2, | ||
"tailwindcss/no-contradicting-classname": 2 | ||
"tailwindcss/classnames-order": "warn", | ||
"tailwindcss/no-custom-classname": "warn", | ||
"tailwindcss/no-contradicting-classname": "error" | ||
} | ||
@@ -58,2 +58,33 @@ } | ||
## Optional shared settings | ||
Most rules shares the same settings, instead of duplicating some options... | ||
You should also specify settings that will be shared across all the plugin rules. | ||
[More about eslint shared settings](https://eslint.org/docs/user-guide/configuring#adding-shared-settings). | ||
All these settings have nice default values that are explained in each rules' documentation. I'm listing them in the code below just to show them. | ||
```json | ||
{ | ||
"settings": { | ||
"tailwindcss": { | ||
// These are the default values but feel free to customize | ||
"callees": ["classnames", "clsx", "ctl"], | ||
"config": "tailwind.config.js", | ||
"groups": defaultGroups, // imported from groups.js | ||
"prependCustom": false, | ||
"removeDuplicates": true, | ||
"whitelist": [] | ||
} | ||
} | ||
} | ||
``` | ||
The plugin will look for each setting value in this order and stop looking as soon as it finds the settings: | ||
1. In the rule option argument (rule level) | ||
2. In the shared settings (plugin level) | ||
3. Default value of the requested setting (plugin level)... | ||
## Supported Rules | ||
@@ -64,3 +95,3 @@ | ||
- [`classnames-order`](docs/rules/classnames-order.md): order classnames by target properties then by variants (`[size:][theme:][state:]`) | ||
- [`no-custom-classname`](docs/rules/no-custom-classname.md): only allow classnames from Tailwind CSS | ||
- [`no-custom-classname`](docs/rules/no-custom-classname.md): only allow classnames from Tailwind CSS and the values from the `whitelist` option | ||
- [`no-contradicting-classname`](docs/rules/no-contradicting-classname.md): e.g. avoid `p-2 p-3`, different Tailwind CSS classnames (`pt-2` & `pt-3`) but targeting the same property several times for the same variant. | ||
@@ -67,0 +98,0 @@ |
@@ -99,2 +99,23 @@ /** | ||
}, | ||
{ | ||
code: `<div class="opts-w-12 lg:opts-w-6">Options override shared settings</div>`, | ||
options: [ | ||
{ | ||
config: { prefix: "opts-" }, | ||
}, | ||
], | ||
settings: { | ||
tailwindcss: { | ||
config: { prefix: "sttgs-" }, | ||
}, | ||
}, | ||
}, | ||
{ | ||
code: `<div class="sttgs-w-12 lg_sttgs-w-6">Use settings</div>`, | ||
settings: { | ||
tailwindcss: { | ||
config: { prefix: "sttgs-", separator: "_" }, | ||
}, | ||
}, | ||
}, | ||
], | ||
@@ -101,0 +122,0 @@ invalid: [ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
99936
30
2559
110
Updatedtailwindcss@^2.1.2