Optimize + devex: use html and css tagged template literals

[luwes]

I think it would be good if we started using html`` and css`` tagged template literals, not that they should return anything but a string but this is a great indicator that can be used to target for minify tools and most text editors now add color syntax highlights to those.

There's a bunch of code comments that could be removed in the CSS outputs if they would be run through CSS nano or similar, not to mention whitespace.

I've used this in the past just to return the original string

export function css(strings, ...values) {
  return values.reduce((finalString, value, index) => {
    return `${finalString}${value}${strings[index + 1]}`;
  }, strings[0]);
}

[cjpillsbury]

I think this is a great general goal and your proposal is likely amongst the least "interruptive" ways of solving the minification concern/consideration:

• the current code will mostly look the same, except with a few function wrappers
• the functions will effectively do nothing
• use of Media Chrome still wouldn't require any bundler/compiler/etc but could still get greater benefits from them wrt e.g. file size
• @luwes has already built a build tool for Mux Player to take advantage of this strategy for i18n

While other refactors/approaches to solving this would have additional value adds (e.g. moving from using template strings altogether to files for e.g. svgs, css, etc.), these would likely have a greater impact on the current codebase and would also likely require a build tool, so I'd consider them "more controversial" or at least meriting a larger discussion.

@heff any thoughts/concerns from you?

[heff]

I can get behind this. I don't quite understand how things automagically use that syntax, but I see the value in the minification. The downside with bringing in more utilities like this is it becomes harder for someone to look at our components for reference and then build their own without figuring out how to do the all the same things the utilities are handling. As we push to build the ecosystem we'll want to invest in keeping it easy to build a simple component that still feels like native HTML as opposed to a proprietary dev environment. That might just require great docs so people don't have to look at the MC codebase.

[gkatsev]

It's a native language feature, "tagged template literals".
The idea is that html and css don't do anything special and are just there to be able to find the literals via tooling, should someone want to do that.