Add option to replace pseudo classes with class names for polyfills

Author: devongovett

node/index.d.ts

@@ -21,14 +21,27 @@ export interface TransformOptions {
    * are replaced with hashed placeholders that can be replaced with the final
    * urls later (after bundling). Dependencies are returned as part of the result.
    */
-  analyzeDependencies?: boolean
+  analyzeDependencies?: boolean,
+  /** 
+   * Replaces user action pseudo classes with class names that can be applied from JavaScript.
+   * This is useful for polyfills, for example.
+   */
+  pseudoClasses?: PseudoClasses
 }
 
 export interface Drafts {
   /** Whether to enable CSS nesting. */
   nesting?: boolean
 }
 
+export interface PseudoClasses {
+  hover?: string,
+  active?: string,
+  focus?: string,
+  focusVisible?: string,
+  focusWithin?: string
+}
+
 export interface TransformResult {
   /** The transformed code. */
   code: Buffer,

node/src/lib.rs

@@ -3,7 +3,7 @@
 static GLOBAL: jemallocator::Jemalloc = jemallocator::Jemalloc;
 
 use serde::{Serialize, Deserialize};
-use parcel_css::stylesheet::{StyleSheet, StyleAttribute, ParserOptions, PrinterOptions};
+use parcel_css::stylesheet::{StyleSheet, StyleAttribute, ParserOptions, PrinterOptions, PseudoClasses};
 use parcel_css::targets::Browsers;
 use parcel_css::css_modules::CssModuleExports;
 use parcel_css::dependencies::Dependency;
@@ -102,7 +102,7 @@ fn init(mut exports: JsObject) -> napi::Result<()> {
 
 // ---------------------------------------------
 
-#[derive(Serialize, Debug, Deserialize)]
+#[derive(Debug, Deserialize)]
 #[serde(rename_all = "camelCase")]
 struct Config {
   pub filename: String,
@@ -113,7 +113,30 @@ struct Config {
   pub source_map: Option<bool>,
   pub drafts: Option<Drafts>,
   pub css_modules: Option<bool>,
-  pub analyze_dependencies: Option<bool>
+  pub analyze_dependencies: Option<bool>,
+  pub pseudo_classes: Option<OwnedPseudoClasses>
+}
+
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct OwnedPseudoClasses {
+  pub hover: Option<String>,
+  pub active: Option<String>,
+  pub focus: Option<String>,
+  pub focus_visible: Option<String>,
+  pub focus_within: Option<String>
+}
+
+impl<'a> Into<PseudoClasses<'a>> for &'a OwnedPseudoClasses {
+  fn into(self) -> PseudoClasses<'a> {
+    PseudoClasses {
+      hover: self.hover.as_deref(),
+      active: self.active.as_deref(),
+      focus: self.focus.as_deref(),
+      focus_visible: self.focus_visible.as_deref(),
+      focus_within: self.focus_within.as_deref()
+    }
+  }
 }
 
 #[derive(Serialize, Debug, Deserialize, Default)]
@@ -135,7 +158,8 @@ fn compile<'i>(code: &'i str, config: &Config) -> Result<TransformResult, Compil
     minify: config.minify.unwrap_or(false),
     source_map: config.source_map.unwrap_or(false),
     targets: config.targets,
-    analyze_dependencies: config.analyze_dependencies.unwrap_or(false)
+    analyze_dependencies: config.analyze_dependencies.unwrap_or(false),
+    pseudo_classes: config.pseudo_classes.as_ref().map(|p| p.into())
   })?;
 
   let map = if let Some(mut source_map) = res.source_map {
@@ -189,7 +213,8 @@ fn compile_attr<'i>(code: &'i str, config: &AttrConfig) -> Result<AttrResult, Co
     minify: config.minify.unwrap_or(false),
     source_map: false,
     targets: config.targets,
-    analyze_dependencies: config.analyze_dependencies.unwrap_or(false)
+    analyze_dependencies: config.analyze_dependencies.unwrap_or(false),
+    pseudo_classes: None
   })?;
   Ok(AttrResult {
     code: res.code.into_bytes(),

src/lib.rs

@@ -7834,4 +7834,69 @@ mod tests {
       "foo" => "foo_EgL3uq"
     });
   }
+
+  #[test]
+  fn test_pseudo_replacement() {
+    let source = r#"
+      .foo:hover {
+        color: red;
+      }
+
+      .foo:active {
+        color: yellow;
+      }
+
+      .foo:focus-visible {
+        color: purple;
+      }
+    "#;
+
+    let expected = indoc! { r#"
+      .foo.is-hovered {
+        color: red;
+      }
+
+      .foo.is-active {
+        color: #ff0;
+      }
+
+      .foo.focus-visible {
+        color: purple;
+      }
+    "#};
+
+    let stylesheet = StyleSheet::parse("test.css".into(), source, ParserOptions::default()).unwrap();
+    let res = stylesheet.to_css(PrinterOptions {
+      pseudo_classes: Some(PseudoClasses {
+        hover: Some("is-hovered"),
+        active: Some("is-active"),
+        focus_visible: Some("focus-visible"),
+        ..PseudoClasses::default()
+      }),
+      ..PrinterOptions::default()
+    }).unwrap();
+    assert_eq!(res.code, expected);
+
+    let source = r#"
+      .foo:hover {
+        color: red;
+      }
+    "#;
+
+    let expected = indoc! { r#"
+      .foo_EgL3uq.is-hovered_EgL3uq {
+        color: red;
+      }
+    "#};
+
+    let stylesheet = StyleSheet::parse("test.css".into(), source, ParserOptions { css_modules: true, ..ParserOptions::default() }).unwrap();
+    let res = stylesheet.to_css(PrinterOptions {
+      pseudo_classes: Some(PseudoClasses {
+        hover: Some("is-hovered"),
+        ..PseudoClasses::default()
+      }),
+      ..PrinterOptions::default()
+    }).unwrap();
+    assert_eq!(res.code, expected);
+  }
 }

src/printer.rs

@@ -6,6 +6,15 @@ use crate::targets::Browsers;
 use crate::css_modules::CssModule;
 use crate::dependencies::Dependency;
 
+#[derive(Default, Debug)]
+pub struct PseudoClasses<'a> {
+  pub hover: Option<&'a str>,
+  pub active: Option<&'a str>,
+  pub focus: Option<&'a str>,
+  pub focus_visible: Option<&'a str>,
+  pub focus_within: Option<&'a str>
+}
+
 pub(crate) struct Printer<'a, W> {
   pub filename: &'a str,
   dest: &'a mut W,
@@ -20,7 +29,8 @@ pub(crate) struct Printer<'a, W> {
   pub vendor_prefix: VendorPrefix,
   pub in_calc: bool,
   pub css_module: Option<CssModule<'a>>,
-  pub dependencies: Option<&'a mut Vec<Dependency>>
+  pub dependencies: Option<&'a mut Vec<Dependency>>,
+  pub pseudo_classes: Option<PseudoClasses<'a>>
 }
 
 impl<'a, W: Write + Sized> Printer<'a, W> {
@@ -43,7 +53,8 @@ impl<'a, W: Write + Sized> Printer<'a, W> {
       vendor_prefix: VendorPrefix::empty(),
       in_calc: false,
       css_module: None,
-      dependencies: None
+      dependencies: None,
+      pseudo_classes: None
     }
   }
 

src/selector.rs

@@ -356,13 +356,30 @@ impl ToCssWithContext for PseudoClass {
         }};
       }
 
+      macro_rules! pseudo {
+        ($key: ident, $s: literal) => {{
+          let class = if let Some(pseudo_classes) = &dest.pseudo_classes {
+            pseudo_classes.$key
+          } else {
+            None
+          };
+
+          if let Some(class) = class {
+            dest.write_char('.')?;
+            dest.write_ident(class)
+          } else {
+            dest.write_str($s)
+          }
+        }};
+      }
+
       match &self {
         // https://drafts.csswg.org/selectors-4/#useraction-pseudos
-        Hover => dest.write_str(":hover"),
-        Active => dest.write_str(":active"),
-        Focus => dest.write_str(":focus"),
-        FocusVisible => dest.write_str(":focus-visible"),
-        FocusWithin => dest.write_str(":focus-within"),
+        Hover => pseudo!(hover, ":hover"),
+        Active => pseudo!(active, ":active"),
+        Focus => pseudo!(focus, ":focus"),
+        FocusVisible => pseudo!(focus_visible, ":focus-visible"),
+        FocusWithin => pseudo!(focus_within, ":focus-within"),
 
         // https://drafts.csswg.org/selectors-4/#time-pseudos
         Current => dest.write_str(":current"),

src/stylesheet.rs

@@ -11,6 +11,7 @@ use std::collections::HashMap;
 use crate::dependencies::Dependency;
 
 pub use crate::parser::ParserOptions;
+pub use crate::printer::PseudoClasses;
 
 pub struct StyleSheet {
   pub filename: String,
@@ -19,11 +20,12 @@ pub struct StyleSheet {
 }
 
 #[derive(Default)]
-pub struct PrinterOptions {
+pub struct PrinterOptions<'a> {
   pub minify: bool,
   pub source_map: bool,
   pub targets: Option<Browsers>,
-  pub analyze_dependencies: bool
+  pub analyze_dependencies: bool,
+  pub pseudo_classes: Option<PseudoClasses<'a>>
 }
 
 pub struct ToCssResult {
@@ -82,6 +84,7 @@ impl StyleSheet {
     };
 
     printer.dependencies = dependencies.as_mut();
+    printer.pseudo_classes = options.pseudo_classes;
 
     if self.options.css_modules {
       let h = hash(&self.filename);