Enhance blocklist

[antfu]

Clear and concise description of the problem

Context: #3070 (comment)

Suggested solution

I think we could make blocklist:

• Accept a custom function
• Able to provide an additional meta
• Can be contributed by presets (so we could also have blocklist-only presets)
• Integrate with ESLint plugin

The interface I imagine:

blocklist: [
  'p-1', // plain string
  /$ma-(\d+)$/, // RegExp
  (selector) => { // custom string
    return selector.includes('foo')
  },
  [/$ma-(\d+)$/, { warn: true /* additional meta for this rule */ }], // print out warning
]

Open for discussions

Alternative

No response

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the README.md of using the package.
• Already used the Interactive Docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[texastoland]

This would solve the user complaint which is primarily autocompleting other styles and possibly enforcing a convention 🙌🏼 The meta would be for tools like ESLint right?

[louiss0]

I would like this feature. I wish it gave me access to the rules that were already being enforced.
That way I could write a condition that would allow me to check for duplicates.

[louiss0]

This would solve the user complaint which is primarily autocompleting other styles and possibly enforcing a convention 🙌🏼 The meta would be for tools like ESLint right?

These are all the differences between preset-windi and preset-uno that I could find.

Uno	Windi
ma-*	m-*
pa-*	p-
op-*	opacity
{bg| text| border}-{color}-{1-9}	{bg | text| border}-{color}-{50-900}
decoration	underline
b	border
of	overflow
position-{absolute | fixed}	{absolute | fixed| sticky}
flex-{basis|content|justify|items}-*	{basis|content|justify|items}-*
grid-{content|justify|items}-*	{content|justify|items}-*
trueGray	truegray
c-gray	text-gray*

c- stands for color.

I hope you can figure this out. The differences are too small for me to complain about. I can migrate and suck it up.

[antfu]

• 3392020
• 0956f35

These two features have been shipped, let me know if anything else is needed for your case.

[louiss0]

• 3392020
• 0956f35

These two features have been shipped, let me know if anything else is needed for your case.

If I threw an error in the blocklist function can the VSCode Extension Pick it up.

[louiss0]

This would solve the user complaint which is primarily autocompleting other styles and possibly enforcing a convention 🙌🏼 The meta would be for tools like ESLint right?

These are all the differences between preset-windi and preset-uno that I could find.

Uno Windi
ma-* m-*
pa-* p-
op-* opacity
{bg| text| border}-{color}-{1-9} {bg | text| border}-{color}-{50-900}
decoration underline
b border
of overflow
position-{absolute | fixed} {absolute | fixed| sticky}
flex-{basis|content|justify|items}-* {basis|content|justify|items}-*
grid-{content|justify|items}-* {content|justify|items}-*
trueGray truegray
c-gray text-gray*
c- stands for color.

I hope you can figure this out. The differences are too small for me to complain about. I can migrate and suck it up.

I solved the problem this this set of regex.

{
    blocklist: [
        /^(?:(?:m|p|b)a-)/,
        /^(?:(?:op|of|position|flex|case|grid|decoration|line-height|b|c)-)/,
        /^(?:bg|text|border|outline)-(?:[a-z]+[A-Z][a-z]+)/,
        /^(?:bg|text|border|outline)-(?:[a-z]+)-[1-9]$/,
        /^(?:object)-[a-z]{2}$/,
    ],

}

[texastoland]

Looks like he already started in 3392020 🙀

This isn't complete. For example Uno doesn't require the dash but TW does. Attributify also extracts rules like [ma~="4"] (I think). The best strategy will be to go rule by rule and write a filter for each. Then we can create preset-wind-strict with that blocklist.

[antfu]

Then we can create preset-wind-strict

Yes, probably. But no, as I mentioned, we don't have an interest in doing that officially, as it would require a lot of effort, creating duplications, and I don't really see the benefit.

[enkot]

@antfu It would be nice to support an additional message meta field so that it can be displayed in the warning/error.
For example:

blocklist: [
  [/^border-/, { message: 'use "b-[val]"' }]
]

But I'm not sure if it's possible to set a custom message in Eslint 👀

[antfu]

@enkot That sounds like a good idea. Would you like to implement it? We could later figure out how to pass it to ESLint