Possibility to change 'type' attribute of injected CSS

[JeroenReumkens]

Packages affected

• [x] sandpack-client
• [x] sandpack-react

What is this feature?

I'm currently using Sandpack in combination with TailwindCSS. In order to render Tailwind, I'm utilising their CDN. However, when adding custom styles to my index.css, in order for the CDN to pick these up, it needs to have type="text/tailwindcss" instead of text/css.

How would your idea work?

I'm wondering if there's an option to control what type attribute will get added for these CSS files? Perhaps one setting for all of them, but even better of we could pass some sort of function to decided on a per file basis what we'd like to add. I can imagine this will be more of a generic API to control the attributes of any JS and CSS injected.

Let me know if you need any more context on this, happy to provide it.

Do you have any examples of how you would like to see us implement it?

I can imagine it could look something like this in pseudo code:

  export const MyApp = () => {
    const processResource = ({attributes, code}: {attributes: HTMLStyleAttributes | HTMLScriptAttributes, code: string}) => {
       // do anything with the attributes and code here.
       // In theory you could even decide to run a full preprocessor in here, although that of course will impact the performance.
       return {attributes, code};
     }
     
     return (
        <SandpackProvider
           options={{
              //.. Lots of other things
              // Calls this method per file Sandpack wants to insert into the DOM (JS/CSS).
              processResource={processResource}
           }}
        >
    );
  }