FEATURE: CSS build refactor (make react-ui-components easy to use)

.gitignore

@@ -13,11 +13,6 @@ lcov.info
 #
 Build/Selenium/Settings.yaml
 
-#
-# Custom livereload settings
-#
-.webpack.livereload.local.js
-
 #
 # Application & development dependencies.
 #
@@ -29,6 +24,7 @@ packages/*/yarn.lock
 #
 Resources/Public/Build/*
 !Resources/Public/Build/.gitkeep
+*.tsbuildinfo
 
 #
 # editors / IDEs
@@ -47,4 +43,3 @@ Resources/Public/Build/*
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
-tsconfig.tsbuildinfo

Makefile

@@ -75,42 +75,26 @@ setup: check-requirements install build ## Run a clean setup
 # Builds
 ################################################################################
 
-
-# TODO: figure out how to pass a parameter to other targets to reduce redundancy
 # Builds the subpackages for standalone use.
 build-subpackages:
-	yarn workspaces foreach --parallel --topological-dev run build
-	make build-react-ui-components-standalone
-
-# we build the react UI components ready for standalone usage;
-# so that they can be published on NPM properly.
-
-## Build the react UI components ready for standalone usage.
-build-react-ui-components-standalone:
-	yarn workspace @neos-project/react-ui-components build-standalone-esm
+	yarn workspaces foreach --parallel run build
 
 ## Runs the development build.
 build:
-	NEOS_BUILD_ROOT=$(shell pwd) node esbuild.js
+	node esbuild.js
 
 ## Watches the source files for changes and runs a build in case.
 build-watch:
-	NEOS_BUILD_ROOT=$(shell pwd) node esbuild.js --watch
-
-## Watches (and polls) the source files on a file share.
-build-watch-poll:
-	echo "not implemented in esbuild, yet! PR Welcome!"
+	node esbuild.js --watch
 
 # clean anything before building for production just to be sure
 ## Runs the production build. And also builds the subpackages for standalone use.
 build-production:
-	$(cross-env) NODE_ENV=production NEOS_BUILD_ROOT=$(shell pwd) \
-		node esbuild.js
+	$(cross-env) NODE_ENV=production node esbuild.js
 	make build-subpackages
 
 build-e2e-testing:
-	$(cross-env) NODE_ENV=production NEOS_BUILD_ROOT=$(shell pwd) \
-		node esbuild.js --e2e-testing
+	$(cross-env) NODE_ENV=production node esbuild.js --e2e-testing
 
 ################################################################################
 # Code Quality
@@ -189,7 +173,7 @@ publish-npm: called-with-version
 
 ## Cleans dependency folders
 clean:
-	rm -Rf node_modules; rm -rf packages/*/node_modules
+	rm -rf node_modules; rm -rf packages/*/node_modules
 
 
 ################################################################################

cssModules.js

@@ -0,0 +1,142 @@
+const { transform } = require('lightningcss');
+const { createHash } = require('crypto');
+const fs = require("fs/promises");
+const { dirname, join } = require("path");
+
+/**
+ * A generic cssModules plugin for esbuild based on lightningcss
+ * 
+ * @param {Object} options
+ * @param {RegExp} options.includeFilter
+ * @param {RegExp} options.excludeFilter
+ * @param {import("lightningcss").TransformOptions["visitor"]} options.visitor
+ * @param {import("lightningcss").TransformOptions["targets"]} options.targets
+ * @param {import("lightningcss").TransformOptions["drafts"]} options.drafts
+ * @param {import("lightningcss").CSSModulesConfig["pattern"]} options.cssModulesPattern
+ * @return {import("esbuild").Plugin}
+ */
+const cssModules = (options) => {
+    return {
+        name: "css-modules",
+        setup: ({onLoad, onResolve, initialOptions}) => {
+            const transpiledCssModulesMap = new Map()
+
+            onResolve({filter: /^css-modules:\/\//}, ({path}) => {
+                return {
+                    namespace: "css-modules",
+                    path,
+                }
+            })
+
+            onLoad({filter: /.*/, namespace: "css-modules"}, ({path}) => {
+                const {code, resolveDir} = transpiledCssModulesMap.get(path)
+                return {
+                    contents: code,
+                    loader: initialOptions.loader?.[".css"] ?? "css",
+                    resolveDir,
+
+                }
+            })
+
+            onLoad({filter: options.includeFilter ?? /\.module\.css$/}, async ({path}) => {
+                if (options.excludeFilter && options.excludeFilter.test(path)) {
+                    return;
+                }
+
+                const rawCssBuffer = await fs.readFile(path)
+
+                const { code, map, exports } = transform({
+                    filename: path,
+                    code: rawCssBuffer,
+                    analyzeDependencies: false,
+                    cssModules: {
+                        pattern: options.cssModulesPattern ?? `[hash]_[local]`
+                    },
+                    sourceMap: true,
+                    targets: options.targets,
+                    drafts: options.drafts,
+                    visitor: options.visitor,
+                    // this way the correct relative path for the source map will be generated ;)
+                    projectRoot: join(initialOptions.absWorkingDir || process.cwd(), initialOptions.outdir)
+                });
+
+                if (!exports) {
+                    return;
+                }
+
+                const id = "css-modules:\/\/" + createHash("sha256").update(path).digest('base64url') + '.css'
+
+                const finalcode = code.toString("utf8") + `/*# sourceMappingURL=data:application/json;base64,${map.toString("base64")} */`;
+
+                transpiledCssModulesMap.set(
+                    id,
+                    { code: finalcode, resolveDir: dirname(path) }
+                )
+
+                const quote = JSON.stringify;
+
+                const escape = (string) => JSON.stringify(string).slice(1, -1)
+
+                let contents = "";
+
+                /** @type {Map<string, string>} */
+                const dependencies = new Map()
+
+                /** @param {String} path */
+                const importDependeny = (path) => {
+                    if (dependencies.has(path)) {
+                        return dependencies.get(path)
+                    }
+                    const dependenciesName = `dependency_${dependencies.size}`
+                    // prepend dependeny to to the contents
+                    contents = `import ${dependenciesName} from ${quote(path)}\n` + contents;
+                    dependencies.set(path, dependenciesName)
+                    return dependenciesName;
+                }
+
+                contents += `import ${quote(id)}\n`;
+                contents += `export default {`;
+
+                for (const [cssClassReadableName, cssClassExport] of Object.entries(exports)) {
+
+                    let compiledCssClasses = `"${escape(cssClassExport.name)}`
+
+                    if (cssClassExport.composes) {
+                        for (const composition of cssClassExport.composes) {
+                            switch (composition.type) {
+                                case "local":
+                                    compiledCssClasses += " " + escape(composition.name)
+                                    break;
+
+                                case "global":
+                                    compiledCssClasses += " " + escape(composition.name)
+                                    break;
+
+                                case "dependency":
+                                    compiledCssClasses += ` " + ${importDependeny(composition.specifier)}[${quote(composition.name)}] + "`
+                                    break;
+                            }
+                        }
+                    }
+
+                    compiledCssClasses += `"`
+
+                    contents += `${quote(cssClassReadableName)}:${compiledCssClasses},`
+                }
+
+                contents += "}"
+
+                // https://github.com/evanw/esbuild/issues/2943#issuecomment-1439755408
+                const emptyishSourceMap = "data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIiJdLCJtYXBwaW5ncyI6IkEifQ==";
+                contents += `\n//# sourceMappingURL=${emptyishSourceMap}`
+
+                return {
+                    contents,
+                    loader: "js",
+                }
+            })
+        }    
+    }
+}
+
+module.exports = { cssModules }

cssVariables.css

@@ -0,0 +1,63 @@
+/** Global CSS variables for Neos.Ui */
+
+/** they are compiled into the source code via our buildstack */
+:root {
+    --spacing-GoldenUnit: 40px;
+    --spacing-Full: 16px;
+    --spacing-Half: 8px;
+    --spacing-Quarter: 4px;
+    --size-SidebarWidth: 320px;
+    --transition-Fast: .1s;
+    --transition-Default: .25s;
+    --transition-Slow: .5s;
+    --zIndex-SecondaryToolbar-LinkIconButtonFlyout: 1;
+    --zIndex-FlashMessageContainer: 60;
+    --zIndex-LoadingIndicatorContainer: 50;
+    --zIndex-SecondaryInspector-Context: 1;
+    --zIndex-SecondaryInspector-Iframe: 2;
+    --zIndex-SecondaryInspector-Close: 3;
+    --zIndex-SecondaryInspectorElevated-Context: 1;
+    --zIndex-SecondaryInspectorElevated-DropdownContents: 2;
+    --zIndex-Dialog-Context: 1;
+    --zIndex-FullScreenClose-Context: 1;
+    --zIndex-Drawer: 45;
+    --zIndex-Bar-Context: 1;
+    --zIndex-PrimaryToolbar: 40;
+    --zIndex-CheckboxInput-Context: 1;
+    --zIndex-DropdownContents-Context: 1;
+    --zIndex-SelectBoxContents: 40;
+    --zIndex-NotInlineEditableOverlay-Context: 1;
+    --zIndex-CalendarFakeInputMirror-Context: 1;
+    --zIndex-RdtPicker-Context: 1;
+    --zIndex-SideBar-DropTargetBefore: 1;
+    --zIndex-SideBar-DropTargetAfter: 2;
+    --zIndex-WrapperDropdown-Context: 1;
+    --zIndex-UnappliedChangesOverlay-Context: 1;
+    --zIndex-NodeToolBar: 2147483646;
+    --fontSize-Base: 14px;
+    --fontSize-Small: 12px;
+    --fontsHeadings-Family: "Noto Sans";
+    --fontsHeadings-Style: "Regular";
+    --fontsHeadings-CssWeight: 400;
+    --fontsCopy-Family: "Noto Sans";
+    --fontsCopy-Style: "Regular";
+    --fontsCopy-CssWeight: 400;
+    --colors-PrimaryViolet: #26224C;
+    --colors-PrimaryVioletHover: #342f5f;
+    --colors-PrimaryBlue: #00ADEE;
+    --colors-PrimaryBlueHover: #35c3f8;
+    --colors-ContrastDarkest: #141414;
+    --colors-ContrastDarker: #222;
+    --colors-ContrastDark: #3f3f3f;
+    --colors-ContrastNeutral: #323232;
+    --colors-ContrastBright: #999;
+    --colors-ContrastBrighter: #adadad;
+    --colors-ContrastBrightest: #FFF;
+    --colors-Success: #00a338;
+    --colors-SuccessHover: #0bb344;
+    --colors-Warn: #ff8700;
+    --colors-WarnHover: #fda23d;
+    --colors-Error: #ff460d;
+    --colors-ErrorHover: #ff6a3c;
+    --colors-UncheckedCheckboxTick: #5B5B5B;
+}

cssVariables.js

@@ -0,0 +1,49 @@
+const { transform } = require('lightningcss');
+const { readFileSync } = require("fs");
+const { join } = require("path")
+
+/** @type {Record<string, import('lightningcss').TokenOrValue[]>} */
+const cssVariables = {}
+
+// we extract all custom variable declarations so we can use the css syntax
+// to declare the variables and dont need to write them in lightningcss AST ourselves
+transform({
+    code: readFileSync(join(__dirname, "cssVariables.css")),
+    visitor: {
+        Declaration: ({property, value}) => {
+            if (property !== "custom") {
+                throw new Error("Only variable declarations expected.")
+            }
+            cssVariables[value.name] = value.value
+        }
+    }
+})
+
+/**
+ * lightningcss AST visitor (plugin), to compile the used CSS variables directly into the css
+ * 
+ * @returns {import("lightningcss").Visitor}
+ */
+const compileWithCssVariables = () => ({
+    Variable: (variable) => {
+        const variableValueTokens = cssVariables[variable.name.ident];
+        return [
+            ...variableValueTokens,
+            {
+                // we a append a single space to the tokenList so that when the value is insertet
+                // it wont collide with further parameters like in this case:
+                // padding: 0 var(--spacing-GoldenUnit) 0 var(--spacing-Full);
+                // otherwise we would get:
+                // padding: 0 40px0 16px
+                //               |__________ here must be a space
+                type: "token",
+                value: {
+                    type: "delim",
+                    value: " "
+                }
+            }
+        ]
+    }
+})
+
+module.exports = { compileWithCssVariables }