Bundle PrimeReact CSS instead of relying on broken links

package.json

@@ -15,6 +15,7 @@
     "@types/react-dom": "^18.0.11",
     "debug": "^4.3.4",
     "monaco-editor": "^0.36.1",
+    "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
     "primereact": "9.3.x",
     "react": "^18.2.0",
@@ -55,7 +56,7 @@
     "@web/rollup-plugin-html": "^1.11.0",
     "concurrently": "^7.6.0",
     "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.3",
+    "css-loader": "^6.8.1",
     "livereload": "^0.9.3",
     "rollup": "^2.79.1",
     "rollup-plugin-babel": "^4.4.0",
@@ -65,6 +66,7 @@
     "rollup-plugin-typescript2": "^0.34.1",
     "rollup-watch": "^4.3.1",
     "serve": "^14.2.0",
+    "style-loader": "^3.3.3",
     "ts-loader": "^9.4.2",
     "tslib": "^2.5.0",
     "webpack": "^5.76.3",

public/index.html

@@ -33,12 +33,6 @@
     
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
 
-    <link rel="stylesheet" href="https://unpkg.com/primeicons/primeicons.css" />
-    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/themes/lara-light-indigo/theme.css" />
-    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/primereact.min.css" />
-    <link rel="stylesheet" href="https://unpkg.com/primeflex@3.2.1/primeflex.min.css" />
-
-
     <meta
       name="description"
       content="OpenSCAD Playground: edit .scad models and render them to STL from the browser (WebAssembly build OpenSCAD, with Monaco editor and STL Viewer)"

src/index.tsx

@@ -15,6 +15,11 @@ import { isInStandaloneMode, registerCustomAppHeightCSSProperty } from './utils'
 import { State, StatePersister } from './state/app-state';
 import { writeStateInFragment } from "./state/fragment-state";
 
+import "primereact/resources/themes/lara-light-indigo/theme.css";
+import "primereact/resources/primereact.min.css";
+import "primeicons/primeicons.css";
+import "primeflex/primeflex.min.css";
+
 const log = debug('app:log');
 
 if (process.env.NODE_ENV !== 'production') {

webpack.config.js

@@ -15,6 +15,7 @@ module.exports = {
       {
         test: /\.css$/i,
         use: [
+         "style-loader",
          {
           loader: 'css-loader',
           options:{url: false},
@@ -46,6 +47,11 @@ module.exports = {
           from: path.resolve(__dirname, 'public'),
           toType: 'dir',
         },
+        { 
+          from: path.resolve(__dirname, 'node_modules/primeicons/fonts'),
+          to: path.resolve(__dirname, 'dist/fonts'),
+          toType: 'dir',
+        },
         { 
           from: path.resolve(__dirname, 'src/wasm/openscad.js'),
           from: path.resolve(__dirname, 'src/wasm/openscad.wasm'),