From a1d07ede4296771c66ed3c6e88d0479ea52834c7 Mon Sep 17 00:00:00 2001 From: ongyuxing <78018704+ongyuxing@users.noreply.github.com> Date: Mon, 24 Nov 2025 11:54:35 +0800 Subject: [PATCH] feat(css): update CSS properties order to align with stylelint-config-recess-order@7.4.0 --- .changeset/real-owls-glow.md | 18 + crates/biome_css_analyze/src/order.rs | 163 +++- .../source/useSortedProperties/invalid.css | 132 +++ .../useSortedProperties/invalid.css.snap | 835 +++++++++++++++--- .../source/useSortedProperties/valid.css | 131 +++ .../source/useSortedProperties/valid.css.snap | 132 +++ 6 files changed, 1250 insertions(+), 161 deletions(-) create mode 100644 .changeset/real-owls-glow.md diff --git a/.changeset/real-owls-glow.md b/.changeset/real-owls-glow.md new file mode 100644 index 000000000000..07120108d407 --- /dev/null +++ b/.changeset/real-owls-glow.md @@ -0,0 +1,18 @@ +--- +"@biomejs/biome": minor +--- + +Updated the CSS properties ordering to align with `stylelint-config-recess-order` v7.4.0. + +It adds support for: + +- Containment properties +- Font synthesis properties +- Ruby properties +- Color adjustment properties +- View transitions properties +- Shapes properties +- Motion path properties +- etc. + +For the complete list of changes, see: https://github.com/stormwarning/stylelint-config-recess-order/compare/v6.0.0...v7.4.0. diff --git a/crates/biome_css_analyze/src/order.rs b/crates/biome_css_analyze/src/order.rs index e675ec36e263..4f21d2b48e8a 100644 --- a/crates/biome_css_analyze/src/order.rs +++ b/crates/biome_css_analyze/src/order.rs @@ -7,11 +7,14 @@ use std::{collections::HashMap, sync::LazyLock}; /// /// This is the same ordering used by stylelint-config-recess-order, except that vendor prefixes /// and some legacy and draft properties not known to biome are removed. -pub(crate) const PROPERTY_ORDER: [&str; 375] = [ - // Cascade +pub(crate) const PROPERTY_ORDER: [&str; 427] = [ + // Compose rules from other selectors in CSS Modules. + // https://github.com/css-modules/css-modules#composition + // "composes", + // Cascade and inheritance. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade#reference "all", - // Positioned layout + // Positioned layout. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout#reference "position", "inset", @@ -28,12 +31,12 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "z-index", "float", "clear", - // Display + // Display. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display#reference "box-sizing", "display", "visibility", - // Flexible box layout + // Flexible box layout. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout#reference "flex", "flex-grow", @@ -43,7 +46,7 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "flex-direction", "flex-wrap", "box-orient", - // Grid layout + // Grid layout. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout#reference "grid", "grid-area", @@ -63,7 +66,7 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "grid-gap", "grid-row-gap", "grid-column-gap", - // Box alignment + // Box alignment. Relates to both Flexbox and Grid layout. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_alignment#reference "gap", "row-gap", @@ -77,10 +80,10 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "justify-content", "justify-items", "justify-self", - // Order - // Part of the display module, but behaves like a box alignment property in that it affects both flex and grid. + // Order. + // Part of Display module, but relates to both Flexbox and Grid layout. "order", - // Box sizing + // Box sizing. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_sizing#reference "inline-size", "min-inline-size", @@ -95,7 +98,12 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "min-height", "max-height", "aspect-ratio", - // Box model + "contain-intrinsic-inline-size", + "contain-intrinsic-block-size", + "contain-intrinsic-size", + "contain-intrinsic-width", + "contain-intrinsic-height", + // Box model. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model#reference "padding", "padding-block", @@ -119,7 +127,14 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "margin-right", "margin-bottom", "margin-left", - // Overflow + // Containment. + // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment#reference + "contain", + "container", + "container-name", + "container-type", + "content-visibility", + // Overflow. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_overflow#reference "overflow", "overflow-inline", @@ -127,17 +142,19 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "overflow-x", "overflow-y", "scrollbar-gutter", + // "overflow-scrolling", "overflow-style", "text-overflow", "line-clamp", - // Overscroll + // "scroll-behaviour", + // Overscroll behavior. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_overscroll_behavior#reference "overscroll-behavior", "overscroll-behavior-inline", "overscroll-behavior-block", "overscroll-behavior-x", "overscroll-behavior-y", - // Fonts + // Fonts. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts#reference "font", "font-family", @@ -159,21 +176,33 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "font-variant-position", "font-smoothing", "osx-font-smoothing", - // Inline layout + // "font-smooth", + "font-synthesis", + "font-synthesis-weight", + "font-synthesis-style", + "font-synthesis-small-caps", + // Inline layout. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_inline_layout#reference "line-height", "vertical-align", "alignment-baseline", "baseline-shift", "dominant-baseline", - // Color + // Colors. + // + // Although `opacity` is technically part of this module, it is grouped + // with the Compositing and blending module for now. + // // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors#reference + "base-palette", + "override-colors", + "font-palette", "color", "text-fill-color", "text-stroke", "text-stroke-width", "text-stroke-color", - // Text + // Text. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text#reference "text-align", "text-align-last", @@ -183,13 +212,18 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "word-spacing", "letter-spacing", "hyphens", + "hyphenate-character", + "line-break", "word-break", "text-wrap", + "text-wrap-mode", + "text-wrap-style", "word-wrap", "overflow-wrap", "tab-size", "white-space", - // Text decoration + "white-space-collapse", + // Text decoration. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text_decoration#reference "text-emphasis", "text-emphasis-color", @@ -200,11 +234,15 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "text-decoration-thickness", "text-decoration-style", "text-decoration-color", + "text-decoration-skip-ink", "text-underline-position", "text-underline-offset", "text-shadow", - // (The ruby layout module would go here) - // Font loading + // Ruby layout. + // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_ruby_layout#reference + "ruby-position", + "ruby-align", + // Font loading. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_font_loading#reference "src", "font-display", @@ -213,7 +251,7 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "ascent-override", "descent-override", "line-gap-override", - // Basic user interface + // Basic user interface. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_basic_user_interface#reference "appearance", "accent-color", @@ -224,6 +262,7 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "zoom", "resize", "user-select", + // "nav-index", "nav-up", "nav-right", "nav-down", @@ -233,21 +272,23 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "outline-style", "outline-color", "outline-offset", - // Color adjustment + // Color adjustment. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_color_adjustment#reference "color-scheme", - // Table + "forced-color-adjust", + "print-color-adjust", + // Table. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_table#reference "table-layout", "empty-cells", "caption-side", "border-spacing", "border-collapse", - // Generated content + // Generated content. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_generated_content#reference "content", "quotes", - // Lists and counters + // Lists and counters. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_lists#reference "list-style", "list-style-position", @@ -256,7 +297,7 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "counter-reset", "counter-set", "counter-increment", - // Scroll snap + // Scroll snap. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap#reference "scroll-snap-type", "scroll-snap-align", @@ -283,13 +324,11 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "scroll-margin-right", "scroll-margin-bottom", "scroll-margin-left", - // (The anchor positioning module would go here) - // (The containment module would go here) - // Scrollbar styling + // Scrollbars styling. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scrollbars_styling#reference "scrollbar-color", "scrollbar-width", - // Images + // Images. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images#reference "object-fit", "object-position", @@ -297,7 +336,7 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "image-orientation", "image-rendering", "image-resolution", - // Backgrounds and borders + // Backgrounds and borders. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders#reference "background", "background-color", @@ -364,20 +403,21 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "border-image-outset", "border-image-repeat", "box-shadow", - // Compositing and blending + // Compositing and blending. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_compositing_and_blending#reference "background-blend-mode", "isolation", "mix-blend-mode", "opacity", - // Filter effects + // Filter effects. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_filter_effects#properties "filter", "backdrop-filter", - // Masking + // Masking. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_masking#reference "clip", "clip-path", + "clip-rule", "mask-border", "mask-border-source", "mask-border-slice", @@ -394,12 +434,23 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "mask-origin", "mask-size", "mask-composite", - // (The shapes module would go here) - // Writing mode + "mask-type", + // Shapes. + // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_shapes#reference + "shape-outside", + "shape-image-threshold", + "shape-margin", + // Writing modes. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_writing_modes#reference + "direction", + "unicode-bidi", "writing-mode", - // SVG - // SVG properties do not belong to any CSS spec module + "text-orientation", + "text-combine-upright", + // SVG presentation attributes. + // + // Some of these may fall under a specific module, but if they only apply + // to SVG-specific elements, they will be grouped here. "text-anchor", "fill", "fill-rule", @@ -417,30 +468,39 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "flood-color", "flood-opacity", "lighting-color", + "marker", "marker-start", "marker-mid", "marker-end", "stop-color", "stop-opacity", + "paint-order", "shape-rendering", - // Transforms + "text-rendering", + // Transforms. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transforms#reference "transform", "transform-origin", + "transform-box", + "transform-style", "rotate", "scale", "translate", "perspective", "perspective-origin", - // Transitions + "backface-visibility", + // Transitions. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions#reference "transition", "transition-delay", "transition-timing-function", "transition-duration", "transition-property", - // (The view transitions module would go here) - // Animations + // View transitions. + // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_view_transitions#reference + "view-transition-name", + "view-transition-class", + // Animations. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations#reference "animation", "animation-name", @@ -449,20 +509,27 @@ pub(crate) const PROPERTY_ORDER: [&str; 375] = [ "animation-delay", "animation-iteration-count", "animation-direction", + "animation-fill-mode", "animation-play-state", - // (The scroll-driven animations module would go here) - // (The motion-path module would go here) - // Will change - // There is no module page for will-change + "animation-composition", + // Motion path. + // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_motion_path#reference + "offset", + "offset-position", + "offset-path", + "offset-distance", + "offset-rotate", + "offset-anchor", + // Will change. + // https://drafts.csswg.org/css-will-change/#will-change "will-change", - // Fragmentation + // Fragmentation. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fragmentation#reference "break-before", "break-after", "break-inside", "widows", "orphans", - // (The multi-column layout module would go here) ]; /// A map from CSS property names to the index at which they appear in the [PROPERTY_ORDER] array. diff --git a/crates/biome_css_analyze/tests/specs/source/useSortedProperties/invalid.css b/crates/biome_css_analyze/tests/specs/source/useSortedProperties/invalid.css index 668e4183c6c7..bae3a4dd6233 100644 --- a/crates/biome_css_analyze/tests/specs/source/useSortedProperties/invalid.css +++ b/crates/biome_css_analyze/tests/specs/source/useSortedProperties/invalid.css @@ -77,3 +77,135 @@ display: block; --custom: 100; } + +.contain-intrinsic { + contain-intrinsic-block-size: auto; + contain-intrinsic-inline-size: auto; + contain-intrinsic-size: auto; + contain-intrinsic-width: 100px; + contain-intrinsic-height: 50px; +} + +.containment { + container: gallery / inline-size; + contain: layout; + container-name: gallery; + container-type: inline-size; + content-visibility: auto; +} + +.font-synthesis { + font-synthesis-weight: none; + font-synthesis: weight style; + font-synthesis-style: normal; + font-synthesis-small-caps: none; +} + +.colors { + override-colors: none; + base-palette: #ffffff; + font-palette: #555555; + color: #000000; +} + +.text { + hyphenate-character: "\00AD"; + hyphens: auto; + line-break: auto; + word-break: break-word; + text-wrap: pretty; + text-wrap-mode: balance; + text-wrap-style: normal; + word-wrap: break-word; + overflow-wrap: anywhere; + tab-size: 4; + white-space: normal; + white-space-collapse: preserve; +} + +.text-decoration { + text-decoration-line: underline; + text-decoration: underline; + text-decoration-thickness: 1px; + text-decoration-style: solid; + text-decoration-color: currentColor; + text-decoration-skip-ink: auto; +} + +.ruby { + ruby-align: center; + ruby-position: over; +} + +.color-adjustment { + forced-color-adjust: none; + color-scheme: light dark; + print-color-adjust: exact; +} + +.masking { + clip-path: inset(0); + clip: rect(0 0 0 0); + clip-rule: nonzero; + mask: none; + mask-type: luminance; +} + +.shapes { + shape-image-threshold: 0.5; + shape-outside: circle(50% at 50% 50%); + shape-margin: 10px; +} + +.writing-modes { + unicode-bidi: embed; + direction: ltr; + writing-mode: horizontal-tb; + text-orientation: mixed; + text-combine-upright: none; +} + +.svg { + marker-start: none; + marker: none; + marker-mid: none; + marker-end: none; + stop-color: #000000; + stop-opacity: 1; + paint-order: normal; + shape-rendering: auto; + text-rendering: auto; +} + +.transforms { + transform-origin: center center; + transform: none; + transform-box: border-box; + transform-style: flat; + rotate: 0deg; + scale: 1; + translate: 0 0; + perspective: none; + perspective-origin: 50% 50%; + backface-visibility: visible; +} + +.view-transitions { + view-transition-class: none; + view-transition-name: none; +} + +.animations { + animation-play-state: running; + animation-fill-mode: both; + animation-composition: replace; +} + +.motion-path { + offset-position: 0px 0px; + offset: 0px; + offset-path: none; + offset-distance: 0%; + offset-rotate: 0deg; + offset-anchor: 50% 50%; +} diff --git a/crates/biome_css_analyze/tests/specs/source/useSortedProperties/invalid.css.snap b/crates/biome_css_analyze/tests/specs/source/useSortedProperties/invalid.css.snap index 601dc2ef5a83..1e623f3863bc 100644 --- a/crates/biome_css_analyze/tests/specs/source/useSortedProperties/invalid.css.snap +++ b/crates/biome_css_analyze/tests/specs/source/useSortedProperties/invalid.css.snap @@ -1,5 +1,6 @@ --- source: crates/biome_css_analyze/tests/spec_tests.rs +assertion_line: 102 expression: invalid.css --- # Input @@ -84,6 +85,138 @@ expression: invalid.css --custom: 100; } +.contain-intrinsic { + contain-intrinsic-block-size: auto; + contain-intrinsic-inline-size: auto; + contain-intrinsic-size: auto; + contain-intrinsic-width: 100px; + contain-intrinsic-height: 50px; +} + +.containment { + container: gallery / inline-size; + contain: layout; + container-name: gallery; + container-type: inline-size; + content-visibility: auto; +} + +.font-synthesis { + font-synthesis-weight: none; + font-synthesis: weight style; + font-synthesis-style: normal; + font-synthesis-small-caps: none; +} + +.colors { + override-colors: none; + base-palette: #ffffff; + font-palette: #555555; + color: #000000; +} + +.text { + hyphenate-character: "\00AD"; + hyphens: auto; + line-break: auto; + word-break: break-word; + text-wrap: pretty; + text-wrap-mode: balance; + text-wrap-style: normal; + word-wrap: break-word; + overflow-wrap: anywhere; + tab-size: 4; + white-space: normal; + white-space-collapse: preserve; +} + +.text-decoration { + text-decoration-line: underline; + text-decoration: underline; + text-decoration-thickness: 1px; + text-decoration-style: solid; + text-decoration-color: currentColor; + text-decoration-skip-ink: auto; +} + +.ruby { + ruby-align: center; + ruby-position: over; +} + +.color-adjustment { + forced-color-adjust: none; + color-scheme: light dark; + print-color-adjust: exact; +} + +.masking { + clip-path: inset(0); + clip: rect(0 0 0 0); + clip-rule: nonzero; + mask: none; + mask-type: luminance; +} + +.shapes { + shape-image-threshold: 0.5; + shape-outside: circle(50% at 50% 50%); + shape-margin: 10px; +} + +.writing-modes { + unicode-bidi: embed; + direction: ltr; + writing-mode: horizontal-tb; + text-orientation: mixed; + text-combine-upright: none; +} + +.svg { + marker-start: none; + marker: none; + marker-mid: none; + marker-end: none; + stop-color: #000000; + stop-opacity: 1; + paint-order: normal; + shape-rendering: auto; + text-rendering: auto; +} + +.transforms { + transform-origin: center center; + transform: none; + transform-box: border-box; + transform-style: flat; + rotate: 0deg; + scale: 1; + translate: 0 0; + perspective: none; + perspective-origin: 50% 50%; + backface-visibility: visible; +} + +.view-transitions { + view-transition-class: none; + view-transition-name: none; +} + +.animations { + animation-play-state: running; + animation-fill-mode: both; + animation-composition: replace; +} + +.motion-path { + offset-position: 0px 0px; + offset: 0px; + offset-path: none; + offset-distance: 0%; + offset-rotate: 0deg; + offset-anchor: 50% 50%; +} + ``` # Diagnostics @@ -103,13 +236,13 @@ invalid.css:1:19 assist/source/useSortedProperties FIXABLE ━━━━━━ i Safe fix: Sort these properties - 1 1 │ .not-sorted-basic { - 2 │ - ··color:·red; - 3 │ - ··display:·block; - 2 │ + ··display:·block; - 3 │ + ··color:·red; - 4 4 │ } - 5 5 │ + 1 1 │ .not-sorted-basic { + 2 │ - ··color:·red; + 3 │ - ··display:·block; + 2 │ + ··display:·block; + 3 │ + ··color:·red; + 4 4 │ } + 5 5 │ ``` @@ -134,18 +267,18 @@ invalid.css:6:22 assist/source/useSortedProperties FIXABLE ━━━━━━ i Safe fix: Sort these properties - 5 5 │ - 6 6 │ .multiple-properties { - 7 │ - ··margin:·1px; - 8 │ - ··transition:cubic-bezier(1,·0,·0,·1); - 9 │ - ··color:·red; - 10 │ - ··display:·block; - 7 │ + ··display:·block; - 8 │ + ··margin:·1px; - 9 │ + ··color:·red; - 10 │ + ··transition:cubic-bezier(1,·0,·0,·1); - 11 11 │ } - 12 12 │ + 5 5 │ + 6 6 │ .multiple-properties { + 7 │ - ··margin:·1px; + 8 │ - ··transition:cubic-bezier(1,·0,·0,·1); + 9 │ - ··color:·red; + 10 │ - ··display:·block; + 7 │ + ··display:·block; + 8 │ + ··margin:·1px; + 9 │ + ··color:·red; + 10 │ + ··transition:cubic-bezier(1,·0,·0,·1); + 11 11 │ } + 12 12 │ ``` @@ -164,12 +297,12 @@ invalid.css:21:10 assist/source/useSortedProperties FIXABLE ━━━━━━ i Safe fix: Sort these properties - 19 19 │ } /* trailing comment after rule */ - 20 20 │ - 21 │ - .oneline·{·color:·red;·display:·block;·} - 21 │ + .oneline·{·display:·block;·color:·red;·} - 22 22 │ - 23 23 │ .nested-rules { + 19 19 │ } /* trailing comment after rule */ + 20 20 │ + 21 │ - .oneline·{·color:·red;·display:·block;·} + 21 │ + .oneline·{·display:·block;·color:·red;·} + 22 22 │ + 23 23 │ .nested-rules { ``` @@ -193,16 +326,16 @@ invalid.css:23:15 assist/source/useSortedProperties FIXABLE ━━━━━━ i Safe fix: Sort these properties - 23 23 │ .nested-rules { - 24 24 │ display: block; - 25 │ - ··.nested·{} - 25 │ + ··margin:·1px; - 26 26 │ color: red; - 27 27 │ .nested {} - 28 │ - ··margin:·1px; - 28 │ + ··.nested·{} - 29 29 │ } - 30 30 │ + 23 23 │ .nested-rules { + 24 24 │ display: block; + 25 │ - ··.nested·{} + 25 │ + ··margin:·1px; + 26 26 │ color: red; + 27 27 │ .nested {} + 28 │ - ··margin:·1px; + 28 │ + ··.nested·{} + 29 29 │ } + 30 30 │ ``` @@ -226,18 +359,18 @@ invalid.css:31:11 assist/source/useSortedProperties FIXABLE ━━━━━━ i Safe fix: Sort these properties - 31 31 │ .at-rules { - 32 32 │ display: block; - 33 │ - ··@media·(min-width:·100px)·{} - 34 │ - ··color:·red; - 35 │ - ··@media·(min-width:·100px)·{} - 36 │ - ··margin:·1px; - 33 │ + ··margin:·1px; - 34 │ + ··color:·red; - 35 │ + ··@media·(min-width:·100px)·{} - 36 │ + ··@media·(min-width:·100px)·{} - 37 37 │ } - 38 38 │ + 31 31 │ .at-rules { + 32 32 │ display: block; + 33 │ - ··@media·(min-width:·100px)·{} + 34 │ - ··color:·red; + 35 │ - ··@media·(min-width:·100px)·{} + 36 │ - ··margin:·1px; + 33 │ + ··margin:·1px; + 34 │ + ··color:·red; + 35 │ + ··@media·(min-width:·100px)·{} + 36 │ + ··@media·(min-width:·100px)·{} + 37 37 │ } + 38 38 │ ``` @@ -261,18 +394,18 @@ invalid.css:39:14 assist/source/useSortedProperties FIXABLE ━━━━━━ i Safe fix: Sort these properties - 39 39 │ .mixed-rules { - 40 40 │ display: block; - 41 │ - ··@media·(min-width:·100px)·{} - 42 │ - ··color:·red; - 43 │ - ··.nested·{} - 44 │ - ··margin:·1px; - 41 │ + ··margin:·1px; - 42 │ + ··color:·red; - 43 │ + ··@media·(min-width:·100px)·{} - 44 │ + ··.nested·{} - 45 45 │ } - 46 46 │ + 39 39 │ .mixed-rules { + 40 40 │ display: block; + 41 │ - ··@media·(min-width:·100px)·{} + 42 │ - ··color:·red; + 43 │ - ··.nested·{} + 44 │ - ··margin:·1px; + 41 │ + ··margin:·1px; + 42 │ + ··color:·red; + 43 │ + ··@media·(min-width:·100px)·{} + 44 │ + ··.nested·{} + 45 45 │ } + 46 46 │ ``` @@ -296,16 +429,16 @@ invalid.css:47:18 assist/source/useSortedProperties FIXABLE ━━━━━━ i Safe fix: Sort these properties - 46 46 │ - 47 47 │ .vendor-prefixes { - 48 │ - ··margin:·1px; - 49 │ - ··-moz-margin:·1px; - 50 │ - ··-webkit-margin:·1px; - 48 │ + ··-moz-margin:·1px; - 49 │ + ··-webkit-margin:·1px; - 50 │ + ··margin:·1px; - 51 51 │ } - 52 52 │ + 46 46 │ + 47 47 │ .vendor-prefixes { + 48 │ - ··margin:·1px; + 49 │ - ··-moz-margin:·1px; + 50 │ - ··-webkit-margin:·1px; + 48 │ + ··-moz-margin:·1px; + 49 │ + ··-webkit-margin:·1px; + 50 │ + ··margin:·1px; + 51 51 │ } + 52 52 │ ``` @@ -328,14 +461,14 @@ invalid.css:53:19 assist/source/useSortedProperties FIXABLE ━━━━━━ i Safe fix: Sort these properties - 52 52 │ - 53 53 │ .case-insensitive { - 54 │ - ··color:·red; - 55 │ - ··DISPLAY:·block; - 54 │ + ··DISPLAY:·block; - 55 │ + ··color:·red; - 56 56 │ } - 57 57 │ + 52 52 │ + 53 53 │ .case-insensitive { + 54 │ - ··color:·red; + 55 │ - ··DISPLAY:·block; + 54 │ + ··DISPLAY:·block; + 55 │ + ··color:·red; + 56 56 │ } + 57 57 │ ``` @@ -357,14 +490,14 @@ invalid.css:59:11 assist/source/useSortedProperties FIXABLE ━━━━━━ i Safe fix: Sort these properties - 58 58 │ .nested-with-content { - 59 59 │ .nested { - 60 │ - ····color:·red; - 61 │ - ····display:·block; - 60 │ + ····display:·block; - 61 │ + ····color:·red; - 62 62 │ } - 63 63 │ } + 58 58 │ .nested-with-content { + 59 59 │ .nested { + 60 │ - ····color:·red; + 61 │ - ····display:·block; + 60 │ + ····display:·block; + 61 │ + ····color:·red; + 62 62 │ } + 63 63 │ } ``` @@ -388,16 +521,16 @@ invalid.css:65:66 assist/source/useSortedProperties FIXABLE ━━━━━━ i Safe fix: Sort these properties - 64 64 │ - 65 65 │ .shorthand-after-longhand-not-ignored-if-different-vendor-prefix { - 66 │ - ··padding:·5px; - 67 │ - ··-webkit-padding-right:·10px; - 68 │ - ··-moz-padding:·20px; - 66 │ + ··-moz-padding:·20px; - 67 │ + ··padding:·5px; - 68 │ + ··-webkit-padding-right:·10px; - 69 69 │ } - 70 70 │ + 64 64 │ + 65 65 │ .shorthand-after-longhand-not-ignored-if-different-vendor-prefix { + 66 │ - ··padding:·5px; + 67 │ - ··-webkit-padding-right:·10px; + 68 │ - ··-moz-padding:·20px; + 66 │ + ··-moz-padding:·20px; + 67 │ + ··padding:·5px; + 68 │ + ··-webkit-padding-right:·10px; + 69 69 │ } + 70 70 │ ``` @@ -413,31 +546,507 @@ invalid.css:71:27 assist/source/useSortedProperties FIXABLE ━━━━━━ │ ^ > 72 │ transition: opacity 1s ease; ... - > 77 │ display: block; > 78 │ --custom: 100; > 79 │ } │ ^ 80 │ + 81 │ .contain-intrinsic { + + i Safe fix: Sort these properties + + 70 70 │ + 71 71 │ .example-from-doc-comment { + 72 │ - ··transition:·opacity·1s·ease; + 73 │ - ··border:·1px·solid·black; + 74 │ - ··pointer-events:·none; + 72 │ + ··--custom:·100; + 73 │ + ··display:·block; + 74 │ + ··margin:·8px; + 75 75 │ color: black; + 76 │ - ··margin:·8px; + 77 │ - ··display:·block; + 78 │ - ··--custom:·100; + 76 │ + ··pointer-events:·none; + 77 │ + ··border:·1px·solid·black; + 78 │ + ··transition:·opacity·1s·ease; + 79 79 │ } + 80 80 │ + + +``` + +``` +invalid.css:81:20 assist/source/useSortedProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 79 │ } + 80 │ + > 81 │ .contain-intrinsic { + │ ^ + > 82 │ contain-intrinsic-block-size: auto; + ... + > 86 │ contain-intrinsic-height: 50px; + > 87 │ } + │ ^ + 88 │ + 89 │ .containment { + + i Safe fix: Sort these properties + + 80 80 │ + 81 81 │ .contain-intrinsic { + 82 │ - ··contain-intrinsic-block-size:·auto; + 83 │ - ··contain-intrinsic-inline-size:·auto; + 82 │ + ··contain-intrinsic-inline-size:·auto; + 83 │ + ··contain-intrinsic-block-size:·auto; + 84 84 │ contain-intrinsic-size: auto; + 85 85 │ contain-intrinsic-width: 100px; + + +``` + +``` +invalid.css:89:14 assist/source/useSortedProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 87 │ } + 88 │ + > 89 │ .containment { + │ ^ + > 90 │ container: gallery / inline-size; + ... + > 94 │ content-visibility: auto; + > 95 │ } + │ ^ + 96 │ + 97 │ .font-synthesis { + + i Safe fix: Sort these properties + + 88 88 │ + 89 89 │ .containment { + 90 │ - ··container:·gallery·/·inline-size; + 91 │ - ··contain:·layout; + 90 │ + ··contain:·layout; + 91 │ + ··container:·gallery·/·inline-size; + 92 92 │ container-name: gallery; + 93 93 │ container-type: inline-size; + + +``` + +``` +invalid.css:97:17 assist/source/useSortedProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 95 │ } + 96 │ + > 97 │ .font-synthesis { + │ ^ + > 98 │ font-synthesis-weight: none; + > 99 │ font-synthesis: weight style; + > 100 │ font-synthesis-style: normal; + > 101 │ font-synthesis-small-caps: none; + > 102 │ } + │ ^ + 103 │ + 104 │ .colors { + + +``` + +``` +invalid.css:104:9 assist/source/useSortedProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 102 │ } + 103 │ + > 104 │ .colors { + │ ^ + > 105 │ override-colors: none; + > 106 │ base-palette: #ffffff; + > 107 │ font-palette: #555555; + > 108 │ color: #000000; + > 109 │ } + │ ^ + 110 │ + 111 │ .text { + + i Safe fix: Sort these properties + + 103 103 │ + 104 104 │ .colors { + 105 │ - ··override-colors:·none; + 106 │ - ··base-palette:·#ffffff; + 105 │ + ··base-palette:·#ffffff; + 106 │ + ··override-colors:·none; + 107 107 │ font-palette: #555555; + 108 108 │ color: #000000; + + +``` + +``` +invalid.css:111:7 assist/source/useSortedProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 109 │ } + 110 │ + > 111 │ .text { + │ ^ + > 112 │ hyphenate-character: "\00AD"; + ... + > 123 │ white-space-collapse: preserve; + > 124 │ } + │ ^ + 125 │ + 126 │ .text-decoration { + + i Safe fix: Sort these properties + + 110 110 │ + 111 111 │ .text { + 112 │ - ··hyphenate-character:·"\00AD"; + 113 │ - ··hyphens:·auto; + 112 │ + ··hyphens:·auto; + 113 │ + ··hyphenate-character:·"\00AD"; + 114 114 │ line-break: auto; + 115 115 │ word-break: break-word; + + +``` + +``` +invalid.css:126:18 assist/source/useSortedProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 124 │ } + 125 │ + > 126 │ .text-decoration { + │ ^ + > 127 │ text-decoration-line: underline; + ... + > 132 │ text-decoration-skip-ink: auto; + > 133 │ } + │ ^ + 134 │ + 135 │ .ruby { + + +``` + +``` +invalid.css:135:7 assist/source/useSortedProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 133 │ } + 134 │ + > 135 │ .ruby { + │ ^ + > 136 │ ruby-align: center; + > 137 │ ruby-position: over; + > 138 │ } + │ ^ + 139 │ + 140 │ .color-adjustment { + + i Safe fix: Sort these properties + + 134 134 │ + 135 135 │ .ruby { + 136 │ - ··ruby-align:·center; + 137 │ - ··ruby-position:·over; + 136 │ + ··ruby-position:·over; + 137 │ + ··ruby-align:·center; + 138 138 │ } + 139 139 │ + + +``` + +``` +invalid.css:140:19 assist/source/useSortedProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 138 │ } + 139 │ + > 140 │ .color-adjustment { + │ ^ + > 141 │ forced-color-adjust: none; + > 142 │ color-scheme: light dark; + > 143 │ print-color-adjust: exact; + > 144 │ } + │ ^ + 145 │ + 146 │ .masking { + + i Safe fix: Sort these properties + + 139 139 │ + 140 140 │ .color-adjustment { + 141 │ - ··forced-color-adjust:·none; + 142 │ - ··color-scheme:·light·dark; + 141 │ + ··color-scheme:·light·dark; + 142 │ + ··forced-color-adjust:·none; + 143 143 │ print-color-adjust: exact; + 144 144 │ } + + +``` + +``` +invalid.css:146:10 assist/source/useSortedProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 144 │ } + 145 │ + > 146 │ .masking { + │ ^ + > 147 │ clip-path: inset(0); + ... + > 151 │ mask-type: luminance; + > 152 │ } + │ ^ + 153 │ + 154 │ .shapes { + + i Safe fix: Sort these properties + + 145 145 │ + 146 146 │ .masking { + 147 │ - ··clip-path:·inset(0); + 148 │ - ··clip:·rect(0·0·0·0); + 147 │ + ··clip:·rect(0·0·0·0); + 148 │ + ··clip-path:·inset(0); + 149 149 │ clip-rule: nonzero; + 150 150 │ mask: none; + + +``` + +``` +invalid.css:154:9 assist/source/useSortedProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 152 │ } + 153 │ + > 154 │ .shapes { + │ ^ + > 155 │ shape-image-threshold: 0.5; + > 156 │ shape-outside: circle(50% at 50% 50%); + > 157 │ shape-margin: 10px; + > 158 │ } + │ ^ + 159 │ + 160 │ .writing-modes { + + i Safe fix: Sort these properties + + 153 153 │ + 154 154 │ .shapes { + 155 │ - ··shape-image-threshold:·0.5; + 156 │ - ··shape-outside:·circle(50%·at·50%·50%); + 157 │ - ··shape-margin:·10px; + 155 │ + ··shape-outside:·circle(50%·at·50%·50%); + 156 │ + ··shape-image-threshold:·0.5; + 157 │ + ··shape-margin:·10px; + 158 158 │ } + 159 159 │ + + +``` + +``` +invalid.css:160:16 assist/source/useSortedProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 158 │ } + 159 │ + > 160 │ .writing-modes { + │ ^ + > 161 │ unicode-bidi: embed; + ... + > 165 │ text-combine-upright: none; + > 166 │ } + │ ^ + 167 │ + 168 │ .svg { + + i Safe fix: Sort these properties + + 159 159 │ + 160 160 │ .writing-modes { + 161 │ - ··unicode-bidi:·embed; + 162 │ - ··direction:·ltr; + 161 │ + ··direction:·ltr; + 162 │ + ··unicode-bidi:·embed; + 163 163 │ writing-mode: horizontal-tb; + 164 164 │ text-orientation: mixed; + + +``` + +``` +invalid.css:168:6 assist/source/useSortedProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 166 │ } + 167 │ + > 168 │ .svg { + │ ^ + > 169 │ marker-start: none; + ... + > 177 │ text-rendering: auto; + > 178 │ } + │ ^ + 179 │ + 180 │ .transforms { + + i Safe fix: Sort these properties + + 167 167 │ + 168 168 │ .svg { + 169 │ - ··marker-start:·none; + 170 │ - ··marker:·none; + 169 │ + ··marker:·none; + 170 │ + ··marker-start:·none; + 171 171 │ marker-mid: none; + 172 172 │ marker-end: none; + + +``` + +``` +invalid.css:180:13 assist/source/useSortedProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 178 │ } + 179 │ + > 180 │ .transforms { + │ ^ + > 181 │ transform-origin: center center; + ... + > 190 │ backface-visibility: visible; + > 191 │ } + │ ^ + 192 │ + 193 │ .view-transitions { + + i Safe fix: Sort these properties + + 179 179 │ + 180 180 │ .transforms { + 181 │ - ··transform-origin:·center·center; + 182 │ - ··transform:·none; + 181 │ + ··transform:·none; + 182 │ + ··transform-origin:·center·center; + 183 183 │ transform-box: border-box; + 184 184 │ transform-style: flat; + + +``` + +``` +invalid.css:193:19 assist/source/useSortedProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 191 │ } + 192 │ + > 193 │ .view-transitions { + │ ^ + > 194 │ view-transition-class: none; + > 195 │ view-transition-name: none; + > 196 │ } + │ ^ + 197 │ + 198 │ .animations { + + i Safe fix: Sort these properties + + 192 192 │ + 193 193 │ .view-transitions { + 194 │ - ··view-transition-class:·none; + 195 │ - ··view-transition-name:·none; + 194 │ + ··view-transition-name:·none; + 195 │ + ··view-transition-class:·none; + 196 196 │ } + 197 197 │ + + +``` + +``` +invalid.css:198:13 assist/source/useSortedProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 196 │ } + 197 │ + > 198 │ .animations { + │ ^ + > 199 │ animation-play-state: running; + > 200 │ animation-fill-mode: both; + > 201 │ animation-composition: replace; + > 202 │ } + │ ^ + 203 │ + 204 │ .motion-path { + + i Safe fix: Sort these properties + + 197 197 │ + 198 198 │ .animations { + 199 │ - ··animation-play-state:·running; + 200 │ - ··animation-fill-mode:·both; + 199 │ + ··animation-fill-mode:·both; + 200 │ + ··animation-play-state:·running; + 201 201 │ animation-composition: replace; + 202 202 │ } + + +``` + +``` +invalid.css:204:14 assist/source/useSortedProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + i The properties are not sorted. + + 202 │ } + 203 │ + > 204 │ .motion-path { + │ ^ + > 205 │ offset-position: 0px 0px; + ... + > 209 │ offset-rotate: 0deg; + > 210 │ offset-anchor: 50% 50%; + > 211 │ } + │ ^ + 212 │ i Safe fix: Sort these properties - 70 70 │ - 71 71 │ .example-from-doc-comment { - 72 │ - ··transition:·opacity·1s·ease; - 73 │ - ··border:·1px·solid·black; - 74 │ - ··pointer-events:·none; - 72 │ + ··--custom:·100; - 73 │ + ··display:·block; - 74 │ + ··margin:·8px; - 75 75 │ color: black; - 76 │ - ··margin:·8px; - 77 │ - ··display:·block; - 78 │ - ··--custom:·100; - 76 │ + ··pointer-events:·none; - 77 │ + ··border:·1px·solid·black; - 78 │ + ··transition:·opacity·1s·ease; - 79 79 │ } - 80 80 │ + 203 203 │ + 204 204 │ .motion-path { + 205 │ - ··offset-position:·0px·0px; + 206 │ - ··offset:·0px; + 205 │ + ··offset:·0px; + 206 │ + ··offset-position:·0px·0px; + 207 207 │ offset-path: none; + 208 208 │ offset-distance: 0%; ``` diff --git a/crates/biome_css_analyze/tests/specs/source/useSortedProperties/valid.css b/crates/biome_css_analyze/tests/specs/source/useSortedProperties/valid.css index 77cc74469fc4..2f94d3c63618 100644 --- a/crates/biome_css_analyze/tests/specs/source/useSortedProperties/valid.css +++ b/crates/biome_css_analyze/tests/specs/source/useSortedProperties/valid.css @@ -79,6 +79,137 @@ transition:·opacity·1s·ease; } +.contain-intrinsic { + contain-intrinsic-inline-size: auto; + contain-intrinsic-block-size: auto; + contain-intrinsic-size: auto; + contain-intrinsic-width: 100px; + contain-intrinsic-height: 50px; +} + +.containment { + contain: layout; + container: gallery / inline-size; + container-name: gallery; + container-type: inline-size; + content-visibility: auto; +} + +.font-synthesis { + font-synthesis: weight style; + font-synthesis-weight: none; + font-synthesis-style: normal; + font-synthesis-small-caps: none; +} + +.colors { + base-palette: #ffffff; + override-colors: none; + font-palette: #555555; + color: #000000; +} + +.text { + hyphens: auto; + hyphenate-character: "\00AD"; + line-break: auto; + word-break: break-word; + text-wrap: pretty; + text-wrap-mode: balance; + text-wrap-style: normal; + word-wrap: break-word; + overflow-wrap: anywhere; + tab-size: 4; + white-space: normal; + white-space-collapse: preserve; +} + +.text-decoration { + text-decoration: underline; + text-decoration-line: underline; + text-decoration-thickness: 1px; + text-decoration-style: solid; + text-decoration-color: currentColor; + text-decoration-skip-ink: auto; +} + +.ruby { + ruby-position: over; + ruby-align: center; +} + +.color-adjustment { + color-scheme: light dark; + forced-color-adjust: none; + print-color-adjust: exact; +} + +.masking { + clip: rect(0 0 0 0); + clip-path: inset(0); + clip-rule: nonzero; + mask: none; + mask-type: luminance; +} + +.shapes { + shape-outside: circle(50% at 50% 50%); + shape-image-threshold: 0.5; + shape-margin: 10px; +} + +.writing-modes { + direction: ltr; + unicode-bidi: embed; + writing-mode: horizontal-tb; + text-orientation: mixed; + text-combine-upright: none; +} + +.svg { + marker: none; + marker-start: none; + marker-mid: none; + marker-end: none; + stop-color: #000000; + stop-opacity: 1; + paint-order: normal; + shape-rendering: auto; + text-rendering: auto; +} + +.transforms { + transform: none; + transform-origin: center center; + transform-box: border-box; + transform-style: flat; + rotate: 0deg; + scale: 1; + translate: 0 0; + perspective: none; + perspective-origin: 50% 50%; + backface-visibility: visible; +} + +.view-transitions { + view-transition-name: none; + view-transition-class: none; +} + +.animations { + animation-fill-mode: both; + animation-play-state: running; + animation-composition: replace; +} + +.motion-path { + offset: 0px; + offset-position: 0px 0px; + offset-path: none; + offset-distance: 0%; + offset-rotate: 0deg; + offset-anchor: 50% 50%; +} /** * https://github.com/biomejs/biome/issues/6105 diff --git a/crates/biome_css_analyze/tests/specs/source/useSortedProperties/valid.css.snap b/crates/biome_css_analyze/tests/specs/source/useSortedProperties/valid.css.snap index aa039ccc3f97..b2fcde8b7e37 100644 --- a/crates/biome_css_analyze/tests/specs/source/useSortedProperties/valid.css.snap +++ b/crates/biome_css_analyze/tests/specs/source/useSortedProperties/valid.css.snap @@ -1,5 +1,6 @@ --- source: crates/biome_css_analyze/tests/spec_tests.rs +assertion_line: 102 expression: valid.css --- # Input @@ -85,6 +86,137 @@ expression: valid.css transition:·opacity·1s·ease; } +.contain-intrinsic { + contain-intrinsic-inline-size: auto; + contain-intrinsic-block-size: auto; + contain-intrinsic-size: auto; + contain-intrinsic-width: 100px; + contain-intrinsic-height: 50px; +} + +.containment { + contain: layout; + container: gallery / inline-size; + container-name: gallery; + container-type: inline-size; + content-visibility: auto; +} + +.font-synthesis { + font-synthesis: weight style; + font-synthesis-weight: none; + font-synthesis-style: normal; + font-synthesis-small-caps: none; +} + +.colors { + base-palette: #ffffff; + override-colors: none; + font-palette: #555555; + color: #000000; +} + +.text { + hyphens: auto; + hyphenate-character: "\00AD"; + line-break: auto; + word-break: break-word; + text-wrap: pretty; + text-wrap-mode: balance; + text-wrap-style: normal; + word-wrap: break-word; + overflow-wrap: anywhere; + tab-size: 4; + white-space: normal; + white-space-collapse: preserve; +} + +.text-decoration { + text-decoration: underline; + text-decoration-line: underline; + text-decoration-thickness: 1px; + text-decoration-style: solid; + text-decoration-color: currentColor; + text-decoration-skip-ink: auto; +} + +.ruby { + ruby-position: over; + ruby-align: center; +} + +.color-adjustment { + color-scheme: light dark; + forced-color-adjust: none; + print-color-adjust: exact; +} + +.masking { + clip: rect(0 0 0 0); + clip-path: inset(0); + clip-rule: nonzero; + mask: none; + mask-type: luminance; +} + +.shapes { + shape-outside: circle(50% at 50% 50%); + shape-image-threshold: 0.5; + shape-margin: 10px; +} + +.writing-modes { + direction: ltr; + unicode-bidi: embed; + writing-mode: horizontal-tb; + text-orientation: mixed; + text-combine-upright: none; +} + +.svg { + marker: none; + marker-start: none; + marker-mid: none; + marker-end: none; + stop-color: #000000; + stop-opacity: 1; + paint-order: normal; + shape-rendering: auto; + text-rendering: auto; +} + +.transforms { + transform: none; + transform-origin: center center; + transform-box: border-box; + transform-style: flat; + rotate: 0deg; + scale: 1; + translate: 0 0; + perspective: none; + perspective-origin: 50% 50%; + backface-visibility: visible; +} + +.view-transitions { + view-transition-name: none; + view-transition-class: none; +} + +.animations { + animation-fill-mode: both; + animation-play-state: running; + animation-composition: replace; +} + +.motion-path { + offset: 0px; + offset-position: 0px 0px; + offset-path: none; + offset-distance: 0%; + offset-rotate: 0deg; + offset-anchor: 50% 50%; +} /** * https://github.com/biomejs/biome/issues/6105