refactor: properties (#319)

Co-authored-by: nikkeyl <[email protected]>

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',
     },
   },
 };

src/config/properties/appearance.ts → 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',

src/config/properties/box-model.ts → 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,
     ],
   }),

src/config/properties/common.ts → 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 = [

src/config/properties/image.ts → 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 = [

src/config/properties/interaction.ts → 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',

src/config/properties/layout.ts → 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',

src/config/properties/positioning.ts → 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,
     ],
   }),
 ];

src/config/properties/svg.ts → src/config/properties/groups/svg.ts

@@ -3,15 +3,20 @@ 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',
     properties: ['marker', 'marker-start', 'marker-mid', 'marker-end'],
   }),
   await createPropertiesGroup({
     groupName: 'Shape',
-    properties: ['shape-outside', 'shape-margin', 'shape-image-threshold'],
+    properties: [
+      'shape-rendering',
+      'shape-outside',
+      'shape-margin',
+      'shape-image-threshold',
+    ],
   }),
 ];
 

src/config/properties/transitions.ts → 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 = [

src/config/properties/typography.ts → 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',

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',
+    },
   },
 };