diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts index db23b9c33f5..b66fa550564 100644 --- a/packages/@react-spectrum/s2/style/spectrum-theme.ts +++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts @@ -687,15 +687,19 @@ export const style = createTheme({ containIntrinsicWidth: createSpectrumSizingProperty('containIntrinsicWidth', width), containIntrinsicHeight: createSpectrumSizingProperty('containIntrinsicHeight', height), minHeight: createSpectrumSizingProperty('minHeight', height), - maxHeight: createSpectrumSizingProperty('maxHeight', { - ...height, - none: 'none' - }), + maxHeight: createSpectrumSizingProperty('maxHeight', (() => { + // auto is not a valid value for maxHeight + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const {auto, ...rest} = height; + return {...rest, none: 'none'}; + })()), minWidth: createSpectrumSizingProperty('minWidth', width), - maxWidth: createSpectrumSizingProperty('maxWidth', { - ...width, - none: 'none' - }), + maxWidth: createSpectrumSizingProperty('maxWidth', (() => { + // auto is not a valid value for maxWidth + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const {auto, ...rest} = width; + return {...rest, none: 'none'}; + })()), borderStartWidth: new MappedProperty('borderInlineStartWidth', borderWidth), borderEndWidth: new MappedProperty('borderInlineEndWidth', borderWidth), borderTopWidth: borderWidth, diff --git a/packages/dev/s2-docs/pages/s2/style-macro.mdx b/packages/dev/s2-docs/pages/s2/style-macro.mdx index 2c77970a104..0e23cc5968d 100644 --- a/packages/dev/s2-docs/pages/s2/style-macro.mdx +++ b/packages/dev/s2-docs/pages/s2/style-macro.mdx @@ -1,10 +1,10 @@ import {Layout} from '../../src/Layout'; import {InlineAlert, Heading, Content, Link} from '@react-spectrum/s2'; import {StyleMacroProperties} from '../../src/StyleMacroProperties'; -import {getPropertyDefinitions, getShorthandDefinitions} from '../../src/styleProperties'; +import {getPropertyDefinitions} from '../../src/styleProperties'; export default Layout; -export const section = 'Components'; +export const section = 'Reference'; export const tags = ['style', 'macro', 'spectrum', 'custom', 'values', 'reference']; export const description = 'Reference table for the style macro'; @@ -24,7 +24,7 @@ All Spectrum 2 color tokens are available across color properties (e.g., `backgr ## Text -Spectrum 2 typography can be applied via the `font` [shorthand](#shorthands), which sets `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, and `color`. You can override any of these individually. +Spectrum 2 typography can be applied via the `font` shorthand, which sets `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, and `color`. You can override any of these individually. Note that `font` should be applied on a per element basis rather than globally so as to properly conform with Spectrum designs. ```tsx @@ -52,12 +52,6 @@ Note that `font` should be applied on a per element basis rather than globally s -## Shorthands - -Shorthands apply their provided value to commonly grouped properties. - - - ## Conditions - + diff --git a/packages/dev/s2-docs/src/S2Colors.tsx b/packages/dev/s2-docs/src/S2Colors.tsx index 977c986f752..6a622d7b910 100644 --- a/packages/dev/s2-docs/src/S2Colors.tsx +++ b/packages/dev/s2-docs/src/S2Colors.tsx @@ -151,7 +151,7 @@ function ColorScale({scale}) { )); } -function Color({name, className}) { +export function Color({name, className}) { return (
diff --git a/packages/dev/s2-docs/src/StyleMacroProperties.tsx b/packages/dev/s2-docs/src/StyleMacroProperties.tsx index a01f6d8afc9..75062f505bb 100644 --- a/packages/dev/s2-docs/src/StyleMacroProperties.tsx +++ b/packages/dev/s2-docs/src/StyleMacroProperties.tsx @@ -1,7 +1,8 @@ import {Accordion, Disclosure, DisclosurePanel, DisclosureTitle} from '@react-spectrum/s2'; -import {BackgroundColorsDisclosure, GlobalColorsDisclosure, SemanticColorsDisclosure, TextColorsDisclosure} from './S2Colors'; +import {BackgroundColorsDisclosure, Color, GlobalColorsDisclosure, SemanticColorsDisclosure, TextColorsDisclosure} from './S2Colors'; import {styles as codeStyles} from './Code'; import {ColorLink} from './Link'; +import {colorSwatch} from './color.macro' with {type: 'macro'}; import {Punctuation} from './types'; import React, {ReactNode} from 'react'; import {S2Typography} from './S2Typography'; @@ -10,6 +11,42 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; const codeStyle = style({font: {default: 'code-xs', lg: 'code-sm'}}); +function BaseColorsAccordion() { + return ( +
+ + {styleMacroValueDesc['baseColors'].body} + +
+ ); +} + +function NoneValueListItem() { + return ( +
  • + + 'none' + +
    • + ); +} + +function CurrentColorListItem({links}: {links: {[value: string]: {href: string, isRelative?: boolean}}}) { + return ( +
  • + + + currentColor + + +
    • + ); +} + const styleMacroValueDesc: Record = { 'baseSpacing': { description: 'Base spacing values in pixels, following a 4px grid. Will be converted to rem.', @@ -18,7 +55,7 @@ const styleMacroValueDesc: Record ( {idx > 0 && Punctuation(' | ')} - '{val}' + {val} ))} @@ -31,7 +68,7 @@ const styleMacroValueDesc: Record ( {idx > 0 && Punctuation(' | ')} - '{val}' + {val} ))} @@ -50,7 +87,6 @@ const styleMacroValueDesc: RecordbaseColors consists of the following values below:, body: ( <> @@ -79,11 +115,50 @@ const styleMacroValueDesc: RecordA CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh' }, 'number': { description: <>A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices. + }, + 'full': { + description: <>Resolves to 100%. + }, + 'screen': { + description: <>Resolves to 100vh for height or 100vw for width. + }, + 'emphasized': { + description: 'Shadow for emphasized states.' + }, + 'elevated': { + description: 'Shadow for elevated surfaces.' + }, + 'dragged': { + description: 'Shadow for elements being dragged.' + }, + 'square': { + description: <>1:1 aspect ratio. + }, + 'video': { + description: <>16:9 aspect ratio. + }, + 'default': { + description: 'Sets transition property to color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, and backdrop-filter.' + }, + 'colors': { + description: 'Sets transition property to color, background-color, border-color, text-decoration-color, fill, and stroke.' + }, + 'opacity': { + description: 'Sets transition property to opacity.' + }, + 'shadow': { + description: 'Sets transition property to box-shadow.' + }, + 'transform': { + description: 'Sets transition property to transform, translate, scale, and rotate properties.' + }, + 'all': { + description: 'Sets transition to all animatable properties.' } }; @@ -96,11 +171,14 @@ interface StyleMacroPropertyDefinition { } interface StyleMacroPropertiesProps { - properties: {[propertyName: string]: StyleMacroPropertyDefinition} + properties: {[propertyName: string]: StyleMacroPropertyDefinition}, + sort?: boolean } -export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) { - let propertyNames = Object.keys(properties); +let sizingProperties = ['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'flexBasis', 'containIntrinsicWidth', 'containIntrinsicHeight']; + +export function StyleMacroProperties({properties, sort = true}: StyleMacroPropertiesProps) { + let propertyNames = sort ? Object.keys(properties).sort() : Object.keys(properties); return ( @@ -117,162 +195,255 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) { -
    - {/* for color and backgroundColor, skip values list and render disclosures directly since the contents of the disclosures cover the mapped values */} - {(() => { - if (propertyName === 'color') { - return ( - - - {styleMacroValueDesc['baseColors'].body} - - ); - } - if (propertyName === 'backgroundColor') { - return ( - - - {styleMacroValueDesc['baseColors'].body} - - ); - } - return ( -
    -

    Values

    - - {values.map((value, i) => { - let content; - if (links[value]) { - content = ( - - {value} - - ); - } else if (value === 'baseColors') { - content = {value}; - } else { - content = '{value}'; - } + {(() => { + // if all values are numbers, we will render with pipes instead of bullets + let allValuesAreNumbers = values.length > 0 && values.every(v => typeof v === 'number'); - return ( + return ( +
    + {/* this is for shorthands */} + {propDef.mapping && ( +
    +

    Maps to

    + + {propDef.mapping.map((mappedProp, i) => ( - {i > 0 && Punctuation(' | ')} - {content} - - ); - })} - {/* for additional types properties (e.g. properties that have negative spacing or accept number/length percentage) we add them to the end */} - {propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => { - return ( - - {(values.length > 0 || i > 0) && Punctuation(' | ')} - {typeName} + {i > 0 && Punctuation(', ')} + {mappedProp} - ); - })} - -
    - ); - })()} - {values.map((value, i) => { - let valueDesc = styleMacroValueDesc[value]; - // special case handling for font and spacing specific value descriptions so they don't get rendered for - // other properties that may include the same values (e.g. heading in Colors) - // skip baseColors here as it will be rendered after - let shouldShowDescription = false; - if (value === 'fontSize' && (propertyName === 'fontSize' || propertyName === 'font')) { - shouldShowDescription = true; - } else if (['ui', 'heading', 'title', 'body', 'detail', 'code'].includes(value) && propertyName === 'lineHeight') { - shouldShowDescription = true; - } else if (['text-to-control', 'text-to-visual', 'edge-to-text', 'pill'].includes(value)) { - shouldShowDescription = true; - } - - if (shouldShowDescription && (valueDesc?.description || valueDesc?.body)) { - return ( -
    -

    - - '{value}' - -

    - {valueDesc.description && ( -

    - {valueDesc.description} -

    - )} - {valueDesc.body} + ))} +
    - ); - } - return null; - })} - {/* show S2Typography for "fontSize" property and "font" shorthand specificatlly */} - {(propertyName === 'fontSize' || propertyName === 'font') && ( - - )} - {/* for other color property names show baseColors description since the value list is displayed still */} - {values.includes('baseColors') && styleMacroValueDesc['baseColors'] && (propertyName !== 'color' && propertyName !== 'backgroundColor') && ( -
    - {styleMacroValueDesc['baseColors'].description && ( -

    - {styleMacroValueDesc['baseColors'].description} -

    )} - {styleMacroValueDesc['baseColors'].body} -
    - )} - {/* for the types that have descriptions, we add them below with the associated descriptions and/or mappings */} - {propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => { - let typeLink = styleMacroValueDesc[typeName]; - if (typeLink?.description || typeLink?.body) { - // dont render the type name for properties that only have one special value (e.g. baseSpacing) that has an associated description - // so that we don't double up on rendering the value name - let shouldSkipTypeName = values.length === 0 && propDef.additionalTypes?.length === 1; + {(() => { + // for color and backgroundColor, skip values list and render disclosures directly since the contents of the disclosures cover the mapped values + if (propertyName === 'color') { + return ( + + + {styleMacroValueDesc['baseColors'].body} + + ); + } + if (propertyName === 'backgroundColor') { + return ( + + + {styleMacroValueDesc['baseColors'].body} + + ); + } - return ( -
    - {!shouldSkipTypeName && ( -

    - - {typeName} - -

    - )} - {typeLink.description && ( -

    - {typeLink.description} -

    - )} - {typeLink.body} + // for fontSize and font, render typography examples + if (propertyName === 'fontSize' || propertyName === 'font') { + return ; + } + + // for borderColor, outlineColor, fill, and stroke, render color swatches + if (propertyName === 'borderColor') { + return ( +
    +

    Values

    +
    + + +
    + +
    + ); + } + + if (propertyName === 'outlineColor') { + return ( +
    +

    Values

    +
    + +
    + +
    + ); + } + + if (propertyName === 'fill') { + return ( +
    +

    Values

    +
      + + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    + ); + } + + if (propertyName === 'stroke') { + return ( +
    +

    Values

    +
      + + +
    + +
    + ); + } + + return ( +
    +

    Values

    + {allValuesAreNumbers ? ( +
    + + {values.map((value, i) => ( + + {i > 0 && Punctuation(' | ')} + {value} + + ))} + + {propDef.description && ( +
    + {propDef.description} +
    + )} +
    + ) : ( +
      + {values.map((value, i) => { + let valueDesc = styleMacroValueDesc[value]; + + // special case for 'full' for border radius property + if (value === 'full' && propertyName.includes('Radius')) { + valueDesc = { + description: <>Resolves to 9999px for fully rounded corners. + }; + } + + // special case handling for font and spacing specific value descriptions so they don't get rendered for + // other properties that may include the same values (e.g. heading in Colors) + let shouldShowDescription = false; + if (value === 'fontSize' && (propertyName === 'fontSize' || propertyName === 'font')) { + shouldShowDescription = true; + } else if (['ui', 'heading', 'title', 'body', 'detail', 'code'].includes(value) && (propertyName === 'lineHeight' || propertyName === 'fontWeight')) { + shouldShowDescription = true; + } else if (['text-to-control', 'text-to-visual', 'edge-to-text', 'pill'].includes(value)) { + shouldShowDescription = true; + } else if (value === 'baseColors' && propertyName !== 'color' && propertyName !== 'backgroundColor') { + shouldShowDescription = true; + } else if (['default', 'colors', 'opacity', 'shadow', 'transform', 'all'].includes(value) && propertyName === 'transition') { + // show description for transition-specific values only when rendering transition property so they don't leak + shouldShowDescription = true; + } else if (value === 'screen' && (propertyName === 'backgroundBlendMode' || propertyName === 'mixBlendMode')) { + // don't show dimension description for blend mode screen value + shouldShowDescription = false; + } else if (value === 'number') { + // only show number description for sizing properties (width, height, etc.) + shouldShowDescription = sizingProperties.includes(propertyName); + } else if (valueDesc && !['ui', 'heading', 'title', 'body', 'detail', 'code', 'fontSize', 'default', 'colors', 'opacity', 'shadow', 'transform', 'all'].includes(value)) { + // Show description for all other values that have one + shouldShowDescription = true; + } + let content; + if (links[value]) { + content = ( + + {value} + + ); + } else if (value === 'baseColors') { + content = {value}; + } else { + content = '{value}'; + } + + return ( +
    • + + {content} + + {shouldShowDescription && valueDesc?.description && ( +
      + {valueDesc.description} +
      + )} + {shouldShowDescription && valueDesc?.body && ( +
      + {valueDesc.body} +
      + )} +
      • + ); + })} + {/* for additional types properties (e.g. properties that have negative spacing or accept number/length percentage) we add them to the end */} + {propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => { + let typeDesc = styleMacroValueDesc[typeName]; + // make sure only to show "number" description for sizing properties + let shouldShowTypeDescription = typeName !== 'number' || sizingProperties.includes(propertyName); + return ( +
    • + + {typeName} + + {shouldShowTypeDescription && typeDesc?.description && ( +
      + {typeDesc.description} +
      + )} + {shouldShowTypeDescription && typeDesc?.body && ( +
      + {typeDesc.body} +
      + )} +
      • + ); + })} +
    + )} +
    + ); + })()} + {propDef.description && !allValuesAreNumbers && ( +
    + {propDef.description}
    - ); - } - return null; - })} - {propDef.mapping && ( -
    -

    Maps to

    - - {propDef.mapping.map((mappedProp, i) => ( - - {i > 0 && Punctuation(', ')} - {mappedProp} - - ))} - -
    - )} - {propDef.description && ( -
    - {propDef.description} + )}
    - )} -
    + ); + })()} ); diff --git a/packages/dev/s2-docs/src/styleProperties.ts b/packages/dev/s2-docs/src/styleProperties.ts index ad1e6501f16..03db3cfc6de 100644 --- a/packages/dev/s2-docs/src/styleProperties.ts +++ b/packages/dev/s2-docs/src/styleProperties.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -// Properties that use PercentageProperty (accept LengthPercentage in addition to mapped values) +// Properties that use PercentageProperty (accept lengthPercentage in addition to mapped values) const percentageProperties = new Set([ 'top', 'left', 'bottom', 'right', 'insetStart', 'insetEnd', @@ -19,7 +19,7 @@ const percentageProperties = new Set([ 'textIndent', 'translateX', 'translateY' ]); -// Properties that use SizingProperty (accept number and LengthPercentage in addition to mapped values) +// Properties that use SizingProperty (accept number and lengthPercentage in addition to mapped values) const sizingProperties = new Set([ 'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'flexBasis', 'containIntrinsicWidth', 'containIntrinsicHeight' @@ -44,8 +44,8 @@ const negativeSpacingProperties = new Set([ ]); // Spacing values used across multiple properties -const baseSpacingValues = ['0', '2', '4', '8', '12', '16', '20', '24', '28', '32', '36', '40', '44', '48', '56', '64', '80', '96']; -const negativeBaseSpacingValues = ['-2', '-4', '-8', '-12', '-16', '-20', '-24', '-28', '-32', '-36', '-40', '-44', '-48', '-56', '-64', '-80', '-96']; +const baseSpacingValues = [0, 2, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 80, 96]; +const negativeBaseSpacingValues = [-2, -4, -8, -12, -16, -20, -24, -28, -32, -36, -40, -44, -48, -56, -64, -80, -96]; const relativeSpacingValues = ['text-to-control', 'text-to-visual', 'edge-to-text', 'pill']; const heightBaseValues = ['auto', 'full', 'min', 'max', 'fit', 'screen']; const fontSize = [ @@ -86,7 +86,7 @@ const colorPropertyValues: {[key: string]: string[]} = { stroke: ['none', 'currentColor', 'baseColors'] }; -const dimensionsPropertyValues: {[key: string]: string[]} = { +const dimensionsPropertyValues: {[key: string]: (string | number)[]} = { borderSpacing: [], flexBasis: ['auto', 'full'], rowGap: relativeSpacingValues, @@ -99,12 +99,12 @@ const dimensionsPropertyValues: {[key: string]: string[]} = { maxHeight: [...heightBaseValues, 'none'], minWidth: heightBaseValues, maxWidth: [...heightBaseValues, 'none'], - borderStartWidth: ['0', '1', '2', '4'], - borderEndWidth: ['0', '1', '2', '4'], - borderTopWidth: ['0', '1', '2', '4'], - borderBottomWidth: ['0', '1', '2', '4'], + borderStartWidth: [0, 1, 2, 4], + borderEndWidth: [0, 1, 2, 4], + borderTopWidth: [0, 1, 2, 4], + borderBottomWidth: [0, 1, 2, 4], borderStyle: ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none'], - strokeWidth: ['0', '1', '2'], + strokeWidth: [0, 1, 2], marginStart: ['auto'], marginEnd: ['auto'], marginTop: ['auto'], @@ -138,7 +138,7 @@ const dimensionsPropertyValues: {[key: string]: string[]} = { aspectRatio: ['auto', 'square', 'video', 'number / number'] }; -const textPropertyValues: {[key: string]: string[]} = { +const textPropertyValues: {[key: string]: (string | number)[]} = { fontFamily: ['sans', 'serif', 'code'], fontSize: fontSize, fontWeight: ['normal', 'medium', 'bold', 'extra-bold', 'black', 'heading', 'title', 'detail'], @@ -159,7 +159,7 @@ const textPropertyValues: {[key: string]: string[]} = { boxDecorationBreak: ['slice', 'clone'] }; -const effectsPropertyValues: {[key: string]: string[]} = { +const effectsPropertyValues: {[key: string]: (string | number)[]} = { boxShadow: ['emphasized', 'elevated', 'dragged', 'none'], filter: ['emphasized', 'elevated', 'dragged', 'none'], borderTopStartRadius: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'], @@ -181,7 +181,7 @@ const effectsPropertyValues: {[key: string]: string[]} = { opacity: ['number'], outlineStyle: ['none', 'solid', 'dashed', 'dotted', 'double', 'inset'], outlineOffset: ['number'], - outlineWidth: ['0', '1', '2', '4'], + outlineWidth: [0, 1, 2, 4], transition: ['default', 'colors', 'opacity', 'shadow', 'transform', 'all', 'none'], transitionDelay: ['string', 'number'], transitionDuration: ['string', 'number'], @@ -196,7 +196,7 @@ const effectsPropertyValues: {[key: string]: string[]} = { animationPlayState: ['paused', 'running'] }; -const layoutPropertyValues: {[key: string]: string[]} = { +const layoutPropertyValues: {[key: string]: (string | number)[]} = { display: ['block', 'inline-block', 'inline', 'flex', 'inline-flex', 'grid', 'inline-grid', 'contents', 'list-item', 'none'], alignContent: ['normal', 'center', 'start', 'end', 'space-between', 'space-around', 'space-evenly', 'baseline', 'stretch'], alignItems: ['start', 'end', 'center', 'baseline', 'stretch'], @@ -237,7 +237,7 @@ const layoutPropertyValues: {[key: string]: string[]} = { order: ['number'] }; -const miscPropertyValues: {[key: string]: string[]} = { +const miscPropertyValues: {[key: string]: (string | number)[]} = { pointerEvents: ['none', 'auto'], touchAction: ['auto', 'none', 'pan-x', 'pan-y', 'manipulation', 'pinch-zoom'], userSelect: ['none', 'text', 'all', 'auto'], @@ -259,162 +259,205 @@ const miscPropertyValues: {[key: string]: string[]} = { caretColor: ['auto', 'transparent'] }; -const shorthandMapping: {[key: string]: {values: string[], mapping: string[]}} = { +const shorthandMapping: {[key: string]: {values: (string | number)[], mapping: string[], category: string}} = { padding: { values: relativeSpacingValues, - mapping: ['paddingTop', 'paddingBottom', 'paddingStart', 'paddingEnd'] + mapping: ['paddingTop', 'paddingBottom', 'paddingStart', 'paddingEnd'], + category: 'dimensions' }, paddingX: { values: relativeSpacingValues, - mapping: ['paddingStart', 'paddingEnd'] + mapping: ['paddingStart', 'paddingEnd'], + category: 'dimensions' }, paddingY: { values: relativeSpacingValues, - mapping: ['paddingTop', 'paddingBottom'] + mapping: ['paddingTop', 'paddingBottom'], + category: 'dimensions' }, margin: { values: ['auto'], - mapping: ['marginTop', 'marginBottom', 'marginStart', 'marginEnd'] + mapping: ['marginTop', 'marginBottom', 'marginStart', 'marginEnd'], + category: 'dimensions' }, marginX: { values: ['auto'], - mapping: ['marginStart', 'marginEnd'] + mapping: ['marginStart', 'marginEnd'], + category: 'dimensions' }, marginY: { values: ['auto'], - mapping: ['marginTop', 'marginBottom'] + mapping: ['marginTop', 'marginBottom'], + category: 'dimensions' }, scrollPadding: { values: [], - mapping: ['scrollPaddingTop', 'scrollPaddingBottom', 'scrollPaddingStart', 'scrollPaddingEnd'] + mapping: ['scrollPaddingTop', 'scrollPaddingBottom', 'scrollPaddingStart', 'scrollPaddingEnd'], + category: 'dimensions' }, scrollPaddingX: { values: [], - mapping: ['scrollPaddingStart', 'scrollPaddingEnd'] + mapping: ['scrollPaddingStart', 'scrollPaddingEnd'], + category: 'dimensions' }, scrollPaddingY: { values: [], - mapping: ['scrollPaddingTop', 'scrollPaddingBottom'] + mapping: ['scrollPaddingTop', 'scrollPaddingBottom'], + category: 'dimensions' }, scrollMargin: { values: [], - mapping: ['scrollMarginTop', 'scrollMarginBottom', 'scrollMarginStart', 'scrollMarginEnd'] + mapping: ['scrollMarginTop', 'scrollMarginBottom', 'scrollMarginStart', 'scrollMarginEnd'], + category: 'dimensions' }, scrollMarginX: { values: [], - mapping: ['scrollMarginStart', 'scrollMarginEnd'] + mapping: ['scrollMarginStart', 'scrollMarginEnd'], + category: 'dimensions' }, scrollMarginY: { values: [], - mapping: ['scrollMarginTop', 'scrollMarginBottom'] + mapping: ['scrollMarginTop', 'scrollMarginBottom'], + category: 'dimensions' }, borderWidth: { - values: ['0', '1', '2', '4'], - mapping: ['borderTopWidth', 'borderBottomWidth', 'borderStartWidth', 'borderEndWidth'] + values: [0, 1, 2, 4], + mapping: ['borderTopWidth', 'borderBottomWidth', 'borderStartWidth', 'borderEndWidth'], + category: 'dimensions' }, borderXWidth: { - values: ['0', '1', '2', '4'], - mapping: ['borderStartWidth', 'borderEndWidth'] + values: [0, 1, 2, 4], + mapping: ['borderStartWidth', 'borderEndWidth'], + category: 'dimensions' }, borderYWidth: { - values: ['0', '1', '2', '4'], - mapping: ['borderTopWidth', 'borderBottomWidth'] + values: [0, 1, 2, 4], + mapping: ['borderTopWidth', 'borderBottomWidth'], + category: 'dimensions' }, borderRadius: { values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'], - mapping: ['borderTopStartRadius', 'borderTopEndRadius', 'borderBottomStartRadius', 'borderBottomEndRadius'] + mapping: ['borderTopStartRadius', 'borderTopEndRadius', 'borderBottomStartRadius', 'borderBottomEndRadius'], + category: 'effects' }, borderTopRadius: { values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'], - mapping: ['borderTopStartRadius', 'borderTopEndRadius'] + mapping: ['borderTopStartRadius', 'borderTopEndRadius'], + category: 'effects' }, borderBottomRadius: { values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'], - mapping: ['borderBottomStartRadius', 'borderBottomEndRadius'] + mapping: ['borderBottomStartRadius', 'borderBottomEndRadius'], + category: 'effects' }, borderStartRadius: { values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'], - mapping: ['borderTopStartRadius', 'borderBottomStartRadius'] + mapping: ['borderTopStartRadius', 'borderBottomStartRadius'], + category: 'effects' }, borderEndRadius: { values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'], - mapping: ['borderTopEndRadius', 'borderBottomEndRadius'] + mapping: ['borderTopEndRadius', 'borderBottomEndRadius'], + category: 'effects' }, translate: { values: ['full'], - mapping: ['translateX', 'translateY'] + mapping: ['translateX', 'translateY'], + category: 'dimensions' }, scale: { values: ['number', '${number}%'], - mapping: ['scaleX', 'scaleY'] + mapping: ['scaleX', 'scaleY'], + category: 'dimensions' }, inset: { values: ['auto', 'full'], - mapping: ['top', 'bottom', 'insetStart', 'insetEnd'] + mapping: ['top', 'bottom', 'insetStart', 'insetEnd'], + category: 'dimensions' }, insetX: { values: ['auto', 'full'], - mapping: ['insetStart', 'insetEnd'] + mapping: ['insetStart', 'insetEnd'], + category: 'dimensions' }, insetY: { values: ['auto', 'full'], - mapping: ['top', 'bottom'] + mapping: ['top', 'bottom'], + category: 'dimensions' }, placeItems: { values: ['start', 'end', 'center', 'stretch'], - mapping: ['alignItems', 'justifyItems'] + mapping: ['alignItems', 'justifyItems'], + category: 'layout' }, placeContent: { - values: ['normal', 'center', 'start', 'end', 'space-between', 'space-around', 'space-evenly', 'baseline', 'stretch'], - mapping: ['alignContent', 'justifyContent'] + values: ['normal', 'center', 'start', 'end', 'space-between', 'space-around', 'space-evenly', 'stretch'], + mapping: ['alignContent', 'justifyContent'], + category: 'layout' }, placeSelf: { - values: ['auto', 'start', 'end', 'center', 'stretch', 'baseline'], - mapping: ['alignSelf', 'justifySelf'] + values: ['auto', 'start', 'end', 'center', 'stretch'], + mapping: ['alignSelf', 'justifySelf'], + category: 'layout' }, gap: { values: relativeSpacingValues, - mapping: ['rowGap', 'columnGap'] + mapping: ['rowGap', 'columnGap'], + category: 'dimensions' }, size: { values: heightBaseValues, - mapping: ['width', 'height'] + mapping: ['width', 'height'], + category: 'dimensions' }, minSize: { values: heightBaseValues, - mapping: ['minWidth', 'minHeight'] + mapping: ['minWidth', 'minHeight'], + category: 'dimensions' }, maxSize: { values: [...heightBaseValues, 'none'], - mapping: ['maxWidth', 'maxHeight'] + mapping: ['maxWidth', 'maxHeight'], + category: 'dimensions' }, overflow: { values: ['auto', 'hidden', 'clip', 'visible', 'scroll'], - mapping: ['overflowX', 'overflowY'] + mapping: ['overflowX', 'overflowY'], + category: 'layout' }, overscrollBehavior: { values: ['auto', 'contain', 'none'], - mapping: ['overscrollBehaviorX', 'overscrollBehaviorY'] + mapping: ['overscrollBehaviorX', 'overscrollBehaviorY'], + category: 'layout' }, gridArea: { values: ['string'], - mapping: ['gridColumnStart', 'gridColumnEnd', 'gridRowStart', 'gridRowEnd'] + mapping: ['gridColumnStart', 'gridColumnEnd', 'gridRowStart', 'gridRowEnd'], + category: 'layout' }, + // TODO: make sure this is merged transition: { values: ['default', 'colors', 'opacity', 'shadow', 'transform', 'all', 'none'], - mapping: ['transition', 'transitionDuration', 'transitionTimingFunction'] + mapping: ['transition', 'transitionDuration', 'transitionTimingFunction'], + category: 'effects' }, + // TODO: make sure this is merged animation: { values: ['string'], - mapping: ['animation', 'animationDuration', 'animationTimingFunction'] + mapping: ['animation', 'animationDuration', 'animationTimingFunction'], + category: 'effects' }, truncate: { - values: ['true'], - mapping: ['overflowX', 'overflowY', 'textOverflow', 'whiteSpace'] + values: ['boolean'], + mapping: ['overflowX', 'overflowY', 'textOverflow', 'whiteSpace'], + // this spans several categories, but text feels the most appropriate over layout + category: 'text' }, font: { values: [...fontSize], - mapping: ['fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'color'] + mapping: ['fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'color'], + // put this in text since that seemed to make the most sense, but note it includes color + category: 'text' } }; @@ -428,7 +471,7 @@ const conditionMapping: {[key: string]: string[]} = { '2xl': ['@media (min-width: ${pxToRem(1536)})'] }; -const properties: {[key: string]: {[key: string]: string[]}} = { +const properties: {[key: string]: {[key: string]: (string | number)[]}} = { color: colorPropertyValues, dimensions: dimensionsPropertyValues, text: textPropertyValues, @@ -450,11 +493,11 @@ export function getAdditionalTypes(propertyName: string): string[] { } if (sizingProperties.has(propertyName)) { - types.push('number', 'LengthPercentage'); + types.push('number', 'lengthPercentage'); } if (percentageProperties.has(propertyName)) { - types.push('LengthPercentage'); + types.push('lengthPercentage'); } return types; @@ -468,7 +511,12 @@ export const spacingTypeValues = { // a mapping of value to mdn links that should be replaced in place const mdnTypeLinks: {[key: string]: string} = { 'string': 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String', - 'number': 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number' + 'number': 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number', + 'currentColor': 'https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword', + 'transparent': 'https://developer.mozilla.org/en-US/docs/Web/CSS/named-color#transparent', + 'min': 'https://developer.mozilla.org/en-US/docs/Web/CSS/min-content', + 'max': 'https://developer.mozilla.org/en-US/docs/Web/CSS/max-content', + 'fit': 'https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content' }; // a mapping of value to links that should be replaced in place with the provided string @@ -490,6 +538,683 @@ const mdnPropertyLinks: {[key: string]: {[value: string]: string}} = { }, 'gridRowEnd': { 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end' + }, + 'marginStart': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start#auto' + }, + 'marginEnd': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end#auto' + }, + 'marginTop': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top#auto' + }, + 'marginBottom': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom#auto' + }, + 'insetStart': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start#auto' + }, + 'insetEnd': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end#auto' + }, + 'top': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/top#auto' + }, + 'left': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/left#auto' + }, + 'bottom': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/bottom#auto' + }, + 'right': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/right#auto' + }, + 'height': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/height#auto' + }, + 'width': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/width#auto' + }, + 'minHeight': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/min-height#auto' + }, + 'minWidth': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#auto' + }, + 'maxHeight': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/max-height#none' + }, + 'maxWidth': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#none' + }, + 'flexBasis': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#auto' + }, + 'containIntrinsicWidth': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-width#auto' + }, + 'containIntrinsicHeight': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-height#auto' + }, + 'aspectRatio': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio#auto' + }, + 'position': { + 'absolute': 'https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute', + 'fixed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed', + 'relative': 'https://developer.mozilla.org/en-US/docs/Web/CSS/position#relative', + 'sticky': 'https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky', + 'static': 'https://developer.mozilla.org/en-US/docs/Web/CSS/position#static' + }, + 'caretColor': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color#auto', + 'transparent': 'https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color#color_value' + }, + 'borderStyle': { + 'solid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#solid', + 'dashed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#dashed', + 'dotted': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#dotted', + 'double': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#double', + 'hidden': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#hidden', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#none' + }, + 'outlineStyle': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style#none', + 'solid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style#solid', + 'dashed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style#dashed', + 'dotted': 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style#dotted', + 'double': 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style#double', + 'inset': 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style#inset' + }, + 'transform': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform' + }, + 'boxDecorationBreak': { + 'slice': 'https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break#slice', + 'clone': 'https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break#clone' + }, + 'hyphens': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#none', + 'manual': 'https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#manual', + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#auto' + }, + 'lineClamp': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/line-clamp' + }, + 'listStyleType': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#none', + 'disc': 'https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#disc', + 'decimal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#decimal' + }, + 'listStylePosition': { + 'inside': 'https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position#inside', + 'outside': 'https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position#outside' + }, + 'textTransform': { + 'uppercase': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#uppercase', + 'lowercase': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#lowercase', + 'capitalize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#capitalize', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#none' + }, + 'textAlign': { + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#start', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#center', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#end', + 'justify': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#justify' + }, + 'verticalAlign': { + 'baseline': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#baseline', + 'top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#top', + 'middle': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#middle', + 'bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#bottom', + 'text-top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#text-top', + 'text-bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#text-bottom', + 'sub': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#sub', + 'super': 'https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#super' + }, + 'textDecoration': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration#none', + 'underline': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line#underline', + 'overline': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line#overline', + 'line-through': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line#line-through' + }, + 'textOverflow': { + 'ellipsis': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#ellipsis', + 'clip': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#clip' + }, + 'whiteSpace': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#normal', + 'nowrap': 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#nowrap', + 'pre': 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#pre', + 'pre-line': 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#pre-line', + 'pre-wrap': 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#pre-wrap', + 'break-spaces': 'https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#break-spaces' + }, + 'textWrap': { + 'wrap': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#wrap', + 'nowrap': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#nowrap', + 'balance': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#balance', + 'pretty': 'https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#pretty' + }, + 'wordBreak': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#normal', + 'break-all': 'https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-all', + 'keep-all': 'https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#keep-all', + 'break-word': 'https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word' + }, + 'overflowWrap': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#normal', + 'anywhere': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#anywhere', + 'break-word': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#break-word' + }, + 'display': { + 'block': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#block', + 'inline-block': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#inline-block', + 'inline': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#inline', + 'flex': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#flex', + 'inline-flex': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#inline-flex', + 'grid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#grid', + 'inline-grid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#inline-grid', + 'contents': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#contents', + 'list-item': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#list-item', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/display#none' + }, + 'alignContent': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#normal', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#center', + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#start', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#end', + 'space-between': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#space-between', + 'space-around': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#space-around', + 'space-evenly': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#space-evenly', + 'baseline': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#baseline', + 'stretch': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#stretch' + }, + 'alignItems': { + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#start', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#end', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#center', + 'baseline': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#baseline', + 'stretch': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#stretch' + }, + 'justifyContent': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#normal', + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#start', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#end', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#center', + 'space-between': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#space-between', + 'space-around': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#space-around', + 'space-evenly': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#space-evenly', + 'stretch': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#stretch' + }, + 'justifyItems': { + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items#start', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items#end', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items#center', + 'stretch': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items#stretch' + }, + 'alignSelf': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-self#auto', + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-self#start', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-self#end', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-self#center', + 'stretch': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-self#stretch', + 'baseline': 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-self#baseline' + }, + 'justifySelf': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self#auto', + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self#start', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self#end', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self#center', + 'stretch': 'https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self#stretch' + }, + 'flexDirection': { + 'row': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#row', + 'column': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#column', + 'row-reverse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#row-reverse', + 'column-reverse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#column-reverse' + }, + 'flexWrap': { + 'wrap': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap#wrap', + 'wrap-reverse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap#wrap-reverse', + 'nowrap': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap#nowrap' + }, + 'gridAutoFlow': { + 'row': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow#row', + 'column': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow#column', + 'dense': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow#dense', + 'row dense': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow#row_dense', + 'column dense': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow#column_dense' + }, + 'gridAutoRows': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows#auto', + 'min-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows#min-content', + 'max-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows#max-content', + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows' + }, + 'gridAutoColumns': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns#auto', + 'min-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns#min-content', + 'max-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns#max-content', + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns' + }, + 'gridTemplateColumns': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#auto', + 'min-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#min-content', + 'max-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#max-content', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#none', + 'subgrid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#subgrid', + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns' + }, + 'gridTemplateRows': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#auto', + 'min-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#min-content', + 'max-content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#max-content', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#none', + 'subgrid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#subgrid', + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows' + }, + 'gridTemplateAreas': { + 'string[]': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas' + }, + 'float': { + 'inline-start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/float#inline-start', + 'inline-end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/float#inline-end', + 'right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/float#right', + 'left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/float#left', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/float#none' + }, + 'clear': { + 'inline-start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/clear#inline-start', + 'inline-end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/clear#inline-end', + 'left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/clear#left', + 'right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/clear#right', + 'both': 'https://developer.mozilla.org/en-US/docs/Web/CSS/clear#both', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/clear#none' + }, + 'overflowX': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x#auto', + 'hidden': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x#hidden', + 'clip': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x#clip', + 'visible': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x#visible', + 'scroll': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x#scroll' + }, + 'overflowY': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y#auto', + 'hidden': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y#hidden', + 'clip': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y#clip', + 'visible': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y#visible', + 'scroll': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y#scroll' + }, + 'overscrollBehaviorX': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x#auto', + 'contain': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x#contain', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x#none' + }, + 'overscrollBehaviorY': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y#auto', + 'contain': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y#contain', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y#none' + }, + 'boxSizing': { + 'border-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#border-box', + 'content-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#content-box' + }, + 'tableLayout': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#auto', + 'fixed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#fixed' + }, + 'order': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/order' + }, + 'pointerEvents': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#none', + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#auto' + }, + 'userSelect': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#none', + 'text': 'https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#text', + 'all': 'https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#all', + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#auto' + }, + 'visibility': { + 'visible': 'https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#visible', + 'hidden': 'https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#hidden', + 'collapse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#collapse' + }, + 'cursor': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'default': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'pointer': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'wait': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'text': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'move': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'help': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'not-allowed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'context-menu': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'progress': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'cell': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'crosshair': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'vertical-text': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'alias': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'copy': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'no-drop': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'grab': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'grabbing': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'all-scroll': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'col-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'row-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'n-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'e-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 's-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'w-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'ne-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'nw-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'se-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'ew-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'ns-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'nesw-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'nwse-resize': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'zoom-in': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor', + 'zoom-out': 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor' + }, + 'objectFit': { + 'contain': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#contain', + 'cover': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#cover', + 'fill': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#fill', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#none', + 'scale-down': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#scale-down' + }, + 'zIndex': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/z-index' + }, + 'boxShadow': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#none' + }, + 'filter': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/filter#none' + }, + 'opacity': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/opacity' + }, + 'outlineOffset': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset' + }, + 'backgroundSize': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#auto', + 'cover': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#cover', + 'contain': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#contain' + }, + 'backgroundImage': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-image' + }, + 'transitionDelay': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay', + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay' + }, + 'transitionDuration': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration', + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration' + }, + 'animation': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation' + }, + 'animationDuration': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration', + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration' + }, + 'animationDelay': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay', + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay' + }, + 'animationIterationCount': { + 'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count', + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count' + }, + 'rotate': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/rotate' + }, + 'scaleX': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scale' + }, + 'scaleY': { + 'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scale' + }, + 'backgroundClip': { + 'border-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#border-box', + 'padding-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#padding-box', + 'content-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#content-box', + 'text': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#text' + }, + 'backgroundAttachment': { + 'fixed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment#fixed', + 'local': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment#local', + 'scroll': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment#scroll' + }, + 'backgroundRepeat': { + 'repeat': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#repeat', + 'no-repeat': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#no-repeat', + 'repeat-x': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#repeat-x', + 'repeat-y': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#repeat-y', + 'round': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#round', + 'space': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#space' + }, + 'backgroundOrigin': { + 'border-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin#border-box', + 'padding-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin#padding-box', + 'content-box': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin#content-box' + }, + 'backgroundPosition': { + 'bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'left bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'left top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'right bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'right top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position', + 'top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-position' + }, + 'backgroundBlendMode': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#normal', + 'multiply': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#multiply', + 'screen': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#screen', + 'overlay': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#overlay', + 'darken': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#darken', + 'lighten': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#lighten', + 'color-dodge': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#color-dodge', + 'color-burn': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#color-burn', + 'hard-light': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#hard-light', + 'soft-light': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#soft-light', + 'difference': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#difference', + 'exclusion': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#exclusion', + 'hue': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#hue', + 'saturation': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#saturation', + 'color': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#color', + 'luminosity': 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#luminosity' + }, + 'mixBlendMode': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#normal', + 'multiply': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#multiply', + 'screen': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#screen', + 'overlay': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#overlay', + 'darken': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#darken', + 'lighten': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#lighten', + 'color-dodge': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#color-dodge', + 'color-burn': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#color-burn', + 'hard-light': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#hard-light', + 'soft-light': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#soft-light', + 'difference': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#difference', + 'exclusion': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#exclusion', + 'hue': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#hue', + 'saturation': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#saturation', + 'color': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#color', + 'luminosity': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#luminosity', + 'plus-darker': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#plus-darker', + 'plus-lighter': 'https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#plus-lighter' + }, + 'forcedColorAdjust': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust#auto', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust#none' + }, + 'colorScheme': { + 'light': 'https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme#light', + 'dark': 'https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme#dark', + 'light dark': 'https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme' + }, + 'transitionTimingFunction': { + 'default': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function', + 'linear': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function#linear', + 'in': 'https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-in', + 'out': 'https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-out', + 'in-out': 'https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-in-out' + }, + 'animationDirection': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction#normal', + 'reverse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction#reverse', + 'alternate': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction#alternate', + 'alternate-reverse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction#alternate-reverse' + }, + 'animationFillMode': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode#none', + 'forwards': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode#forwards', + 'backwards': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode#backwards', + 'both': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode#both' + }, + 'animationTimingFunction': { + 'default': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function', + 'linear': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function#linear', + 'in': 'https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-in', + 'out': 'https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-out', + 'in-out': 'https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-in-out' + }, + 'animationPlayState': { + 'paused': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state#paused', + 'running': 'https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state#running' + }, + 'contain': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#none', + 'strict': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#strict', + 'content': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#content', + 'size': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#size', + 'inline-size': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#inline-size', + 'layout': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#layout', + 'style': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#style', + 'paint': 'https://developer.mozilla.org/en-US/docs/Web/CSS/contain#paint' + }, + 'captionSide': { + 'top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side#top', + 'bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side#bottom' + }, + 'borderCollapse': { + 'collapse': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse#collapse', + 'separate': 'https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse#separate' + }, + 'breakBefore': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#auto', + 'avoid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#avoid', + 'all': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#all', + 'avoid-page': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#avoid-page', + 'page': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#page', + 'left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#left', + 'right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#right', + 'column': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#column' + }, + 'breakInside': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside#auto', + 'avoid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside#avoid', + 'avoid-page': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside#avoid-page', + 'avoid-column': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside#avoid-column' + }, + 'breakAfter': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#auto', + 'avoid': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#avoid', + 'all': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#all', + 'avoid-page': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#avoid-page', + 'page': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#page', + 'left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#left', + 'right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#right', + 'column': 'https://developer.mozilla.org/en-US/docs/Web/CSS/break-after#column' + }, + 'scrollBehavior': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#auto', + 'smooth': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#smooth' + }, + 'touchAction': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#auto', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#none', + 'pan-x': 'https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#pan-x', + 'pan-y': 'https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#pan-y', + 'manipulation': 'https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#manipulation', + 'pinch-zoom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#pinch-zoom' + }, + 'isolation': { + 'isolate': 'https://developer.mozilla.org/en-US/docs/Web/CSS/isolation#isolate', + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/isolation#auto' + }, + 'transformOrigin': { + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin', + 'top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin', + 'top right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin', + 'right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin', + 'bottom right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin', + 'bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin', + 'bottom left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin', + 'left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin' + }, + 'resize': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/resize#none', + 'vertical': 'https://developer.mozilla.org/en-US/docs/Web/CSS/resize#vertical', + 'horizontal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/resize#horizontal', + 'both': 'https://developer.mozilla.org/en-US/docs/Web/CSS/resize#both' + }, + 'scrollSnapType': { + 'x': 'https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-type#x', + 'y': 'https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-type#y', + 'both': 'https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-type#both', + 'x mandatory': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type#mandatory', + 'y mandatory': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type#mandatory', + 'both mandatory': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type#mandatory' + }, + 'scrollSnapAlign': { + 'start': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align#start', + 'end': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align#end', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align#center', + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align#none' + }, + 'scrollSnapStop': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop#normal', + 'always': 'https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop#always' + }, + 'appearance': { + 'none': 'https://developer.mozilla.org/en-US/docs/Web/CSS/appearance#none', + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/appearance#auto' + }, + 'objectPosition': { + 'bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'center': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'left': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'left bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'left top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'right': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'right bottom': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'right top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position', + 'top': 'https://developer.mozilla.org/en-US/docs/Web/CSS/object-position' + }, + 'willChange': { + 'auto': 'https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#auto', + 'scroll-position': 'https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#scroll-position', + 'contents': 'https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#contents', + 'transform': 'https://developer.mozilla.org/en-US/docs/Web/CSS/will-change' + }, + 'unicodeBidi': { + 'normal': 'https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi#normal', + 'embed': 'https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi#embed', + 'bidi-override': 'https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi#bidi-override', + 'isolate': 'https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi#isolate', + 'isolate-override': 'https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi#isolate-override', + 'plaintext': 'https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi#plaintext' } }; @@ -499,14 +1224,20 @@ const propertyDescriptions: {[key: string]: string} = { 'scaleY': 'Accepts a number or percentage string.', 'scaleShortHand': 'Accepts a number or percentage string.', 'aspectRatio': 'Also accepts a ratio in the format number/number (e.g., 16/9, 4/3).', - 'transitionShorthand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".', + 'transitionShortHand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".', 'animationShortHand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".', - 'truncateShortHand': 'Applying this shorthand will enable text truncation.', - 'fontShortHand': 'The "fontSize" provided defines the values this shorthand sets on the mapped values.' + 'truncateShortHand': 'Accepts a boolean value. Applying this shorthand will set the required style macro properties to enable text truncation.', + 'fontShortHand': 'Accepts the same values as fontSize. The fontSize provided defines the values this shorthand sets on the mapped values.', + 'borderStartWidth': 'These values map to pixels.', + 'borderEndWidth': 'These values map to pixels.', + 'borderTopWidth': 'These values map to pixels.', + 'borderBottomWidth': 'These values map to pixels.', + 'outlineWidth': 'These values map to pixels.', + 'strokeWidth': 'These values map to pixels.' }; interface StyleMacroPropertyDefinition { - values: string[], + values: (string | number)[], additionalTypes?: string[], links?: {[value: string]: {href: string, isRelative?: boolean}}, description?: string, @@ -520,21 +1251,32 @@ export function getPropertyDefinitions(propertyCategory: string): {[key: string] for (let [name, values] of Object.entries(propertiesMapping)) { let links: {[value: string]: {href: string, isRelative?: boolean}} = {}; + // check for property specific MDN links if (mdnPropertyLinks[name]) { - let [key, value] = Object.entries(mdnPropertyLinks[name])[0]; - links[key] = {href: value}; - values = [key]; - } else { - // see if the property has any common types that should link to MDN instead - for (let value of values) { - // make sure not to overwrite number in sizing properties and pill in other sections aka effects - if ((value === 'number' && sizingProperties.has(name)) || (value === 'pill' && propertyCategory !== 'dimensions')) { - continue; - } + for (let [key, href] of Object.entries(mdnPropertyLinks[name])) { + links[key] = {href}; + } + } - if (mdnTypeLinks[value]) { - links[value] = {href: mdnTypeLinks[value]}; - } + // if values array is empty but we have MDN links, add value (ensures flexShrink/etc get values) + if (values.length === 0 && Object.keys(links).length > 0) { + values = Object.keys(links); + } + + // see if the property has any common types that should link to MDN + for (let value of values) { + // skip if we already have a property specific link + if (links[value]) { + continue; + } + + // make sure not to overwrite number in sizing properties and pill in other sections aka effects + if ((value === 'number' && sizingProperties.has(name)) || (value === 'pill' && propertyCategory !== 'dimensions')) { + continue; + } + + if (mdnTypeLinks[value]) { + links[value] = {href: mdnTypeLinks[value]}; } } @@ -545,33 +1287,31 @@ export function getPropertyDefinitions(propertyCategory: string): {[key: string] description: propertyDescriptions[name] }; } - return result; -} - -export function getShorthandDefinitions(): {[key: string]: StyleMacroPropertyDefinition} { - let result: {[key: string]: StyleMacroPropertyDefinition} = {}; + // add relevant shorthands to the property category too for (let [shorthandName, shorthandDef] of Object.entries(shorthandMapping)) { - let values = shorthandDef.values; - let links: {[value: string]: {href: string, isRelative?: boolean}} = {}; + if (shorthandDef.category === propertyCategory) { + let values = shorthandDef.values; + let links: {[value: string]: {href: string, isRelative?: boolean}} = {}; - for (let value of values) { - if (value === 'pill' && shorthandName.includes('border')) { - continue; - } + for (let value of values) { + if (value === 'pill' && shorthandName.includes('border')) { + continue; + } - if (mdnTypeLinks[value]) { - links[value] = {href: mdnTypeLinks[value]}; + if (mdnTypeLinks[value]) { + links[value] = {href: mdnTypeLinks[value]}; + } } - } - result[shorthandName] = { - values, - additionalTypes: getAdditionalTypes(shorthandDef.mapping[0]), - links: Object.keys(links).length > 0 ? links : undefined, - mapping: shorthandDef.mapping, - description: propertyDescriptions[`${shorthandName}ShortHand`] - }; + result[shorthandName] = { + values, + additionalTypes: getAdditionalTypes(shorthandDef.mapping[0]), + links: Object.keys(links).length > 0 ? links : undefined, + mapping: shorthandDef.mapping, + description: propertyDescriptions[`${shorthandName}ShortHand`] + }; + } } return result;