diff --git a/docs/rules/no-arbitrary-value.md b/docs/rules/no-arbitrary-value.md index 84f1e861..a12e9f1e 100644 --- a/docs/rules/no-arbitrary-value.md +++ b/docs/rules/no-arbitrary-value.md @@ -28,6 +28,7 @@ Examples of **correct** code for this rule: "config": |, "skipClassAttribute": , "tags": Array, + "whitelist": Array, }] ... ``` @@ -72,6 +73,14 @@ Optional, if you are using tagged templates, you should provide the tags in this Optional, can be used to support custom attributes +### `whitelist` (default: `[]`) + +The `whitelist` is empty by default but you can add custom regular expressions to this array to avoid getting warnings or errors while using arbitrary values for certain tailwind classes. + +For example, if we want to whitelist 'text-' classes for pixel values only and all 'h-" classes the `whitelist` options should be set to: + +- `['text-\\[\\d*px]', 'h-\\[[^\\]]*]']` + ## Further Reading This rule will not fix the issue for you because it cannot guess the correct class candidate. diff --git a/lib/rules/no-arbitrary-value.js b/lib/rules/no-arbitrary-value.js index 71cf4595..f9e99e19 100644 --- a/lib/rules/no-arbitrary-value.js +++ b/lib/rules/no-arbitrary-value.js @@ -54,6 +54,11 @@ module.exports = { items: { type: 'string', minLength: 0 }, uniqueItems: true, }, + whitelist: { + type: 'array', + items: { type: 'string', minLength: 0 }, + uniqueItems: true, + }, }, }, ], @@ -65,6 +70,7 @@ module.exports = { const tags = getOption(context, 'tags'); const twConfig = getOption(context, 'config'); const classRegex = getOption(context, 'classRegex'); + const whitelist = getOption(context, 'whitelist'); const mergedConfig = customConfig.resolve(twConfig); @@ -133,7 +139,8 @@ module.exports = { const forbidden = []; classNames.forEach((cls, idx) => { const parsed = groupUtil.parseClassname(cls, [], mergedConfig, idx); - if (/\[.*\]/i.test(parsed.body)) { + const whitelistIdx = groupUtil.getGroupIndex(parsed.body, whitelist, mergedConfig.separator); + if (whitelistIdx < 0 && /\[.*\]/i.test(parsed.body)) { forbidden.push(parsed.name); } }); diff --git a/tests/lib/rules/no-arbitrary-value.js b/tests/lib/rules/no-arbitrary-value.js index 0a438e0d..4cf6b696 100644 --- a/tests/lib/rules/no-arbitrary-value.js +++ b/tests/lib/rules/no-arbitrary-value.js @@ -163,7 +163,20 @@ ruleTester.run("no-arbitrary-value", rule, { code: `
Dynamic viewport units
`, errors: generateErrors(["min-h-[75dvh]"]), }, - ...(['myTag', 'myTag.subTag', 'myTag(SomeComponent)'].map(tag => ({ + { + code: ` +