Request: Enhance "transforms" plugins

[tbeseda]

@enhance/ssr allows for script and css transformations, would it be possible to plug in custom transforms alongside the standard ones provided by arc-plugin-enhance here

arc-plugin-enhance/src/http/any-catchall/router.mjs

Lines 132 to 141 in f6dcdd4

	const _html = enhance({
	elements,
	scriptTransforms: [
	importTransform({ lookup: arc.static })
	],
	styleTransforms: [
	styleTransform
	],
	initialState: store
	})

---

No idea how this would look for a plugin author...

So far Enhance has intentionally (wisely!) avoided an explicit configuration file. Maybe transforms could be added via a file-based API?
plugins/transforms/css/index.mjs
I'm not sold, but it's a thought.

I don't think Enhance needs these sort of plugins, but it would open up some powerful possibilities. On the other hand it could have a negative performance impact and lead to some plugin author/consumer anti-patterns and footguns. On the other other hand, can't save everyone from themselves 😬

[kristoferjoseph]

This is a great idea and has been requested previously.
The technical hurdle we ran into was knowing when to run the transform since some transforms would be undone by others.
I had planned to loop back around on this at a later date in order to gather some specifications for concrete use cased people wanted this feature for so I could write better tests.

[tbeseda]

I wonder if we could start with just CSS transforms? That seems more well defined as to when devs want those to run. Transforming <scripts> is a bit more of a chicken-egg problem.

I'll outline one idea I had as a reference point for a possible implementation:

I'd like to parse <style> tags and replace their contents with output from Lightning.css.
I want it to simply perform the convenient transforms for browser compatibility (like vendor prefixing and syntax lowering).
I don't want all the fancy bundling Lightning features (like imports and expansion) which would need user config and filesystem access.

Just: here's a string of CSS, make it more compatible with more browsers, and I (the plugin) puts it back before it's sent to the browser.