Update cssparser to the latest version, relax nesting rules and enable by default

Closes parcel-bundler#576

Author: devongovett

Cargo.lock

@@ -46,7 +46,8 @@ substitute_variables = ["visitor", "into_owned"]
 
 [dependencies]
 serde = { version = "1.0.123", features = ["derive"], optional = true }
-cssparser = "0.29.1"
+cssparser = "0.33.0"
+cssparser-color = "0.1.0"
 parcel_selectors = { version = "0.26.1", path = "./selectors" }
 itertools = "0.10.1"
 smallvec = { version = "1.7.0", features = ["union"] }

Cargo.toml

@@ -256,7 +256,6 @@ pub extern "C" fn lightningcss_stylesheet_parse(
   let code = unsafe { std::str::from_utf8_unchecked(slice) };
   let warnings = Arc::new(RwLock::new(Vec::new()));
   let mut flags = ParserFlags::empty();
-  flags.set(ParserFlags::NESTING, options.nesting);
   flags.set(ParserFlags::CUSTOM_MEDIA, options.custom_media);
   let opts = ParserOptions {
     filename: if options.filename.is_null() {

c/src/lib.rs

@@ -8,10 +8,13 @@ use lightningcss::{
   properties::custom::{Token, TokenOrValue},
   rules::{style::StyleRule, CssRule, CssRuleList, Location},
   selector::{Component, Selector},
-  stylesheet::{ParserFlags, ParserOptions, PrinterOptions, StyleSheet},
+  stylesheet::{ParserOptions, PrinterOptions, StyleSheet},
   targets::Browsers,
   traits::{AtRuleParser, ToCss},
-  values::{color::CssColor, length::LengthValue},
+  values::{
+    color::{CssColor, RGBA},
+    length::LengthValue,
+  },
   vendor_prefix::VendorPrefix,
   visit_types,
   visitor::{Visit, VisitTypes, Visitor},
@@ -22,7 +25,6 @@ fn main() {
   let source = std::fs::read_to_string(&args[1]).unwrap();
   let opts = ParserOptions {
     filename: args[1].clone(),
-    flags: ParserFlags::NESTING,
     ..Default::default()
   };
 
@@ -266,8 +268,8 @@ impl<'a, 'i> Visitor<'i, AtRule> for ApplyVisitor<'a, 'i> {
     match token {
       TokenOrValue::Function(f) if f.name == "theme" => match f.arguments.0.first() {
         Some(TokenOrValue::Token(Token::String(s))) => match s.as_ref() {
-          "blue-500" => *token = TokenOrValue::Color(CssColor::RGBA(RGBA::new(0, 0, 255, 255))),
-          "red-500" => *token = TokenOrValue::Color(CssColor::RGBA(RGBA::new(255, 0, 0, 255))),
+          "blue-500" => *token = TokenOrValue::Color(CssColor::RGBA(RGBA::new(0, 0, 255, 1.0))),
+          "red-500" => *token = TokenOrValue::Color(CssColor::RGBA(RGBA::new(255, 0, 0, 1.0))),
           _ => {}
         },
         _ => {}

examples/custom_at_rule.rs

@@ -11,7 +11,7 @@ crate-type = ["cdylib"]
 [dependencies]
 serde = { version = "1.0.123", features = ["derive"] }
 serde_bytes = "0.11.5"
-cssparser = "0.29.1"
+cssparser = "0.33.0"
 lightningcss = { path = "../", features = ["nodejs", "serde", "visitor"] }
 parcel_sourcemap = { version = "2.1.1", features = ["json"] }
 serde-detach = "0.0.1"

node/Cargo.toml

@@ -705,8 +705,6 @@ impl<'a> Into<PseudoClasses<'a>> for &'a OwnedPseudoClasses {
 #[derive(Serialize, Debug, Deserialize, Default)]
 #[serde(rename_all = "camelCase")]
 struct Drafts {
-  #[serde(default)]
-  nesting: bool,
   #[serde(default)]
   custom_media: bool,
 }
@@ -740,7 +738,6 @@ fn compile<'i>(
 
   let res = {
     let mut flags = ParserFlags::empty();
-    flags.set(ParserFlags::NESTING, matches!(drafts, Some(d) if d.nesting));
     flags.set(ParserFlags::CUSTOM_MEDIA, matches!(drafts, Some(d) if d.custom_media));
     flags.set(
       ParserFlags::DEEP_SELECTOR_COMBINATOR,
@@ -867,7 +864,6 @@ fn compile_bundle<
     let drafts = config.drafts.as_ref();
     let non_standard = config.non_standard.as_ref();
     let mut flags = ParserFlags::empty();
-    flags.set(ParserFlags::NESTING, matches!(drafts, Some(d) if d.nesting));
     flags.set(ParserFlags::CUSTOM_MEDIA, matches!(drafts, Some(d) if d.custom_media));
     flags.set(
       ParserFlags::DEEP_SELECTOR_COMBINATOR,

node/src/lib.rs

@@ -88,7 +88,6 @@ test('mixin', () => {
         @apply color;
       }
     `),
-    drafts: { nesting: true },
     targets: { chrome: 100 << 16 },
     customAtRules: {
       mixin: {
@@ -171,9 +170,6 @@ test('style block', () => {
         }
       }
     `),
-    drafts: {
-      nesting: true
-    },
     targets: {
       chrome: 105 << 16
     },
@@ -217,9 +213,6 @@ test('style block top level', () => {
         }
       }
     `),
-    drafts: {
-      nesting: true
-    },
     customAtRules: {
       test: {
         body: 'style-block'
@@ -289,7 +282,6 @@ test('bundler', () => {
   let res = bundle({
     filename: 'tests/testdata/apply.css',
     minify: true,
-    drafts: { nesting: true },
     targets: { chrome: 100 << 16 },
     customAtRules: {
       mixin: {

node/test/customAtRules.mjs

@@ -30,9 +30,6 @@ test('can enable features without targets', () => {
     filename: 'test.css',
     code: Buffer.from('.foo { .bar { color: red }}'),
     minify: true,
-    drafts: {
-      nesting: true
-    },
     include: Features.Nesting
   });
 

node/test/transform.test.mjs

@@ -325,9 +325,6 @@ test('apply', () => {
   let res = transform({
     filename: 'test.css',
     minify: true,
-    drafts: {
-      nesting: true
-    },
     code: Buffer.from(`
       --toolbar-theme {
         color: white;

node/test/visitor.test.mjs

@@ -20,7 +20,7 @@ jsonschema = ["serde", "schemars"]
 
 [dependencies]
 bitflags = "2.2.1"
-cssparser = "0.29"
+cssparser = "0.33.0"
 fxhash = "0.2"
 log = "0.4"
 phf = "0.10"