eslint-plugin-tailwindcss
Advanced tools
eslint-plugin-tailwindcss - npm Package Compare versions
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. | ||
|  | ||
@@ -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: [ |
New alerts
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
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by2.53%
99936
- Number of package files
- increased by3.45%
30
- Lines of code
- increased by1.91%
2559
- Number of lines in readme file
- increased by39.24%
110
Dependency changes
Updatedtailwindcss@^2.1.2