Update: Color names and build stack

.nvmrc

@@ -1 +1 @@
-20
+22

Resources/Private/Editor/ColorPicker/ColorName.tsx

@@ -1,10 +1,10 @@
 //@ts-ignore
 import React from "react";
 import nearestColor from "nearest-color";
-import colorNameList from "color-name-list/dist/colornames.esm.mjs";
+import { colornames } from "color-name-list";
 
 // nearestColor need objects {name => hex} as input
-const colors = colorNameList.reduce(
+const colors = colornames.reduce(
     (o: object, { name, hex }: { name: string; hex: string }) => Object.assign(o, { [name]: hex }),
     {},
 );

Resources/Private/Editor/ColorPicker/Components/RangeSlider.tsx

@@ -52,6 +52,7 @@ const styles = stylex.create({
         },
     },
     rangeSlider: {
+        "--opacity": 0.7,
         width: "100%",
         height: sizes.input,
         appearance: "none",
@@ -60,6 +61,10 @@ const styles = stylex.create({
         outline: "none",
         backgroundColor: colors.contrastNeutral,
 
+        ":focus": {
+            "--opacity": 1,
+        },
+
         "::-webkit-slider-thumb": {
             appearance: "none",
             backgroundColor: colors.primaryBlue,
@@ -69,15 +74,13 @@ const styles = stylex.create({
             width: 20,
             borderWidth: 0,
             borderRadius: sizes.borderRadius,
-            transitionProperty: "transform, background-color",
+            opacity: "var(--opacity)",
+            transitionProperty: "transform, opacity",
             transitionTimingFunction: transitions.timing,
             transitionDuration: transitions.default,
 
             ":hover": {
-                backgroundColor: colors.primaryBlueHover,
-            },
-            ":focus": {
-                backgroundColor: colors.primaryBlueHover,
+                opacity: 1,
             },
             ":active": {
                 cursor: "grabbing",
@@ -93,15 +96,13 @@ const styles = stylex.create({
             width: 20,
             borderWidth: 0,
             borderRadius: sizes.borderRadius,
-            transitionProperty: "transform, background-color",
+            opacity: "var(--opacity)",
+            transitionProperty: "transform, opacity",
             transitionTimingFunction: transitions.timing,
             transitionDuration: transitions.default,
 
             ":hover": {
-                backgroundColor: colors.primaryBlueHover,
-            },
-            ":focus": {
-                backgroundColor: colors.primaryBlueHover,
+                opacity: 1,
             },
             ":active": {
                 cursor: "grabbing",

build.mjs

@@ -1,17 +1,22 @@
 import esbuild from "esbuild";
-import extensibilityMap from "@neos-project/neos-ui-extensibility/extensibilityMap.json" assert { type: "json" };
+import extensibilityMap from "@neos-project/neos-ui-extensibility/extensibilityMap.json" with { type: "json" };
 import stylexPlugin from "@stylexjs/esbuild-plugin";
 import path from "path";
 import { fileURLToPath } from "url";
 
+// eslint-disable-next-line no-undef
+const argv = process.argv;
+const watch = argv.includes("--watch");
+const dev = argv.includes("--dev");
+const minify = !dev && !watch;
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 /** @type {import("esbuild").BuildOptions} */
 const options = {
     logLevel: "info",
     bundle: true,
-    minify: true,
-    sourcemap: true,
+    minify,
+    sourcemap: watch,
     target: "es2020",
     format: "esm",
     splitting: true,
@@ -27,6 +32,8 @@ const options = {
     alias: extensibilityMap,
     plugins: [
         stylexPlugin({
+            classNamePrefix: "colorpicker-",
+            useCSSLayers: false,
             dev: false,
             generatedCSSFileName: path.resolve(__dirname, "Resources/Public/Plugin.css"),
             stylexImports: ["@stylexjs/stylex"],
@@ -39,8 +46,13 @@ const options = {
     ],
 };
 
-// eslint-disable-next-line no-undef
-if (process.argv.includes("--watch")) {
+if (minify) {
+    options.drop = ["debugger"];
+    options.pure = ["console.log"];
+    options.dropLabels = ["DEV"];
+}
+
+if (watch) {
     esbuild.context(options).then((ctx) => ctx.watch());
 } else {
     esbuild.build(options);

package.json

@@ -3,25 +3,25 @@
   "license": "proprietary",
   "private": true,
   "scripts": {
-    "build": "node build.mjs",
-    "watch": "node build.mjs --watch"
+    "build": "NODE_OPTIONS=--disable-warning=ExperimentalWarning node build.mjs",
+    "watch": "NODE_OPTIONS=--disable-warning=ExperimentalWarning node build.mjs --watch"
   },
   "devDependencies": {
     "@neos-project/neos-ui-extensibility": "~8.3.11",
     "@neos-project/react-ui-components": "^8.3.11",
-    "@stylexjs/esbuild-plugin": "^0.8.0",
-    "@stylexjs/stylex": "^0.8.0",
+    "@stylexjs/esbuild-plugin": "^0.9.3",
+    "@stylexjs/stylex": "^0.9.3",
     "@types/nearest-color": "^0.4.1",
     "@types/react-redux": "^7.1.34",
     "carbon-neos-loadinganimation": "^1.1.1",
-    "color-name-list": "^10.28.0",
+    "color-name-list": "^11.0.0",
     "colorjs.io": "^0.5.2",
-    "esbuild": "^0.24.0",
-    "eslint": "^9.13.0",
+    "esbuild": "^0.24.2",
+    "eslint": "^9.17.0",
     "nearest-color": "^0.4.4",
     "onchange": "^7.1.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "react-colorful": "^5.6.1",
-    "typescript-eslint": "^8.11.0"
+    "typescript-eslint": "^8.18.1"
   }
 }