Support additional asset types

[thedodd]

Currently, trunk ships with a built-in scss/sass compiler (https://github.com/compass-rs/sass-rs). We definitely need to add support for additional asset types.

• scss/sass (baked-in).
• for now, images and such will need to be copied over directly, until we can do source transformation or some other pattern to update references throughout WASM (need to look into this a bit).
• Plain CSS. For now, just copy & write to dist with hash.
  • probably need to do some CSS processing / handling of imports. For local CSS imports, just concatenate.
  • perhaps using something like <link data-trunk rel="css-components"/> any CSS found in the source tree will be concatenated & bundled, which would enable a nice zero-config "component styles" pattern. Users would be able to just create a CSS file right next to their Rust components, and Trunk will automatically process & bundle it.
• setup glob resolution. Globs will just generate an individual asset per matched file. Probably just use globset.
• LESS
• postcss
• stylus

There are probably plenty of other asset types the community will want to support. Let's talk about them here, and then create specific issues for each asset type when we are ready to build the plugin/pipeline system.

[hobofan]

Is there any support for plain javascript/<script src="path/to/some.js">, or any planned one?

I tried a few variants of specifying paths in script tags, but it seems that they are not being picked up at all. I ended up with something working via the <link rel="trunk-dist">, but having to specify that for every script tag seems pretty unergonomic.

Pre-trunk (webpack):

        <script crossorigin src="./react.development.js"></script>
        <script crossorigin src="./react-dom.development.js"></script>
        <script crossorigin src="./material-ui.development.js"></script>

With trunk:

        <script crossorigin src="react.development.js"></script>
        <link rel="trunk-dist" href="static/react.development.js"></script>
        <script crossorigin src="react-dom.development.js"></script>
        <link rel="trunk-dist" href="static/react-dom.development.js"></script>
        <script crossorigin src="material-ui.development.js"></script>
        <link rel="trunk-dist" href="static/material-ui.development.js"></script>

[srid]

How would postcss support look like? Wouldn't that bring in nodeJS dependency?

As an aside, I'd be interested in seeing built-in support for https://tailwindcss.com/

[Septias]

How far is Postcss support? The last activity was 2 months ago, is there someone working on it, and/or can a first contributor help with the work?

[evilrobot-01]

Could an additional "html" asset type possibly be added, for linking in other html files for trunk attribute processing please?

As an example, when hosting a static site on IPFS, the only way one can handle a custom 404 page is by adding a separate ipfs-404.html page. It would therefore be great if one could add a <link data-trunk rel="html" href="ipfs-404.html" /> entry into the main file, so the build picks up the linked file and applies the same type of attribute processing (e.g. stylesheet links updated using hashed file name etc) before copying it to the output folder.

I took a bit of a look at hooks, but didn't see any way currently where I could just request an html file to be processed. trunk build ipfs-404.html kinda works, but it still does all the wasm stuff and changes the name of the output file to index,html.

[ilyvion]

Would be nice if there was a way to hook into the asset system instead of having to wait for first-party implementation of the one you want. I'd like TailwindCSS integration, e.g., but for now I'm just using [[hooks]], which, while it works kind of ties me to one specific shell as I need more than just "run one executable" (I need to do different things depending on whether it's debug/release mode, e.g.)

[clembu]

I'm starting a trunk project for the first time and getting into major hurdles when trying to use sass.

It's currently almost impossible to use external sass libraries like cirrus or similar, because the source files are all scattered around in node_modules from different packages.
I tried downloading the library i'm using but ended up having to track multiple libraries because they all have some @use some-npm-package/feature/subfeature.

I think it would be valuable to have a config point to add paths to add to dart-sass's --load-path argument, to avoid resolving to manual dependency management

[terwer]

Stylus +1