feat: implementing the base @scope

c/lightningcss.h

@@ -23,6 +23,7 @@ typedef struct ParseOptions {
  const char *filename;
  bool nesting;
  bool custom_media;
+ bool scope;
  bool css_modules;
  const char *css_modules_pattern;
  bool css_modules_dashed_idents;

c/src/lib.rs

@@ -75,6 +75,7 @@ pub struct ParseOptions {
  filename: *const c_char,
  nesting: bool,
  custom_media: bool,
+ scope: bool,
  css_modules: bool,
  css_modules_pattern: *const c_char,
  css_modules_dashed_idents: bool,
@@ -263,6 +264,7 @@ pub extern "C" fn lightningcss_stylesheet_parse(
  },
  nesting: options.nesting,
  custom_media: options.custom_media,
+ scope: options.scope,
  css_modules: if options.css_modules {
  let pattern = if !options.css_modules_pattern.is_null() {
  let pattern =

node/src/lib.rs

@@ -577,6 +577,8 @@ struct Drafts {
  nesting: bool,
  #[serde(default)]
  custom_media: bool,
+ #[serde(default)]
+ scope: bool,
 }
 
 fn compile<'i>(
@@ -605,6 +607,7 @@ fn compile<'i>(
  filename: filename.clone(),
  nesting: matches!(drafts, Some(d) if d.nesting),
  custom_media: matches!(drafts, Some(d) if d.custom_media),
+ scope: matches!(drafts, Some(d) if d.scope),
  css_modules: if let Some(css_modules) = &config.css_modules {
  match css_modules {
  CssModulesOption::Bool(true) => Some(lightningcss::css_modules::Config::default()),
@@ -714,6 +717,7 @@ fn compile_bundle<
  let parser_options = ParserOptions {
  nesting: matches!(drafts, Some(d) if d.nesting),
  custom_media: matches!(drafts, Some(d) if d.custom_media),
+ scope: matches!(drafts, Some(d) if d.custom_media),
  css_modules: if let Some(css_modules) = &config.css_modules {
  match css_modules {
  CssModulesOption::Bool(true) => Some(lightningcss::css_modules::Config::default()),

node/src/transformer.rs

@@ -277,6 +277,7 @@ impl<'i> Visitor<'i, AtRule<'i>> for JsVisitor {
  CssRule::LayerStatement(..) => "layer-statement",
  CssRule::Property(..) => "property",
  CssRule::Container(..) => "container",
+ CssRule::Scope(..) => "scope",
  CssRule::MozDocument(..) => "moz-document",
  CssRule::Nesting(..) => "nesting",
  CssRule::Viewport(..) => "viewport",

src/lib.rs

@@ -208,6 +208,33 @@ mod tests {
  assert_eq!(res.code, expected);
  }
 
+ fn at_scope_minify_test(source: &str, expected: &str) {
+ let mut stylesheet = StyleSheet::parse(
+ &source,
+ ParserOptions {
+ scope: true,
+ ..ParserOptions::default()
+ },
+ )
+ .unwrap();
+ stylesheet
+ .minify(MinifyOptions {
+ targets: Some(Browsers {
+ chrome: Some(95 << 16),
+ ..Browsers::default()
+ }),
+ ..MinifyOptions::default()
+ })
+ .unwrap();
+ let res = stylesheet
+ .to_css(PrinterOptions {
+ minify: true,
+ ..PrinterOptions::default()
+ })
+ .unwrap();
+ assert_eq!(res.code, expected);
+ }
+
  fn error_test(source: &str, error: ParserError) {
  let res = StyleSheet::parse(&source, ParserOptions::default());
  match res {
@@ -21823,6 +21850,30 @@ mod tests {
  );
  }
 
+ #[test]
+ fn test_at_scope() {
+ at_scope_minify_test(
+ r#"
+ @scope {
+ .foo {
+ display: flex;
+ }
+ }
+ "#,
+ "@scope{.foo{display:flex}}",
+ );
+ at_scope_minify_test(
+ r#"
+ @scope {
+ :scope {
+ display: flex;
+ color: lightblue;
+ }
+ }"#,
+ "@scope{:scope{color:#add8e6;display:flex}}",
+ );
+ }
+
  #[test]
  fn test_custom_media() {
  custom_media_test(

src/main.rs

@@ -34,6 +34,9 @@ struct CliArgs {
  /// Enable parsing custom media queries
  #[clap(long, value_parser)]
  custom_media: bool,
+ /// Enable parsing @scope
+ #[clap(long, value_parser)]
+ scope: bool,
  /// Enable CSS modules in output.
  /// If no filename is provided, <output_file>.json will be used.
  /// If no --output-file is specified, code and exports will be printed to stdout as JSON.

src/parser.rs

@@ -7,7 +7,9 @@ use crate::rules::container::{ContainerName, ContainerRule};
 use crate::rules::font_palette_values::FontPaletteValuesRule;
 use crate::rules::layer::{LayerBlockRule, LayerStatementRule};
 use crate::rules::property::PropertyRule;
+use crate::rules::scope::ScopeRule;
 use crate::rules::viewport::ViewportRule;
+
 use crate::rules::{
  counter_style::CounterStyleRule,
  custom_media::CustomMediaRule,
@@ -45,6 +47,8 @@ pub struct ParserOptions<'o, 'i> {
  pub nesting: bool,
  /// Whether to enable the [custom media](https://drafts.csswg.org/mediaqueries-5/#custom-mq) draft syntax.
  pub custom_media: bool,
+ /// Whether to enable the [@scope](https://drafts.csswg.org/css-cascade-6/#scope-atrule) draft syntax.
+ pub scope: bool,
  /// Whether the enable [CSS modules](https://github.com/css-modules/css-modules).
  pub css_modules: Option<crate::css_modules::Config<'o>>,
  /// The source index to assign to all parsed rules. Impacts the source map when
@@ -137,6 +141,10 @@ impl<'a, 'o, 'b, 'i, T> TopLevelRuleParser<'a, 'o, 'i, T> {
 pub enum AtRulePrelude<'i, T> {
  /// A @font-face rule prelude.
  FontFace,
+
+ /// A @scope rule prelude.
+ Scope,
+
  /// A @font-feature-values rule prelude, with its FamilyName list.
  FontFeatureValues, //(Vec<FamilyName>),
  /// A @font-palette-values rule prelude, with its name.
@@ -423,6 +431,9 @@ impl<'a, 'o, 'b, 'i, T: crate::traits::AtRuleParser<'i>> AtRuleParser<'i> for Ne
  "font-face" => {
  Ok(AtRulePrelude::FontFace)
  },
+ "scope" if self.options.scope => {
+ Ok(AtRulePrelude::Scope)
+ },
  // "font-feature-values" => {
  // if !cfg!(feature = "gecko") {
  // // Support for this rule is not fully implemented in Servo yet.
@@ -563,6 +574,10 @@ impl<'a, 'o, 'b, 'i, T: crate::traits::AtRuleParser<'i>> AtRuleParser<'i> for Ne
  rules: self.parse_nested_rules(input)?,
  loc,
  })),
+ AtRulePrelude::Scope => Ok(CssRule::Scope(ScopeRule {
+ rules: self.parse_nested_rules(input)?,
+ loc,
+ })),
  AtRulePrelude::Viewport(vendor_prefix) => {
  Ok(CssRule::Viewport(ViewportRule {
  vendor_prefix,

src/rules/mod.rs

@@ -50,6 +50,7 @@ pub mod namespace;
 pub mod nesting;
 pub mod page;
 pub mod property;
+pub mod scope;
 pub mod style;
 pub mod supports;
 pub mod unknown;
@@ -88,6 +89,7 @@ use media::MediaRule;
 use namespace::NamespaceRule;
 use nesting::NestingRule;
 use page::PageRule;
+use scope::ScopeRule;
 use std::collections::{HashMap, HashSet};
 use style::StyleRule;
 use supports::SupportsRule;
@@ -163,6 +165,8 @@ pub enum CssRule<'i, R = DefaultAtRule> {
  Property(PropertyRule<'i>),
  /// A `@container` rule.
  Container(ContainerRule<'i, R>),
+ /// A `@scope` rule.
+ Scope(ScopeRule<'i, R>),
  /// A placeholder for a rule that was removed.
  Ignored,
  /// An unknown at-rule.
@@ -299,6 +303,10 @@ impl<'i, 'de: 'i, R: serde::Deserialize<'de>> serde::Deserialize<'de> for CssRul
  let rule = ContainerRule::deserialize(deserializer)?;
  Ok(CssRule::Container(rule))
  }
+ "scope" => {
+ let rule = ScopeRule::deserialize(deserializer)?;
+ Ok(CssRule::Scope(rule))
+ }
  "ignored" => Ok(CssRule::Ignored),
  "unknown" => {
  let rule = UnknownAtRule::deserialize(deserializer)?;
@@ -337,6 +345,7 @@ impl<'a, 'i, T: ToCss> ToCss for CssRule<'i, T> {
  CssRule::LayerBlock(layer) => layer.to_css(dest),
  CssRule::Property(property) => property.to_css(dest),
  CssRule::Container(container) => container.to_css(dest),
+ CssRule::Scope(scope) => scope.to_css(dest),
  CssRule::Unknown(unknown) => unknown.to_css(dest),
  CssRule::Custom(rule) => rule.to_css(dest).map_err(|_| PrinterError {
  kind: PrinterErrorKind::FmtError,
@@ -641,6 +650,7 @@ impl<'i, T> CssRuleList<'i, T> {
  continue;
  }
  }
+ CssRule::Scope(scope) => scope.minify(context)?,
  CssRule::Nesting(nesting) => {
  if nesting.minify(context, parent_is_unused)? {
  continue;

src/rules/scope.rs

@@ -0,0 +1,54 @@
+//! The `@scope` rule.
+
+use super::Location;
+use super::{CssRuleList, MinifyContext};
+use crate::error::{MinifyError, PrinterError};
+use crate::parser::DefaultAtRule;
+use crate::printer::Printer;
+use crate::traits::ToCss;
+#[cfg(feature = "visitor")]
+use crate::visitor::Visit;
+
+/// A [@scope](https://drafts.csswg.org/css-cascade-6/#scope-atrule) rule.
+///
+/// @scope (<scope-start>) [to (<scope-end>)]? {
+/// <stylesheet>
+/// }
+#[derive(Debug, PartialEq, Clone)]
+#[cfg_attr(feature = "visitor", derive(Visit))]
+#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
+#[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
+pub struct ScopeRule<'i, R = DefaultAtRule> {
+ // TODO: support (<scope-start>) [to (<scope-end>)]?
+ /// Nested rules within the `@scope` rule.
+ #[cfg_attr(feature = "serde", serde(borrow))]
+ pub rules: CssRuleList<'i, R>,
+ /// The location of the rule in the source file.
+ #[cfg_attr(feature = "visitor", skip_visit)]
+ pub loc: Location,
+}
+
+impl<'i, T> ScopeRule<'i, T> {
+ pub(crate) fn minify(&mut self, context: &mut MinifyContext<'_, 'i>) -> Result<(), MinifyError> {
+ self.rules.minify(context, false)
+ }
+}
+
+impl<'i, T: ToCss> ToCss for ScopeRule<'i, T> {
+ fn to_css<W>(&self, dest: &mut Printer<W>) -> Result<(), PrinterError>
+ where
+ W: std::fmt::Write,
+ {
+ #[cfg(feature = "sourcemap")]
+ dest.add_mapping(self.loc);
+ dest.write_str("@scope")?;
+ dest.whitespace()?;
+ dest.write_char('{')?;
+ dest.indent();
+ dest.newline()?;
+ self.rules.to_css(dest)?;
+ dest.dedent();
+ dest.newline()?;
+ dest.write_char('}')
+ }
+}

website/pages/docs.md

@@ -51,7 +51,8 @@ You can also configure Lightning CSS in the `package.json` in the root of your p
  "cssModules": true,
  "drafts": {
  "nesting": true,
- "customMedia": true
+ "customMedia": true,
+ "scope": true,
  },
  "pseudoClasses": {
  "focusVisible": "focus-ring"

website/playground/index.html

@@ -168,6 +168,7 @@ <h3>Options</h3>
  <h3>Draft syntax</h3>
  <label><input id="nesting" type="checkbox" checked> Nesting</label>
  <label><input id="customMedia" type="checkbox" checked> Custom media queries</label>
+ <label><input id="scope" type="checkbox" checked> @scope</label>
  <h3>Targets</h3>
  <div class="targets">
  <label><span>Chrome: </span><input id="chrome" type="number" value="95"></label>

website/playground/playground.js

@@ -108,6 +108,10 @@ function reflectPlaygroundState(playgroundState) {
  customMedia.checked = playgroundState.customMedia;
  }
 
+ if (typeof playgroundState.scope !== 'undefined') {
+ scope.checked = playgroundState.scope;
+ }
+
  if (typeof playgroundState.visitorEnabled !== 'undefined') {
  visitorEnabled.checked = playgroundState.visitorEnabled;
  }
@@ -134,6 +138,7 @@ function savePlaygroundState() {
  minify: minify.checked,
  nesting: nesting.checked,
  customMedia: customMedia.checked,
+ scope: scope.checked,
  cssModules: cssModules.checked,
  analyzeDependencies: analyzeDependencies.checked,
  targets: getTargets(),
@@ -182,7 +187,8 @@ function update() {
  targets: Object.keys(targets).length === 0 ? null : targets,
  drafts: {
  nesting: nesting.checked,
- customMedia: customMedia.checked
+ customMedia: customMedia.checked,
+ scope: scope.checked,
  },
  cssModules: cssModules.checked,
  analyzeDependencies: analyzeDependencies.checked,