feat: implement data-target-path for sass

Author: ctron

examples/target-path/index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <title>Trunk | target-path</title>
 
-  <link data-trunk rel="scss" href="src/index.scss"/>
+  <link data-trunk rel="scss" href="src/index.scss" data-target-path="static"/>
   <link data-trunk rel="css" href="src/app.css" data-target-path="static"/>
   <link data-trunk data-no-minify rel="css" href="src/not_minified.css" data-target-path="static"/>
   <base data-trunk-public-url/>

site/content/assets.md

@@ -47,6 +47,7 @@ This will typically look like: `<link data-trunk rel="{type}" href="{path}" ..ot
 
   - `data-inline`: (optional) this attribute will inline the compiled CSS from the SASS/SCSS file into a `<style>` tag instead of using a `<link rel="stylesheet">` tag.
   - `data-integrity`: (optional) the `integrity` digest type for code & script resources. Defaults to plain `sha384`.
+  - `data-target-path`: (optional) Path where the directory is placed inside the dist dir. If not present, the directory is placed in the dist root. The path must be a relative path without `..`.
 
 ## css
 
@@ -55,7 +56,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.
-  - `data-target-path`: (optional) Path where the directory is placed inside the dist dir. If not present the directory is placed in the dist root. The path must be a relative path without `..`.
+  - `data-target-path`: (optional) Path where the directory is placed inside the dist dir. If not present, the directory is placed in the dist root. The path must be a relative path without `..`.
 
 ## tailwind
 
@@ -69,7 +70,7 @@ This will typically look like: `<link data-trunk rel="{type}" href="{path}" ..ot
 ✅ `rel="icon"`: Trunk will copy the icon image specified in the `href` attribute to the `dist` dir. This content is hashed for cache control.
 
   - `data-integrity`: (optional) the `integrity` digest type for code & script resources. Defaults to plain `sha384`.
-  - `data-target-path`: (optional) Path where the directory is placed inside the dist dir. If not present the directory is placed in the dist root. The path must be a relative path without `..`.
+  - `data-target-path`: (optional) Path where the directory is placed inside the dist dir. If not present, the directory is placed in the dist root. The path must be a relative path without `..`.
 
 ## inline
 
@@ -84,13 +85,13 @@ This will typically look like: `<link data-trunk rel="{type}" href="{path}" ..ot
 
 ✅ `rel="copy-file"`: Trunk will copy the file specified in the `href` attribute to the `dist` dir. This content is copied exactly, no hashing is performed.
 
-- `data-target-path`: (optional) Path where the directory is placed inside the dist dir. If not present the directory is placed in the dist root. The path must be a relative path without `..`.
+- `data-target-path`: (optional) Path where the directory is placed inside the dist dir. If not present, the directory is placed in the dist root. The path must be a relative path without `..`.
 
 ## copy-dir
 
 ✅ `rel="copy-dir"`: Trunk will recursively copy the directory specified in the `href` attribute to the `dist` dir. This content is copied exactly, no hashing is performed.
 
-  - `data-target-path`: (optional) Path where the directory is placed inside the dist dir. If not present the directory is placed in the dist root. The path must be a relative path without `..`.
+  - `data-target-path`: (optional) Path where the directory is placed inside the dist dir. If not present, the directory is placed in the dist root. The path must be a relative path without `..`.
 
 # Script Asset Types
 
@@ -109,7 +110,7 @@ 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.
-  - `data-target-path`: (optional) Path where the directory is placed inside the dist dir. If not present the directory is placed in the dist root. The path must be a relative path without `..`.
+  - `data-target-path`: (optional) Path where the directory is placed inside the dist dir. If not present, the directory is placed in the dist root. The path must be a relative path without `..`.
 
 ## JS Snippets
 

src/common.rs

@@ -221,3 +221,21 @@ pub async fn target_path(
         Ok(base.to_owned())
     }
 }
+
+/// Create a file_name, including the relative base to the `dist`.
+///
+/// The function will return an error if the `target_file` is not a direct or indirect child of
+/// `dist`.
+pub fn dist_relative(dist: &Path, target_file: &Path) -> Result<String> {
+    Ok(target_file
+        .strip_prefix(dist)
+        .with_context(|| {
+            format!(
+                "unable to create a relative path of '{}' in '{}'",
+                target_file.display(),
+                dist.display()
+            )
+        })?
+        .to_string_lossy()
+        .to_string())
+}

src/pipelines/mod.rs

@@ -13,7 +13,7 @@ mod rust;
 mod sass;
 mod tailwind_css;
 
-use crate::common::path_exists;
+use crate::common::{dist_relative, path_exists};
 use crate::config::RtcBuild;
 use crate::pipelines::copy_dir::{CopyDir, CopyDirOutput};
 use crate::pipelines::copy_file::{CopyFile, CopyFileOutput};
@@ -288,17 +288,7 @@ impl AssetFile {
         };
 
         let file_path = to_dir.join(&file_name);
-        let file_name = file_path
-            .strip_prefix(dist)
-            .with_context(|| {
-                format!(
-                    "unable to create a relative path of '{}' in '{}'",
-                    file_path.display(),
-                    dist.display()
-                )
-            })?
-            .to_string_lossy()
-            .to_string();
+        let file_name = dist_relative(dist, &file_path)?;
 
         fs::write(&file_path, bytes)
             .await

src/pipelines/sass.rs

@@ -4,7 +4,7 @@ use super::{
     data_target_path, AssetFile, AttrWriter, Attrs, TrunkAssetPipelineOutput, ATTR_HREF,
     ATTR_INLINE,
 };
-use crate::common::target_path;
+use crate::common::{dist_relative, target_path};
 use crate::{
     common,
     config::RtcBuild,
@@ -140,6 +140,7 @@ impl Sass {
             let result_dir =
                 target_path(&self.cfg.staging_dist, self.target_path.as_deref(), None).await?;
             let file_path = result_dir.join(&file_name);
+            let file_href = dist_relative(&self.cfg.staging_dist, &file_path)?;
 
             let integrity = OutputDigest::generate_from(self.integrity, css.as_bytes());
 
@@ -152,7 +153,7 @@ impl Sass {
             })?;
 
             // Generate a hashed reference to the new CSS file.
-            CssRef::File(file_name, integrity)
+            CssRef::File(file_href, integrity)
         };
 
         tracing::debug!(path = ?rel_path, "finished compiling sass/scss");