diff --git a/src/config/properties/experimental.ts b/src/config/properties/experimental.ts index 3438e0f..d8b3ed6 100644 --- a/src/config/properties/experimental.ts +++ b/src/config/properties/experimental.ts @@ -1,54 +1,34 @@ const experimental = { pseudo: { element: { - targetText: '::target-text', - viewTransition: '::view-transition', - error: { - grammar: '::grammar-error', - spelling: '::spelling-error', - }, - view: { - transition: { - group: '::view-transition-group', - imagePair: '::view-transition-image-pair', - old: '::view-transition-old', - new: '::view-transition-new', - }, - }, - moz: { - focusInner: '::-moz-focus-inner', - }, + detailsContent: '::details-content', webkit: { slider: { - runnableTrack: '::-webkit-slider-runnable-track', thumb: '::-webkit-slider-thumb', }, }, }, class: { blank: ':blank', + current: ':current', + hasSlotted: ':has-slotted', + localLink: ':local-link', targetWithin: ':target-within', - state: ':state', }, }, property: { anchorName: 'anchor-name', - contentVisibility: 'content-visibility', fieldSizing: 'field-sizing', - masonryAutoFlow: 'masonry-auto-flow', marginTrim: 'margin-trim', imageResolution: 'image-resolution', + interpolateSize: 'interpolate-size', lineHeightStep: 'line-height-step', - rubyAlign: 'ruby-align', - whiteSpaceCollapse: 'white-space-collapse', overlay: 'overlay', mathShift: 'math-shift', timelineScope: 'timeline-scope', - inset: { - area: 'inset-area', - }, position: { anchor: 'position-anchor', + area: 'position-area', try: 'position-try', tryOrder: 'position-try-order', tryFallbacks: 'position-try-fallbacks', @@ -59,20 +39,11 @@ const experimental = { timelineAxis: 'scroll-timeline-axis', timelineName: 'scroll-timeline-name', }, - tracks: { - align: 'align-tracks', - justify: 'justify-tracks', - }, + font: { synthesisPosition: 'font-synthesis-position' }, text: { sizeAdjust: 'text-size-adjust', decorationSkip: 'text-decoration-skip', spacingTrim: 'text-spacing-trim', - wrapMode: 'text-wrap-mode', - wrapStyle: 'text-wrap-style', - }, - initial: { - letter: 'initial-letter', - letterAlign: 'initial-letter-align', }, animation: { timeline: 'animation-timeline', @@ -85,7 +56,6 @@ const experimental = { timelineName: 'view-timeline-name', timelineAxis: 'view-timeline-axis', timelineInset: 'view-timeline-inset', - transitionName: 'view-transition-name', }, }, }; diff --git a/src/config/properties/appearance.ts b/src/config/properties/groups/appearance.ts similarity index 91% rename from src/config/properties/appearance.ts rename to src/config/properties/groups/appearance.ts index fb530c3..4bcd2da 100644 --- a/src/config/properties/appearance.ts +++ b/src/config/properties/groups/appearance.ts @@ -1,6 +1,6 @@ import { createPropertiesGroup } from '#utils/create-properties-group/create-properties-group.ts'; -import { experimental } from './experimental.ts'; +import { experimental } from '../experimental.ts'; const experimentalProperty = experimental.property; const appearance = [ @@ -48,6 +48,9 @@ const appearance = [ 'backdrop-filter', 'mix-blend-mode', 'clip-path', + 'clip-rule', + 'flood-color', + 'flood-opacity', ], }), await createPropertiesGroup({ @@ -72,8 +75,10 @@ const appearance = [ properties: [ 'color-scheme', 'accent-color', + 'lighting-color', 'color', 'color-interpolation', + 'color-interpolation-filters', 'caret-color', 'forced-color-adjust', 'print-color-adjust', diff --git a/src/config/properties/box-model.ts b/src/config/properties/groups/box-model.ts similarity index 95% rename from src/config/properties/box-model.ts rename to src/config/properties/groups/box-model.ts index 3f69f4e..fde391f 100644 --- a/src/config/properties/box-model.ts +++ b/src/config/properties/groups/box-model.ts @@ -1,6 +1,6 @@ import { createPropertiesGroup } from '#utils/create-properties-group/create-properties-group.ts'; -import { experimental } from './experimental.ts'; +import { experimental } from '../experimental.ts'; const experimentalProperty = experimental.property; const boxModel = [ @@ -33,9 +33,6 @@ const boxModel = [ groupName: 'Border', properties: [ 'border', - 'border-width', - 'border-style', - 'border-color', 'border-radius', 'border-start-start-radius', 'border-start-end-radius', @@ -87,6 +84,7 @@ const boxModel = [ 'inline-size', 'min-inline-size', 'max-inline-size', + experimentalProperty.interpolateSize, experimentalProperty.fieldSizing, ], }), diff --git a/src/config/properties/common.ts b/src/config/properties/groups/common.ts similarity index 91% rename from src/config/properties/common.ts rename to src/config/properties/groups/common.ts index 779f991..a9a6ddb 100644 --- a/src/config/properties/common.ts +++ b/src/config/properties/groups/common.ts @@ -1,6 +1,6 @@ import { createPropertiesGroup } from '#utils/create-properties-group/create-properties-group.ts'; -import { experimental } from './experimental.ts'; +import { experimental } from '../experimental.ts'; const experimentalProperty = experimental.property; const common = [ diff --git a/src/config/properties/content.ts b/src/config/properties/groups/content.ts similarity index 100% rename from src/config/properties/content.ts rename to src/config/properties/groups/content.ts diff --git a/src/config/properties/image.ts b/src/config/properties/groups/image.ts similarity index 90% rename from src/config/properties/image.ts rename to src/config/properties/groups/image.ts index c81e078..9a162bc 100644 --- a/src/config/properties/image.ts +++ b/src/config/properties/groups/image.ts @@ -1,6 +1,6 @@ import { createPropertiesGroup } from '#utils/create-properties-group/create-properties-group.ts'; -import { experimental } from './experimental.ts'; +import { experimental } from '../experimental.ts'; const experimentalProperty = experimental.property; const image = [ diff --git a/src/config/properties/interaction.ts b/src/config/properties/groups/interaction.ts similarity index 82% rename from src/config/properties/interaction.ts rename to src/config/properties/groups/interaction.ts index f089dbf..5c696a7 100644 --- a/src/config/properties/interaction.ts +++ b/src/config/properties/groups/interaction.ts @@ -1,20 +1,12 @@ import { createPropertiesGroup } from '#utils/create-properties-group/create-properties-group.ts'; -import { experimental } from './experimental.ts'; -import { nonStandard } from './non-standard.ts'; +import { experimental } from '../experimental.ts'; const experimentalProperty = experimental.property; -const nonStandardProperty = nonStandard.property; const interaction = [ await createPropertiesGroup({ groupName: 'Actions', - properties: [ - 'cursor', - 'pointer-events', - 'touch-action', - 'resize', - nonStandardProperty.zoom, - ], + properties: ['cursor', 'pointer-events', 'touch-action', 'resize', 'zoom'], }), await createPropertiesGroup({ groupName: 'User Actions', diff --git a/src/config/properties/layout.ts b/src/config/properties/groups/layout.ts similarity index 89% rename from src/config/properties/layout.ts rename to src/config/properties/groups/layout.ts index 8483904..3febb42 100644 --- a/src/config/properties/layout.ts +++ b/src/config/properties/groups/layout.ts @@ -1,8 +1,8 @@ import { createPropertiesGroup } from '#utils/create-properties-group/create-properties-group.ts'; -import { experimental } from './experimental.ts'; +import { limitedAvailability } from '../limited-availability.ts'; -const experimentalProperty = experimental.property; +const limitedAvailabilityProperty = limitedAvailability.property; const layout = [ await createPropertiesGroup({ groupName: 'Display', @@ -11,9 +11,9 @@ const layout = [ 'opacity', 'isolation', 'visibility', + 'content-visibility', 'backface-visibility', 'appearance', - experimentalProperty.contentVisibility, ], }), await createPropertiesGroup({ @@ -63,7 +63,6 @@ const layout = [ 'gap', 'column-gap', 'row-gap', - experimentalProperty.masonryAutoFlow, ], }), await createPropertiesGroup({ @@ -94,14 +93,14 @@ const layout = [ await createPropertiesGroup({ groupName: 'Alignment', properties: [ + 'dominant-baseline', + limitedAvailabilityProperty.alignment.baseline, 'place-content', 'place-items', 'place-self', - experimentalProperty.tracks.align, 'align-content', 'align-items', 'align-self', - experimentalProperty.tracks.justify, 'justify-content', 'justify-items', 'justify-self', diff --git a/src/config/properties/positioning.ts b/src/config/properties/groups/positioning.ts similarity index 83% rename from src/config/properties/positioning.ts rename to src/config/properties/groups/positioning.ts index 1110aaa..e6208f7 100644 --- a/src/config/properties/positioning.ts +++ b/src/config/properties/groups/positioning.ts @@ -1,14 +1,17 @@ import { createPropertiesGroup } from '#utils/create-properties-group/create-properties-group.ts'; -import { experimental } from './experimental.ts'; +import { experimental } from '../experimental.ts'; +import { limitedAvailability } from '../limited-availability.ts'; const experimentalProperty = experimental.property; +const limitedAvailabilityProperty = limitedAvailability.property; const positioning = [ await createPropertiesGroup({ groupName: 'Position', properties: [ 'position', experimentalProperty.position.anchor, + experimentalProperty.position.area, experimentalProperty.position.visibility, experimentalProperty.position.try, experimentalProperty.position.tryOrder, @@ -20,7 +23,6 @@ const positioning = [ 'offset-rotate', 'offset-anchor', 'inset', - experimentalProperty.inset.area, 'inset-block', 'inset-block-start', 'inset-block-end', @@ -52,7 +54,7 @@ const positioning = [ experimentalProperty.view.timelineName, experimentalProperty.view.timelineAxis, experimentalProperty.view.timelineInset, - experimentalProperty.view.transitionName, + limitedAvailabilityProperty.view.transitionName, ], }), ]; diff --git a/src/config/properties/svg.ts b/src/config/properties/groups/svg.ts similarity index 65% rename from src/config/properties/svg.ts rename to src/config/properties/groups/svg.ts index 1ef3ea6..4d5d545 100644 --- a/src/config/properties/svg.ts +++ b/src/config/properties/groups/svg.ts @@ -3,7 +3,7 @@ import { createPropertiesGroup } from '#utils/create-properties-group/create-pro const svg = [ await createPropertiesGroup({ groupName: 'SVG', - properties: ['fill', 'stroke', 'paint-order'], + properties: ['fill', 'fill-opacity', 'fill-rule', 'stroke', 'paint-order'], }), await createPropertiesGroup({ groupName: 'Marker', @@ -11,7 +11,12 @@ const svg = [ }), await createPropertiesGroup({ groupName: 'Shape', - properties: ['shape-outside', 'shape-margin', 'shape-image-threshold'], + properties: [ + 'shape-rendering', + 'shape-outside', + 'shape-margin', + 'shape-image-threshold', + ], }), ]; diff --git a/src/config/properties/transitions.ts b/src/config/properties/groups/transitions.ts similarity index 95% rename from src/config/properties/transitions.ts rename to src/config/properties/groups/transitions.ts index e7fa17d..2eca611 100644 --- a/src/config/properties/transitions.ts +++ b/src/config/properties/groups/transitions.ts @@ -1,6 +1,6 @@ import { createPropertiesGroup } from '#utils/create-properties-group/create-properties-group.ts'; -import { experimental } from './experimental.ts'; +import { experimental } from '../experimental.ts'; const experimentalProperty = experimental.property; const transitions = [ diff --git a/src/config/properties/typography.ts b/src/config/properties/groups/typography.ts similarity index 83% rename from src/config/properties/typography.ts rename to src/config/properties/groups/typography.ts index 7b09c25..4d569a8 100644 --- a/src/config/properties/typography.ts +++ b/src/config/properties/groups/typography.ts @@ -1,8 +1,8 @@ import { createPropertiesGroup } from '#utils/create-properties-group/create-properties-group.ts'; -import { experimental } from './experimental.ts'; -import { limitedAvailability } from './limited-availability.ts'; -import { nonStandard } from './non-standard.ts'; +import { experimental } from '../experimental.ts'; +import { limitedAvailability } from '../limited-availability.ts'; +import { nonStandard } from '../non-standard.ts'; const experimentalProperty = experimental.property; const limitedAvailabilityProperty = limitedAvailability.property; @@ -27,7 +27,7 @@ const typography = [ 'font-language-override', 'font-feature-settings', 'font-synthesis', - limitedAvailabilityProperty.font.synthesisPosition, + experimentalProperty.font.synthesisPosition, 'font-synthesis-weight', 'font-synthesis-style', 'font-synthesis-small-caps', @@ -54,8 +54,8 @@ const typography = [ 'text-transform', 'text-anchor', 'text-wrap', - experimentalProperty.text.wrapMode, - experimentalProperty.text.wrapStyle, + 'text-wrap-mode', + 'text-wrap-style', experimentalProperty.text.spacingTrim, 'text-align', 'text-align-last', @@ -85,16 +85,15 @@ const typography = [ 'direction', 'writing-mode', 'white-space', - experimentalProperty.whiteSpaceCollapse, + 'white-space-collapse', 'ruby-position', - experimentalProperty.rubyAlign, + 'ruby-align', 'line-break', 'line-height', experimentalProperty.lineHeightStep, 'word-spacing', 'word-break', - experimentalProperty.initial.letter, - experimentalProperty.initial.letterAlign, + limitedAvailabilityProperty.initial.letter, 'letter-spacing', 'hyphens', 'hyphenate-character', diff --git a/src/config/properties/limited-availability.ts b/src/config/properties/limited-availability.ts index 9f686b7..8dbfaac 100644 --- a/src/config/properties/limited-availability.ts +++ b/src/config/properties/limited-availability.ts @@ -1,6 +1,29 @@ const limitedAvailability = { + pseudo: { + element: { + viewTransition: '::view-transition', + error: { + grammar: '::grammar-error', + spelling: '::spelling-error', + }, + view: { + transition: { + group: '::view-transition-group', + imagePair: '::view-transition-image-pair', + old: '::view-transition-old', + new: '::view-transition-new', + }, + }, + }, + }, property: { - font: { synthesisPosition: 'font-synthesis-position' }, + alignment: { baseline: 'alignment-baseline' }, + initial: { + letter: 'initial-letter', + }, + view: { + transitionName: 'view-transition-name', + }, }, }; diff --git a/src/config/properties/non-standard.ts b/src/config/properties/non-standard.ts index 1ac1281..afb8ff6 100644 --- a/src/config/properties/non-standard.ts +++ b/src/config/properties/non-standard.ts @@ -5,7 +5,6 @@ const nonStandard = { innerSpinButton: '::-webkit-inner-spin-button', scrollbar: '::-webkit-scrollbar', meter: { - bar: '::-webkit-meter-bar', innerElement: '::-webkit-meter-inner-element', value: { evenLessGood: '::-webkit-meter-even-less-good-value', @@ -24,13 +23,14 @@ const nonStandard = { results: '::-webkit-search-results-button', }, }, + slider: { + runnableTrack: '::-webkit-slider-runnable-track', + }, }, moz: { colorSwatch: '::-moz-color-swatch', - page: '::-moz-page', - pageSequence: '::-moz-page-sequence', + focusInner: '::-moz-focus-inner', progressBar: '::-moz-progress-bar', - scrolledPageSequence: '::-moz-scrolled-page-sequence', meterBar: '::-moz-meter-bar', list: { bullet: '::-moz-list-bullet', @@ -45,7 +45,6 @@ const nonStandard = { }, class: { moz: { - broken: ':-moz-broken', dragOver: ':-moz-drag-over', loading: ':-moz-loading', localeDir: ':-moz-locale-dir', @@ -68,7 +67,6 @@ const nonStandard = { }, property: { font: { smooth: 'font-smooth' }, - zoom: 'zoom', }, }; diff --git a/src/config/properties/order.ts b/src/config/properties/order.ts index 69e2a50..5877b80 100644 --- a/src/config/properties/order.ts +++ b/src/config/properties/order.ts @@ -20,26 +20,27 @@ import { import { createAtRule } from '#utils/create-at-rule/create-at-rule.ts'; import { createRule } from '#utils/create-rule/create-rule.ts'; -import { appearance } from './appearance.ts'; -import { boxModel } from './box-model.ts'; -import { common } from './common.ts'; -import { content } from './content.ts'; import { experimental } from './experimental.ts'; -import { image } from './image.ts'; -import { interaction } from './interaction.ts'; -import { layout } from './layout.ts'; +import { appearance } from './groups/appearance.ts'; +import { boxModel } from './groups/box-model.ts'; +import { common } from './groups/common.ts'; +import { content } from './groups/content.ts'; +import { image } from './groups/image.ts'; +import { interaction } from './groups/interaction.ts'; +import { layout } from './groups/layout.ts'; +import { positioning } from './groups/positioning.ts'; +import { svg } from './groups/svg.ts'; +import { transitions } from './groups/transitions.ts'; +import { typography } from './groups/typography.ts'; +import { limitedAvailability } from './limited-availability.ts'; import { nonStandard } from './non-standard.ts'; -import { positioning } from './positioning.ts'; -import { svg } from './svg.ts'; -import { transitions } from './transitions.ts'; -import { typography } from './typography.ts'; const experimentalPseudoElement = experimental.pseudo.element; -const experimentalPseudoElementMozilla = experimental.pseudo.element.moz; const experimentalPseudoElementWebkit = experimental.pseudo.element.webkit; const nonStandardPseudoElementMozilla = nonStandard.pseudo.element.moz; const nonStandardPseudoElementWebkit = nonStandard.pseudo.element.webkit; const experimentalPseudoClass = experimental.pseudo.class; +const limitedAvailabilityPseudoElement = limitedAvailability.pseudo.element; const nonStandardPseudoClassMozilla = nonStandard.pseudo.class.moz; const propertiesOrder = { 'order/order': [ @@ -63,23 +64,31 @@ const propertiesOrder = { await createRule({ selector: '::highlight' }), await createRule({ selector: '::part' }), await createRule({ selector: '::slotted' }), - await createRule({ selector: experimentalPseudoElement.targetText }), - await createRule({ selector: experimentalPseudoElement.error.spelling }), - await createRule({ selector: experimentalPseudoElement.error.grammar }), - await createRule({ selector: experimentalPseudoElement.viewTransition }), - await createRule({ selector: experimentalPseudoElement.view.transition.group }), + await createRule({ selector: '::target-text' }), await createRule({ - selector: experimentalPseudoElement.view.transition.imagePair, + selector: limitedAvailabilityPseudoElement.error.spelling, }), - await createRule({ selector: experimentalPseudoElement.view.transition.old }), - await createRule({ selector: experimentalPseudoElement.view.transition.new }), + await createRule({ selector: limitedAvailabilityPseudoElement.error.grammar }), await createRule({ - selector: experimentalPseudoElementWebkit.slider.runnableTrack, + selector: limitedAvailabilityPseudoElement.viewTransition, + }), + await createRule({ + selector: limitedAvailabilityPseudoElement.view.transition.group, + }), + await createRule({ + selector: limitedAvailabilityPseudoElement.view.transition.imagePair, + }), + await createRule({ + selector: limitedAvailabilityPseudoElement.view.transition.old, + }), + await createRule({ + selector: limitedAvailabilityPseudoElement.view.transition.new, + }), + await createRule({ + selector: nonStandardPseudoElementWebkit.slider.runnableTrack, }), await createRule({ selector: experimentalPseudoElementWebkit.slider.thumb }), - await createRule({ selector: experimentalPseudoElementMozilla.focusInner }), await createRule({ selector: nonStandardPseudoElementWebkit.innerSpinButton }), - await createRule({ selector: nonStandardPseudoElementWebkit.meter.bar }), await createRule({ selector: nonStandardPseudoElementWebkit.meter.value.evenLessGood, }), @@ -108,16 +117,10 @@ const propertiesOrder = { await createRule({ selector: nonStandardPseudoElementMozilla.colorSwatch }), await createRule({ selector: nonStandardPseudoElementMozilla.list.bullet }), await createRule({ selector: nonStandardPseudoElementMozilla.list.number }), - await createRule({ selector: nonStandardPseudoElementMozilla.page }), - await createRule({ selector: nonStandardPseudoElementMozilla.pageSequence }), - await createRule({ selector: nonStandardPseudoElementMozilla.pageSequence }), await createRule({ selector: nonStandardPseudoElementMozilla.progressBar }), await createRule({ selector: nonStandardPseudoElementMozilla.range.track }), await createRule({ selector: nonStandardPseudoElementMozilla.range.progress }), await createRule({ selector: nonStandardPseudoElementMozilla.range.thumb }), - await createRule({ - selector: nonStandardPseudoElementMozilla.scrolledPageSequence, - }), await createRule({ selector: ':root' }), await createRule({ selector: ':lang' }), await createRule({ selector: ':scope' }), @@ -162,7 +165,7 @@ const propertiesOrder = { await createRule({ selector: ':placeholder-shown' }), await createRule({ selector: ':default' }), await createRule({ selector: ':past' }), - await createRule({ selector: ':current' }), + await createRule({ selector: experimentalPseudoClass.current }), await createRule({ selector: ':future' }), await createRule({ selector: ':playing' }), await createRule({ selector: ':paused' }), @@ -176,18 +179,19 @@ const propertiesOrder = { await createRule({ selector: ':out-of-range' }), await createRule({ selector: ':empty' }), await createRule({ selector: ':target' }), + await createRule({ selector: experimentalPseudoElement.detailsContent }), await createRule({ selector: experimentalPseudoClass.targetWithin }), await createRule({ selector: ':any-link' }), - await createRule({ selector: ':local-link' }), + await createRule({ selector: experimentalPseudoClass.localLink }), await createRule({ selector: ':defined' }), await createRule({ selector: ':dir' }), await createRule({ selector: ':where' }), await createRule({ selector: ':is' }), await createRule({ selector: ':has' }), + await createRule({ selector: experimentalPseudoClass.hasSlotted }), await createRule({ selector: ':not' }), await createRule({ selector: experimentalPseudoClass.blank }), - await createRule({ selector: experimentalPseudoClass.state }), - await createRule({ selector: nonStandardPseudoClassMozilla.broken }), + await createRule({ selector: ':state' }), await createRule({ selector: nonStandardPseudoClassMozilla.dragOver }), await createRule({ selector: nonStandardPseudoClassMozilla.node.first }), await createRule({ selector: nonStandardPseudoClassMozilla.node.last }),