Re: [w3c/webcomponents] CSS Modules (#759)

I have made a demo that can import without Service Worker (but service worker can cache and enhance the experience).

css-module-loader.js
```JS
const src = new URL(import.meta.url).searchParams.get('src')
const container = new CSSStyleSheet()

fetch(src)
    .then(x => x.text())
    .then(x => container.replace(x))

export default container
```

index.js
```js
import article from './markdown-loader.js?src=./article.md'
import css from './css-module-loader.js?src=./style.css'

document.body.appendChild(document.createElement('div')).appendChild(article)
document.adoptedStyleSheets = [css]
```

This pattern works for all types of file that do not need a sync loading.

For async loading, you need `top level await` or `sync xhr`. For async compiling, only can be done by Service worker.

My demo at: https://github.com/Jack-Works/loader-with-esmodule-example

Supports Markdown module, CSS Module, JSON Module

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/759#issuecomment-529065835

Received on Saturday, 7 September 2019 02:57:43 UTC