diff --git a/packages/babel-plugin/src/utils/error-if-invalid-properties.ts b/packages/babel-plugin/src/utils/error-if-invalid-properties.ts index e013f92d0..0508db4d0 100644 --- a/packages/babel-plugin/src/utils/error-if-invalid-properties.ts +++ b/packages/babel-plugin/src/utils/error-if-invalid-properties.ts @@ -1,24 +1,516 @@ import { type ShorthandProperties, shorthandFor } from '@compiled/utils'; -// TODO: make more complete list of CSS properties +// Taken from https://developer.mozilla.org/en-US/docs/Web/CSS/Reference +// with non-properties sifted out const CSS_PROPERTIES: string[] = [ - ...Object.keys(shorthandFor), - ...Object.values(shorthandFor) - .flat() - .filter((value): value is string => typeof value === 'string'), - 'color', - 'display', - 'text-transform', + '-webkit-line-clamp', + 'accent-color', + 'additive-symbols', + 'align-content', 'align-items', + 'align-self', + 'align-tracks', + 'all', + 'anchor-name', + 'anchor-scope', + 'animation', + 'animation-composition', + 'animation-delay', + 'animation-direction', + 'animation-duration', + 'animation-fill-mode', + 'animation-iteration-count', + 'animation-name', + 'animation-play-state', + 'animation-range', + 'animation-range-end', + 'animation-range-start', + 'animation-timeline', + 'animation-timing-function', + 'appearance', + 'ascent-override', + 'aspect-ratio', + 'backdrop-filter', + 'backface-visibility', + 'background', + 'background-attachment', + 'background-blend-mode', + 'background-clip', + 'background-color', + 'background-image', + 'background-origin', + 'background-position', + 'background-position-x', + 'background-position-y', + 'background-repeat', + 'background-size', + 'base-palette', + 'bleed', + 'block-size', + 'border', + 'border-block', + 'border-block-color', + 'border-block-end', + 'border-block-end-color', + 'border-block-end-style', + 'border-block-end-width', + 'border-block-start', + 'border-block-start-color', + 'border-block-start-style', + 'border-block-start-width', + 'border-block-style', + 'border-block-width', + 'border-bottom', + 'border-bottom-color', + 'border-bottom-left-radius', + 'border-bottom-right-radius', + 'border-bottom-style', + 'border-bottom-width', + 'border-collapse', + 'border-color', + 'border-end-end-radius', + 'border-end-start-radius', + 'border-image', + 'border-image-outset', + 'border-image-repeat', + 'border-image-slice', + 'border-image-source', + 'border-image-width', + 'border-inline', + 'border-inline-color', + 'border-inline-end', + 'border-inline-end-color', + 'border-inline-end-style', + 'border-inline-end-width', + 'border-inline-start', + 'border-inline-start-color', + 'border-inline-start-style', + 'border-inline-start-width', + 'border-inline-style', + 'border-inline-width', + 'border-left', + 'border-left-color', + 'border-left-style', + 'border-left-width', + 'border-radius', + 'border-right', + 'border-right-color', + 'border-right-style', + 'border-right-width', + 'border-spacing', + 'border-start-end-radius', + 'border-start-start-radius', + 'border-style', + 'border-top', + 'border-top-color', + 'border-top-left-radius', + 'border-top-right-radius', + 'border-top-style', + 'border-top-width', + 'border-width', + 'bottom', + 'box-decoration-break', + 'box-shadow', + 'box-sizing', + 'break-after', + 'break-before', + 'break-inside', + 'caption-side', + 'caret', + 'caret-color', + 'caret-shape', + 'clear', + 'clip', + 'clip-path', + 'clip-rule', + 'color', + 'color-interpolation-filters', + 'color-scheme', + 'column-count', + 'column-fill', + 'column-gap', + 'column-rule', + 'column-rule-color', + 'column-rule-style', + 'column-rule-width', + 'column-span', + 'column-width', + 'columns', + 'contain', + 'contain-intrinsic-block-size', + 'contain-intrinsic-height', + 'contain-intrinsic-inline-size', + 'contain-intrinsic-size', + 'contain-intrinsic-width', + 'container', + 'container-name', + 'container-type', 'content', + 'content-visibility', + 'counter-increment', + 'counter-reset', + 'counter-set', + 'cursor', + 'cx', + 'cy', + 'descent-override', + 'direction', + 'display', + 'dominant-baseline', + 'empty-cells', + 'fallback', + 'field-sizing', + 'fill', + 'fill-opacity', + 'fill-rule', + 'filter', + 'flex', + 'flex-basis', + 'flex-direction', + 'flex-flow', + 'flex-grow', + 'flex-shrink', + 'flex-wrap', + 'float', + 'font', + 'font-display', + 'font-family', + 'font-feature-settings', + 'font-kerning', + 'font-language-override', + 'font-optical-sizing', + 'font-palette', + 'font-size', + 'font-size-adjust', + 'font-stretch', + 'font-style', + 'font-synthesis', + 'font-synthesis-position', + 'font-synthesis-small-caps', + 'font-synthesis-style', + 'font-synthesis-weight', + 'font-variant', + 'font-variant-alternates', + 'font-variant-caps', + 'font-variant-east-asian', + 'font-variant-emoji', + 'font-variant-ligatures', + 'font-variant-numeric', + 'font-variant-position', + 'font-variation-settings', + 'font-weight', + 'forced-color-adjust', + 'gap', + 'grid', + 'grid-area', + 'grid-auto-columns', + 'grid-auto-flow', + 'grid-auto-rows', + 'grid-column', + 'grid-column-end', + 'grid-column-start', + 'grid-row', + 'grid-row-end', + 'grid-row-start', + 'grid-template', + 'grid-template-areas', + 'grid-template-columns', + 'grid-template-rows', + 'hanging-punctuation', 'height', + 'hyphenate-character', + 'hyphenate-limit-chars', + 'hyphens', + 'image-orientation', + 'image-rendering', + 'image-resolution', + 'inherit', + 'inherits', + 'initial', + 'initial-letter', + 'initial-letter-align', + 'initial-value', + 'inline-size', + 'input-security', + 'inset', + 'inset-block', + 'inset-block-end', + 'inset-block-start', + 'inset-inline', + 'inset-inline-end', + 'inset-inline-start', + 'interpolate-size', + 'isolation', + 'justify-content', + 'justify-items', + 'justify-self', + 'justify-tracks', + 'frequency', + 'left', + 'letter-spacing', + 'line-break', + 'line-clamp', + 'line-gap-override', + 'line-height', + 'line-height-step', + 'list-style', + 'list-style-image', + 'list-style-position', + 'list-style-type', + 'margin', + 'margin-block', + 'margin-block-end', + 'margin-block-start', + 'margin-bottom', + 'margin-inline', + 'margin-inline-end', + 'margin-inline-start', + 'margin-left', + 'margin-right', + 'margin-top', + 'margin-trim', + 'marker', + 'marker-end', + 'marker-mid', + 'marker-start', + 'marks', + 'mask', + 'mask-border', + 'mask-border-mode', + 'mask-border-outset', + 'mask-border-repeat', + 'mask-border-slice', + 'mask-border-source', + 'mask-border-width', + 'mask-clip', + 'mask-composite', + 'mask-image', + 'mask-mode', + 'mask-origin', + 'mask-position', + 'mask-repeat', + 'mask-size', + 'mask-type', + 'masonry-auto-flow', + 'math-depth', + 'math-shift', + 'math-style', + 'max-block-size', + 'max-height', + 'max-inline-size', + 'max-lines', + 'max-width', + 'min-block-size', + 'min-height', + 'min-inline-size', + 'min-width', + 'mix-blend-mode', + 'negative', + 'object-fit', + 'object-position', + 'offset', + 'offset-anchor', + 'offset-distance', + 'offset-path', + 'offset-position', + 'offset-rotate', + 'opacity', + 'order', + 'orphans', + 'outline', + 'outline-color', + 'outline-offset', + 'outline-style', + 'outline-width', + 'overflow-anchor', + 'overflow-block', + 'overflow-clip-margin', + 'overflow-inline', + 'overflow-wrap', + 'overflow-x', + 'overflow-y', + 'overlay', + 'override-colors', + 'overscroll-behavior', + 'overscroll-behavior-block', + 'overscroll-behavior-inline', + 'overscroll-behavior-x', + 'overscroll-behavior-y', + 'pad', + 'padding', + 'padding-block', + 'padding-block-end', + 'padding-block-start', + 'padding-bottom', + 'padding-inline', + 'padding-inline-end', + 'padding-inline-start', + 'padding-left', + 'padding-right', + 'padding-top', + 'page', + 'page-break-after', + 'page-break-before', + 'page-break-inside', + 'page-orientation', + 'paint-order', + 'perspective', + 'perspective-origin', + 'place-content', + 'place-items', + 'place-self', + 'pointer-events', + 'position', + 'position-anchor', + 'position-area', + 'position-try', + 'position-try-fallbacks', + 'position-try-order', + 'position-visibility', + 'prefix', + 'print-color-adjust', + 'quotes', + 'range', + 'resize', + 'revert', + 'right', + 'rotate', + 'row-gap', + 'ruby-align', + 'ruby-merge', + 'ruby-position', + 'rx', + 'ry', + 'scale', + 'scroll-behavior', + 'scroll-margin', + 'scroll-margin-block', + 'scroll-margin-block-end', + 'scroll-margin-block-start', + 'scroll-margin-bottom', + 'scroll-margin-inline', + 'scroll-margin-inline-end', + 'scroll-margin-inline-start', + 'scroll-margin-left', + 'scroll-margin-right', + 'scroll-margin-top', + 'scroll-padding', + 'scroll-padding-block', + 'scroll-padding-block-end', + 'scroll-padding-block-start', + 'scroll-padding-bottom', + 'scroll-padding-inline', + 'scroll-padding-inline-end', + 'scroll-padding-inline-start', + 'scroll-padding-left', + 'scroll-padding-right', + 'scroll-padding-top', + 'scroll-snap-align', + 'scroll-snap-stop', + 'scroll-snap-type', + 'scroll-timeline', + 'scroll-timeline-axis', + 'scroll-timeline-name', + 'scrollbar-color', + 'scrollbar-gutter', + 'scrollbar-width', + 'shape-image-threshold', + 'shape-margin', + 'shape-outside', + 'shape-rendering', + 'size', + 'size-adjust', + 'speak-as', + 'src', + 'stroke', + 'stroke-dasharray', + 'stroke-dashoffset', + 'stroke-linecap', + 'stroke-linejoin', + 'stroke-miterlimit', + 'stroke-opacity', + 'stroke-width', + 'suffix', + 'symbols', + 'syntax', + 'system', + 'tab-size', + 'table-layout', + 'text-align', + 'text-align-last', + 'text-anchor', + 'text-combine-upright', + 'text-decoration', + 'text-decoration-color', + 'text-decoration-line', + 'text-decoration-skip', + 'text-decoration-skip-ink', + 'text-decoration-style', + 'text-decoration-thickness', + 'text-emphasis', + 'text-emphasis-color', + 'text-emphasis-position', + 'text-emphasis-style', + 'text-indent', + 'text-justify', + 'text-orientation', + 'text-overflow', + 'text-rendering', + 'text-shadow', + 'text-size-adjust', + 'text-spacing-trim', + 'text-transform', + 'text-underline-offset', + 'text-underline-position', + 'text-wrap', + 'text-wrap-mode', + 'text-wrap-style', + 'timeline-scope', + 'top', + 'touch-action', + 'transform', + 'transform-box', + 'transform-origin', + 'transform-style', + 'transition', + 'transition-behavior', + 'transition-delay', + 'transition-duration', + 'transition-property', + 'transition-timing-function', + 'translate', + 'unicode-bidi', + 'unicode-range', + 'unset', + 'user-select', + 'vector-effect', + 'vertical-align', + 'view-timeline', + 'view-timeline-axis', + 'view-timeline-inset', + 'view-timeline-name', + 'view-transition-name', + 'visibility', + 'white-space', + 'white-space-collapse', + 'widows', + 'width', + 'will-change', + 'word-break', + 'word-spacing', + 'word-wrap', + 'writing-mode', + 'x', + 'y', + 'z-index', + 'zoom', ]; export const errorIfInvalidProperties = (properties: string[]): void => { // TODO: can we make this not O(n^2) ??? for (const property of properties) { // Forbid invalid CSS properties - if (!CSS_PROPERTIES.includes(property)) { + if (!CSS_PROPERTIES.includes(property) && !property.startsWith('--')) { // TODO: can we give more debugging info for the developer? // like the name of the component, the file the error was from... throw new Error(`Detected invalid CSS property ${property}`);