Import injectable stylesheets as URLs (#1220)

pixiebrix · Aug 31, 2021 · 4d46ac2 · 4d46ac2
1 parent a8aabb1
commit 4d46ac2
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 60 deletions.
diff --git a/src/blocks/renderers/DataTableComponent.tsx b/src/blocks/renderers/DataTableComponent.tsx
@@ -19,27 +19,16 @@ import { DataTable as RawDataTable } from "primereact/datatable";
 import { Column, ColumnProps } from "primereact/column";
 import React from "react";
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires, unicorn/prefer-module
-const theme = require("!!raw-loader!primereact/resources/themes/saga-blue/theme.css?esModule=false")
-  .default;
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires, unicorn/prefer-module
-const primereact = require("!!raw-loader!primereact/resources/primereact.min.css?esModule=false")
-  .default;
+import theme from "primereact/resources/themes/saga-blue/theme.css?loadAsUrl";
+import primereact from "primereact/resources/primereact.min.css?loadAsUrl";
 
 const DataTableComponent: React.FunctionComponent<{
   columns: ColumnProps[];
   rows: Array<Record<string, unknown>>;
 }> = ({ columns, rows }) => (
   <React.Fragment>
-    <style
-      type="text/css"
-      dangerouslySetInnerHTML={{ __html: theme.toString() }}
-    />
-    <style
-      type="text/css"
-      dangerouslySetInnerHTML={{ __html: primereact.toString() }}
-    />
+    <link rel="stylesheet" href={theme} />
+    <link rel="stylesheet" href={primereact} />
     <RawDataTable value={rows}>
       {columns.map((column) => (
         <Column key={column.field} {...column} />

diff --git a/src/blocks/renderers/PropertyTree.tsx b/src/blocks/renderers/PropertyTree.tsx
@@ -19,33 +19,19 @@ import { TreeTable } from "primereact/treetable";
 import { Column } from "primereact/column";
 import React from "react";
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires, unicorn/prefer-module
-const theme = require("!!raw-loader!primereact/resources/themes/saga-blue/theme.css?esModule=false")
-  .default;
+import theme from "primereact/resources/themes/saga-blue/theme.css?loadAsUrl";
+import primereact from "primereact/resources/primereact.min.css?loadAsUrl";
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires, unicorn/prefer-module
-const primereact = require("!!raw-loader!primereact/resources/primereact.min.css?esModule=false")
-  .default;
-
-// FIXME: figure out how to load the fonts, since the font URL in the file doesn't work with Chrome extensions
-// eslint-disable-next-line @typescript-eslint/no-var-requires, unicorn/prefer-module
-const primeicons = require("!!raw-loader!primeicons/primeicons.css?esModule=false")
-  .default;
+// FIXME: figure out how to load the fonts, since the font URL in the file doesn't
+//  work with Chrome extensions. Likely webpack needs to use css-loader to properly
+//  parse all the url() inside it.
+import primeicons from "primeicons/primeicons.css?loadAsUrl";
 
 const PropertyTree: React.FunctionComponent<{ value: any }> = ({ value }) => (
   <React.Fragment>
-    <style
-      type="text/css"
-      dangerouslySetInnerHTML={{ __html: theme.toString() }}
-    />
-    <style
-      type="text/css"
-      dangerouslySetInnerHTML={{ __html: primereact.toString() }}
-    />
-    <style
-      type="text/css"
-      dangerouslySetInnerHTML={{ __html: primeicons.toString() }}
-    />
+    <link rel="stylesheet" href={theme} />
+    <link rel="stylesheet" href={primereact} />
+    <link rel="stylesheet" href={primeicons} />
     <TreeTable value={value}>
       <Column field="name" header="Property" expander />
       <Column field="value" header="Value" />

diff --git a/src/blocks/renderers/customForm.tsx b/src/blocks/renderers/customForm.tsx
@@ -24,13 +24,8 @@ import { getRecord, setRecord } from "@/background/dataStore";
 import { reportError } from "@/telemetry/logging";
 import { notifyResult } from "@/contentScript/notify";
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires, unicorn/prefer-module
-const theme = require("!!raw-loader!bootstrap/dist/css/bootstrap.min.css?esModule=false")
-  .default;
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires, unicorn/prefer-module
-const custom = require("!!raw-loader!@/blocks/renderers/customForm.css?esModule=false")
-  .default;
+import theme from "bootstrap/dist/css/bootstrap.min.css?loadAsUrl";
+import custom from "@/blocks/renderers/customForm.css?loadAsUrl";
 
 const CustomFormComponent: React.FunctionComponent<{
   schema: Schema;
@@ -39,14 +34,8 @@ const CustomFormComponent: React.FunctionComponent<{
   onSubmit: (values: JsonObject) => Promise<void>;
 }> = ({ schema, uiSchema, formData, onSubmit }) => (
   <div className="CustomForm">
-    <style
-      type="text/css"
-      dangerouslySetInnerHTML={{ __html: theme.toString() }}
-    />
-    <style
-      type="text/css"
-      dangerouslySetInnerHTML={{ __html: custom.toString() }}
-    />
+    <link rel="stylesheet" href={theme} />
+    <link rel="stylesheet" href={custom} />
     <Form
       schema={schema}
       uiSchema={uiSchema}

diff --git a/src/blocks/transformers/modal.tsx b/src/blocks/transformers/modal.tsx
@@ -23,9 +23,7 @@ import { BlockArg, Schema } from "@/core";
 import { uuidv4 } from "@/types/helpers";
 import { BusinessError, CancelError } from "@/errors";
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires, unicorn/prefer-module
-const theme = require("!!raw-loader!bootstrap/dist/css/bootstrap.min.css?esModule=false")
-  .default;
+import theme from "bootstrap/dist/css/bootstrap.min.css?loadAsUrl";
 
 export class ModalTransformer extends Transformer {
   constructor() {
@@ -81,10 +79,7 @@ export class ModalTransformer extends Transformer {
         const id = `modal-${uuidv4()}`;
         const form = (
           <React.Fragment>
-            <style
-              type="text/css"
-              dangerouslySetInnerHTML={{ __html: theme.toString() }}
-            />
+            <link rel="stylesheet" href={theme} />
             <div className="modal-backdrop show"></div>
             <div
               id={id}

diff --git a/src/importAssets.d.ts b/src/importAssets.d.ts
@@ -21,6 +21,11 @@ declare module "*.svg" {
   export default CONTENT;
 }
 
+declare module "*?loadAsUrl" {
+  const CONTENT: string;
+  export default CONTENT;
+}
+
 declare module "*.txt" {
   const CONTENT: string;
   export default CONTENT;

diff --git a/webpack.config.js b/webpack.config.js
@@ -394,6 +394,7 @@ module.exports = (env, options) =>
       rules: [
         {
           test: /\.s?css$/,
+          resourceQuery: { not: [/loadAsUrl/] },
           use: [
             MiniCssExtractPlugin.loader,
             "css-loader",

diff --git a/webpack.sharedConfig.js b/webpack.sharedConfig.js
@@ -93,6 +93,13 @@ const shared = {
         test: /\.txt/,
         type: "asset/source",
       },
+      {
+        resourceQuery: /loadAsUrl/,
+        type: "asset/resource",
+        generator: {
+          filename: "css/[name][ext]",
+        },
+      },
     ],
   },
 };