feat: Allow disabling CSS and JS minification per file

See #651
trunk-rs · Dec 20, 2023 · 4b68c74 · 4b68c74
1 parent 07ec22d
commit 4b68c74
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 14 deletions.
diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html
@@ -7,6 +7,7 @@
 
     <link data-trunk rel="scss" href="src/index.scss"/>
     <link data-trunk rel="css" href="src/app.css"/>
+    <link data-trunk data-no-minify rel="css" href="src/not_minified.css"/>
     <base data-trunk-public-url/>
 </head>
 <body>

diff --git a/examples/vanilla/src/not_minified.css b/examples/vanilla/src/not_minified.css
@@ -0,0 +1,4 @@
+.should_not_be_minified:checked:hover {
+  --empty-prop: ;
+  background-color: black;
+}
diff --git a/site/content/assets.md b/site/content/assets.md
@@ -54,6 +54,7 @@ This will typically look like: `<link data-trunk rel="{type}" href="{path}" ..ot
 
   - In the future, Trunk will resolve local `@imports`, will handle minification (see [trunk#7](https://github.com/trunk-rs/trunk/issues/7)), and we may even look into a pattern where any CSS found in the source tree will be bundled, which would enable a nice zero-config "component styles" pattern. See [trunk#3](https://github.com/trunk-rs/trunk/issues/3) for more details.
   - `data-integrity`: (optional) the `integrity` digest type for code & script resources. Defaults to plain `sha384`.
+  - `data-no-minify`: (optional) by default, CSS files are minified in `--release` mode (unless building with `--no-minification`). Setting this attribute disables minification for that particular file. Defaults to false.
 
 ## tailwind
 
@@ -103,6 +104,8 @@ This will typically look like: `<script data-trunk src="{path}" ..other options
 
 Trunk will copy script files found in the source HTML without content modification. This content is hashed for cache control. The `src` attribute must be included in the script pointing to the script file to be processed.
 
+  - `data-no-minify`: (optional) by default, scripts are minified in `--release` mode (unless building with `--no-minification`). Setting this attribute disables minification for that particular file. Defaults to false.
+
 ## JS Snippets
 
 JS snippets generated from the [wasm-bindgen JS snippets feature](https://rustwasm.github.io/docs/wasm-bindgen/reference/js-snippets.html) are automatically copied to the dist dir, hashed and ready to rock. No additional setup is required. Just use the feature in your application, and Trunk will take care of the rest.

diff --git a/src/pipelines/css.rs b/src/pipelines/css.rs
@@ -1,6 +1,6 @@
 //! CSS asset pipeline.
 
-use super::{AssetFile, AttrWriter, Attrs, TrunkAssetPipelineOutput, ATTR_HREF};
+use super::{AssetFile, AttrWriter, Attrs, TrunkAssetPipelineOutput, ATTR_HREF, ATTR_MINIFY};
 use crate::{
     config::RtcBuild,
     pipelines::AssetFileType,
@@ -24,6 +24,8 @@ pub struct Css {
     attrs: Attrs,
     /// The required integrity setting
     integrity: IntegrityType,
+    /// Whether to minify or not
+    minify: bool,
 }
 
 impl Css {
@@ -45,12 +47,15 @@ impl Css {
 
         let integrity = IntegrityType::from_attrs(&attrs, &cfg)?;
 
+        let minify = attrs.get(ATTR_MINIFY).is_none();
+
         Ok(Self {
             id,
             cfg,
             asset,
             attrs,
             integrity,
+            minify,
         })
     }
 
@@ -65,12 +70,13 @@ impl Css {
     async fn run(self) -> Result<TrunkAssetPipelineOutput> {
         let rel_path = crate::common::strip_prefix(&self.asset.path);
         tracing::info!(path = ?rel_path, "copying & hashing css");
+        let minify = self.cfg.release && self.minify && !self.cfg.no_minification;
         let file = self
             .asset
             .copy(
                 &self.cfg.staging_dist,
                 self.cfg.filehash,
-                self.cfg.release && !self.cfg.no_minification,
+                minify,
                 AssetFileType::Css,
             )
             .await?;

diff --git a/src/pipelines/js.rs b/src/pipelines/js.rs
@@ -1,6 +1,6 @@
 //! JS asset pipeline.
 
-use super::{AssetFile, AttrWriter, Attrs, TrunkAssetPipelineOutput, ATTR_SRC};
+use super::{AssetFile, AttrWriter, Attrs, TrunkAssetPipelineOutput, ATTR_MINIFY, ATTR_SRC};
 use crate::{
     config::RtcBuild,
     pipelines::AssetFileType,
@@ -26,6 +26,8 @@ pub struct Js {
     integrity: IntegrityType,
     /// If it's a JavaScript module (vs a classic script)
     module: bool,
+    /// Whether to minify or not
+    minify: bool,
 }
 
 impl Js {
@@ -44,14 +46,8 @@ impl Js {
         let asset = AssetFile::new(&html_dir, path).await?;
 
         let integrity = IntegrityType::from_attrs(&attrs, &cfg)?;
-
         let module = attrs.get("type").map(|s| s.as_str()) == Some("module");
-
-        // Remove src and data-trunk from attributes.
-        let attrs = attrs
-            .into_iter()
-            .filter(|(x, _)| *x != "src" && !x.starts_with("data-trunk"))
-            .collect();
+        let minify = attrs.get(ATTR_MINIFY).is_none();
 
         Ok(Self {
             id,
@@ -60,6 +56,7 @@ impl Js {
             module,
             attrs,
             integrity,
+            minify,
         })
     }
 
@@ -74,12 +71,13 @@ impl Js {
     async fn run(self) -> Result<TrunkAssetPipelineOutput> {
         let rel_path = crate::common::strip_prefix(&self.asset.path);
         tracing::info!(path = ?rel_path, "copying & hashing js");
+        let minify = self.cfg.release && self.minify && !self.cfg.no_minification;
         let file = self
             .asset
             .copy(
                 &self.cfg.staging_dist,
                 self.cfg.filehash,
-                self.cfg.release && !self.cfg.no_minification,
+                minify,
                 if self.module {
                     AssetFileType::Mjs
                 } else {
@@ -130,7 +128,7 @@ impl JsOutput {
         dom.select(&super::trunk_script_id_selector(self.id))
             .replace_with_html(format!(
                 r#"<script src="{base}{file}"{attrs}/>"#,
-                attrs = AttrWriter::new(&attrs, &[]),
+                attrs = AttrWriter::new(&attrs, AttrWriter::EXCLUDE_SCRIPT),
                 base = &self.cfg.public_url,
                 file = self.file
             ));

diff --git a/src/pipelines/mod.rs b/src/pipelines/mod.rs
@@ -45,6 +45,7 @@ const ATTR_HREF: &str = "href";
 const ATTR_SRC: &str = "src";
 const ATTR_TYPE: &str = "type";
 const ATTR_REL: &str = "rel";
+const ATTR_MINIFY: &str = "data-no-minify";
 const SNIPPETS_DIR: &str = "snippets";
 const TRUNK_ID: &str = "data-trunk-id";
 const PNG_OPTIMIZATION_LEVEL: u8 = 6;
@@ -352,11 +353,21 @@ impl<'a> AttrWriter<'a> {
         ATTR_INLINE,
         ATTR_SRC,
         ATTR_TYPE,
+        ATTR_MINIFY,
     ];
     /// Whereas on link elements, the MIME type for css is A-OK. You can even specify a custom
     /// MIME type.
-    pub(self) const EXCLUDE_CSS_LINK: &'static [&'static str] =
-        &[TRUNK_ID, ATTR_HREF, ATTR_REL, ATTR_INLINE, ATTR_SRC];
+    pub(self) const EXCLUDE_CSS_LINK: &'static [&'static str] = &[
+        TRUNK_ID,
+        ATTR_HREF,
+        ATTR_REL,
+        ATTR_INLINE,
+        ATTR_SRC,
+        ATTR_MINIFY,
+    ];
+
+    /// Attributes to ignore for <script> tags
+    pub(self) const EXCLUDE_SCRIPT: &'static [&'static str] = &[ATTR_SRC, ATTR_MINIFY];
 
     pub(self) fn new(attrs: &'a Attrs, exclude: &'a [&'a str]) -> Self {
         Self { attrs, exclude }