Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow importing CSS #39

Open
cmdcolin opened this issue Apr 12, 2023 · 3 comments
Open

Allow importing CSS #39

cmdcolin opened this issue Apr 12, 2023 · 3 comments

Comments

@cmdcolin
Copy link
Contributor

Some modules, example: molstar, work best if you can import a css file. In webpack, requires a css-loader

In rollup, may require a different loader

May be able to output a 'chunk of js that writes a style tag'

@cmdcolin
Copy link
Contributor Author

cmdcolin commented Feb 2, 2024

this is an example of injecting css via javascript code from an esbuild plugin

// from https://github.com/evanw/esbuild/issues/2110#issuecomment-1079934680
const StyleLoader = {
  name: 'inline-style',
  setup({ onLoad }) {
    const template = css =>
      `typeof document<'u'&&` +
      `document.head.appendChild(document.createElement('style'))` +
      `.appendChild(document.createTextNode(${JSON.stringify(css)}))`
    onLoad({ filter: /\.css$/ }, async args => {
      let css = await fs.promises.readFile(args.path, 'utf8')
      return {
        contents: template(css),
      }
    })
  },
}

i am trying it out with the protein3d plugin...will probably want a similar snippet for rollup

@cmdcolin
Copy link
Contributor Author

cmdcolin commented Feb 2, 2024

the alternative to this would probably be having a similar snippet that injects a "link" tag for the style, and then allowing the plugin to refer to both a css and js file(?)

@cmdcolin
Copy link
Contributor Author

way that i ended up using was just taking the snippet in the above and using it raw in the source code, instead of relying on specialized css filenames...then i don't need e.g. a specialized config for rollup and esbuild

@GMOD GMOD deleted a comment from Ali7040 Feb 14, 2024
@GMOD GMOD deleted a comment from Ali7040 Feb 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant