Discrepancies with TypeStyle

[pelotom]

Hi, I've started a very preliminary PR to integrate csstype with TypeStyle at typestyle/typestyle#245. TypeStyle has some of the highest fidelity CSS typings I've seen outside of this library, and I want to make sure to capture and work through the differences that exist. To kick things off, here are the properties that TypeStyle has but csstype doesn't currently:

Properties in typestyle but not csstype:

-apple-trailing-word
-epub-text-emphasis
-epub-text-emphasis-color
-epub-text-emphasis-style
-internal-marquee-direction
-internal-marquee-increment
-internal-marquee-repetition
-internal-marquee-speed
-internal-marquee-style
-moz-min-font-size-ratio
-moz-text-align-last
-moz-text-decoration-color
-moz-text-decoration-line
-moz-text-decoration-style
-moz-top-layer
-ms-align-items
-ms-backface-visibility
-ms-background-position-x
-ms-background-position-y
-ms-behavior
-ms-flex-flow
-ms-flex-grow
-ms-flex-shrink
-ms-flex-wrap
-ms-grid-column
-ms-grid-column-align
-ms-grid-column-span
-ms-grid-row
-ms-grid-row-align
-ms-grid-row-span
-ms-ime-mode
-ms-layout-flow
-ms-layout-grid
-ms-layout-grid-char
-ms-layout-grid-line
-ms-layout-grid-mode
-ms-layout-grid-type
-ms-perspective
-ms-perspective-origin
-ms-perspective-origin-x
-ms-perspective-origin-y
-ms-text-align-last
-ms-text-justify
-ms-text-kashida-space
-ms-text-underline-position
-ms-transform-origin-x
-ms-transform-origin-y
-ms-transform-origin-z
-ms-transform-style
-ms-word-wrap
-ms-zoom
-webkit-animation-trigger
-webkit-appearance
-webkit-color-correction
-webkit-column-fill
-webkit-cursor-visibility
-webkit-flex-align
-webkit-flex-negative
-webkit-flex-positive
-webkit-flex-wrap
-webkit-flow-from
-webkit-flow-into
-webkit-font-size-delta
-webkit-grid
-webkit-grid-area
-webkit-grid-auto-columns
-webkit-grid-auto-flow
-webkit-grid-auto-rows
-webkit-grid-column
-webkit-grid-column-end
-webkit-grid-column-gap
-webkit-grid-column-start
-webkit-grid-gap
-webkit-grid-row
-webkit-grid-row-end
-webkit-grid-row-gap
-webkit-grid-row-start
-webkit-grid-template
-webkit-grid-template-areas
-webkit-grid-template-columns
-webkit-grid-template-rows
-webkit-hyphenate-limit-after
-webkit-hyphenate-limit-before
-webkit-hyphenate-limit-lines
-webkit-initial-letter
-webkit-justify-items
-webkit-justify-self
-webkit-line-align
-webkit-line-grid
-webkit-line-snap
-webkit-mask-size
-webkit-nbsp-mode
-webkit-region-fragment
-webkit-ruby-position
-webkit-text-align-last
-webkit-text-justify
-webkit-text-underline-position
-webkit-text-zoom
alignmentAdjust
backgroundComposite
behavior
borderCornerShape
cue
cueAfter
flexNegative
flexOrder
flexPositive
flowFrom
gridRowPosition
gridRowSpan
hyphenateLimitChars
hyphenateLimitLines
hyphenateLimitZone
layoutGrid
layoutGridChar
layoutGridLine
layoutGridMode
layoutGridType
marqueeDirection
marqueeStyle
overflowStyle
pause
pauseAfter
pauseBefore
regionFragment
restAfter
restBefore
shapeInside
speak
speakAs
textDecorationLineThrough
textDecorationNone
textDecorationOverline
textDecorationUnderline
textHeight
textJustifyTrim
textKashidaSpace
textLineThrough
textLineThroughWidth
textOverline
textOverlineColor
textOverlineMode
textOverlineStyle
textOverlineWidth
transformOriginZ
userFocus
userInput
voiceBalance
voiceDuration
voiceFamily
voicePitch
voiceRange
voiceRate
voiceStress
voiceVolume
wrapFlow
wrapMargin

Where csstype's properties overlap with typestyle but it's missing some allowed values:

-moz-appearance: string | number;
-moz-binding: number;
-moz-border-bottom-colors: number;
-moz-border-end-color: number;
-moz-border-end-style: number;
-moz-border-left-colors: number;
-moz-border-right-colors: number;
-moz-border-start-color: number;
-moz-border-start-style: number;
-moz-border-top-colors: number;
-moz-column-count: string;
-moz-column-fill: string | number;
-moz-column-rule-color: number;
-moz-column-rule-style: number;
-moz-float-edge: string | number;
-moz-force-broken-image-icon: string;
-moz-hyphens: string | number;
-moz-image-region: number;
-moz-orient: string | number;
-moz-stack-sizing: string | number;
-moz-text-size-adjust: number;
-moz-user-focus: string | number;
-moz-user-input: string | number;
-moz-user-modify: string | number;
-moz-window-dragging: string | number;
-moz-window-shadow: string | number;
-ms-accelerator: string | number;
-ms-block-progression: string | number;
-ms-content-zoom-chaining: string | number;
-ms-content-zoom-limit-max: number;
-ms-content-zoom-limit-min: number;
-ms-content-zoom-limit: number;
-ms-content-zoom-snap-points: number;
-ms-content-zoom-snap-type: string | number;
-ms-content-zoom-snap: number;
-ms-content-zooming: string | number;
-ms-filter: number;
-ms-flow-from: number;
-ms-flow-into: number;
-ms-high-contrast-adjust: string | number;
-ms-hyphenate-limit-lines: string;
-ms-hyphens: string | number;
-ms-ime-align: string | number;
-ms-line-break: string | number;
-ms-overflow-style: string | number;
-ms-overflow-x: string | number;
-ms-overflow-y: string | number;
-ms-scroll-chaining: string | number;
-ms-scroll-limit: number;
-ms-scroll-rails: string | number;
-ms-scroll-snap-points-x: number;
-ms-scroll-snap-points-y: number;
-ms-scroll-snap-type: string | number;
-ms-scroll-snap-x: number;
-ms-scroll-snap-y: number;
-ms-scroll-translation: string | number;
-ms-scrollbar-3dlight-color: number;
-ms-scrollbar-arrow-color: number;
-ms-scrollbar-base-color: number;
-ms-scrollbar-darkshadow-color: number;
-ms-scrollbar-face-color: number;
-ms-scrollbar-highlight-color: number;
-ms-scrollbar-shadow-color: number;
-ms-scrollbar-track-color: number;
-ms-text-autospace: string | number;
-ms-text-combine-horizontal: number;
-ms-text-overflow: number;
-ms-text-size-adjust: number;
-ms-touch-action: number;
-ms-touch-select: string | number;
-ms-transform: number;
-ms-user-select: contain | all | auto;
-ms-word-break: string | number;
-ms-wrap-flow: string | number;
-ms-wrap-through: string | number;
-ms-writing-mode: string | number;
-webkit-align-content: number;
-webkit-animation-delay: number;
-webkit-animation-direction: number;
-webkit-animation-duration: number;
-webkit-animation-fill-mode: number;
-webkit-animation-name: number;
-webkit-animation-play-state: number;
-webkit-animation-timing-function: number;
-webkit-backdrop-filter: number;
-webkit-backface-visibility: string | number;
-webkit-border-before-color: number;
-webkit-border-before-style: number;
-webkit-box-decoration-break: string | number;
-webkit-box-shadow: number;
-webkit-clip-path: number;
-webkit-column-count: string;
-webkit-column-rule-color: number;
-webkit-column-rule-style: number;
-webkit-column-span: string | number;
-webkit-filter: number;
-webkit-flex-flow: number;
-webkit-font-feature-settings: number;
-webkit-font-kerning: string | number;
-webkit-font-variant-ligatures: number;
-webkit-hyphens: string | number;
-webkit-line-break: string | number;
-webkit-line-clamp: string;
-webkit-mask-clip: number;
-webkit-mask-composite: number;
-webkit-mask-image: number;
-webkit-mask-origin: number;
-webkit-mask-repeat-x: string | number;
-webkit-mask-repeat-y: string | number;
-webkit-mask-repeat: number;
-webkit-mask: number;
-webkit-order: string;
-webkit-scroll-snap-type: string | number;
-webkit-shape-image-threshold: string;
-webkit-shape-outside: number;
-webkit-tap-highlight-color: number;
-webkit-text-combine: number;
-webkit-text-decoration-color: number;
-webkit-text-decoration-line: number;
-webkit-text-decoration-skip: number;
-webkit-text-decoration-style: string | number;
-webkit-text-emphasis-color: number;
-webkit-text-emphasis-position: number;
-webkit-text-emphasis-style: number;
-webkit-text-emphasis: number;
-webkit-text-fill-color: number;
-webkit-text-orientation: string | number;
-webkit-text-size-adjust: number;
-webkit-text-stroke-color: number;
-webkit-touch-callout: string | number;
-webkit-transform-style: string | number;
-webkit-transform: number;
-webkit-transition-delay: number;
-webkit-transition-duration: number;
-webkit-transition-property: number;
-webkit-transition-timing-function: number;
-webkit-transition: number;
-webkit-user-modify: string | number;
-webkit-writing-mode: string | number;
borderBottomStyle: string;
borderLeftStyle: string;
borderRightStyle: string;
borderTopStyle: string;
boxShadow: number;
fontWeight: number;
hyphens: string;
strokeDasharray: number[];
textAlign: justify-all;

[frenic]

Wow, this list is massive 😅 Some thoughts:

1. To extend vendor properties we could use data from https://github.com/mdn/browser-compat-data to hopefully reduce quite many of the missing properties
2. I've never heard of max-font-size so I'm wondering if this list includes some TypeStyle specific properties?
3. SVG properties are in progress in Add SVG properties interfaces #21

[pelotom]

I've never heard of max-font-size so I'm wondering if this list includes some TypeStyle specific properties?

Looks like that can be safely disregarded:

  /**
   * This property must not be used. It is no longer included in any standard or standard track specification, nor is it implemented in any browser. It is only used when the text-align-last property is set to size. It controls allowed adjustments of font-size to fit line content.
   */
  maxFontSize?: any;

(link)

[pelotom]

FYI I have a bit of code on a branch of typestyle to test discrepancies, so we can easily reevaluate after #21 and other changes are made to close the gap.

[pelotom]

Updated the list in the issue description based on [email protected]. These properties are no longer missing:

alignmentBaseline
baselineShift
clipRule
dominantBaseline
fill
fillOpacity
fillRule
stroke
strokeDasharray
strokeDashoffset
strokeLinecap
strokeOpacity
strokeWidth
textAnchor

[pelotom]

I've reduced the list again, filtering out known obsolete properties from here and those whose docs in TypeStyle indicate they are no longer valid.

[pelotom]

I found a comment in the TypeStyle code to the effect that their vendor prefixes were obtained from

https://peter.sh/experiments/vendor-prefixed-css-property-overview/

I don't know how that compares to the MDN browser compat repo you linked, but thought I would mention it in case it's useful.

[frenic]

Ah, nice. Never heard of that page before. Thanks.

[pelotom]

Updated the list based on [email protected]. These properties are no longer missing:

-ms-scrollbar-arrow-color
-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-track-color
justifyItems
justifySelf

[pelotom]

The next step beyond filling in missing properties is seeing where TypeStyle allows additional values for a given property not covered by csstype. I've added a list of those to the issue as well.

The tall tentpole here seems to be the that TypeStyle's CSSGlobalValues allows "revert" whereas csstype's Global does not. Any idea why revert is missing?

[frenic]

Waw, you're helping out a lot. I really appreciate it!

Globals are manually defined so I guess I just missed it. I'll add it.

[pelotom]

Glad to help, I'm very excited for csstype to take over the world! 😄

[pelotom]

I've filed focused issues for the some of the remaining value discrepancies: #28, #29, #30, #31

[frenic]

Have released v2.2.0 with #27 which should solve a majority of the missing properties. @pelotom can you post and updated list of missing properties please?

[pelotom]

@frenic ok, I've updated both lists. 88 properties disappeared from the "missing" list 🙌

[pelotom]

I think all the remaining legitimate value discrepancies are accounted for in separate issues. The rest are where TypeStyle is using too broad of a type, e.g. string when it should be constrained to a small set of literals.

[frenic]

Some of the important literals that was missing if fixed except for text-align: justify-all because no browser has implemented it yet, see mdn/data#204.

[pelotom]

Hm, it seems like only lineClamp disappeared from the list with the new version.

[frenic]

Hm, breakPage* f318f12 and overflow* 9ddc6e1 has been fixed before too.

[pelotom]

Those were already not on the list for some reason...

[frenic]

No, they are in the list with missing keywords.

[pelotom]

Ah, I was only referring to the missing properties list. But I also don't see breakPage* on the missing keywords list?

[frenic]

I meant pageBreak* sorry.

[frenic]

I've looked into some random properties that are missing and I can't find any documentation on anyone. I could walk them through one by one just to make sure.

[pelotom]

I updated the keywords list too... the diff is

20,24d19
< -moz-outline-radius-bottomleft: number;
< -moz-outline-radius-bottomright: number;
< -moz-outline-radius-topleft: number;
< -moz-outline-radius-topright: number;
< -moz-outline-radius: number;
107a103
> -webkit-line-clamp: string;
141a138
> -webkit-user-modify: string | number;
150,154d146
< overflow: clip;
< overflowX: clip;
< overflowY: clip;
< pageBreakAfter: recto | verso;
< pageBreakBefore: recto | verso;

[frenic]

Well, these are incorrect at TypeStyle for sure:

-webkit-line-clamp: string;
-webkit-user-modify: string | number;

https://drafts.csswg.org/css-overflow-3/#line-clamp
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-modify

[pelotom]

Yep, there are a lot of those where they’ve just put number | string or even any (I’m not even showing the latter) where they should be using something more constrained.

[frenic]

It's a lot of work going through all of these properties. I've found some hits on few properties where it points to old suggestions by W3C for around 15 years ago that never became standard nor got implemented anywhere. 😆 I mean cue? That's a pseudo right?

[pelotom]

I think it's time to update the PR over there and ask if there's really anything still missing that they think is necessary. If they want to include experimental properties/keywords they can always patch those in manually.

[frenic]

They might want combined keywords and comments too before considering a merge I guess. But that's next on my list now.

[pelotom]

Is there a plan for how comments could be achieved?

[frenic]

I've got MDN-links from mdn-browser-compat-data that becomes clickable in VSCode so that would at least be something. Then I have data like status, initial value and which browsers it's supported in etc. It wouldn't be composed descriptions but it would give you quick access to it and some interesting facts.

[pelotom]

That would be awesome!

[frenic]

I guess this can be closed now since TyoeStyle uses csstype now.