Fix stylesheet linking

[aphillips]

Currently the local.css stylesheet is linked using <link rel=stylesheet...

Previously we used <style data-import=..., but this didn't allow the local stylesheet to be tested without committing the changes.

@r12a claims there is a different feature used by LReqs that can fix this. This issue is a placeholder to find and replicate that here.

[r12a]

The way this is done in the lreq pages is as follows:

[1] Add this to the js configuration.

postProcess: [
        async function importStyleSheet() { 
            const elems = document.querySelectorAll(`link[rel='stylesheet'][data-import]`)
            await Promise.all(
                [...elems].map(async link => {
                    const text = await fetch(link.href).then(r => r.text())
                    const style = document.createElement("style")
                    style.textContent = text
                    link.replaceWith(style)
                    })
                )
            }
        ],

[2] add the following to the head element:

<link rel="stylesheet" data-import href="https://w3c.github.io/i18n-drafts/style/respec_2022.css">

I tried it with a Netlify link that @xfq provided, but it didn't include the styles in respec_2022.css, as far as i can tell. (see https://github.com/w3c/tlreq/pull/10)

[r12a]

But it doesn't seem to have caught the styling from local.css either. Investigating further....

[r12a]

For some reason, Netlify or respec seems to just comment out the line that points to respec_2022.css. At least, that means it's possible to uncomment it using the inspector – then the styles are applied as expected.

[r12a]

And the styles are tweakable in the inspector after uncommenting that line, of course.

[xfq]

I don't have a good solution for this at the moment, but I think I found the cause of the issue:

For some reason, Netlify or respec seems to just comment out the line that points to respec_2022.css.

After looking at https://github.com/w3c/tlreq/blob/fe34099c58c0927dbe1688e648f8de809cf209e0/index.html#L49-L50

I saw that the first line was already commented out in the source code. The second line won't work in the preview, because it points to a relative link outside the repo. You can't really do a .. in:

https://deploy-preview-10--tlreq.netlify.app/

because it's already in the top level.

[aphillips]

fixed?