patch esm

package.json

@@ -168,5 +168,10 @@
       "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
       "editor-msgs(\\.js)?$": "<rootDir>/test/__mocks__/editor-msgs-mock.js"
     }
+  },
+  "patchedDependencies": {
+    "@scratch/paper@0.11.0": "patches/@scratch%2Fpaper@0.11.0.patch",
+    "scratch-paint@3.0.20": "patches/scratch-paint@3.0.20.patch",
+    "parse-color@1.0.0": "patches/parse-color@1.0.0.patch"
   }
 }

patches/@scratch%2Fpaper@0.11.0.patch

@@ -0,0 +1,10 @@
+diff --git a/dist/paper-full.js b/dist/paper-full.js
+index a4c955176b05f0fa4116db3e01d6947fd570dff2..365541d589b24672cdf0463fde3f15bd76cca08d 100644
+--- a/dist/paper-full.js
++++ b/dist/paper-full.js
+@@ -17558,3 +17558,5 @@ if (typeof define === 'function' && define.amd) {
+
+ return paper;
+ }.call(this, typeof self === 'object' ? self : null);
++
++export default paper

patches/parse-color@1.0.0.patch

@@ -0,0 +1,13 @@
+diff --git a/index.js b/index.js
+index 6d5d2a7891ba13e30c581aa82da1f86a49f5fa36..adb674864cb0da258682fe583ac3c8504573c6ef 100644
+--- a/index.js
++++ b/index.js
+@@ -1,6 +1,6 @@
+-var convert = require('color-convert');
++import convert from 'color-convert';
+
+-module.exports = function (cstr) {
++export default function (cstr) {
+     var m, conv, parts, alpha;
+     if (m = /^((?:rgb|hs[lv]|cmyk|xyz|lab)a?)\s*\(([^\)]*)\)/.exec(cstr)) {
+         var name = m[1];

src/lib/app-state-hoc.jsx

@@ -13,6 +13,9 @@ import {detectLocale} from './detect-locale';
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
+import guiRedux from '../reducers/gui.js';
+import ScratchPaint from 'scratch-paint';
+
 /*
  * Higher Order Component to provide redux state. If an `intl` prop is provided
  * it will override the internal `intl` redux state
@@ -44,7 +47,6 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
             } else {
                 // You are right, this is gross. But it's necessary to avoid
                 // importing unneeded code that will crash unsupported browsers.
-                const guiRedux = require('../reducers/gui');
                 const guiReducer = guiRedux.default;
                 const {
                     guiInitialState,
@@ -53,7 +55,7 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
                     initPlayer,
                     initTelemetryModal
                 } = guiRedux;
-                const {ScratchPaintReducer} = require('scratch-paint');
+                const {ScratchPaintReducer} = ScratchPaint;
 
                 let initializedGui = guiInitialState;
                 if (props.isFullScreen || props.isPlayerOnly) {

vite.config.ts

@@ -2,9 +2,8 @@ import { defineConfig, ResolvedConfig, type Plugin } from 'vite'
 import { reactVirtualized } from './plugins/reactVirtualized.ts'
 import * as path from 'node:path'
 import * as fs from 'node:fs/promises'
-import postcss from 'postcss'
-import postcssModules from 'postcss-modules'
 import * as url from 'node:url'
+import { existsSync } from 'node:fs'
 
 const scratchGuiPlugin = (): Plugin => {
   let resolvedConfig!: ResolvedConfig
@@ -79,6 +78,9 @@ const allModuleCSSPlugin = (): Plugin => {
         /*if (importer.includes('/gui')) {
             console.log(importer, 0, name.join('.'))
         }*/
+       if (importer.includes('node_modules')) {
+        console.log(name.join('.'))
+       }
         return path.join(importer, '..', name.join('.'))
       }
     },
@@ -89,6 +91,9 @@ const allModuleCSSPlugin = (): Plugin => {
           noModuleId = url.fileURLToPath(import.meta.resolve(noModuleId))
         }
         //console.log(id, noModuleId)
+        if (!existsSync(noModuleId)) {
+          return
+        }
         return await fs.readFile(noModuleId, { encoding: 'utf-8' })
       }
     }