Add an API to transform an inline style attribute

Author: devongovett

node/index.d.ts

@@ -1,16 +1,41 @@
 import type {Targets} from './targets';
 
 export interface TransformOptions {
+  /** The filename being transformed. Used for error messages and source maps. */
   filename: string,
+  /** The source code to transform. */
   code: Buffer,
-  minify: boolean,
-  source_map: boolean,
-  targets: Targets
+  /** Whether to enable minification. */
+  minify?: boolean,
+  /** Whether to output a source map. */
+  source_map?: boolean,
+  /** The browser targets for the generated code. */
+  targets?: Targets
 }
 
 export interface TransformResult {
+  /** The transformed code. */
   code: Buffer,
-  map: Buffer
+  /** The generated source map, if enabled. */
+  map: Buffer | void
 }
 
+/**
+ * Compiles a CSS file, including optionally minifying and lowering syntax to the given
+ * targets. A source map may also be generated, but this is not enabled by default.
+ */
 export declare function transform(options: TransformOptions): TransformResult;
+
+export interface TransformAttributeOptions {
+  /** The source code to transform. */
+  code: Buffer,
+  /** Whether to enable minification. */
+  minify?: boolean,
+  /** The browser targets for the generated code. */
+  targets?: Targets
+}
+
+/**
+ * Compiles a single CSS declaration list, such as an inline style attribute in HTML.
+ */
+export declare function transformStyleAttribute(options: TransformAttributeOptions): Buffer;

node/src/lib.rs

@@ -3,7 +3,7 @@
 static GLOBAL: jemallocator::Jemalloc = jemallocator::Jemalloc;
 
 use serde::{Serialize, Deserialize};
-use parcel_css::stylesheet::StyleSheet;
+use parcel_css::stylesheet::{StyleSheet, StyleAttribute};
 use parcel_css::targets::Browsers;
 
 // ---------------------------------------------
@@ -23,6 +23,15 @@ pub fn transform(config_val: JsValue) -> Result<JsValue, JsValue> {
   res.serialize(&serializer).map_err(JsValue::from)
 }
 
+#[cfg(target_arch = "wasm32")]
+#[wasm_bindgen(js_name = "transformStyleAttribute")]
+pub fn transform_style_attribute(config_val: JsValue) -> Result<Vec<u8>, JsValue> {
+  let config: AttrConfig = from_value(config_val).map_err(JsValue::from)?;
+  let code = unsafe { std::str::from_utf8_unchecked(&config.code) };
+  let res = compile_attr(code, &config)?;
+  Ok(res)
+}
+
 // ---------------------------------------------
 
 #[cfg(not(target_arch = "wasm32"))]
@@ -58,37 +67,29 @@ fn transform(ctx: CallContext) -> napi::Result<JsUnknown> {
 
   match res {
     Ok(res) => ctx.env.to_js_value(&res),
-    Err(err) => {
-      match &err {
-        CompileError::ParseError(e) => {
-          // Generate an error with location information.
-          let syntax_error = ctx.env.get_global()?
-            .get_named_property::<napi::JsFunction>("SyntaxError")?;
-          let reason = ctx.env.create_string_from_std(err.reason())?;
-          let line = ctx.env.create_int32((e.location.line + 1) as i32)?;
-          let col = ctx.env.create_int32(e.location.column as i32)?;
-          let mut obj = syntax_error.new(&[reason])?;
-          let filename = ctx.env.create_string_from_std(config.filename)?;
-          obj.set_named_property("fileName", filename)?;
-          let source = ctx.env.create_string(code)?;
-          obj.set_named_property("source", source)?;
-          let mut loc = ctx.env.create_object()?;
-          loc.set_named_property("line", line)?;
-          loc.set_named_property("column", col)?;
-          obj.set_named_property("loc", loc)?;
-          ctx.env.throw(obj)?;
-          Ok(ctx.env.get_undefined()?.into_unknown())
-        }
-        _ => Err(err.into())
-      }
-    }
+    Err(err) => err.throw(ctx, Some(config.filename), code)
+  }
+}
+
+#[cfg(not(target_arch = "wasm32"))]
+#[js_function(1)]
+fn transform_style_attribute(ctx: CallContext) -> napi::Result<JsUnknown> {
+  let opts = ctx.get::<JsObject>(0)?;
+  let config: AttrConfig = ctx.env.from_js_value(opts)?;
+  let code = unsafe { std::str::from_utf8_unchecked(&config.code) };
+  let res = compile_attr(code, &config);
+
+  match res {
+    Ok(res) => Ok(ctx.env.create_buffer_with_data(res)?.into_unknown()),
+    Err(err) => err.throw(ctx, None, code)
   }
 }
 
 #[cfg(not(target_arch = "wasm32"))]
 #[module_exports]
 fn init(mut exports: JsObject) -> napi::Result<()> {
   exports.create_named_method("transform", transform)?;
+  exports.create_named_method("transformStyleAttribute", transform_style_attribute)?;
 
   Ok(())
 }
@@ -138,6 +139,21 @@ fn compile<'i>(code: &'i str, config: &Config) -> Result<TransformResult, Compil
   })
 }
 
+#[derive(Serialize, Debug, Deserialize)]
+struct AttrConfig {
+  #[serde(with = "serde_bytes")]
+  pub code: Vec<u8>,
+  pub targets: Option<Browsers>,
+  pub minify: Option<bool>
+}
+
+fn compile_attr<'i>(code: &'i str, config: &AttrConfig) -> Result<Vec<u8>, CompileError<'i>> {
+  let mut attr = StyleAttribute::parse(&code)?;
+  attr.minify(config.targets); // TODO: should this be conditional?
+  let res = attr.to_css(config.minify.unwrap_or(false), config.targets)?;
+  Ok(res.into_bytes())
+}
+
 enum CompileError<'i> {
   ParseError(cssparser::ParseError<'i, ()>),
   PrinterError,
@@ -166,6 +182,34 @@ impl<'i> CompileError<'i> {
       _ => "Unknown error".into()
     }
   }
+
+  #[cfg(not(target_arch = "wasm32"))]
+  fn throw(self, ctx: CallContext, filename: Option<String>, code: &str) -> napi::Result<JsUnknown> {
+    match &self {
+      CompileError::ParseError(e) => {
+        // Generate an error with location information.
+        let syntax_error = ctx.env.get_global()?
+          .get_named_property::<napi::JsFunction>("SyntaxError")?;
+        let reason = ctx.env.create_string_from_std(self.reason())?;
+        let line = ctx.env.create_int32((e.location.line + 1) as i32)?;
+        let col = ctx.env.create_int32(e.location.column as i32)?;
+        let mut obj = syntax_error.new(&[reason])?;
+        if let Some(filename) = filename {
+          let filename = ctx.env.create_string_from_std(filename)?;
+          obj.set_named_property("fileName", filename)?;
+        }
+        let source = ctx.env.create_string(code)?;
+        obj.set_named_property("source", source)?;
+        let mut loc = ctx.env.create_object()?;
+        loc.set_named_property("line", line)?;
+        loc.set_named_property("column", col)?;
+        obj.set_named_property("loc", loc)?;
+        ctx.env.throw(obj)?;
+        Ok(ctx.env.get_undefined()?.into_unknown())
+      }
+      _ => Err(self.into())
+    }
+  }
 }
 
 impl<'i> From<cssparser::ParseError<'i, ()>> for CompileError<'i> {

src/declaration.rs

@@ -1,6 +1,6 @@
 use cssparser::*;
 use crate::properties::Property;
-use crate::traits::{PropertyHandler, ToCss};
+use crate::traits::{PropertyHandler, Parse, ToCss};
 use crate::printer::Printer;
 use crate::properties::{
   align::AlignHandler,
@@ -27,6 +27,22 @@ pub struct DeclarationBlock {
   pub declarations: Vec<Declaration>
 }
 
+impl Parse for DeclarationBlock {
+  fn parse<'i, 't>(input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i, ()>> {
+    let mut parser = DeclarationListParser::new(input, PropertyDeclarationParser);
+    let mut declarations = vec![];
+    while let Some(decl) = parser.next() {
+      if let Ok(decl) = decl {
+        declarations.push(decl);
+      }
+    }
+
+    Ok(DeclarationBlock {
+      declarations
+    })
+  }
+}
+
 impl ToCss for DeclarationBlock {
   fn to_css<W>(&self, dest: &mut Printer<W>) -> std::fmt::Result where W: std::fmt::Write {
     dest.whitespace()?;
@@ -65,6 +81,30 @@ impl DeclarationBlock {
   }
 }
 
+struct PropertyDeclarationParser;
+
+/// Parse a declaration within {} block: `color: blue`
+impl<'i> cssparser::DeclarationParser<'i> for PropertyDeclarationParser {
+  type Declaration = Declaration;
+  type Error = ();
+
+  fn parse_value<'t>(
+    &mut self,
+    name: CowRcStr<'i>,
+    input: &mut cssparser::Parser<'i, 't>,
+  ) -> Result<Self::Declaration, cssparser::ParseError<'i, Self::Error>> {
+    Declaration::parse(name, input)
+  }
+}
+
+/// Default methods reject all at rules.
+impl<'i> AtRuleParser<'i> for PropertyDeclarationParser {
+  type PreludeNoBlock = ();
+  type PreludeBlock = ();
+  type AtRule = Declaration;
+  type Error = ();
+}
+
 #[derive(Debug, Clone, PartialEq)]
 pub struct Declaration {
   pub property: Property,

src/lib.rs

@@ -41,6 +41,13 @@ mod tests {
     assert_eq!(res, expected);
   }
 
+  fn attr_test(source: &str, expected: &str, minify: bool) {
+    let mut attr = StyleAttribute::parse(source).unwrap();
+    attr.minify(None);
+    let res = attr.to_css(minify, None).unwrap();
+    assert_eq!(res, expected);
+  }
+
   #[test]
   pub fn test_border() {
     test(r#"
@@ -6101,4 +6108,10 @@ mod tests {
       }
     "#})
   }
+
+  #[test]
+  fn test_style_attr() {
+    attr_test("color: yellow; flex: 1 1 auto", "color: #ff0; flex: auto", false);
+    attr_test("color: yellow; flex: 1 1 auto", "color:#ff0;flex:auto", true);
+  }
 }

src/parser.rs

@@ -18,7 +18,7 @@ use crate::rules::{
   document::MozDocumentRule
 };
 use crate::values::ident::CustomIdent;
-use crate::declaration::{Declaration, DeclarationBlock};
+use crate::declaration::DeclarationBlock;
 use crate::vendor_prefix::VendorPrefix;
 
 /// The parser for the top-level rules in a stylesheet.
@@ -311,19 +311,9 @@ impl<'a, 'b, 'i> AtRuleParser<'i> for NestedRuleParser {
       //     ))))
       // },
       AtRulePrelude::CounterStyle(name) => {
-        let mut parser = DeclarationListParser::new(input, PropertyDeclarationParser);
-        let mut declarations = vec![];
-        while let Some(decl) = parser.next() {
-          if let Ok(decl) = decl {
-            declarations.push(decl);
-          }
-        }
-
         Ok(CssRule::CounterStyle(CounterStyleRule {
           name,
-          declarations: DeclarationBlock {
-            declarations
-          },
+          declarations: DeclarationBlock::parse(input)?,
           loc
         }))
       },
@@ -362,18 +352,9 @@ impl<'a, 'b, 'i> AtRuleParser<'i> for NestedRuleParser {
         }))
       },
       AtRulePrelude::Page(selectors) => {
-        let mut parser = DeclarationListParser::new(input, PropertyDeclarationParser);
-        let mut declarations = vec![];
-        while let Some(decl) = parser.next() {
-          if let Ok(decl) = decl {
-            declarations.push(decl);
-          }
-        }
         Ok(CssRule::Page(PageRule {
           selectors,
-          declarations: DeclarationBlock {
-            declarations
-          },
+          declarations: DeclarationBlock::parse(input)?,
           loc
         }))
       },
@@ -415,49 +396,15 @@ impl<'a, 'b, 'i> QualifiedRuleParser<'i> for NestedRuleParser {
     input: &mut Parser<'i, 't>,
   ) -> Result<CssRule, ParseError<'i, Self::Error>> {
     let loc = start.source_location();
-    let mut parser = DeclarationListParser::new(input, PropertyDeclarationParser);
-    let mut declarations = vec![];
-    while let Some(decl) = parser.next() {
-      if let Ok(decl) = decl {
-        declarations.push(decl);
-      }
-    }
-
     Ok(CssRule::Style(StyleRule {
       selectors,
       vendor_prefix: VendorPrefix::empty(),
-      declarations: DeclarationBlock {
-        declarations
-      },
+      declarations: DeclarationBlock::parse(input)?,
       loc
     }))
   }
 }
 
-pub struct PropertyDeclarationParser;
-
-/// Parse a declaration within {} block: `color: blue`
-impl<'i> cssparser::DeclarationParser<'i> for PropertyDeclarationParser {
-  type Declaration = Declaration;
-  type Error = ();
-
-  fn parse_value<'t>(
-    &mut self,
-    name: CowRcStr<'i>,
-    input: &mut cssparser::Parser<'i, 't>,
-  ) -> Result<Self::Declaration, cssparser::ParseError<'i, Self::Error>> {
-    Declaration::parse(name, input)
-  }
-}
-
-/// Default methods reject all at rules.
-impl<'i> AtRuleParser<'i> for PropertyDeclarationParser {
-  type PreludeNoBlock = ();
-  type PreludeBlock = ();
-  type AtRule = Declaration;
-  type Error = ();
-}
-
 fn starts_with_ignore_ascii_case(string: &str, prefix: &str) -> bool {
   string.len() >= prefix.len() && string.as_bytes()[0..prefix.len()].eq_ignore_ascii_case(prefix.as_bytes())
 }

src/rules/keyframes.rs

@@ -1,7 +1,6 @@
 use cssparser::*;
 use crate::values::percentage::Percentage;
 use crate::traits::{Parse, ToCss};
-use crate::parser::{PropertyDeclarationParser};
 use crate::declaration::{DeclarationBlock, DeclarationHandler};
 use crate::vendor_prefix::VendorPrefix;
 use crate::printer::Printer;
@@ -166,18 +165,9 @@ impl<'a, 'i> QualifiedRuleParser<'i> for KeyframeListParser {
     _: &ParserState,
     input: &mut Parser<'i, 't>,
   ) -> Result<Self::QualifiedRule, ParseError<'i, ()>> {
-    let mut parser = DeclarationListParser::new(input, PropertyDeclarationParser);
-    let mut declarations = vec![];
-    while let Some(decl) = parser.next() {
-      if let Ok(decl) = decl {
-        declarations.push(decl);
-      }
-    }
     Ok(Keyframe {
       selectors,
-      declarations: DeclarationBlock {
-        declarations
-      }
+      declarations: DeclarationBlock::parse(input)?
     })
   }
 }