diff --git a/.gitignore b/.gitignore index 407b3ae..1dad684 100644 --- a/.gitignore +++ b/.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 diff --git a/package-lock.json b/package-lock.json index 829563c..4dde160 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,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", @@ -8362,6 +8363,23 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/flat-cache/node_modules/rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", + "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "deprecated": "Rimraf versions prior to v4 are no longer supported", + "dev": true, + "license": "ISC", + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/flatted": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz", @@ -13845,23 +13863,6 @@ "dev": true, "license": "MIT" }, - "node_modules/rimraf": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", - "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", - "deprecated": "Rimraf versions prior to v4 are no longer supported", - "dev": true, - "license": "ISC", - "dependencies": { - "glob": "^7.1.3" - }, - "bin": { - "rimraf": "bin.js" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/rollup": { "version": "4.40.2", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.2.tgz", diff --git a/package.json b/package.json index f65c8a8..40f7d81 100644 --- a/package.json +++ b/package.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", diff --git a/scripts/custom-css-properties.js b/scripts/custom-css-properties.js new file mode 100644 index 0000000..3d90e59 --- /dev/null +++ b/scripts/custom-css-properties.js @@ -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(); diff --git a/scripts/docs.js b/scripts/docs.js index 45b0cb6..ed3a872 100644 --- a/scripts/docs.js +++ b/scripts/docs.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"; diff --git a/scripts/environment.js b/scripts/environment.js index 780cba5..c85186c 100644 --- a/scripts/environment.js +++ b/scripts/environment.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"; diff --git a/scripts/package-json.js b/scripts/package-json.js index 0b5633f..ffcff25 100644 --- a/scripts/package-json.js +++ b/scripts/package-json.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")); diff --git a/scripts/test-utils.js b/scripts/test-utils.js index e2f78cc..fe8caa8 100644 --- a/scripts/test-utils.js +++ b/scripts/test-utils.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) => { diff --git a/scripts/utils/custom-css-properties-list.js b/scripts/utils/custom-css-properties-list.js new file mode 100644 index 0000000..4fabb3c --- /dev/null +++ b/scripts/utils/custom-css-properties-list.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; diff --git a/scripts/utils.js b/scripts/utils/files.js similarity index 80% rename from scripts/utils.js rename to scripts/utils/files.js index 9285648..9259d1a 100644 --- a/scripts/utils.js +++ b/scripts/utils/files.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) diff --git a/scripts/pluralize.js b/scripts/utils/pluralize.js similarity index 100% rename from scripts/pluralize.js rename to scripts/utils/pluralize.js diff --git a/scripts/utils/workspace.js b/scripts/utils/workspace.js new file mode 100644 index 0000000..4cf471a --- /dev/null +++ b/scripts/utils/workspace.js @@ -0,0 +1,5 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import process from "process"; + +export const gitCommitVersion = (process.env.GITHUB_SHA || "HEAD").slice(0, 8); diff --git a/src/avatar/internal.tsx b/src/avatar/internal.tsx index 98a07ab..7cd7ff3 100644 --- a/src/avatar/internal.tsx +++ b/src/avatar/internal.tsx @@ -6,10 +6,10 @@ import clsx from "clsx"; import { useMergeRefs, warnOnce } from "@cloudscape-design/component-toolkit/internal"; import Icon from "@cloudscape-design/components/icon"; import Tooltip from "@cloudscape-design/components/internal/tooltip-do-not-use"; -import * as awsui from "@cloudscape-design/design-tokens"; import { getDataAttributes } from "../internal/base-component/get-data-attributes"; import { InternalBaseComponentProps } from "../internal/base-component/use-base-component"; +import customCssProps from "../internal/generated/custom-css-properties"; import { AvatarProps } from "./interfaces.js"; import LoadingDots from "./loading-dots"; @@ -33,7 +33,7 @@ const AvatarContent = ({ } if (imgUrl) { - return ; + return ; } if (initials) { @@ -43,11 +43,7 @@ const AvatarContent = ({ warnOnce("Avatar", `"initials" is longer than 2 characters. Only the first two characters are shown.`); } - return ( - - {letters} - - ); + return {letters}; } return ; @@ -103,7 +99,7 @@ export default function InternalAvatar({ role="img" aria-label={ariaLabel} {...tooltipAttributes} - style={{ height: computedSize, width: computedSize }} + style={{ [customCssProps.avatarSize]: `${computedSize}px` }} > {showTooltip && tooltipText && ( +