From 4efd91a2f794f4ec35ca1a64083e281a9a13f38f Mon Sep 17 00:00:00 2001 From: Denis Bezrukov <6227442+denbezrukov@users.noreply.github.com> Date: Sun, 24 Mar 2024 21:35:41 +0200 Subject: [PATCH] feat(css_formatter): CssImportAtRule formatting --- .../css/auxiliary/import_anonymous_layer.rs | 9 +- .../src/css/auxiliary/import_named_layer.rs | 24 +- .../src/css/auxiliary/import_supports.rs | 24 +- .../src/css/statements/import_at_rule.rs | 49 ++- .../tests/specs/css/atrule/import.css | 166 ++++++++ .../tests/specs/css/atrule/import.css.snap | 384 ++++++++++++++++++ .../specs/prettier/css/atrule/import.css.snap | 184 +++------ .../prettier/css/comments/at-rules.css.snap | 100 ++--- .../css/inline-url/inline_url.css.snap | 3 - .../specs/prettier/css/quotes/quotes.css.snap | 25 +- 10 files changed, 753 insertions(+), 215 deletions(-) create mode 100644 crates/biome_css_formatter/tests/specs/css/atrule/import.css create mode 100644 crates/biome_css_formatter/tests/specs/css/atrule/import.css.snap diff --git a/crates/biome_css_formatter/src/css/auxiliary/import_anonymous_layer.rs b/crates/biome_css_formatter/src/css/auxiliary/import_anonymous_layer.rs index 4e9e084c299e..64e47979abac 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/import_anonymous_layer.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/import_anonymous_layer.rs @@ -1,10 +1,13 @@ use crate::prelude::*; -use biome_css_syntax::CssImportAnonymousLayer; -use biome_rowan::AstNode; +use biome_css_syntax::{CssImportAnonymousLayer, CssImportAnonymousLayerFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssImportAnonymousLayer; impl FormatNodeRule for FormatCssImportAnonymousLayer { fn fmt_fields(&self, node: &CssImportAnonymousLayer, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssImportAnonymousLayerFields { layer_token } = node.as_fields(); + + write!(f, [layer_token.format()]) } } diff --git a/crates/biome_css_formatter/src/css/auxiliary/import_named_layer.rs b/crates/biome_css_formatter/src/css/auxiliary/import_named_layer.rs index e8552a8f22ce..5a2739a1854f 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/import_named_layer.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/import_named_layer.rs @@ -1,10 +1,28 @@ use crate::prelude::*; -use biome_css_syntax::CssImportNamedLayer; -use biome_rowan::AstNode; +use biome_css_syntax::{CssImportNamedLayer, CssImportNamedLayerFields}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssImportNamedLayer; impl FormatNodeRule for FormatCssImportNamedLayer { fn fmt_fields(&self, node: &CssImportNamedLayer, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssImportNamedLayerFields { + layer_token, + l_paren_token, + name, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [ + layer_token.format(), + group(&format_args![ + l_paren_token.format(), + soft_block_indent(&name.format()), + r_paren_token.format() + ]) + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/auxiliary/import_supports.rs b/crates/biome_css_formatter/src/css/auxiliary/import_supports.rs index 6c9feaf48b01..33403c533f21 100644 --- a/crates/biome_css_formatter/src/css/auxiliary/import_supports.rs +++ b/crates/biome_css_formatter/src/css/auxiliary/import_supports.rs @@ -1,10 +1,28 @@ use crate::prelude::*; -use biome_css_syntax::CssImportSupports; -use biome_rowan::AstNode; +use biome_css_syntax::{CssImportSupports, CssImportSupportsFields}; +use biome_formatter::{format_args, write}; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssImportSupports; impl FormatNodeRule for FormatCssImportSupports { fn fmt_fields(&self, node: &CssImportSupports, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssImportSupportsFields { + supports_token, + l_paren_token, + condition, + r_paren_token, + } = node.as_fields(); + + write!( + f, + [ + supports_token.format(), + group(&format_args![ + l_paren_token.format(), + soft_block_indent(&condition.format()), + r_paren_token.format() + ]) + ] + ) } } diff --git a/crates/biome_css_formatter/src/css/statements/import_at_rule.rs b/crates/biome_css_formatter/src/css/statements/import_at_rule.rs index 6540dfd78583..0fc1f46a8309 100644 --- a/crates/biome_css_formatter/src/css/statements/import_at_rule.rs +++ b/crates/biome_css_formatter/src/css/statements/import_at_rule.rs @@ -1,10 +1,53 @@ use crate::prelude::*; -use biome_css_syntax::CssImportAtRule; -use biome_rowan::AstNode; +use biome_css_syntax::{CssImportAtRule, CssImportAtRuleFields}; +use biome_formatter::write; + #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssImportAtRule; impl FormatNodeRule for FormatCssImportAtRule { fn fmt_fields(&self, node: &CssImportAtRule, f: &mut CssFormatter) -> FormatResult<()> { - format_verbatim_node(node.syntax()).fmt(f) + let CssImportAtRuleFields { + import_token, + url, + layer, + supports, + media, + semicolon_token, + } = node.as_fields(); + + write!(f, [import_token.format(), space()])?; + + // Determine if there are any modifiers present. + let has_any_modifiers = layer.is_some() || supports.is_some() || media.len() > 0; + + if has_any_modifiers { + // If there are, we need to group them together and try to fill them. + let modifiers = format_once(|f| { + let separator = soft_line_break_or_space(); + let mut fill = f.fill(); + + fill.entry(&separator, &url.format()); + + if let Some(layer) = layer { + fill.entry(&separator, &layer.format()); + } + + if let Some(supports) = supports { + fill.entry(&separator, &supports.format()); + } + + if media.len() > 0 { + fill.entry(&separator, &media.format()); + } + + fill.finish() + }); + write!(f, [group(&indent(&modifiers))])?; + } else { + // If there are no modifiers, simply write the formatted `url` to the formatter `f`. + write!(f, [url.format()])?; + } + + write!(f, [semicolon_token.format()]) } } diff --git a/crates/biome_css_formatter/tests/specs/css/atrule/import.css b/crates/biome_css_formatter/tests/specs/css/atrule/import.css new file mode 100644 index 000000000000..81bb312c6700 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/atrule/import.css @@ -0,0 +1,166 @@ +@import url("./style.css"); +@import url('./style.css'); +@import url(./style.css); +@import './style.css'; +@import "./style.css"; +@IMPORT url("./style.css"); +@import URL(./style.css); +@import URL("./style.css"); +@import"test.css"; +@import "common.css" screen; +@import url('landscape.css') screen and (orientation:landscape); +@import url("theme.css") layer; +@import url("theme.css") layer ; +@import url("theme.css") LAYER; +@import url("theme.css") layer(default); +@import url("theme.css") LAYER(default); +@import url("tabs.css") layer(framework.component); +@import url("override.css") layer; +@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px); +@import url("narrow.css") SUPPORTS(display: flex) handheld and (max-width: 400px); +@import url("fallback-layout.css") supports(not (display: flex)); +@import url(test.css); +@import url('test.css'); +@import url("test.css"); +@IMPORT url(test.css); +@import URL(test.css); +@import url(test.css ); +@import url( test.css); +@import url( test.css ); +@import url( +test.css +); +@import url(); +@import url(''); +@import url(""); +@import "test.css"; +@import 'test.css'; +@import ''; +@import ""; +@import " "; +@import "\ +"; +@import url(); +@import url(''); +@import url(""); +@import url(test.css) screen and (orientation:landscape); +@import url(test.css) SCREEN AND (ORIENTATION: LANDSCAPE); +@import url(test.css)screen and (orientation:landscape); +@import url(test.css) screen and ( orientation : landscape ) ; +@import url(test.css) screen and (orientation:landscape); +@import url("//example.com/style.css"); +@import url(~package/test.css); +@import url('https://fonts.googleapis.com/css?family=Roboto'); +@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC'); +@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto'); +@import url('./relative.css'); +@import url('../import/top-relative.css'); +@import url(~package/tilde.css); +@import url(~aliasesImport/alias.css); +@import url('./url.css'); + +@import url(./test.css); + +@import './te\ +st.css'; +@import './te\ +\ +\ +st.css'; +@import url('./te\ +st.css'); +@import url('./te\ +\ +\ +st.css'); + +@import "./te'st.css"; +@import url("./te'st.css"); +@import './te\'st.css'; +@import url('./te\'st.css'); +@import './test test.css'; +@import url('./test test.css'); +@import './test\ test.css'; +@import url('./test\ test.css'); +@import './test%20test.css'; +@import url('./test%20test.css'); +@import './\74\65\73\74.css'; +@import url('./\74\65\73\74.css'); +@import './t\65\73\74.css'; +@import url('./t\65\73\74.css'); +@import url(./test\ test.css); +@import url(./t\65st%20test.css); +@import url('./t\65st%20test.css'); +@import url("./t\65st%20test.css"); +@import "./t\65st%20test.css"; +@import './t\65st%20test.css'; +@import url( test.css ); +@import '\ +\ +\ +'; +@import url('!!../../helpers/string-loader.js?esModule=false!~package/tilde.css'); + +@import url(test.css?foo=bar); +@import url(test.css?foo=bar#hash); +@import url(test.css?#hash); + +@import "test.css" supports(display: flex); +@import "test.css" supports(display: flex) screen and (orientation:landscape); +@import"test.css"supports(display: flex)screen and (orientation:landscape); + +@import " ./test.css "; +@import url(' ./test.css '); +@import url( ./test.css ); + +@import "./my.scss"; + +@import url(' https://fonts.googleapis.com/css?family=Roboto '); +@import url('!!../../helpers/string-loader.js?esModule=false!'); +@import url(' !!../../helpers/string-loader.js?esModule=false!~package/tilde.css '); +@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D); + +@import url(package/first.css); +@import url(package/second.css); + +@import url("./test.css") supports(display: flex); +@import url("./test.css") supports(display: flex !important); +@import url("./test.css") supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer; +@import url("./test.css") layer(default); +@import url("./test.css") layer(default) supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer; +@import url("http://example.com/style.css") supports(display: flex) screen and (min-width: 400px); +@import url("./test.css")layer(default)supports(display: flex)screen and (min-width:400px); +@import url("./test.css")screen and (min-width: 400px); +@import url("./test.css") layer( default ) supports( display : flex ) screen and ( min-width : 400px ); +@import url("./test.css") LAYER(DEFAULT) SUPPORTS(DISPLAY: FLEX) SCREEN AND (MIN-WIDTH: 400PX); +@import url("./test.css") /* Comment */ layer(/* Comment */default/* Comment */) /* Comment */ supports(/* Comment */display/* Comment */:/* Comment */ flex/* Comment */)/* Comment */ screen/* Comment */ and/* Comment */ (/* Comment */min-width/* Comment */: /* Comment */400px/* Comment */); +@import url(test.css) /* Comment */; +@import /* Comment */ url(test.css) /* Comment */; +@import url(test.css) /* Comment */ print and (orientation:landscape); +@import /* Comment */ url(test.css) /* Comment */ print and (orientation:landscape); + +@import url("./deep-import-with-media.css") (prefers-color-scheme: dark); +@import url("./import-with-supports.css") supports(display: flex); +@import url("./import-with-supports.css") supports(((display: flex))); +@import url("./deep-import-with-supports.css") supports(display: flex); +@import url('./test.css') supports(display: grid); +@import url('./test.css') supports( display : grid ); +@import url("./import-with-supports-and-media.css") supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer(framework); +@import url("./import-multiple-with-layer.css") layer(default); +@import url("./import-unnamed-layer.css") layer(base); +@import url("./import-with-layer-and-supports.css") layer(default) supports(display: flex); + +@import url(bootstrap-base.css) layer(base); +@import url(base-headings.css) layer; +@import url("tabs.css") layer(framework.component); +@import url("override.css") layer; +@import url("fallback-layout.css") supports(not (display: flex)); +@import url("narrow.css") supports(display: flex) screen and (max-width: 400px); + +@import "test.css" supports( display: flex ); +@import url("tabs.css") layer( framework.component ); diff --git a/crates/biome_css_formatter/tests/specs/css/atrule/import.css.snap b/crates/biome_css_formatter/tests/specs/css/atrule/import.css.snap new file mode 100644 index 000000000000..9f70710ac635 --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/atrule/import.css.snap @@ -0,0 +1,384 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/atrule/import.css +--- +# Input + +```css +@import url("./style.css"); +@import url('./style.css'); +@import url(./style.css); +@import './style.css'; +@import "./style.css"; +@IMPORT url("./style.css"); +@import URL(./style.css); +@import URL("./style.css"); +@import"test.css"; +@import "common.css" screen; +@import url('landscape.css') screen and (orientation:landscape); +@import url("theme.css") layer; +@import url("theme.css") layer ; +@import url("theme.css") LAYER; +@import url("theme.css") layer(default); +@import url("theme.css") LAYER(default); +@import url("tabs.css") layer(framework.component); +@import url("override.css") layer; +@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px); +@import url("narrow.css") SUPPORTS(display: flex) handheld and (max-width: 400px); +@import url("fallback-layout.css") supports(not (display: flex)); +@import url(test.css); +@import url('test.css'); +@import url("test.css"); +@IMPORT url(test.css); +@import URL(test.css); +@import url(test.css ); +@import url( test.css); +@import url( test.css ); +@import url( +test.css +); +@import url(); +@import url(''); +@import url(""); +@import "test.css"; +@import 'test.css'; +@import ''; +@import ""; +@import " "; +@import "\ +"; +@import url(); +@import url(''); +@import url(""); +@import url(test.css) screen and (orientation:landscape); +@import url(test.css) SCREEN AND (ORIENTATION: LANDSCAPE); +@import url(test.css)screen and (orientation:landscape); +@import url(test.css) screen and ( orientation : landscape ) ; +@import url(test.css) screen and (orientation:landscape); +@import url("//example.com/style.css"); +@import url(~package/test.css); +@import url('https://fonts.googleapis.com/css?family=Roboto'); +@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC'); +@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto'); +@import url('./relative.css'); +@import url('../import/top-relative.css'); +@import url(~package/tilde.css); +@import url(~aliasesImport/alias.css); +@import url('./url.css'); + +@import url(./test.css); + +@import './te\ +st.css'; +@import './te\ +\ +\ +st.css'; +@import url('./te\ +st.css'); +@import url('./te\ +\ +\ +st.css'); + +@import "./te'st.css"; +@import url("./te'st.css"); +@import './te\'st.css'; +@import url('./te\'st.css'); +@import './test test.css'; +@import url('./test test.css'); +@import './test\ test.css'; +@import url('./test\ test.css'); +@import './test%20test.css'; +@import url('./test%20test.css'); +@import './\74\65\73\74.css'; +@import url('./\74\65\73\74.css'); +@import './t\65\73\74.css'; +@import url('./t\65\73\74.css'); +@import url(./test\ test.css); +@import url(./t\65st%20test.css); +@import url('./t\65st%20test.css'); +@import url("./t\65st%20test.css"); +@import "./t\65st%20test.css"; +@import './t\65st%20test.css'; +@import url( test.css ); +@import '\ +\ +\ +'; +@import url('!!../../helpers/string-loader.js?esModule=false!~package/tilde.css'); + +@import url(test.css?foo=bar); +@import url(test.css?foo=bar#hash); +@import url(test.css?#hash); + +@import "test.css" supports(display: flex); +@import "test.css" supports(display: flex) screen and (orientation:landscape); +@import"test.css"supports(display: flex)screen and (orientation:landscape); + +@import " ./test.css "; +@import url(' ./test.css '); +@import url( ./test.css ); + +@import "./my.scss"; + +@import url(' https://fonts.googleapis.com/css?family=Roboto '); +@import url('!!../../helpers/string-loader.js?esModule=false!'); +@import url(' !!../../helpers/string-loader.js?esModule=false!~package/tilde.css '); +@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D); + +@import url(package/first.css); +@import url(package/second.css); + +@import url("./test.css") supports(display: flex); +@import url("./test.css") supports(display: flex !important); +@import url("./test.css") supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer; +@import url("./test.css") layer(default); +@import url("./test.css") layer(default) supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer; +@import url("http://example.com/style.css") supports(display: flex) screen and (min-width: 400px); +@import url("./test.css")layer(default)supports(display: flex)screen and (min-width:400px); +@import url("./test.css")screen and (min-width: 400px); +@import url("./test.css") layer( default ) supports( display : flex ) screen and ( min-width : 400px ); +@import url("./test.css") LAYER(DEFAULT) SUPPORTS(DISPLAY: FLEX) SCREEN AND (MIN-WIDTH: 400PX); +@import url("./test.css") /* Comment */ layer(/* Comment */default/* Comment */) /* Comment */ supports(/* Comment */display/* Comment */:/* Comment */ flex/* Comment */)/* Comment */ screen/* Comment */ and/* Comment */ (/* Comment */min-width/* Comment */: /* Comment */400px/* Comment */); +@import url(test.css) /* Comment */; +@import /* Comment */ url(test.css) /* Comment */; +@import url(test.css) /* Comment */ print and (orientation:landscape); +@import /* Comment */ url(test.css) /* Comment */ print and (orientation:landscape); + +@import url("./deep-import-with-media.css") (prefers-color-scheme: dark); +@import url("./import-with-supports.css") supports(display: flex); +@import url("./import-with-supports.css") supports(((display: flex))); +@import url("./deep-import-with-supports.css") supports(display: flex); +@import url('./test.css') supports(display: grid); +@import url('./test.css') supports( display : grid ); +@import url("./import-with-supports-and-media.css") supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer(framework); +@import url("./import-multiple-with-layer.css") layer(default); +@import url("./import-unnamed-layer.css") layer(base); +@import url("./import-with-layer-and-supports.css") layer(default) supports(display: flex); + +@import url(bootstrap-base.css) layer(base); +@import url(base-headings.css) layer; +@import url("tabs.css") layer(framework.component); +@import url("override.css") layer; +@import url("fallback-layout.css") supports(not (display: flex)); +@import url("narrow.css") supports(display: flex) screen and (max-width: 400px); + +@import "test.css" supports( display: flex ); +@import url("tabs.css") layer( framework.component ); + +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +Quote style: Double Quotes +----- + +```css +@import url("./style.css"); +@import url("./style.css"); +@import url(./style.css); +@import "./style.css"; +@import "./style.css"; +@import url("./style.css"); +@import url(./style.css); +@import url("./style.css"); +@import "test.css"; +@import "common.css" screen; +@import url("landscape.css") screen and (orientation: landscape); +@import url("theme.css") layer; +@import url("theme.css") layer; +@import url("theme.css") layer; +@import url("theme.css") layer(default); +@import url("theme.css") layer(default); +@import url("tabs.css") layer(framework.component); +@import url("override.css") layer; +@import url("narrow.css") supports(display: flex) + handheld and (max-width: 400px); +@import url("narrow.css") supports(display: flex) + handheld and (max-width: 400px); +@import url("fallback-layout.css") supports(not (display: flex)); +@import url(test.css); +@import url("test.css"); +@import url("test.css"); +@import url(test.css); +@import url(test.css); +@import url(test.css ); +@import url(test.css); +@import url(test.css ); +@import url(test.css +); +@import url(); +@import url(""); +@import url(""); +@import "test.css"; +@import "test.css"; +@import ""; +@import ""; +@import " "; +@import "\ +"; +@import url(); +@import url(""); +@import url(""); +@import url(test.css) screen and (orientation: landscape); +@import url(test.css) screen and (orientation: landscape); +@import url(test.css) screen and (orientation: landscape); +@import url(test.css) screen and (orientation: landscape); +@import url(test.css) screen and (orientation: landscape); +@import url("//example.com/style.css"); +@import url(~package/test.css); +@import url("https://fonts.googleapis.com/css?family=Roboto"); +@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC"); +@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto"); +@import url("./relative.css"); +@import url("../import/top-relative.css"); +@import url(~package/tilde.css); +@import url(~aliasesImport/alias.css); +@import url("./url.css"); + +@import url(./test.css); + +@import "./te\ +st.css"; +@import "./te\ +\ +\ +st.css"; +@import url("./te\ +st.css"); +@import url("./te\ +\ +\ +st.css"); + +@import "./te'st.css"; +@import url("./te'st.css"); +@import "./te'st.css"; +@import url("./te'st.css"); +@import "./test test.css"; +@import url("./test test.css"); +@import "./test\ test.css"; +@import url("./test\ test.css"); +@import "./test%20test.css"; +@import url("./test%20test.css"); +@import "./\74\65\73\74.css"; +@import url("./\74\65\73\74.css"); +@import "./t\65\73\74.css"; +@import url("./t\65\73\74.css"); +@import url(./test\ test.css); +@import url(./t\65st%20test.css); +@import url("./t\65st%20test.css"); +@import url("./t\65st%20test.css"); +@import "./t\65st%20test.css"; +@import "./t\65st%20test.css"; +@import url(test.css ); +@import "\ +\ +\ +"; +@import url("!!../../helpers/string-loader.js?esModule=false!~package/tilde.css"); + +@import url(test.css?foo=bar); +@import url(test.css?foo=bar#hash); +@import url(test.css?#hash); + +@import "test.css" supports(display: flex); +@import "test.css" supports(display: flex) screen and (orientation: landscape); +@import "test.css" supports(display: flex) screen and (orientation: landscape); + +@import " ./test.css "; +@import url(" ./test.css "); +@import url(./test.css ); + +@import "./my.scss"; + +@import url(" https://fonts.googleapis.com/css?family=Roboto "); +@import url("!!../../helpers/string-loader.js?esModule=false!"); +@import url(" !!../../helpers/string-loader.js?esModule=false!~package/tilde.css "); +@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D); + +@import url(package/first.css); +@import url(package/second.css); + +@import url("./test.css") supports(display: flex); +@import url("./test.css") supports(display: flex !important); +@import url("./test.css") supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer; +@import url("./test.css") layer(default); +@import url("./test.css") layer(default) supports(display: flex) + screen and (min-width: 400px); +@import url("./test.css") layer supports(display: flex) + screen and (min-width: 400px); +@import url("./test.css") layer supports(display: flex) + screen and (min-width: 400px); +@import url("./test.css") layer; +@import url("http://example.com/style.css") supports(display: flex) + screen and (min-width: 400px); +@import url("./test.css") layer(default) supports(display: flex) + screen and (min-width: 400px); +@import url("./test.css") screen and (min-width: 400px); +@import url("./test.css") layer(default) supports(display: flex) + screen and (min-width: 400px); +@import url("./test.css") layer(default) supports(display: flex) + screen and (min-width: 400px); +@import url("./test.css") /* Comment */ + layer(/* Comment */ /* Comment */ default) /* Comment */ + supports( + /* Comment */ /* Comment */ /* Comment */ display: flex /* Comment */ + ) /* Comment */ + screen /* Comment */ and /* Comment */ ( + /* Comment */ /* Comment */ /* Comment */ min-width: 400px /* Comment */ + ); +@import url(test.css) /* Comment */; +@import /* Comment */ url(test.css) /* Comment */; +@import url(test.css) /* Comment */ print and (orientation: landscape); +@import /* Comment */ url(test.css) /* Comment */ + print and (orientation: landscape); + +@import url("./deep-import-with-media.css") (prefers-color-scheme: dark); +@import url("./import-with-supports.css") supports(display: flex); +@import url("./import-with-supports.css") supports(((display: flex))); +@import url("./deep-import-with-supports.css") supports(display: flex); +@import url("./test.css") supports(display: grid); +@import url("./test.css") supports(display: grid); +@import url("./import-with-supports-and-media.css") supports(display: flex) + screen and (min-width: 400px); +@import url("./test.css") layer(framework); +@import url("./import-multiple-with-layer.css") layer(default); +@import url("./import-unnamed-layer.css") layer(base); +@import url("./import-with-layer-and-supports.css") layer(default) + supports(display: flex); + +@import url(bootstrap-base.css) layer(base); +@import url(base-headings.css) layer; +@import url("tabs.css") layer(framework.component); +@import url("override.css") layer; +@import url("fallback-layout.css") supports(not (display: flex)); +@import url("narrow.css") supports(display: flex) screen and (max-width: 400px); + +@import "test.css" supports(display: flex); +@import url("tabs.css") layer(framework.component); +``` + +# Lines exceeding max width of 80 characters +``` + 103: @import url("!!../../helpers/string-loader.js?esModule=false!~package/tilde.css"); + 121: @import url(" !!../../helpers/string-loader.js?esModule=false!~package/tilde.css "); + 122: @import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D); +``` diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/import.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/import.css.snap index 6d2bcf57e023..7d843c5975ff 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/atrule/import.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/atrule/import.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/atrule/import.css --- - # Input ```css @@ -93,126 +92,56 @@ $dir: 'fonts'; ```diff --- Prettier +++ Biome -@@ -1,16 +1,10 @@ - @import url("fineprint.css") print; - @import url("bluish.css") projection, tv; --@import "custom.css"; -+@import 'custom.css'; - @import url("chrome://communicator/skin/"); - @import "common.css" screen, projection; +@@ -6,12 +6,6 @@ @import "common.css" screen projection; --@import url("landscape.css") screen and (orientation: landscape); -- + @import url("landscape.css") screen and (orientation: landscape); + -@import (multiple) "foo.less"; - -/* This isn't valid CSS, SCSS or Less, but we should be lenient and make sure -/* that nothing is lost when printing. */ -@import "one" two "three"; -+@import url('landscape.css') screen and (orientation:landscape); - +- #main { @import "example"; -@@ -19,62 +13,61 @@ - @import "example"; } - #main { -- @import "example"; -+ @import "example" ; +@@ -32,17 +26,11 @@ } #main { -- @import "example"; -+ @import "example" ; - } - #main { -- @import "example"; -+ @import -+ "example"; - } - #main { -- @import "example"; -+ @import -+"example"; - } - #main { -- @import "example"; + @import "example"; -} -+ @import - +- -@import "test.less" { -} -@import "test.less" { - a: b; - c: d; -+"example"; } --@import url("foo"); + @import url("foo"); -$dir: "fonts"; -+@import url('foo'); +$dir: 'fonts' +; --@import url("foo.css"); --@import url("foo.css"); @import url("foo.css"); --@import url("foo.css"); --@import url("fineprint.css") print; --@import url("fineprint.css") print; --@import url("fineprint.css") print; -+@import url('foo.css'); -+@import url("foo.css"); -+@import url("foo.css"); -+@import url("fineprint.css")print; - @import url("fineprint.css") print; --@import url("bluish.css") projection, tv; --@import url("bluish.css") projection, tv; --@import url("bluish.css") projection, tv; -+@import url("fineprint.css") print; -+@import url("fineprint.css") -+ print; -+@import url("bluish.css") projection,tv; + @import url("foo.css"); +@@ -59,14 +47,9 @@ @import url("bluish.css") projection, tv; --@import url("bluish.css") projection, tv; --@import url("bluish.css") projection, tv; --@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") -+@import url("bluish.css") projection ,tv; -+@import url("bluish.css") projection , tv; -+@import url("bluish.css") projection , tv; -+@import url("bluish.css") - projection, - tv; + @import url("bluish.css") projection, tv; + @import url("very-very-very-very-very-very-very-very-very-very-long-name.css") +- projection, +- tv; -@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") - projection tv; --@import url("landscape.css") screen and (orientation: landscape); ++ projection, tv; ++@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection tv; + @import url("landscape.css") screen and (orientation: landscape); -@import "rounded-corners", "text-shadow"; -@import "rounded-corners", "text-shadow"; -$family: unquote("Droid+Sans"); -+@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection,tv; -+@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection tv; -+@import url('landscape.css') screen and (orientation:landscape); @import url("http://fonts.googleapis.com/css?family=#{$family}"); --@import url("foo.css"); --@import url("foo.css"); --@import url("foo.css"); --@import url("foo.css"); --@import url("foo bar baz.css"); -+@import url( "foo.css"); -+@import url("foo.css" ); -+@import url( "foo.css" ); -+@import url( "foo.css" ); - @import url("foo bar baz.css"); -+@import url( "foo bar baz.css" ); - @import url("foo bar baz.css"); --@import url("foo.css"); --@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600"; --@import url("foo.css,800"); -+@import url( -+"foo.css" -+); -+@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600'; -+@import url( -+"foo.css,800" -+); + @import url("foo.css"); + @import url("foo.css"); ``` # Output @@ -220,11 +149,11 @@ $dir: 'fonts'; ```css @import url("fineprint.css") print; @import url("bluish.css") projection, tv; -@import 'custom.css'; +@import "custom.css"; @import url("chrome://communicator/skin/"); @import "common.css" screen, projection; @import "common.css" screen projection; -@import url('landscape.css') screen and (orientation:landscape); +@import url("landscape.css") screen and (orientation: landscape); #main { @import "example"; @@ -233,64 +162,54 @@ $dir: 'fonts'; @import "example"; } #main { - @import "example" ; + @import "example"; } #main { - @import "example" ; + @import "example"; } #main { - @import - "example"; + @import "example"; } #main { - @import -"example"; + @import "example"; } #main { - @import - -"example"; + @import "example"; } -@import url('foo'); +@import url("foo"); $dir: 'fonts' ; @import url("foo.css"); -@import url('foo.css'); -@import url("foo.css"); -@import url("foo.css"); -@import url("fineprint.css")print; +@import url("foo.css"); +@import url("foo.css"); +@import url("foo.css"); +@import url("fineprint.css") print; +@import url("fineprint.css") print; +@import url("fineprint.css") print; @import url("fineprint.css") print; -@import url("fineprint.css") print; -@import url("fineprint.css") - print; -@import url("bluish.css") projection,tv; @import url("bluish.css") projection, tv; -@import url("bluish.css") projection ,tv; -@import url("bluish.css") projection , tv; -@import url("bluish.css") projection , tv; -@import url("bluish.css") - projection, - tv; -@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection,tv; +@import url("bluish.css") projection, tv; +@import url("bluish.css") projection, tv; +@import url("bluish.css") projection, tv; +@import url("bluish.css") projection, tv; +@import url("bluish.css") projection, tv; +@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") + projection, tv; @import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection tv; -@import url('landscape.css') screen and (orientation:landscape); +@import url("landscape.css") screen and (orientation: landscape); @import url("http://fonts.googleapis.com/css?family=#{$family}"); -@import url( "foo.css"); -@import url("foo.css" ); -@import url( "foo.css" ); -@import url( "foo.css" ); +@import url("foo.css"); +@import url("foo.css"); +@import url("foo.css"); +@import url("foo.css"); +@import url("foo bar baz.css"); @import url("foo bar baz.css"); -@import url( "foo bar baz.css" ); @import url("foo bar baz.css"); -@import url( -"foo.css" -); -@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600'; -@import url( -"foo.css,800" -); +@import url("foo.css"); +@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600"; +@import url("foo.css,800"); ``` # Errors @@ -396,8 +315,5 @@ import.css:62:91 parse ━━━━━━━━━━━━━━━━━━━ # Lines exceeding max width of 80 characters ``` - 56: @import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection,tv; - 57: @import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection tv; + 51: @import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection tv; ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/comments/at-rules.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/comments/at-rules.css.snap index 566c7939b65a..bdfae0d09c54 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/comments/at-rules.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/comments/at-rules.css.snap @@ -83,7 +83,7 @@ info: css/comments/at-rules.css ```diff --- Prettier +++ Biome -@@ -1,38 +1,27 @@ +@@ -1,38 +1,33 @@ @charset "utf-8"; /* comment 1 */ -@import /* comment 2 */ url("fineprint.css") /* comment 3 */ print @@ -93,18 +93,22 @@ info: css/comments/at-rules.css - /* comment 9 */ tv /* comment 10 */; -/* comment 11 */ -@import /* comment 12 */ /* comment 13 */ url("bluish.css") /* comment 14 */ -+@import /* comment 2 */ url("fineprint.css") /* comment 3 */ print /* comment 4 */; /* comment 5 */ -+@import /* comment 6 */ url("bluish.css") /* comment 7 */ projection /* comment 8 */, /* comment 9 */ tv /* comment 10 */; +- /* comment 15 */ projection /* comment 16 */, ++@import /* comment 2 */ url("fineprint.css") /* comment 3 */ ++ print /* comment 4 */; /* comment 5 */ ++@import /* comment 6 */ url("bluish.css") /* comment 7 */ ++ projection /* comment 8 */, /* comment 9 */ tv /* comment 10 */; +/* comment 11 */ @import /* comment 12 */ -+ /* comment 13 */ url("bluish.css") /* comment 14 */ - /* comment 15 */ projection /* comment 16 */, -- /* comment 17 */ tv /* comment 18 */; /* comment 19 */ -+ /* comment 17 */ tv /* comment 18 */; /* comment 19 */ ++ /* comment 13 */ url("bluish.css") /* comment 14 */ ++ /* comment 15 */ projection /* comment 16 */, + /* comment 17 */ tv /* comment 18 */; /* comment 19 */ /* comment 20 */ -@import /* comment 21 */ url("bluish.css") /* comment 22 */ projection - /* comment 23 */, - /* comment 24 */ tv /* comment 25 */; --@import /* comment 26 */ "custom.css" /* comment 27 */; /* comment 28 */ ++@import /* comment 21 */ url("bluish.css") /* comment 22 */ ++ projection /* comment 23 */, /* comment 24 */ tv /* comment 25 */; + @import /* comment 26 */ "custom.css" /* comment 27 */; /* comment 28 */ -@import /* comment 29 */ url("landscape.css") /* comment 30 */ screen - /* comment 31 */ and /* comment 32 */ - ( @@ -112,9 +116,10 @@ info: css/comments/at-rules.css - /* comment 36 */ - ) - /* comment 37 */; -+@import/* comment 21 */url("bluish.css")/* comment 22 */projection/* comment 23 */,/* comment 24 */tv/* comment 25 */; -+@import /* comment 26 */'custom.css'/* comment 27 */; /* comment 28 */ -+@import /* comment 29 */ url('landscape.css') /* comment 30 */ screen /* comment 31 */ and /* comment 32 */ (/* comment 33 */orientation/* comment 34 */:/* comment 35 */landscape/* comment 36 */)/* comment 37 */; ++@import /* comment 29 */ url("landscape.css") /* comment 30 */ ++ screen /* comment 31 */ and /* comment 32 */ ( ++ /* comment 33 */ /* comment 34 */ /* comment 35 */ orientation: landscape /* comment 36 */ ++ ) /* comment 37 */; @namespace /* comment 38 */ url(http://www.w3.org/1999/xhtml) /* comment 39 */; -@namespace /* comment 40 */ svg /* comment 41 */ url(http://www.w3.org/2000/svg) /* comment 42 */; @@ -135,7 +140,7 @@ info: css/comments/at-rules.css /* comment 51 */ nice-style: 4; /* comment 52 */ -@@ -40,12 +29,11 @@ +@@ -40,12 +35,11 @@ /* comment 54 */ } /* comment 55 */ @@ -151,7 +156,7 @@ info: css/comments/at-rules.css } @page /* comment 61 */ { -@@ -55,80 +43,79 @@ +@@ -55,80 +49,79 @@ @page /* comment 64 */ vertical /* comment 65 */ { } @@ -299,16 +304,22 @@ info: css/comments/at-rules.css ```css @charset "utf-8"; /* comment 1 */ -@import /* comment 2 */ url("fineprint.css") /* comment 3 */ print /* comment 4 */; /* comment 5 */ -@import /* comment 6 */ url("bluish.css") /* comment 7 */ projection /* comment 8 */, /* comment 9 */ tv /* comment 10 */; +@import /* comment 2 */ url("fineprint.css") /* comment 3 */ + print /* comment 4 */; /* comment 5 */ +@import /* comment 6 */ url("bluish.css") /* comment 7 */ + projection /* comment 8 */, /* comment 9 */ tv /* comment 10 */; /* comment 11 */ @import /* comment 12 */ - /* comment 13 */ url("bluish.css") /* comment 14 */ - /* comment 15 */ projection /* comment 16 */, - /* comment 17 */ tv /* comment 18 */; /* comment 19 */ + /* comment 13 */ url("bluish.css") /* comment 14 */ + /* comment 15 */ projection /* comment 16 */, + /* comment 17 */ tv /* comment 18 */; /* comment 19 */ /* comment 20 */ -@import/* comment 21 */url("bluish.css")/* comment 22 */projection/* comment 23 */,/* comment 24 */tv/* comment 25 */; -@import /* comment 26 */'custom.css'/* comment 27 */; /* comment 28 */ -@import /* comment 29 */ url('landscape.css') /* comment 30 */ screen /* comment 31 */ and /* comment 32 */ (/* comment 33 */orientation/* comment 34 */:/* comment 35 */landscape/* comment 36 */)/* comment 37 */; +@import /* comment 21 */ url("bluish.css") /* comment 22 */ + projection /* comment 23 */, /* comment 24 */ tv /* comment 25 */; +@import /* comment 26 */ "custom.css" /* comment 27 */; /* comment 28 */ +@import /* comment 29 */ url("landscape.css") /* comment 30 */ + screen /* comment 31 */ and /* comment 32 */ ( + /* comment 33 */ /* comment 34 */ /* comment 35 */ orientation: landscape /* comment 36 */ + ) /* comment 37 */; @namespace /* comment 38 */ url(http://www.w3.org/1999/xhtml) /* comment 39 */; @namespace /* comment 40 */ /* comment 41 */ svg url(http://www.w3.org/2000/svg) /* comment 42 */; @@ -504,29 +515,26 @@ at-rules.css:27:19 parse ━━━━━━━━━━━━━━━━━━ # Lines exceeding max width of 80 characters ``` - 3: @import /* comment 2 */ url("fineprint.css") /* comment 3 */ print /* comment 4 */; /* comment 5 */ - 4: @import /* comment 6 */ url("bluish.css") /* comment 7 */ projection /* comment 8 */, /* comment 9 */ tv /* comment 10 */; - 10: @import/* comment 21 */url("bluish.css")/* comment 22 */projection/* comment 23 */,/* comment 24 */tv/* comment 25 */; - 12: @import /* comment 29 */ url('landscape.css') /* comment 30 */ screen /* comment 31 */ and /* comment 32 */ (/* comment 33 */orientation/* comment 34 */:/* comment 35 */landscape/* comment 36 */)/* comment 37 */; - 15: @namespace /* comment 40 */ /* comment 41 */ svg url(http://www.w3.org/2000/svg) /* comment 42 */; - 51: @media /* comment 74 */ only /* comment 75 */ screen /* comment 76 */ and /* comment 77 */ ( - 52: /* comment 78 */ /* comment 79 */ /* comment 80 */ min-width: 320px /* comment 81 */ - 54: /* comment 84 */ /* comment 85 */ /* comment 86 */ max-width: 480px /* comment 87 */ - 56: /* comment 90 */ /* comment 91 */ /* comment 92 */ resolution: 150dpi /* comment 93 */ - 59: @media /* comment 95 */ only /* comment 96 */ screen /* comment 97 */ and /* comment 98 */ ( - 60: /* comment 99 */ /* comment 100 */ /* comment 101 */ min-width: 320px /* comment 102 */ - 62: /* comment 105 */ /* comment 106 */ /* comment 107 */ max-width: 480px /* comment 108 */ - 64: /* comment 111 */ /* comment 112 */ /* comment 113 */ resolution: 150dpi /* comment 114 */ - 69: /* comment 120 */ screen /* comment 121 */ /* comment 123 */ and /* comment 122 */ /* comment 124 */ ( - 75: ) /* comment 133 */ /* comment 135 */ and /* comment 134 */ /* comment 136 */ ( - 81: ) /* comment 145 */ /* comment 147 */ and /* comment 146 */ /* comment 148 */ ( - 91: /* comment 161 */ /* comment 162 */ /* comment 163 */ display: flex /* comment 164 */ - 95: /* comment 168 */ /* comment 169 */ /* comment 170 */ display: flex /* comment 171 */ - 99: /* comment 174 */ /* comment 175 */ /* comment 176 */ display: table-cell /* comment 177 */ - 102: /* comment 180 */ /* comment 181 */ /* comment 182 */ display: list-item /* comment 183 */ - 105: /* comment 186 */ /* comment 187 */ /* comment 188 */ display: run-in /* comment 189 */ - 109: /* comment 192 */ /* comment 193 */ /* comment 194 */ --foo: green /* comment 195 */ - 114: /* comment 199 */ /* comment 200 */ /* comment 201 */ display: flex /* comment 202 */ - 116: /* comment 204 */ @media /* comment 205 */ screen /* comment 206 */ and /* comment 207 */ ( - 117: /* comment 208 */ /* comment 209 */ /* comment 210 */ min-width: 900px /* comment 211 */ + 17: /* comment 33 */ /* comment 34 */ /* comment 35 */ orientation: landscape /* comment 36 */ + 21: @namespace /* comment 40 */ /* comment 41 */ svg url(http://www.w3.org/2000/svg) /* comment 42 */; + 57: @media /* comment 74 */ only /* comment 75 */ screen /* comment 76 */ and /* comment 77 */ ( + 58: /* comment 78 */ /* comment 79 */ /* comment 80 */ min-width: 320px /* comment 81 */ + 60: /* comment 84 */ /* comment 85 */ /* comment 86 */ max-width: 480px /* comment 87 */ + 62: /* comment 90 */ /* comment 91 */ /* comment 92 */ resolution: 150dpi /* comment 93 */ + 65: @media /* comment 95 */ only /* comment 96 */ screen /* comment 97 */ and /* comment 98 */ ( + 66: /* comment 99 */ /* comment 100 */ /* comment 101 */ min-width: 320px /* comment 102 */ + 68: /* comment 105 */ /* comment 106 */ /* comment 107 */ max-width: 480px /* comment 108 */ + 70: /* comment 111 */ /* comment 112 */ /* comment 113 */ resolution: 150dpi /* comment 114 */ + 75: /* comment 120 */ screen /* comment 121 */ /* comment 123 */ and /* comment 122 */ /* comment 124 */ ( + 81: ) /* comment 133 */ /* comment 135 */ and /* comment 134 */ /* comment 136 */ ( + 87: ) /* comment 145 */ /* comment 147 */ and /* comment 146 */ /* comment 148 */ ( + 97: /* comment 161 */ /* comment 162 */ /* comment 163 */ display: flex /* comment 164 */ + 101: /* comment 168 */ /* comment 169 */ /* comment 170 */ display: flex /* comment 171 */ + 105: /* comment 174 */ /* comment 175 */ /* comment 176 */ display: table-cell /* comment 177 */ + 108: /* comment 180 */ /* comment 181 */ /* comment 182 */ display: list-item /* comment 183 */ + 111: /* comment 186 */ /* comment 187 */ /* comment 188 */ display: run-in /* comment 189 */ + 115: /* comment 192 */ /* comment 193 */ /* comment 194 */ --foo: green /* comment 195 */ + 120: /* comment 199 */ /* comment 200 */ /* comment 201 */ display: flex /* comment 202 */ + 122: /* comment 204 */ @media /* comment 205 */ screen /* comment 206 */ and /* comment 207 */ ( + 123: /* comment 208 */ /* comment 209 */ /* comment 210 */ min-width: 900px /* comment 211 */ ``` diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/inline-url/inline_url.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/inline-url/inline_url.css.snap index f941a6823aec..39b826df7018 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/inline-url/inline_url.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/inline-url/inline_url.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/inline-url/inline_url.css --- - # Input ```css @@ -172,5 +171,3 @@ inline_url.css:29:19 parse ━━━━━━━━━━━━━━━━━ 17: background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%229%22%20height=%229%22%3E%3Cpath%20d=%22M0%203h3%22%20stroke=%22red%22/%3E%3C/svg%3E); 24: @import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap); ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/quotes/quotes.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/quotes/quotes.css.snap index e1c80bebecd1..b318999d35e4 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/quotes/quotes.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/quotes/quotes.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/quotes/quotes.css --- - # Input ```css @@ -115,21 +114,9 @@ one 'two' three {} @supports (content: one "two" three "four") { a[href="foo" y], -@@ -71,23 +71,33 @@ - } - } - --@import "file.css"; - @import "file.css"; -+@import 'file.css'; - - @import url("foo.css"); --@import url("foo.css"); -+@import url('foo.css'); - --@import "foo.css" screen and (orientation: landscape); +@@ -80,14 +80,24 @@ + @import "foo.css" screen and (orientation: landscape); @import "foo.css" screen and (orientation: landscape); -+@import 'foo.css' screen and (orientation: landscape); -@foo "one"; -@foo 'one'; @@ -241,13 +228,13 @@ one 'two' three {} } @import "file.css"; -@import 'file.css'; +@import "file.css"; @import url("foo.css"); -@import url('foo.css'); +@import url("foo.css"); @import "foo.css" screen and (orientation: landscape); -@import 'foo.css' screen and (orientation: landscape); +@import "foo.css" screen and (orientation: landscape); @ foo "one" @@ -813,5 +800,3 @@ quotes.css:91:11 parse ━━━━━━━━━━━━━━━━━━━ 3: /* Also, it has to be the very first thing in the file, but here are some more tests anyway: */ 4: @charset "UTF-8"; /* Single quotes are invalid here. Keep them since we don't know what the user is doing. */ ``` - -