Import stylesheet as url #6012

pgarciacamou · 2018-12-10T22:32:16Z

Is this a bug report?

No. A feature request and proposal.

Feature: allow importing stylesheets as url (e.g. using style-loader/url).

Proposal: Use ":" (colon) at the start, sort of like importing styles from node_modules with a "~". (just an idea, not opposed to hearing other ideas).

Why?

Basically to allow injecting styles into a different DOM.

Barebones example (which explains my usecase):

import stylesUrl from ":path/to/styles[.scss|.sass|.css]";
// ...
var someFrame = (
  <iframe
    initialContent={`
      <!DOCTYPE html>
      <html>
        <head>
          <link href="${stylesUrl}" rel="stylesheet">
        </head>
        <body></body>
      </html>
    `}
  />
);

Which terms did you search for in User Guide?

CSS as URL, stylesheet as URL, SCSS as URL, code splitting, style splitting

Links I read:

What do I do right now?

Hide iframe
On iframe load, use code splitting to use promises
Find the specific stylesheet in the parent DOM
Move stylesheet into iframe
unhide iframe

In sort of pseudocode, it looks like:

// ...
var someRef = React.createRef();
// ...
var someFrame = (
  <iframe {...} ref={someRef} onLoad={() => {
    var doc = someRef.current.contentDocument;
    import("path/to/styles[.scss|.sass|.css]").then(() => {
      var sheet = findStylesheetInParentDOM();
      doc.head.appendChild(sheet);
      unhideIframe();
    });
  }} />
);

The text was updated successfully, but these errors were encountered:

pgarciacamou · 2018-12-11T03:58:19Z

I have mixed feelings about this issue because the same can be told about any other type of files (images, scripts, etc...). So, adding style-loader/url would just be a quick fix. I think I'm forced to either eject or solve it in userland for now.

I'm closing this issue because I think it is a subset of #3722 which discusses this exact issue (and more) for different types of files.

pgarciacamou closed this as completed Dec 11, 2018

lock bot locked and limited conversation to collaborators Jan 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Import stylesheet as url #6012

Import stylesheet as url #6012

pgarciacamou commented Dec 10, 2018 •

edited

Loading

pgarciacamou commented Dec 11, 2018 •

edited

Loading

Import stylesheet as url #6012

Import stylesheet as url #6012

Comments

pgarciacamou commented Dec 10, 2018 • edited Loading

Is this a bug report?

Why?

Which terms did you search for in User Guide?

What do I do right now?

pgarciacamou commented Dec 11, 2018 • edited Loading

pgarciacamou commented Dec 10, 2018 •

edited

Loading

pgarciacamou commented Dec 11, 2018 •

edited

Loading