chore: Support custom css properties (and use in avatar) (#78)

Author: gethinwebster

.gitignore

@@ -6,4 +6,5 @@ lib
 dist
 /src/test-utils/selectors
 /src/test-utils/dom/index.ts
+/src/internal/generated/custom-css-properties
 .DS_STORE

package-lock.json

@@ -8,7 +8,7 @@
   "homepage": "https://cloudscape.design",
   "scripts": {
     "prebuild": "rm -rf lib dist .cache",
-    "build": "npm-run-all build:pkg --parallel build:src:* --parallel build:pages:* build:themeable",
+    "build": "npm-run-all build:pkg build:custom-css-properties --parallel build:src:* --parallel build:pages:* build:themeable",
     "lint": "npm-run-all --parallel lint:*",
     "lint:eslint": "eslint --ignore-path .gitignore --ext ts,tsx,js .",
     "lint:stylelint": "stylelint --ignore-path .gitignore '{src,pages}/**/*.{css,scss}'",
@@ -27,6 +27,7 @@
     "start:watch:ts": "npm run build:src:js -- --watch",
     "start:watch:css": "chokidar \"./src/**/*.scss\" -c \"npm run build:src:css\"",
     "build:pkg": "node scripts/package-json.js",
+    "build:custom-css-properties": "node scripts/custom-css-properties.js",
     "build:src:js": "tsc -p tsconfig.json --inlineSources --sourceMap",
     "build:src:css": "node scripts/compile-styles.js",
     "build:src:test-utils": "node scripts/test-utils.js",
@@ -78,6 +79,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^3.0.7",
     "@vitest/eslint-plugin": "^1.1.31",
+    "change-case": "^4.1.2",
     "chokidar-cli": "^3.0.0",
     "deep-freeze-es6": "^1.4.1",
     "delay-cli": "^2.0.0",

package.json

@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { Buffer } from "buffer";
+import { getHashDigest } from "loader-utils";
+import path from "path";
+
+import customCssPropertiesList from "./utils/custom-css-properties-list.js";
+import { writeSourceFile } from "./utils/files.js";
+import { gitCommitVersion } from "./utils/workspace.js";
+
+const outputBasePath = "src/internal/generated/custom-css-properties";
+const hash = getHashDigest(Buffer.from(JSON.stringify(customCssPropertiesList)), "md5", "base36", 6);
+
+const getHashedProperty = (property) => {
+  return `--awsui-${property.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase())}-${hash}`;
+};
+
+function writeJsFile() {
+  const filepath = path.join(outputBasePath, "index.ts");
+
+  writeSourceFile(
+    filepath,
+    `
+      const customCSSPropertiesMap = {
+        ${customCssPropertiesList.map((property) => `"${property}": "${getHashedProperty(property)}",`).join("\n")}
+      };
+      export default customCSSPropertiesMap;
+    `,
+  );
+}
+
+function writeSassFile() {
+  const filepath = path.join(outputBasePath, "index.scss");
+
+  writeSourceFile(
+    filepath,
+    `
+    // Build environment
+    $awsui-commit-hash: "${gitCommitVersion}";
+    // Manually managed CSS-variables
+    ${customCssPropertiesList.map((property) => `$${property}: ${getHashedProperty(property)};`).join("\n")}
+    `,
+  );
+}
+
+writeJsFile();
+writeSassFile();

scripts/custom-css-properties.js

@@ -4,7 +4,7 @@ import path from "node:path";
 
 import { documentTestUtils, writeComponentsDocumentation } from "@cloudscape-design/documenter";
 
-import { writeSourceFile } from "./utils.js";
+import { writeSourceFile } from "./utils/files.js";
 
 const targetDir = "lib/components/internal/api-docs";
 

scripts/docs.js

@@ -3,10 +3,10 @@
 
 import * as fs from "node:fs";
 import path from "node:path";
-import process from "node:process";
+
+import { gitCommitVersion } from "./utils/workspace.js";
 
 const pkg = JSON.parse(fs.readFileSync("package.json", "utf-8"));
-const gitCommitVersion = (process.env.GITHUB_SHA || "HEAD").slice(0, 8);
 const packageVersion = `${pkg.version} (${gitCommitVersion})`;
 
 const basePath = "lib/components/internal/environment";

scripts/environment.js

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import fs from "node:fs";
 
-import { writeJSON } from "./utils.js";
+import { writeJSON } from "./utils/files.js";
 
 const pkg = JSON.parse(fs.readFileSync("package.json", "utf-8"));
 

scripts/package-json.js

@@ -1,13 +1,13 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { pascalCase } from "change-case";
 import { execaSync } from "execa";
 import { globbySync } from "globby";
 import path from "node:path";
 
 import { generateTestUtils } from "@cloudscape-design/test-utils-converter";
 
-import { pluralizeComponentName } from "./pluralize.js";
-import { pascalCase } from "./utils.js";
+import { pluralizeComponentName } from "./utils/pluralize.js";
 
 const componentNames = globbySync(["src/test-utils/dom/**/index.ts", "!src/test-utils/dom/index.ts"]).map(
   (filePath) => {

scripts/test-utils.js

@@ -0,0 +1,7 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+/*
+ * This file is only needed to generate the proper js and scss files in custom-css-properties script
+ */
+const customCssPropertiesList = ["avatarSize"];
+export default customCssPropertiesList;

scripts/utils/custom-css-properties-list.js

@@ -1,17 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import lodash from "lodash";
 import fs from "node:fs";
 import path from "node:path";
 
-export function pascalCase(text) {
-  return capitalize(lodash.camelCase(text));
-}
-
-function capitalize(text) {
-  return text[0].toUpperCase() + text.slice(1);
-}
-
 export function listPublicDirs(baseDir) {
   return fs
     .readdirSync(baseDir)