eslint-plugin-vanilla-extract/src/css-rules/concentric-order/concentric-groups.ts

// CSS property groups in order of importance (outside -> inside)
export const concentricGroups: { [key: string]: string[] } = {
  boxSizing: ['all', 'box-sizing', 'aspect-ratio', 'contain'],

  position: [
    'position',
    'z-index',
    'top',
    'right',
    'bottom',
    'left',
    'offset',
    'offset-path',
    'offset-distance',
    'offset-rotate',
    'inset',
    'inset-block',
    'inset-block-start',
    'inset-block-end',
    'inset-inline',
    'inset-inline-start',
    'inset-inline-end',
  ],

  display: ['display', 'float', 'clear', 'isolation', 'appearance'],

  flex: ['flex', 'flex-basis', 'flex-direction', 'flex-flow', 'flex-grow', 'flex-shrink', 'flex-wrap'],

  grid: [
    'grid',
    'grid-area',
    'grid-template',
    'grid-template-areas',
    'grid-template-rows',
    'grid-template-columns',
    'grid-row',
    'grid-row-start',
    'grid-row-end',
    'grid-column',
    'grid-column-start',
    'grid-column-end',
    'grid-auto-rows',
    'grid-auto-columns',
    'grid-auto-flow',
    'grid-gap',
    'grid-row-gap',
    'grid-column-gap',
  ],

  alignment: [
    'align-content',
    'align-items',
    'align-self',
    'justify-content',
    'justify-items',
    'justify-self',
    'place-content',
    'place-items',
    'place-self',
    'order',
    'gap',
    'row-gap',
    'column-gap',
  ],

  columns: [
    'columns',
    'column-fill',
    'column-rule',
    'column-rule-width',
    'column-rule-style',
    'column-rule-color',
    'column-span',
    'column-count',
    'column-width',
  ],

  transform: [
    'backface-visibility',
    'perspective',
    'perspective-origin',
    'transform',
    'transform-origin',
    'transform-style',
    'transform-box',
  ],

  transitions: [
    'transition',
    'transition-delay',
    'transition-duration',
    'transition-property',
    'transition-timing-function',
    'transition-behavior',
  ],

  visibility: [
    'visibility',
    'opacity',
    'backdrop-filter',
    'content-visibility',
    'filter',
    'mix-blend-mode',
    'will-change',
  ],

  shape: ['clip-path', 'shape-outside', 'shape-image-threshold', 'shape-margin'],

  margin: [
    'margin',
    'margin-top',
    'margin-right',
    'margin-bottom',
    'margin-left',
    'margin-block',
    'margin-block-start',
    'margin-block-end',
    'margin-inline',
    'margin-inline-start',
    'margin-inline-end',
    'margin-trim',
  ],

  outline: ['outline', 'outline-offset', 'outline-width', 'outline-style', 'outline-color'],

  border: [
    'border',
    'border-top',
    'border-right',
    'border-bottom',
    'border-left',
    'border-width',
    'border-top-width',
    'border-right-width',
    'border-bottom-width',
    'border-left-width',
    'border-style',
    'border-top-style',
    'border-right-style',
    'border-bottom-style',
    'border-left-style',
    'border-radius',
    'border-top-left-radius',
    'border-top-right-radius',
    'border-bottom-left-radius',
    'border-bottom-right-radius',
    'border-start-start-radius',
    'border-start-end-radius',
    'border-end-start-radius',
    'border-end-end-radius',
    'border-color',
    'border-top-color',
    'border-right-color',
    'border-bottom-color',
    'border-left-color',
    'border-image',
    'border-image-source',
    'border-image-width',
    'border-image-outset',
    'border-image-repeat',
    'border-image-slice',
    'border-block',
    'border-block-start',
    'border-block-end',
    'border-block-width',
    'border-block-style',
    'border-block-color',
    'border-inline',
    'border-inline-start',
    'border-inline-end',
    'border-inline-width',
    'border-inline-style',
    'border-inline-color',
  ],

  boxShadow: ['box-shadow'],

  background: [
    'background',
    'background-attachment',
    'background-clip',
    'background-color',
    'background-image',
    'background-origin',
    'background-position',
    'background-repeat',
    'background-size',
    'background-blend-mode',
    'object-fit',
    'object-position',
    'image-orientation',
    'image-rendering',
  ],

  cursor: ['cursor', 'pointer-events', 'touch-action'],

  padding: [
    'padding',
    'padding-top',
    'padding-right',
    'padding-bottom',
    'padding-left',
    'padding-block',
    'padding-block-start',
    'padding-block-end',
    'padding-inline',
    'padding-inline-start',
    'padding-inline-end',
  ],

  dimensions: [
    'width',
    'min-width',
    'max-width',
    'height',
    'min-height',
    'max-height',
    'block-size',
    'min-block-size',
    'max-block-size',
    'inline-size',
    'min-inline-size',
    'max-inline-size',
  ],

  overflow: [
    'overflow',
    'overflow-x',
    'overflow-y',
    'overflow-block',
    'overflow-inline',
    'overflow-clip-margin',
    'overflow-anchor',
    'overflow-wrap',
    'overscroll-behavior',
    'overscroll-behavior-x',
    'overscroll-behavior-y',
    'resize',
    'scrollbar-width',
    'scrollbar-color',
    'scrollbar-gutter',
    'scroll-behavior',
    'scroll-margin',
    'scroll-padding',
    'scroll-snap-align',
    'scroll-snap-stop',
    'scroll-snap-type',
  ],

  listStyle: ['list-style', 'list-style-type', 'list-style-position', 'list-style-image', 'caption-side'],

  tables: ['table-layout', 'border-collapse', 'border-spacing', 'empty-cells'],

  animation: [
    'animation',
    'animation-name',
    'animation-duration',
    'animation-timing-function',
    'animation-delay',
    'animation-iteration-count',
    'animation-direction',
    'animation-fill-mode',
    'animation-play-state',
  ],

  text: [
    'vertical-align',
    'direction',
    'writing-mode',
    'text-orientation',
    'unicode-bidi',
    'tab-size',
    'text-align',
    'text-align-last',
    'text-justify',
    'text-indent',
    'text-transform',
    'text-decoration',
    'text-decoration-color',
    'text-decoration-line',
    'text-decoration-style',
    'text-decoration-thickness',
    'text-decoration-skip-ink',
    'text-underline-position',
    'text-rendering',
    'text-shadow',
    'text-overflow',
    'text-wrap',
    'text-size-adjust',
    'text-combine-upright',
    'hyphens',
    'line-break',
    'ruby-position',
    'caret-color',
    'user-select',
  ],

  textSpacing: [
    'line-height',
    'word-spacing',
    'letter-spacing',
    'white-space',
    'word-break',
    'word-wrap',
    'orphans',
    'widows',
    'color',
  ],

  font: [
    'font',
    'font-family',
    'font-size',
    'font-size-adjust',
    'font-stretch',
    'font-weight',
    'font-smoothing',
    'osx-font-smoothing',
    'font-variant',
    'font-style',
    'font-feature-settings',
    'font-kerning',
    'font-optical-sizing',
  ],

  content: ['content', 'quotes'],

  counters: ['counter-reset', 'counter-increment', 'counter-set'],

  breaks: ['page-break-before', 'page-break-after', 'page-break-inside', 'break-before', 'break-after', 'break-inside'],
};

/**
 * Export all available groups for use in custom groups rule
 */
export const availableGroups = Object.keys(concentricGroups);