inline-scss MVP

This is the minimal viable product for inline-scss. TODO: - Allow for SASS & SCSS to be compiled & inlined - Fix things like @charset (which may not appear in a style tag) - update docs - amend changelog - Bump version - git tag
trunk-rs · Mar 31, 2021 · e7bdf5d · e7bdf5d
1 parent b9c6f4f
commit e7bdf5d
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 44 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/examples/yew/Cargo.toml b/examples/yew/Cargo.toml
@@ -5,8 +5,8 @@ authors = ["Anthony Dodd <[email protected]>"]
 edition = "2018"
 
 [dependencies]
-console_error_panic_hook = "0.1.6"
+console_error_panic_hook = "0.1.6" 
 wasm-bindgen = "=0.2.70" # This is pinned primarily for CI stability.
-wee_alloc = "0.4.5"
-ybc = "0.1.4"
+wee_alloc = "0.4.5" 
+ybc = "0.1.4" 
 yew = "0.17.3"
diff --git a/examples/yew/index.html b/examples/yew/index.html
@@ -1,19 +1,23 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Trunk | Yew | YBC</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"/>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
+    />
 
-    <link data-trunk rel="scss" href="src/index.scss"/>
-    <link data-trunk rel="css" href="src/app.css"/>
-    <link data-trunk rel="icon" href="src/yew.svg"/>
-    <link data-trunk rel="copy-file" href="src/yew.svg"/>
-    <link data-trunk rel="inline" type="css" href="src/inline-css.css"/>
-    <base data-trunk-public-url/>
-</head>
-<body>
-    <link data-trunk rel="rust" href="Cargo.toml" data-bin="yew-example"/>
-</body>
+    <link data-trunk rel="scss" href="src/index.scss" />
+    <link data-trunk rel="css" href="src/app.css" />
+    <link data-trunk rel="icon" href="src/yew.svg" />
+    <link data-trunk rel="copy-file" href="src/yew.svg" />
+    <link data-trunk rel="inline" type="css" href="src/inline-css.css" />
+    <link data-trunk rel="inline-scss" href="src/inline-scss.scss" />
+    <base data-trunk-public-url />
+  </head>
+  <body>
+    <link data-trunk rel="rust" href="Cargo.toml" data-bin="yew-example" />
+  </body>
 </html>
diff --git a/examples/yew/src/inline-scss.scss b/examples/yew/src/inline-scss.scss
@@ -0,0 +1,4 @@
+.trunk_yew_example_fancy_green {
+  $nice_color: green;
+  background-color: $nice_color;
+}
diff --git a/src/pipelines/inline.rs b/src/pipelines/inline.rs
@@ -4,16 +4,18 @@ use std::path::PathBuf;
 use std::str::FromStr;
 use std::sync::Arc;
 
-use anyhow::{bail, Context, Result};
-use async_std::task::{spawn, JoinHandle};
+use anyhow::{anyhow, bail, Context, Result};
+use async_std::task::{spawn, spawn_blocking, JoinHandle};
 use nipper::Document;
 
-use super::{AssetFile, LinkAttrs, TrunkLinkPipelineOutput, ATTR_HREF, ATTR_TYPE};
+use super::{super::config::RtcBuild, AssetFile, LinkAttrs, TrunkLinkPipelineOutput, ATTR_HREF, ATTR_TYPE};
 
 /// An Inline asset pipeline.
 pub struct Inline {
     /// The ID of this pipeline's source HTML element.
     id: usize,
+    /// Runtime build config.
+    cfg: Arc<RtcBuild>,
     /// The asset file being processed.
     asset: AssetFile,
     /// The type of the asset file that determines how the content of the file
@@ -23,8 +25,9 @@ pub struct Inline {
 
 impl Inline {
     pub const TYPE_INLINE: &'static str = "inline";
+    pub const TYPE_INLINE_SCSS: &'static str = "inline-scss";
 
-    pub async fn new(html_dir: Arc<PathBuf>, attrs: LinkAttrs, id: usize) -> Result<Self> {
+    pub async fn new(cfg: Arc<RtcBuild>, html_dir: Arc<PathBuf>, attrs: LinkAttrs, id: usize) -> Result<Self> {
         let href_attr = attrs
             .get(ATTR_HREF)
             .context(r#"required attr `href` missing for <link data-trunk rel="inline" .../> element"#)?;
@@ -35,7 +38,12 @@ impl Inline {
         let asset = AssetFile::new(&html_dir, path).await?;
         let content_type = ContentType::from_attr_or_ext(attrs.get(ATTR_TYPE), &asset.ext)?;
 
-        Ok(Self { id, asset, content_type })
+        Ok(Self {
+            id,
+            cfg,
+            asset,
+            content_type,
+        })
     }
 
     /// Spawn the pipeline for this asset type.
@@ -49,8 +57,27 @@ impl Inline {
     async fn run(self) -> Result<TrunkLinkPipelineOutput> {
         let rel_path = crate::common::strip_prefix(&self.asset.path);
         tracing::info!(path = ?rel_path, "reading file content");
-        let content = self.asset.read_to_string().await?;
+        let mut content = self.asset.read_to_string().await?;
         tracing::info!(path = ?rel_path, "finished reading file content");
+
+        // Compile SCSS if necessary
+        if let ContentType::Scss = self.content_type {
+            // Assume default options for the SASS compiler unless specified otherwise
+            let mut options = sass_rs::Options::default();
+            if self.cfg.release {
+                options.output_style = sass_rs::OutputStyle::Compressed;
+            }
+
+            // Log SASS compilation
+            tracing::info!(path = ?rel_path, "compiling inline sass/scss");
+
+            // Compile the SCSS
+            content = spawn_blocking(move || sass_rs::compile_string(&content, options)).await.map_err(|err| {
+                eprintln!("{}", err);
+                anyhow!("error compiling inline sass/scss for {:?}", &self.asset.path)
+            })?;
+        }
+
         Ok(TrunkLinkPipelineOutput::Inline(InlineOutput {
             id: self.id,
             content,
@@ -67,6 +94,8 @@ pub enum ContentType {
     Css,
     /// JS is wrapped into `script` tags.
     Js,
+    /// SCSS needs to be compiled before being wrapped into `style` tags.
+    Scss,
 }
 
 impl ContentType {
@@ -84,9 +113,10 @@ impl FromStr for ContentType {
     type Err = anyhow::Error;
 
     fn from_str(s: &str) -> Result<Self, Self::Err> {
-        match s {
+        match dbg!(s) {
             "html" => Ok(Self::Html),
             "css" => Ok(Self::Css),
+            "scss" => Ok(Self::Scss),
             "js" => Ok(Self::Js),
             s => bail!(
                 r#"unknown `type="{}"` value for <link data-trunk rel="inline" .../> attr; please ensure the value is lowercase and is a supported content type"#,
@@ -110,7 +140,7 @@ impl InlineOutput {
     pub async fn finalize(self, dom: &mut Document) -> Result<()> {
         let html = match self.content_type {
             ContentType::Html => self.content,
-            ContentType::Css => format!("<style>{}</style>", self.content),
+            ContentType::Css | ContentType::Scss => format!("<style>{}</style>", self.content),
             ContentType::Js => format!("<script>{}</script>", self.content),
         };
 

diff --git a/src/pipelines/mod.rs b/src/pipelines/mod.rs
@@ -69,7 +69,7 @@ impl TrunkLink {
         Ok(match rel.as_str() {
             Sass::TYPE_SASS | Sass::TYPE_SCSS => Self::Sass(Sass::new(cfg, html_dir, attrs, id).await?),
             Icon::TYPE_ICON => Self::Icon(Icon::new(cfg, html_dir, attrs, id).await?),
-            Inline::TYPE_INLINE => Self::Inline(Inline::new(html_dir, attrs, id).await?),
+            Inline::TYPE_INLINE | Inline::TYPE_INLINE_SCSS => Self::Inline(Inline::new(cfg, html_dir, attrs, id).await?),
             Css::TYPE_CSS => Self::Css(Css::new(cfg, html_dir, attrs, id).await?),
             CopyFile::TYPE_COPY_FILE => Self::CopyFile(CopyFile::new(cfg, html_dir, attrs, id).await?),
             CopyDir::TYPE_COPY_DIR => Self::CopyDir(CopyDir::new(cfg, html_dir, attrs, id).await?),