[CSS] Different color for inheritable properties

[titoBouzout]

Expected behavior

It would be nice to display default inheritable CSS properties in a different color.

Custom Elements / Web Elements are becoming a thing, and I was pretty confused by seeing that inheritable properties are not scoped. I got the following explanation

I think what’s confusing here and is commonly not understood is that style encapsulation affects the cascade and not inheritance.

That made me think that it would be cool to differentiate default inheritable CSS properties. It will help to consider that inheritable properties will change how Custom Elements / Web Elements are displayed

[deathaxe]

Predefined lists of known properties and/or values require significant maintanance efforts, especially in fast moving syntaxes such as CSS. That's not desirable.

[titoBouzout]

Isn't it just adding more to a list?

[titoBouzout]

This works for me

--- a/CSS.sublime-syntax
+++ b/CSS.sublime-syntax
@@ -1477,6 +1477,7 @@
 
   property-identifiers:
     # specific properties with special treatment
+    - include: custom-inheritable
     - include: counter-properties
     - include: font-family-properties
     - include: font-properties
@@ -1489,6 +1490,12 @@
   # https://drafts.csswg.org/css-variables/#typedef-custom-property
   custom-properties:
     - match: '--'
+      push:
+        - property-value
+        - custom-property-content
+
+  custom-inheritable:
+    - match: 'color|direction|font-family|font-kerning|font-optical-sizing|font-palette|font-size|font-size-adjust|font-stretch|font-style|font-variant-ligatures|font-variant-caps|font-variant-east-asian|font-variant-numeric|font-variant-alternates|font-weight|font-synthesis-weight|font-synthesis-style|font-synthesis-small-caps|font-feature-settings|font-variation-settings|font-variant-position|-webkit-font-smoothing|forced-color-adjust|-webkit-locale|math-depth|text-orientation|-webkit-text-orientation|writing-mode|-webkit-writing-mode|text-rendering|accent-color|border-collapse|caption-side|caret-color|clip-rule|color-interpolation|color-interpolation-filters|color-rendering|color-scheme|cursor|dominant-baseline|empty-cells|fill|fill-opacity|fill-rule|hyphenate-limit-chars|hyphens|image-rendering|image-orientation|dynamic-range-limit|letter-spacing|line-height|list-style-image|list-style-position|list-style-type|marker-end|marker-mid|marker-start|math-shift|math-style|orphans|overflow-wrap|paint-order|pointer-events|quotes|scrollbar-color|shape-rendering|speak|stroke|stroke-dasharray|stroke-dashoffset|stroke-linecap|stroke-linejoin|stroke-miterlimit|stroke-opacity|stroke-width|tab-size|text-align|text-align-last|text-anchor|text-autospace|text-combine-upright|text-decoration-skip-ink|text-indent|text-shadow|text-size-adjust|text-spacing-trim|text-transform|text-underline-offset|text-underline-position|visibility|-webkit-border-horizontal-spacing|-webkit-border-vertical-spacing|hyphenate-character|-webkit-line-break|line-break|-webkit-print-color-adjust|-webkit-rtl-ordering|-webkit-ruby-position|ruby-position|-webkit-tap-highlight-color|-webkit-text-combine|text-emphasis-color|text-emphasis-position|text-emphasis-style|-webkit-text-fill-color|-webkit-text-security|-webkit-text-stroke-color|-webkit-text-stroke-width|-webkit-user-modify|user-select|white-space-collapse|text-wrap|widows|word-break|word-spacing|-webkit-text-decorations-in-effect|-internal-visited-color|-internal-visited-caret-color|-internal-visited-fill|-internal-visited-stroke|-internal-visited-text-emphasis-color|-internal-visited-text-fill-color|-internal-visited-text-stroke-color|-internal-forced-color|-internal-forced-visited-color|-internal-empty-line-height'
       push:
         - property-value

I got the list from https://github.com/chromium/chromium/blob/main/third_party/blink/renderer/core/css/css_properties.json5
using this filter properties.data.filter(item=>item.inherited).map(item=>item.name)

[deathaxe]

Fixed lists of property names had been removed some commits ago to simplify maintanance. Be it automatable or not. There are no plans to add those back.

[titoBouzout]

@deathaxe is it possible to extend the syntax, so I can apply the change I made while also keeping the syntax from here up to date ? I am not sure if thats clear so will word it differently. The question is about trying to apply my changes on top of the default CSS syntax by just extending it

[deathaxe]

Sure. The only current downside is your extended syntax not being used for embedded syntaxes in HTML/... nor by other extensions such as Less or (up-comming SCSS).

This would require #3416 or alternatively sublimehq/sublime_text#5004