parcel-bundler · devongovett · Dec 26, 2021 · Dec 20, 2021 · Dec 20, 2021 · Dec 21, 2021
diff --git a/build-prefixes.js b/build-prefixes.js
@@ -155,7 +155,8 @@ let cssFeatures = [
   'css-autofill',
   'css-namespaces',
   'shadowdomv1',
-  'css-rrggbbaa'
+  'css-rrggbbaa',
+  'css-nesting'
 ];
 
 let compat = new Map();

diff --git a/node/index.d.ts b/node/index.d.ts
@@ -10,7 +10,14 @@ export interface TransformOptions {
   /** Whether to output a source map. */
   source_map?: boolean,
   /** The browser targets for the generated code. */
-  targets?: Targets
+  targets?: Targets,
+  /** Whether to enable various draft syntax. */
+  drafts?: Drafts
+}
+
+export interface Drafts {
+  /** Whether to enable CSS nesting. */
+  nesting?: boolean
 }
 
 export interface TransformResult {

diff --git a/node/src/lib.rs b/node/src/lib.rs
@@ -3,7 +3,7 @@
 static GLOBAL: jemallocator::Jemalloc = jemallocator::Jemalloc;
 
 use serde::{Serialize, Deserialize};
-use parcel_css::stylesheet::{StyleSheet, StyleAttribute};
+use parcel_css::stylesheet::{StyleSheet, StyleAttribute, ParserOptions};
 use parcel_css::targets::Browsers;
 
 // ---------------------------------------------
@@ -103,11 +103,23 @@ struct Config {
   pub code: Vec<u8>,
   pub targets: Option<Browsers>,
   pub minify: Option<bool>,
-  pub source_map: Option<bool>
+  pub source_map: Option<bool>,
+  pub drafts: Option<Drafts>
+}
+
+#[derive(Serialize, Debug, Deserialize, Default)]
+struct Drafts {
+  nesting: bool
 }
 
 fn compile<'i>(code: &'i str, config: &Config) -> Result<TransformResult, CompileError<'i>> {
-  let mut stylesheet = StyleSheet::parse(config.filename.clone(), &code)?;
+  let options = config.drafts.as_ref();
+  let mut stylesheet = StyleSheet::parse(config.filename.clone(), &code, ParserOptions {
+    nesting: match options {
+      Some(o) => o.nesting,
+      None => false
+    }
+  })?;
   stylesheet.minify(config.targets); // TODO: should this be conditional?
   let (res, source_map) = stylesheet.to_css(
     config.minify.unwrap_or(false),

diff --git a/playground/index.html b/playground/index.html
@@ -6,7 +6,9 @@
       html, body {
         margin: 0;
         height: 100%;
-        box-sizing: border-box
+        box-sizing: border-box;
+        font-family: -apple-system, system-ui;
+        color-scheme: dark light;
       }
 
       body {
@@ -39,13 +41,25 @@
         flex: 1;
         font: 14px monospace;
       }
+
+      h3 {
+        margin-bottom: 4px;
+      }
+
+      h3:first-child {
+        margin-top: 0;
+      }
     </style>
   </head>
   <body>
     <h1>Parcel CSS Playground</h1>
     <main>
       <div>
+        <h3>Options</h3>
         <label><input id="minify" type="checkbox" checked> Minify</label>
+        <h3>Draft syntax</h3>
+        <label><input id="nesting" type="checkbox" checked> Nesting</label>
+        <h3>Targets</h3>
         <div class="targets">
           <label><span>Chrome: </span><input id="chrome" type="number" value="95"></label>
           <label><span>Firefox: </span><input id="firefox" type="number"></label>
@@ -56,7 +70,6 @@ <h1>Parcel CSS Playground</h1>
           <label><span>iOS: </span><input id="ios_saf" type="number"></label>
           <label><span>Android: </span><input id="android" type="number"></label>
           <label><span>Samsung: </span><input id="samsung" type="number"></label>
-
         </div>
       </div>
       <textarea id="source">
@@ -70,6 +83,10 @@ <h1>Parcel CSS Playground</h1>
   -webkit-transition: background 200ms;
   -moz-transition: background 200ms;
   transition: background 200ms;
+
+  &.bar {
+    color: green;
+  }
 }</textarea>
       <textarea id="compiled"></textarea>
     </main>

diff --git a/playground/playground.js b/playground/playground.js
@@ -11,21 +11,10 @@ function loadPlaygroundState() {
     reflectPlaygroundState(playgroundState);
   } catch {
     const initialPlaygroundState = {
-      minify: true,
-      targets: {
-        chrome: 95 << 16,
-      },
-      source: `.foo {
-  background: yellow;
-
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-
-  -webkit-transition: background 200ms;
-  -moz-transition: background 200ms;
-  transition: background 200ms;
-}`,
+      minify: minify.checked,
+      nesting: nesting.checked,
+      targets: getTargets(),
+      source: source.value,
     };
 
     reflectPlaygroundState(initialPlaygroundState);
@@ -37,17 +26,15 @@ function reflectPlaygroundState(playgroundState) {
     minify.checked = playgroundState.minify;
   }
 
+  if (typeof playgroundState.nesting !== 'undefined') {
+    nesting.checked = playgroundState.nesting;
+  }
+
   if (playgroundState.targets) {
     const {targets} = playgroundState;
-    for (const target in targets) {
-      const value = targets[target];
-      if (value) {
-        for (const input of Array.from(inputs)) {
-          if (input.id === target) {
-            input.value = value >> 16;
-          }
-        }
-      }
+    for (let input of inputs) {
+      let value = targets[input.id];
+      input.value = value == null ? '' : value >> 16;
     }
   }
 
@@ -59,6 +46,7 @@ function reflectPlaygroundState(playgroundState) {
 function savePlaygroundState() {
   const playgroundState = {
     minify: minify.checked,
+    nesting: nesting.checked,
     targets: getTargets(),
     source: source.value,
   };
@@ -98,6 +86,9 @@ async function update() {
     code: enc.encode(source.value),
     minify: minify.checked,
     targets: Object.keys(targets).length === 0 ? null : targets,
+    drafts: {
+      nesting: nesting.checked
+    }
   });
 
   compiled.value = dec.decode(res.code);

diff --git a/selectors/builder.rs b/selectors/builder.rs
@@ -346,6 +346,9 @@ where
             Component::Namespace(..) => {
                 // Does not affect specificity
             },
+            Component::Nesting => {
+                // TODO
+            }
         }
     }
 

diff --git a/selectors/matching.rs b/selectors/matching.rs
@@ -858,6 +858,7 @@ where
             }
             true
         }),
+        Component::Nesting => unreachable!()
     }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -346,6 +346,9 @@ where @@
                 Component::Namespace(..) => {
                     // Does not affect specificity
                 },
+                Component::Nesting => {
+                    // TODO
+                }
             }
         }
@@ Expand Down @@