yuschick / stylelint-plugin-defensive-css Goto Github PK

Please support stylelint 16.0.0, the big one

Now the code is in ESM instead of CommonJS

Very good

Stylelint team published docs to know how to migrate with ease.

No need to keep support to commons from now on.

Style lint 16 is not allowed in your package.json. remove this restriction to

Is your feature request related to a problem? Please describe.
Enabling the CSS custom property fallback rule can be great, but it would be nice to be able to specify global or theme-wide properties to ignore.

Describe the solution you'd like
Extend the custom-property-fallbacks option for something like.

{ "custom-property-fallbacks": [true, { ignore: [RegEx Patterns] }] }

Describe alternatives you've considered
I've also considered a much more restrictive approach specific to custom properties which are namespaced.

{ "custom-property-fallbacks": [true, { namespace: 'noi' }] }

While this would ignore any custom property which begins with the --noi namespace, this approach feels too limiting. What if we wanted to ignore all properties with weight in the name. We wouldn't be able to target anything other than the startsWith() method of the property. The proposed solution of regex patterns would provide greate flexibility.

Additional context
Quality of life improvement. Custom property fallbacks are best when properties can be undefined. But normally when dealing with theme.wide values, they're going to exist at the top level :root through a provider, for example. These globals should have the ability to be bypassed.

Describe the bug
Error Separate different vendor prefixes into their own rules. is showing on SASS that has no vendor prefixes:

.menu-item {

	&.menu-item-has-children::after,
	&.menu-item-has-grandchildren::after {
		content: '';
		position: absolute;
		top: 24px;
		right: 30px;
		width: 18px;
		height: 18px;
		background-size: contain;
	}
	
}

To Reproduce
Steps to reproduce the behavior:

1. Add the SASS code above into a sass/scss file
2. Run Stylelint with use-defensive-css plugin
3. Notice errors

Expected behavior
No vendor error(s).

Desktop (please complete the following information):

• OS: macOS
• Browser: NA
• Version: Sonoma 14.2

Additional context

package.json

{
  "devDependencies": {
    "stylelint": "^15.10.2",
    "stylelint-config-standard": "^34.0.0",
    "stylelint-config-standard-scss": "^11.1.0",
    "stylelint-high-performance-animation": "^1.9.0",
    "stylelint-order": "^6.0.3",
    "stylelint-plugin-defensive-css": "^0.9.1",
    "stylelint-stylistic": "^0.4.3"
  }

Describe the bug
Does not accept ( hover: hover ). Removing spaces resolves: (hover: hover).

To Reproduce
Steps to reproduce the behavior:

1. Wrap style in @media ( hover: hover ) {
2. Run Stylelint: notice error
3. Change to @media (hover: hover) {
4. Run Stylelint: notice no error

Expected behavior
Be opinionated about the rule, and agnostic about coding styles.

Screenshots

Desktop (please complete the following information):

• macOS
• NA
• NA

Smartphone (please complete the following information):

• Device: NA
• OS: NA
• Browser NA
• Version NA

Additional context
None

Is your feature request related to a problem? Please describe.

One of the most impactful Defensive CSS practices is to be aware of and avoid fixed element sizes where needed. There are some element's that can have a fixed size, but a lot of elements should avoid this from happening.

Ideally, this plugin would warn against fixed sizes.

Describe the solution you'd like

The plugin would need to check for several properties and/or variations. For example:

• if an element has only a height/width or block/inline-size value
  • if this property does not have a value that contains a keyword like 'clamp()', 'max()' or 'min()'
  • also, if this property does not have a custom property value that maps to a dynamic element size
  • or an @ property that maps to a fluid size

Additional context

This rule should support 'ignore'ing specific properties. Like, a codebase may want warned about fixed heights, but want to ignore fixed widths. Likewise with ignoring specific values. A codebase may want to ignore their own branded custom properties like var(--brand-*) from being warned.

This should also support a threshold, like don't warn on any fixed values below 480, for example.

Describe the bug
The current implementation of the custom property fallbacks check is to search for a comma in the same declaration value as a var. However, this fails to report for some shorthand properties or verbose style values.

To Reproduce
The following style should be flagged as an error, but it passes.

grid-template: var(--page-header-size) 1fr / max-content minmax(0, 1fr) max-content;

This style is passing the check because of the comma in the minmax function.

Expected behavior
The page-heasder-size custom property should be flagged.

Screenshots

Is there a way I can adjust the error message (per project) so that the default value for flex-wrap is included? I expect that junior devs on my team will see the error, and add flex-wrap: wrap without thinking, just to resolve the error.

If not, I may have to run without the rule in place, to prevent other problems.

Is your feature request related to a problem? Please describe.
Create a rule to enforce the "Scrollbar gutter" rule from the Defensive CSS website.

Describe the solution you'd like
This rule should be applied to any block where a overflow value is set to either scroll or auto

Hi
I tried this plugin with vendor-prefix-grouping rule, but it turns out it's giving warning even for pseudo-elements in CSS.
Shouldn't it only report where vendor-prefixes are being used?

Attaching screenshots:

Stylelintrc

Describe the bug
When I define accidental-hover in rules I get error. When I remove it everything is fine.

Expected behavior
No output errors.

Screenshots
error with accidental-hover: true

output without accidental-hover: true

scripts in package.json

Additional context
I use stylelint with styled-components, stylelint-config-idiomatic-order

.stylelintrc

{
	"extends": "stylelint-config-idiomatic-order",
	"customSyntax": "postcss-styled-syntax",
	"plugins": ["stylelint-plugin-defensive-css"],
	"rules": {
		"declaration-empty-line-before": [
			"always",
			{
				"ignore": [
					"after-comment",
					"after-declaration",
					"first-nested",
					"inside-single-line-block"
				]
			}
		],
		"plugin/use-defensive-css": [
			true,
			{
				"background-repeat": true,
				"custom-property-fallbacks": false,
				"flex-wrapping": true,
				"vendor-prefix-grouping": false,
				"accidental-hover": true,
				"scroll-chaining": true
			}
		]
	}
}

Describe the bug
When using the flex-flow property and defining it to column, the flex-wrapping warning is still shown. However, when a flex in in any form of a column, the warning shouldn't be triggered.

To Reproduce

.content {
  display: flex;
  flex-flow: column;
}

.content-reverse {
  display: flex;
  flex-flow: column wrap;
}

Expected behavior
When using flex-flow there should only be a warning from Stylelint if the direction is set to row and no wrap shorthand value is provided.

/* No linter warning */
.content {
  display: flex;
  flex-flow: column; 
}

/* No linter warning */
.content {
  display: flex;
  flex-flow: row wrap; 
  flex-flow: row nowrap; 
  flex-flow: row wrap-reverse; 
}

/* No linter warning */
.content {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap, wrap-reverse, nowrap;
}

/* Yes linter warning */
.content {
  display: flex;
  flex-flow: row; 
}