Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

inconsistency - why are some properties strict and disallow string while others include (string & {})? #195

Open
kitsunekyo opened this issue Aug 28, 2024 · 2 comments
Open

inconsistency - why are some properties strict and disallow string while others include (string & {})? #195

kitsunekyo opened this issue Aug 28, 2024 · 2 comments

Comments

@kitsunekyo
Copy link

We're using css-custom-properties in combination with typescript-design tokens quite heavily for our library. I have found that some properties include (string & {}), while others don't.

Comparing TextDecoration with TextTransform, the latter does not include (string & {}). Same for some other properties like TextWrap, TextRendering, TextJustify ...

Is there any logic as to why every other property supports strings while the others don't?
@kitsunekyo kitsunekyo changed the title inconsistency - why are some properties strict and disallow css-custom-properties while others arent? inconsistency - why are some properties strict and disallow string while others include (string & {})? Aug 28, 2024
@kitsunekyo
Copy link
Author

related to #176

My expectation would be to either include (string & {}) consistently (eg. in the Globals type) or provide some sort of configuration option / different import option to decide whether we want to allow strings or not

@kitsunekyo
Copy link
Author

kitsunekyo commented Aug 28, 2024 •
edited
Loading

removing all types that directly allow (string & {}), or indirectly allow it via for example DataType.Colors, DataType.FontStretchAbsolute, DataType.Position<TLength>, DataType.Dasharray<TLength>

we get 185 types that dont support (string & {}).

Details 


export namespace Property {
  export type All = Globals;
  export type Appearance = | Globals | DataType.CompatAuto | "auto" | "menulist-button" | "none" | "textfield";
  export type BackfaceVisibility = Globals | "hidden" | "visible";
  export type BorderBlockEndStyle = Globals | DataType.LineStyle;
  export type BorderBlockEndWidth = | Globals | DataType.LineWidth;
  export type BorderBlockStartStyle = Globals | DataType.LineStyle;
  export type BorderBlockStartWidth = | Globals | DataType.LineWidth;
  export type BorderBlockStyle = Globals | DataType.LineStyle;
  export type BorderBlockWidth = | Globals | DataType.LineWidth;
  export type BorderBottomStyle = Globals | DataType.LineStyle;
  export type BorderBottomWidth = | Globals | DataType.LineWidth;
  export type BorderCollapse = Globals | "collapse" | "separate";
  export type BorderInlineEndStyle = Globals | DataType.LineStyle;
  export type BorderInlineEndWidth = | Globals | DataType.LineWidth;
  export type BorderInlineStartStyle = Globals | DataType.LineStyle;
  export type BorderInlineStartWidth = | Globals | DataType.LineWidth;
  export type BorderInlineStyle = Globals | DataType.LineStyle;
  export type BorderInlineWidth = | Globals | DataType.LineWidth;
  export type BorderLeftStyle = Globals | DataType.LineStyle;
  export type BorderLeftWidth = | Globals | DataType.LineWidth;
  export type BorderRightStyle = Globals | DataType.LineStyle;
  export type BorderRightWidth = | Globals | DataType.LineWidth;
  export type BorderTopStyle = Globals | DataType.LineStyle;
  export type BorderTopWidth = | Globals | DataType.LineWidth;
  export type BoxAlign = | Globals | "baseline" | "center" | "end" | "start" | "stretch";
  export type BoxDecorationBreak = Globals | "clone" | "slice";
  export type BoxDirection = Globals | "inherit" | "normal" | "reverse";
  export type BoxLines = Globals | "multiple" | "single";
  export type BoxOrient = | Globals | "block-axis" | "horizontal" | "inherit" | "inline-axis" | "vertical";
  export type BoxPack = Globals | "center" | "end" | "justify" | "start";
  export type BoxSizing = Globals | "border-box" | "content-box";
  export type BreakAfter = | Globals | "all" | "always" | "auto" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | "column" | "left" | "page" | "recto" | "region" | "right" | "verso";
  export type BreakBefore = | Globals | "all" | "always" | "auto" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | "column" | "left" | "page" | "recto" | "region" | "right" | "verso";
  export type BreakInside = | Globals | "auto" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region";
  export type CaptionSide = | Globals | "block-end" | "block-start" | "bottom" | "inline-end" | "inline-start" | "top";
  export type CaretShape = Globals | "auto" | "bar" | "block" | "underscore";
  export type Clear = | Globals | "both" | "inline-end" | "inline-start" | "left" | "none" | "right";
  export type PrintColorAdjust = Globals | "economy" | "exact";
  export type ColumnFill = Globals | "auto" | "balance" | "balance-all";
  export type ColumnSpan = Globals | "all" | "none";
  export type ColumnWidth = | Globals | TLength | "auto";
  export type ContainerType = Globals | "inline-size" | "normal" | "size";
  export type ContentVisibility = Globals | "auto" | "hidden" | "visible";
  export type Direction = Globals | "ltr" | "rtl";
  export type EmptyCells = Globals | "hide" | "show";
  export type FlexDirection = | Globals | "column" | "column-reverse" | "row" | "row-reverse";
  export type FlexWrap = Globals | "nowrap" | "wrap" | "wrap-reverse";
  export type Float = | Globals | "inline-end" | "inline-start" | "left" | "none" | "right";
  export type FontKerning = Globals | "auto" | "none" | "normal";
  export type FontOpticalSizing = Globals | "auto" | "none";
  export type FontSmooth = | Globals | DataType.AbsoluteSize | TLength | "always" | "auto" | "never";
  export type FontSynthesisPosition = Globals | "auto" | "none";
  export type FontSynthesisSmallCaps = Globals | "auto" | "none";
  export type FontSynthesisStyle = Globals | "auto" | "none";
  export type FontSynthesisWeight = Globals | "auto" | "none";
  export type FontVariantCaps = | Globals | "all-petite-caps" | "all-small-caps" | "normal" | "petite-caps" | "small-caps" | "titling-caps" | "unicase";
  export type FontVariantEmoji = | Globals | "emoji" | "normal" | "text" | "unicode";
  export type FontVariantPosition = Globals | "normal" | "sub" | "super";
  export type FontWeight = | Globals | DataType.FontWeightAbsolute | "bolder" | "lighter";
  export type ForcedColorAdjust = Globals | "auto" | "none";
  export type GridColumnEnd = Globals | DataType.GridLine;
  export type GridColumnStart = Globals | DataType.GridLine;
  export type GridRowEnd = Globals | DataType.GridLine;
  export type GridRowStart = Globals | DataType.GridLine;
  export type Hyphens = Globals | "auto" | "manual" | "none";
  export type ImageRendering = | Globals | "-moz-crisp-edges" | "-webkit-optimize-contrast" | "auto" | "crisp-edges" | "pixelated";
  export type ImeMode = | Globals | "active" | "auto" | "disabled" | "inactive" | "normal";
  export type InputSecurity = Globals | "auto" | "none";
  export type Isolation = Globals | "auto" | "isolate";
  export type LetterSpacing = | Globals | TLength | "normal";
  export type LineBreak = | Globals | "anywhere" | "auto" | "loose" | "normal" | "strict";
  export type LineHeightStep = Globals | TLength;
  export type ListStylePosition = Globals | "inside" | "outside";
  export type MarginTrim = Globals | "all" | "in-flow" | "none";
  export type MaskBorderMode = Globals | "alpha" | "luminance";
  export type MaskType = Globals | "alpha" | "luminance";
  export type MathShift = Globals | "compact" | "normal";
  export type MathStyle = Globals | "compact" | "normal";
  export type MixBlendMode = Globals | DataType.BlendMode | "plus-lighter";
  export type ObjectFit = | Globals | "contain" | "cover" | "fill" | "none" | "scale-down";
  export type OutlineOffset = Globals | TLength;
  export type OutlineWidth = | Globals | DataType.LineWidth;
  export type OverflowAnchor = Globals | "auto" | "none";
  export type OverflowBlock = | Globals | "auto" | "clip" | "hidden" | "scroll" | "visible";
  export type OverflowClipBox = Globals | "content-box" | "padding-box";
  export type OverflowInline = | Globals | "auto" | "clip" | "hidden" | "scroll" | "visible";
  export type OverflowWrap = Globals | "anywhere" | "break-word" | "normal";
  export type OverflowX = | Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible";
  export type OverflowY = | Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible";
  export type Overlay = Globals | "auto" | "none";
  export type OverscrollBehaviorBlock = Globals | "auto" | "contain" | "none";
  export type OverscrollBehaviorInline = Globals | "auto" | "contain" | "none";
  export type OverscrollBehaviorX = Globals | "auto" | "contain" | "none";
  export type OverscrollBehaviorY = Globals | "auto" | "contain" | "none";
  export type PageBreakAfter = | Globals | "always" | "auto" | "avoid" | "left" | "recto" | "right" | "verso";
  export type PageBreakBefore = | Globals | "always" | "auto" | "avoid" | "left" | "recto" | "right" | "verso";
  export type PageBreakInside = Globals | "auto" | "avoid";
  export type Perspective = | Globals | TLength | "none";
  export type PointerEvents = | Globals | "all" | "auto" | "fill" | "inherit" | "none" | "painted" | "stroke" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke";
  export type Position = | Globals | "-webkit-sticky" | "absolute" | "fixed" | "relative" | "static" | "sticky";
  export type Resize = | Globals | "block" | "both" | "horizontal" | "inline" | "none" | "vertical";
  export type RubyAlign = | Globals | "center" | "space-around" | "space-between" | "start";
  export type RubyMerge = Globals | "auto" | "collapse" | "separate";
  export type ScrollBehavior = Globals | "auto" | "smooth";
  export type ScrollMarginBlockEnd = | Globals | TLength;
  export type ScrollMarginBlockStart = | Globals | TLength;
  export type ScrollMarginBottom = | Globals | TLength;
  export type ScrollMarginInlineEnd = | Globals | TLength;
  export type ScrollMarginInlineStart = | Globals | TLength;
  export type ScrollMarginLeft = Globals | TLength;
  export type ScrollMarginRight = | Globals | TLength;
  export type ScrollMarginTop = Globals | TLength;
  export type ScrollSnapStop = Globals | "always" | "normal";
  export type ScrollSnapTypeX = Globals | "mandatory" | "none" | "proximity";
  export type ScrollSnapTypeY = Globals | "mandatory" | "none" | "proximity";
  export type ScrollbarWidth = Globals | "auto" | "none" | "thin";
  export type TableLayout = Globals | "auto" | "fixed";
  export type TextAlign = | Globals | "-webkit-match-parent" | "center" | "end" | "justify" | "left" | "match-parent" | "right" | "start";
  export type TextAlignLast = | Globals | "auto" | "center" | "end" | "justify" | "left" | "right" | "start";
  export type TextDecorationSkipInk = Globals | "all" | "auto" | "none";
  export type TextDecorationStyle = | Globals | "dashed" | "dotted" | "double" | "solid" | "wavy";
  export type TextJustify = | Globals | "auto" | "inter-character" | "inter-word" | "none";
  export type TextOrientation = Globals | "mixed" | "sideways" | "upright";
  export type TextRendering = | Globals | "auto" | "geometricPrecision" | "optimizeLegibility" | "optimizeSpeed";
  export type TextTransform = | Globals | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "none" | "uppercase";
  export type TextWrap = | Globals | "balance" | "nowrap" | "pretty" | "stable" | "wrap";
  export type TransformBox = | Globals | "border-box" | "content-box" | "fill-box" | "stroke-box" | "view-box";
  export type TransformStyle = Globals | "flat" | "preserve-3d";
  export type UnicodeBidi = | Globals | "-moz-isolate" | "-moz-isolate-override" | "-moz-plaintext" | "-webkit-isolate" | "-webkit-isolate-override" | "-webkit-plaintext" | "bidi-override" | "embed" | "isolate" | "isolate-override" | "normal" | "plaintext";
  export type UserSelect = | Globals | "-moz-none" | "all" | "auto" | "contain" | "element" | "none" | "text";
  export type Visibility = Globals | "collapse" | "hidden" | "visible";
  export type WhiteSpaceCollapse = | Globals | "break-spaces" | "collapse" | "discard" | "preserve" | "preserve-breaks" | "preserve-spaces";
  export type WordBreak = | Globals | "break-all" | "break-word" | "keep-all" | "normal";
  export type WordSpacing = | Globals | TLength | "normal";
  export type WordWrap = Globals | "break-word" | "normal";
  export type WritingMode = | Globals | "horizontal-tb" | "sideways-lr" | "sideways-rl" | "vertical-lr" | "vertical-rl";
  export type MozFloatEdge = | Globals | "border-box" | "content-box" | "margin-box" | "padding-box";
  export type MozOrient = | Globals | "block" | "horizontal" | "inline" | "vertical";
  export type MozStackSizing = Globals | "ignore" | "stretch-to-fit";
  export type MozTextBlink = Globals | "blink" | "none";
  export type MozUserFocus = | Globals | "ignore" | "none" | "normal" | "select-after" | "select-all" | "select-before" | "select-menu" | "select-same";
  export type MozUserInput = Globals | "auto" | "disabled" | "enabled" | "none";
  export type MozUserModify = | Globals | "read-only" | "read-write" | "write-only";
  export type MozWindowDragging = Globals | "drag" | "no-drag";
  export type MozWindowShadow = | Globals | "default" | "menu" | "none" | "sheet" | "tooltip";
  export type MsAccelerator = Globals | "false" | "true";
  export type MsBlockProgression = Globals | "bt" | "lr" | "rl" | "tb";
  export type MsContentZoomChaining = Globals | "chained" | "none";
  export type MsContentZoomSnapType = | Globals | "mandatory" | "none" | "proximity";
  export type MsContentZooming = Globals | "none" | "zoom";
  export type MsHighContrastAdjust = Globals | "auto" | "none";
  export type MsImeAlign = Globals | "after" | "auto";
  export type MsOverflowStyle = | Globals | "-ms-autohiding-scrollbar" | "auto" | "none" | "scrollbar";
  export type MsScrollChaining = Globals | "chained" | "none";
  export type MsScrollLimitXMax = | Globals | TLength | "auto";
  export type MsScrollLimitXMin = | Globals | TLength;
  export type MsScrollLimitYMax = | Globals | TLength | "auto";
  export type MsScrollLimitYMin = | Globals | TLength;
  export type MsScrollRails = Globals | "none" | "railed";
  export type MsScrollSnapType = Globals | "mandatory" | "none" | "proximity";
  export type MsScrollTranslation = Globals | "none" | "vertical-to-horizontal";
  export type MsTextAutospace = | Globals | "ideograph-alpha" | "ideograph-numeric" | "ideograph-parenthesis" | "ideograph-space" | "none";
  export type MsTouchSelect = Globals | "grippers" | "none";
  export type MsUserSelect = Globals | "element" | "none" | "text";
  export type MsWrapFlow = | Globals | "auto" | "both" | "clear" | "end" | "maximum" | "start";
  export type MsWrapMargin = Globals | TLength;
  export type MsWrapThrough = Globals | "none" | "wrap";
  export type WebkitMaskRepeatX = | Globals | "no-repeat" | "repeat" | "round" | "space";
  export type WebkitMaskRepeatY = | Globals | "no-repeat" | "repeat" | "round" | "space";
  export type WebkitOverflowScrolling = Globals | "auto" | "touch";
  export type WebkitTextStrokeWidth = | Globals | TLength;
  export type WebkitTouchCallout = Globals | "default" | "none";
  export type WebkitUserModify = | Globals | "read-only" | "read-write" | "read-write-plaintext-only";
  export type ClipRule = Globals | "evenodd" | "nonzero";
  export type ColorInterpolation = Globals | "auto" | "linearRGB" | "sRGB";
  export type ColorRendering = | Globals | "auto" | "optimizeQuality" | "optimizeSpeed";
  export type DominantBaseline = | Globals | "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script";
  export type Fill = Globals | DataType.Paint;
  export type FillRule = Globals | "evenodd" | "nonzero";
  export type ShapeRendering = | Globals | "auto" | "crispEdges" | "geometricPrecision" | "optimizeSpeed";
  export type Stroke = Globals | DataType.Paint;
  export type StrokeLinecap = Globals | "butt" | "round" | "square";
  export type StrokeLinejoin = Globals | "bevel" | "miter" | "round";
  export type TextAnchor = Globals | "end" | "middle" | "start";
  export type VectorEffect = Globals | "non-scaling-stroke" | "none";
}

as outlined here, there are a few generic types like the one below, that allow any (pixel) string or 0 (unitless).

export type WebkitTextStrokeWidth<TLength = (string & {}) | 0> = | Globals | TLength;

filter out generics that default to (string & {}) and we are left with 146 properties that dont support strings.

export namespace Property {
  export type All = Globals;
  export type Appearance = | Globals | DataType.CompatAuto | "auto" | "menulist-button" | "none" | "textfield";
  export type BackfaceVisibility = Globals | "hidden" | "visible";
  export type BorderBlockEndStyle = Globals | DataType.LineStyle;
  export type BorderBlockStartStyle = Globals | DataType.LineStyle;
  export type BorderBlockStyle = Globals | DataType.LineStyle;
  export type BorderBottomStyle = Globals | DataType.LineStyle;
  export type BorderCollapse = Globals | "collapse" | "separate";
  export type BorderInlineEndStyle = Globals | DataType.LineStyle;
  export type BorderInlineStartStyle = Globals | DataType.LineStyle;
  export type BorderInlineStyle = Globals | DataType.LineStyle;
  export type BorderLeftStyle = Globals | DataType.LineStyle;
  export type BorderRightStyle = Globals | DataType.LineStyle;
  export type BorderTopStyle = Globals | DataType.LineStyle;
  export type BoxAlign = | Globals | "baseline" | "center" | "end" | "start" | "stretch";
  export type BoxDecorationBreak = Globals | "clone" | "slice";
  export type BoxDirection = Globals | "inherit" | "normal" | "reverse";
  export type BoxLines = Globals | "multiple" | "single";
  export type BoxOrient = | Globals | "block-axis" | "horizontal" | "inherit" | "inline-axis" | "vertical";
  export type BoxPack = Globals | "center" | "end" | "justify" | "start";
  export type BoxSizing = Globals | "border-box" | "content-box";
  export type BreakAfter = | Globals | "all" | "always" | "auto" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | "column" | "left" | "page" | "recto" | "region" | "right" | "verso";
  export type BreakBefore = | Globals | "all" | "always" | "auto" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | "column" | "left" | "page" | "recto" | "region" | "right" | "verso";
  export type BreakInside = | Globals | "auto" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region";
  export type CaptionSide = | Globals | "block-end" | "block-start" | "bottom" | "inline-end" | "inline-start" | "top";
  export type CaretShape = Globals | "auto" | "bar" | "block" | "underscore";
  export type Clear = | Globals | "both" | "inline-end" | "inline-start" | "left" | "none" | "right";
  export type PrintColorAdjust = Globals | "economy" | "exact";
  export type ColumnFill = Globals | "auto" | "balance" | "balance-all";
  export type ColumnSpan = Globals | "all" | "none";
  export type ContainerType = Globals | "inline-size" | "normal" | "size";
  export type ContentVisibility = Globals | "auto" | "hidden" | "visible";
  export type Direction = Globals | "ltr" | "rtl";
  export type EmptyCells = Globals | "hide" | "show";
  export type FlexDirection = | Globals | "column" | "column-reverse" | "row" | "row-reverse";
  export type FlexWrap = Globals | "nowrap" | "wrap" | "wrap-reverse";
  export type Float = | Globals | "inline-end" | "inline-start" | "left" | "none" | "right";
  export type FontKerning = Globals | "auto" | "none" | "normal";
  export type FontOpticalSizing = Globals | "auto" | "none";
  export type FontSynthesisPosition = Globals | "auto" | "none";
  export type FontSynthesisSmallCaps = Globals | "auto" | "none";
  export type FontSynthesisStyle = Globals | "auto" | "none";
  export type FontSynthesisWeight = Globals | "auto" | "none";
  export type FontVariantCaps = | Globals | "all-petite-caps" | "all-small-caps" | "normal" | "petite-caps" | "small-caps" | "titling-caps" | "unicase";
  export type FontVariantEmoji = | Globals | "emoji" | "normal" | "text" | "unicode";
  export type FontVariantPosition = Globals | "normal" | "sub" | "super";
  export type ForcedColorAdjust = Globals | "auto" | "none";
  export type Hyphens = Globals | "auto" | "manual" | "none";
  export type ImageRendering = | Globals | "-moz-crisp-edges" | "-webkit-optimize-contrast" | "auto" | "crisp-edges" | "pixelated";
  export type ImeMode = | Globals | "active" | "auto" | "disabled" | "inactive" | "normal";
  export type InputSecurity = Globals | "auto" | "none";
  export type Isolation = Globals | "auto" | "isolate";
  export type LineBreak = | Globals | "anywhere" | "auto" | "loose" | "normal" | "strict";
  export type ListStylePosition = Globals | "inside" | "outside";
  export type MarginTrim = Globals | "all" | "in-flow" | "none";
  export type MaskBorderMode = Globals | "alpha" | "luminance";
  export type MaskType = Globals | "alpha" | "luminance";
  export type MathShift = Globals | "compact" | "normal";
  export type MathStyle = Globals | "compact" | "normal";
  export type MixBlendMode = Globals | DataType.BlendMode | "plus-lighter";
  export type ObjectFit = | Globals | "contain" | "cover" | "fill" | "none" | "scale-down";
  export type OverflowAnchor = Globals | "auto" | "none";
  export type OverflowBlock = | Globals | "auto" | "clip" | "hidden" | "scroll" | "visible";
  export type OverflowClipBox = Globals | "content-box" | "padding-box";
  export type OverflowInline = | Globals | "auto" | "clip" | "hidden" | "scroll" | "visible";
  export type OverflowWrap = Globals | "anywhere" | "break-word" | "normal";
  export type OverflowX = | Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible";
  export type OverflowY = | Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible";
  export type Overlay = Globals | "auto" | "none";
  export type OverscrollBehaviorBlock = Globals | "auto" | "contain" | "none";
  export type OverscrollBehaviorInline = Globals | "auto" | "contain" | "none";
  export type OverscrollBehaviorX = Globals | "auto" | "contain" | "none";
  export type OverscrollBehaviorY = Globals | "auto" | "contain" | "none";
  export type PageBreakAfter = | Globals | "always" | "auto" | "avoid" | "left" | "recto" | "right" | "verso";
  export type PageBreakBefore = | Globals | "always" | "auto" | "avoid" | "left" | "recto" | "right" | "verso";
  export type PageBreakInside = Globals | "auto" | "avoid";
  export type PointerEvents = | Globals | "all" | "auto" | "fill" | "inherit" | "none" | "painted" | "stroke" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke";
  export type Position = | Globals | "-webkit-sticky" | "absolute" | "fixed" | "relative" | "static" | "sticky";
  export type Resize = | Globals | "block" | "both" | "horizontal" | "inline" | "none" | "vertical";
  export type RubyAlign = | Globals | "center" | "space-around" | "space-between" | "start";
  export type RubyMerge = Globals | "auto" | "collapse" | "separate";
  export type ScrollBehavior = Globals | "auto" | "smooth";
  export type ScrollSnapStop = Globals | "always" | "normal";
  export type ScrollSnapTypeX = Globals | "mandatory" | "none" | "proximity";
  export type ScrollSnapTypeY = Globals | "mandatory" | "none" | "proximity";
  export type ScrollbarWidth = Globals | "auto" | "none" | "thin";
  export type TableLayout = Globals | "auto" | "fixed";
  export type TextAlign = | Globals | "-webkit-match-parent" | "center" | "end" | "justify" | "left" | "match-parent" | "right" | "start";
  export type TextAlignLast = | Globals | "auto" | "center" | "end" | "justify" | "left" | "right" | "start";
  export type TextDecorationSkipInk = Globals | "all" | "auto" | "none";
  export type TextDecorationStyle = | Globals | "dashed" | "dotted" | "double" | "solid" | "wavy";
  export type TextJustify = | Globals | "auto" | "inter-character" | "inter-word" | "none";
  export type TextOrientation = Globals | "mixed" | "sideways" | "upright";
  export type TextRendering = | Globals | "auto" | "geometricPrecision" | "optimizeLegibility" | "optimizeSpeed";
  export type TextTransform = | Globals | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "none" | "uppercase";
  export type TextWrap = | Globals | "balance" | "nowrap" | "pretty" | "stable" | "wrap";
  export type TransformBox = | Globals | "border-box" | "content-box" | "fill-box" | "stroke-box" | "view-box";
  export type TransformStyle = Globals | "flat" | "preserve-3d";
  export type UnicodeBidi = | Globals | "-moz-isolate" | "-moz-isolate-override" | "-moz-plaintext" | "-webkit-isolate" | "-webkit-isolate-override" | "-webkit-plaintext" | "bidi-override" | "embed" | "isolate" | "isolate-override" | "normal" | "plaintext";
  export type UserSelect = | Globals | "-moz-none" | "all" | "auto" | "contain" | "element" | "none" | "text";
  export type Visibility = Globals | "collapse" | "hidden" | "visible";
  export type WhiteSpaceCollapse = | Globals | "break-spaces" | "collapse" | "discard" | "preserve" | "preserve-breaks" | "preserve-spaces";
  export type WordBreak = | Globals | "break-all" | "break-word" | "keep-all" | "normal";
  export type WordWrap = Globals | "break-word" | "normal";
  export type WritingMode = | Globals | "horizontal-tb" | "sideways-lr" | "sideways-rl" | "vertical-lr" | "vertical-rl";
  export type MozFloatEdge = | Globals | "border-box" | "content-box" | "margin-box" | "padding-box";
  export type MozOrient = | Globals | "block" | "horizontal" | "inline" | "vertical";
  export type MozStackSizing = Globals | "ignore" | "stretch-to-fit";
  export type MozTextBlink = Globals | "blink" | "none";
  export type MozUserFocus = | Globals | "ignore" | "none" | "normal" | "select-after" | "select-all" | "select-before" | "select-menu" | "select-same";
  export type MozUserInput = Globals | "auto" | "disabled" | "enabled" | "none";
  export type MozUserModify = | Globals | "read-only" | "read-write" | "write-only";
  export type MozWindowDragging = Globals | "drag" | "no-drag";
  export type MozWindowShadow = | Globals | "default" | "menu" | "none" | "sheet" | "tooltip";
  export type MsAccelerator = Globals | "false" | "true";
  export type MsBlockProgression = Globals | "bt" | "lr" | "rl" | "tb";
  export type MsContentZoomChaining = Globals | "chained" | "none";
  export type MsContentZoomSnapType = | Globals | "mandatory" | "none" | "proximity";
  export type MsContentZooming = Globals | "none" | "zoom";
  export type MsHighContrastAdjust = Globals | "auto" | "none";
  export type MsImeAlign = Globals | "after" | "auto";
  export type MsOverflowStyle = | Globals | "-ms-autohiding-scrollbar" | "auto" | "none" | "scrollbar";
  export type MsScrollChaining = Globals | "chained" | "none";
  export type MsScrollRails = Globals | "none" | "railed";
  export type MsScrollSnapType = Globals | "mandatory" | "none" | "proximity";
  export type MsScrollTranslation = Globals | "none" | "vertical-to-horizontal";
  export type MsTextAutospace = | Globals | "ideograph-alpha" | "ideograph-numeric" | "ideograph-parenthesis" | "ideograph-space" | "none";
  export type MsTouchSelect = Globals | "grippers" | "none";
  export type MsUserSelect = Globals | "element" | "none" | "text";
  export type MsWrapFlow = | Globals | "auto" | "both" | "clear" | "end" | "maximum" | "start";
  export type MsWrapThrough = Globals | "none" | "wrap";
  export type WebkitMaskRepeatX = | Globals | "no-repeat" | "repeat" | "round" | "space";
  export type WebkitMaskRepeatY = | Globals | "no-repeat" | "repeat" | "round" | "space";
  export type WebkitOverflowScrolling = Globals | "auto" | "touch";
  export type WebkitTouchCallout = Globals | "default" | "none";
  export type WebkitUserModify = | Globals | "read-only" | "read-write" | "read-write-plaintext-only";
  export type ClipRule = Globals | "evenodd" | "nonzero";
  export type ColorInterpolation = Globals | "auto" | "linearRGB" | "sRGB";
  export type ColorRendering = | Globals | "auto" | "optimizeQuality" | "optimizeSpeed";
  export type DominantBaseline = | Globals | "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script";
  export type FillRule = Globals | "evenodd" | "nonzero";
  export type ShapeRendering = | Globals | "auto" | "crispEdges" | "geometricPrecision" | "optimizeSpeed";
  export type StrokeLinecap = Globals | "butt" | "round" | "square";
  export type StrokeLinejoin = Globals | "bevel" | "miter" | "round";
  export type TextAnchor = Globals | "end" | "middle" | "start";
  export type VectorEffect = Globals | "non-scaling-stroke" | "none";
}

that by design excludes just these properties from using css custom properties. why not include general support then through Globals?

the recommended approach from the docs seems fairly unnecessary, considering we only protect 146 properties (compared to the amount of other properties).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@kitsunekyo