diff --git a/package-lock.json b/package-lock.json index a94abdda..a6b4b6ed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6628,6 +6628,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -6637,6 +6638,7 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, "license": "MIT", "dependencies": { "color-convert": "^2.0.1" @@ -7662,6 +7664,7 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, "license": "MIT", "dependencies": { "ansi-styles": "^4.1.0", @@ -7854,6 +7857,7 @@ "version": "8.0.1", "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dev": true, "license": "ISC", "dependencies": { "string-width": "^4.2.0", @@ -7868,6 +7872,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, "license": "MIT", "dependencies": { "ansi-styles": "^4.0.0", @@ -7904,6 +7909,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, "license": "MIT", "dependencies": { "color-name": "~1.1.4" @@ -7916,6 +7922,7 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, "license": "MIT" }, "node_modules/colord": { @@ -8578,6 +8585,7 @@ "version": "2.30.0", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.21.0" @@ -9021,6 +9029,7 @@ "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true, "license": "MIT" }, "node_modules/encodeurl": { @@ -10569,6 +10578,7 @@ "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "dev": true, "license": "ISC", "engines": { "node": "6.* || 8.* || >= 10.*" @@ -11067,6 +11077,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -12084,6 +12095,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -13228,6 +13240,7 @@ "version": "4.17.23", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz", "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==", + "dev": true, "license": "MIT" }, "node_modules/lodash.isfinite": { @@ -16839,6 +16852,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -17125,6 +17139,7 @@ "version": "7.8.2", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz", "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==", + "dev": true, "license": "Apache-2.0", "dependencies": { "tslib": "^2.1.0" @@ -18083,7 +18098,8 @@ "node_modules/spawn-command": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz", - "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==" + "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==", + "dev": true }, "node_modules/spdx-correct": { "version": "3.2.0", @@ -18256,6 +18272,7 @@ "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, "license": "MIT", "dependencies": { "emoji-regex": "^8.0.0", @@ -18358,6 +18375,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, "license": "MIT", "dependencies": { "ansi-regex": "^5.0.1" @@ -18443,6 +18461,7 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, "license": "MIT", "dependencies": { "has-flag": "^4.0.0" @@ -18845,6 +18864,7 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz", "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==", + "dev": true, "license": "MIT", "bin": { "tree-kill": "cli.js" @@ -20386,6 +20406,7 @@ "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "dev": true, "license": "ISC", "engines": { "node": ">=10" @@ -20417,6 +20438,7 @@ "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "dev": true, "license": "MIT", "dependencies": { "cliui": "^8.0.1", @@ -20435,6 +20457,7 @@ "version": "21.1.1", "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "dev": true, "license": "ISC", "engines": { "node": ">=12" @@ -20534,7 +20557,6 @@ "version": "1.0.0", "license": "Apache-2.0", "dependencies": { - "@curity/ui-kit-css": "^1.0.0", "@curity/ui-kit-icons": "^1.0.0", "@radix-ui/react-dialog": "^1.1.15", "react": "^19.2.0", @@ -21436,9 +21458,6 @@ "name": "@curity/ui-kit-css-lib", "version": "1.0.0", "license": "Apache-2.0", - "dependencies": { - "concurrently": "^8.2.0" - }, "devDependencies": { "prettier": "^3.4.2", "vite": "^7.3.1" @@ -21493,33 +21512,6 @@ "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==", "license": "MIT" }, - "src/common/css/node_modules/concurrently": { - "version": "8.2.2", - "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.2.tgz", - "integrity": "sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==", - "license": "MIT", - "dependencies": { - "chalk": "^4.1.2", - "date-fns": "^2.30.0", - "lodash": "^4.17.21", - "rxjs": "^7.8.1", - "shell-quote": "^1.8.1", - "spawn-command": "0.0.2", - "supports-color": "^8.1.1", - "tree-kill": "^1.2.2", - "yargs": "^17.7.2" - }, - "bin": { - "conc": "dist/bin/concurrently.js", - "concurrently": "dist/bin/concurrently.js" - }, - "engines": { - "node": "^14.13.0 || >=16.0.0" - }, - "funding": { - "url": "https://github.com/open-cli-tools/concurrently?sponsor=1" - } - }, "src/common/css/node_modules/es-module-lexer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz", @@ -21563,21 +21555,6 @@ "node": ">= 12" } }, - "src/common/css/node_modules/supports-color": { - "version": "8.1.1", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", - "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", - "license": "MIT", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/supports-color?sponsor=1" - } - }, "src/common/icons": { "name": "@curity/ui-kit-icons", "version": "1.0.0", @@ -21600,6 +21577,7 @@ "dependencies": { "@curity/haapi-react-sdk": "*", "@curity/identityserver-haapi-web-driver": "^1.3.0", + "@curity/ui-kit-css": "^1.0.0", "@curity/ui-kit-icons": "^1.0.0", "react": "^19.0.0", "react-dom": "^19.2.7" @@ -22380,6 +22358,7 @@ "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { + "@curity/ui-kit-css": "^1.0.0", "jquery": "3.5.1" }, "devDependencies": { diff --git a/package.json b/package.json index 422c8764..2d35f199 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "src/haapi-react-app" ], "scripts": { - "prestart": "npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-css-lib --workspace @curity/ui-kit-css --workspace @curity/ui-kit-component-library --workspace @curity/ui-kit-identity-server && npm run unzip-libs --workspace @curity/ui-kit-identity-server", + "prestart": "npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-component-library --workspace @curity/ui-kit-identity-server && npm run unzip-libs --workspace @curity/ui-kit-identity-server", "start": "cross-env SKIP_PRESTART=1 concurrently \"npm run start:identity-server\" \"npm run start:ssp\" \"npm run start:haapi-react-app\" \"npm run start:css\" \"npm run start:component-library\" \"open index.html\"", "start:ssp": "npm run -w src/self-service-portal/app start", "start:css": "npm run -w src/common/css start", diff --git a/src/common/component-library/README.md b/src/common/component-library/README.md index c0a3834c..9f47c706 100644 --- a/src/common/component-library/README.md +++ b/src/common/component-library/README.md @@ -151,12 +151,16 @@ src/ - `react-dom` ^18.0.0 ### Internal Dependencies -- `@curity/ui-kit-css` - Base CSS styles - `@curity/ui-kit-icons` - Icon library - `react` - `react-router` - Routing support - `@radix-ui/react-dialog` - Dialog support +### Runtime Requirements +- `@curity/ui-kit-css` - not an npm dependency, but the component styles consume its theme variables + (`--color-primary`, `--button-border-radius`, `--form-field-*`, ...), so the consuming app must load the + Curity CSS (e.g. `import "@curity/ui-kit-css"`) for components to render correctly. + ## Browser Support - Chrome (latest) diff --git a/src/common/component-library/package.json b/src/common/component-library/package.json index 7891a187..43ca8be8 100644 --- a/src/common/component-library/package.json +++ b/src/common/component-library/package.json @@ -28,7 +28,7 @@ "dev": "vite", "start": "vite", "watch": "vite build --watch", - "prebuild": "npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-css || true", + "prebuild": "npm run build --workspace @curity/ui-kit-icons || true", "build": "npm run tsBuild && vite build", "tsBuild": "tsc -b", "tsBuild:watch": "tsc -b -w", @@ -42,7 +42,6 @@ "react-dom": "^19.0.0" }, "dependencies": { - "@curity/ui-kit-css": "^1.0.0", "@curity/ui-kit-icons": "^1.0.0", "@radix-ui/react-dialog": "^1.1.15", "react": "^19.2.0", diff --git a/src/common/component-library/tsconfig.app.json b/src/common/component-library/tsconfig.app.json index 535d629a..da0d2083 100644 --- a/src/common/component-library/tsconfig.app.json +++ b/src/common/component-library/tsconfig.app.json @@ -27,8 +27,7 @@ "paths": { "@/*": ["./src/*"], "@components/*": ["./src/components/*"], - "@curity/ui-kit-icons/*": ["./src/packages/icons/*"], - "@curity/ui-kit-css/*": ["./src/packages/css/*"] + "@curity/ui-kit-icons/*": ["./src/packages/icons/*"] }, "declaration": true, diff --git a/src/common/css/docs/src/components/BaseHead.astro b/src/common/css/docs/src/components/BaseHead.astro index 8e2b256a..55851b81 100644 --- a/src/common/css/docs/src/components/BaseHead.astro +++ b/src/common/css/docs/src/components/BaseHead.astro @@ -1,5 +1,5 @@ --- -import "@curity/ui-kit-css-lib/dist/index.css"; +import "@curity/ui-kit-css"; import '../styles/global.css'; export interface Props { diff --git a/src/common/css/docs/src/components/Install.mdx b/src/common/css/docs/src/components/Install.mdx index 0b4d719f..e75a88a8 100644 --- a/src/common/css/docs/src/components/Install.mdx +++ b/src/common/css/docs/src/components/Install.mdx @@ -1,3 +1,3 @@ ```shell -npm install @curity/ui-kit-css +git clone https://github.com/curityio/ui-kit.git ``` diff --git a/src/common/css/docs/src/pages/index.mdx b/src/common/css/docs/src/pages/index.mdx index f5ec0c3f..48aaee0a 100644 --- a/src/common/css/docs/src/pages/index.mdx +++ b/src/common/css/docs/src/pages/index.mdx @@ -13,7 +13,7 @@ import { Intro } from '@components/Intro'; ## Use in Curity UI Kit repository -```shell -import "@curity/ui-kit-css-lib/dist/index.css"; +```js +import "@curity/ui-kit-css"; ``` diff --git a/src/common/css/docs/src/pages/introduction/gettingstarted.mdx b/src/common/css/docs/src/pages/introduction/gettingstarted.mdx index 9d5e7219..81274bfb 100644 --- a/src/common/css/docs/src/pages/introduction/gettingstarted.mdx +++ b/src/common/css/docs/src/pages/introduction/gettingstarted.mdx @@ -2,15 +2,33 @@ layout: "../../layouts/Page.astro" title: "Install and usage" description: "Usage on how to install and use the library" -updatedAt: "August 08 2022" +updatedAt: "August 18 2026" --- # Install and Usage -## How to use the CSS library +`@curity/ui-kit-css` is not published to the npm registry. It is consumed from this repository — either as a workspace package inside the Curity UI Kit monorepo, or from a clone of the repository. -In most modern JS tooling and frameworks or when using a separate bundler, you can import the CSS directly from `node_modules` like this: +## With a module bundler + +In workspace packages of this repository, or in any project with modern JS tooling that can resolve the package (for example via a `file:` dependency on a clone), import the CSS source directly: ```js -import "@curity/ui-kit-css-lib/dist/index.css"; +import "@curity/ui-kit-css"; +``` + +The bundler inlines the `@import`ed partials and minifies the output as part of your normal build — no separate CSS build step is needed. + +## Without a module bundler + +Projects that link stylesheets directly (plain HTML pages, server-rendered templates) need a single flat CSS file. Build it from the repository root: + +```shell +npm run build:css +``` + +Then copy `src/common/css/lib/dist/index.css` into your project and link it: + +```html + ``` diff --git a/src/common/css/lib/package.json b/src/common/css/lib/package.json index 401d232c..dc5e7f54 100644 --- a/src/common/css/lib/package.json +++ b/src/common/css/lib/package.json @@ -11,10 +11,8 @@ "name": "Curity AB" }, "scripts": { - "start": "vite", "build": "vite build", "watch": "vite build --watch", - "postwatch": "mkdir -p ../../identity-server/build/curity/webroot/assets/css && cp src/!(main|curity-application).css ../../identity-server/build/curity/webroot/assets/css/", "format": "npx prettier --write ./src/**/*.css", "preview": "vite preview", "lint": "stylelint ./src/**/**/*.css", @@ -24,8 +22,5 @@ "devDependencies": { "prettier": "^3.4.2", "vite": "^7.3.1" - }, - "dependencies": { - "concurrently": "^8.2.0" } } diff --git a/src/common/css/lib/readme.md b/src/common/css/lib/readme.md index 455171ea..ff60b6fc 100644 --- a/src/common/css/lib/readme.md +++ b/src/common/css/lib/readme.md @@ -9,7 +9,7 @@ Curity CSS is a small base toolkit of base styles and utility classes. It is the Import ```js -import "@curity/ui-kit-css-lib/dist/index.css"; +import "@curity/ui-kit-css"; ``` [Read the Docs](../docs/README.md) diff --git a/src/common/css/lib/vite.config.js b/src/common/css/lib/vite.config.js index 6d7c902c..b4efb5f3 100644 --- a/src/common/css/lib/vite.config.js +++ b/src/common/css/lib/vite.config.js @@ -1,10 +1,6 @@ import { defineConfig } from 'vite' export default defineConfig({ - server: { - open: false, - port: 5176, - }, build: { minify: true, target: 'esnext', diff --git a/src/common/css/package.json b/src/common/css/package.json index 020108e1..f5eb29af 100644 --- a/src/common/css/package.json +++ b/src/common/css/package.json @@ -5,12 +5,13 @@ "author": "Curity", "license": "Apache-2.0", "private": true, - "main": "index.js", + "exports": { + ".": "./lib/src/main.css", + "./lib/dist/index.css": "./lib/dist/index.css" + }, "scripts": { - "prestart": "test \"$SKIP_PRESTART\" = \"1\" || npm run build:lib", "start:docs": "npm start -w docs", - "start:lib": "npm start -w lib", - "start": "npm-run-all -p start:docs start:lib", + "start": "npm run start:docs", "build:docs": "npm run build -w docs", "build:lib": "npm run build -w lib", "build:all": "npm-run-all -s build:lib build:docs", diff --git a/src/haapi-react-app/package.json b/src/haapi-react-app/package.json index 36d95c1f..a95e8d44 100644 --- a/src/haapi-react-app/package.json +++ b/src/haapi-react-app/package.json @@ -14,22 +14,22 @@ "dist" ], "scripts": { - "prestart": "test \"$SKIP_PRESTART\" = \"1\" || (npm run watch:css-lib & sleep 2 && npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-css --workspace @curity/ui-kit-component-library) || true", - "predev": "test \"$SKIP_PRESTART\" = \"1\" || (npm run watch:css-lib & sleep 2 && npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-css --workspace @curity/ui-kit-component-library) || true", + "prestart": "test \"$SKIP_PRESTART\" = \"1\" || npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-component-library || true", + "predev": "test \"$SKIP_PRESTART\" = \"1\" || npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-component-library || true", "start": "npm run previewer", "dev": "vite --open /start.html", - "prebuild": "npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-css --workspace @curity/ui-kit-component-library || true", + "prebuild": "npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-component-library || true", "build": "tsc -b && vite build", "preview": "vite preview", "test": "vitest", "lint": "eslint .", "prettier-check": "prettier --check .", - "previewer": "vite serve previewer --open", - "watch:css-lib": "npm run watch --workspace @curity/ui-kit-css-lib" + "previewer": "vite serve previewer --open" }, "dependencies": { "@curity/haapi-react-sdk": "*", "@curity/identityserver-haapi-web-driver": "^1.3.0", + "@curity/ui-kit-css": "^1.0.0", "@curity/ui-kit-icons": "^1.0.0", "react": "^19.0.0", "react-dom": "^19.2.7" diff --git a/src/haapi-react-app/previewer/shared/styles/previewer.css b/src/haapi-react-app/previewer/shared/styles/previewer.css index f8aa66a4..493534a7 100644 --- a/src/haapi-react-app/previewer/shared/styles/previewer.css +++ b/src/haapi-react-app/previewer/shared/styles/previewer.css @@ -9,7 +9,7 @@ * For further information, please contact Curity AB. */ -@import '@curity/ui-kit-css/lib/dist/index.css'; +@import '@curity/ui-kit-css'; :root { --type-regular: 'Roboto-Regular', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, helvetica, arial, sans-serif; diff --git a/src/haapi-react-app/src/shared/util/css/styles.css b/src/haapi-react-app/src/shared/util/css/styles.css index de602993..4080c12a 100644 --- a/src/haapi-react-app/src/shared/util/css/styles.css +++ b/src/haapi-react-app/src/shared/util/css/styles.css @@ -9,7 +9,7 @@ * For further information, please contact Curity AB. */ -@import '@curity/ui-kit-css/lib/dist/index.css'; +@import '@curity/ui-kit-css'; /* Base styles */ :root { diff --git a/src/identity-server/package.json b/src/identity-server/package.json index 3e3b04e6..df41f80b 100644 --- a/src/identity-server/package.json +++ b/src/identity-server/package.json @@ -13,21 +13,19 @@ "clean": "rm -rf build && npm run clean-libs", "preinstall": "cp ./git/hooks/* .git/hooks/ || true", "start": "concurrently --kill-others \" npm run java\" \" npm run dev\"", - "prestart": "test \"$SKIP_PRESTART\" = \"1\" || (npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-css-lib --workspace @curity/ui-kit-css --workspace @curity/ui-kit-identity-server && npm run unzip-libs) || true", - "postwatch": "mkdir -p ./build/curity/webroot/assets/css && cp src/!(main|curity-application).css ../../identity-server/build/curity/webroot/assets/css/", - "prebuild": "npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-css-lib --workspace @curity/ui-kit-css || true", + "prestart": "test \"$SKIP_PRESTART\" = \"1\" || (npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-identity-server && npm run unzip-libs) || true", + "prebuild": "npm run build --workspace @curity/ui-kit-icons || true", "build:styles": "vite build --mode styles", "build:ui": "vite build --mode ui", "build": "npm run build:styles && npm run build:ui", "watch:styles": "vite build --watch --mode styles", "watch:ui": "vite build --watch --mode ui", - "watch:css-lib": "npm run watch --workspace @curity/ui-kit-css-lib", - "predev": "npm run build --workspace @curity/ui-kit-css-lib", - "dev": "npm run watch:css-lib & sleep 2 && concurrently \"npm run watch:styles\" \"npm run watch:ui\"", + "dev": "concurrently \"npm run watch:styles\" \"npm run watch:ui\"", "unzip-libs": "node unzip-libs.mjs", "clean-libs": "find ../../lib -mindepth 1 -maxdepth 1 ! -name '.gitignore' ! -name 'ui-kit-runtime.zip' -exec rm -rf {} +" }, "dependencies": { + "@curity/ui-kit-css": "^1.0.0", "jquery": "3.5.1" }, "devDependencies": { diff --git a/src/identity-server/styles/index.js b/src/identity-server/styles/index.js index af9219f6..52911dd7 100644 --- a/src/identity-server/styles/index.js +++ b/src/identity-server/styles/index.js @@ -1,5 +1,5 @@ /* Curity CSS */ -import "@curity/ui-kit-css/lib/dist/index.css"; +import "@curity/ui-kit-css"; /* Application styles */ import "./css/account-linking.css"; diff --git a/src/identity-server/vite.config.ts b/src/identity-server/vite.config.ts index 94de9db6..cd87e15c 100644 --- a/src/identity-server/vite.config.ts +++ b/src/identity-server/vite.config.ts @@ -54,17 +54,6 @@ export default defineConfig(({ mode }) => { if (mode === "styles") { return { ...shared, - plugins: [ - ...shared.plugins, - { - name: "watch-css-lib-source", - buildStart() { - if (this.meta.watchMode) { - this.addWatchFile(path.resolve(__dirname, "../common/css/lib/src")); - } - }, - }, - ], build: { ...shared.build, emptyOutDir: false, diff --git a/src/identity-server/vite.plugins.ts b/src/identity-server/vite.plugins.ts index 2cc40f5b..07fe2a5d 100644 --- a/src/identity-server/vite.plugins.ts +++ b/src/identity-server/vite.plugins.ts @@ -45,6 +45,8 @@ export function createSharedPlugins(): PluginOption[] { dest: "templates/template-areas", }, { + // Watch mode only tracks files reachable from the module graph, so a CSS file + // added here while watching (e.g. a new theme) needs a watcher restart to be copied. src: normalizePath( path.resolve(__dirname, "../common/css/lib/src/!(main|curity-application).css") ), diff --git a/src/self-service-portal/app/package.json b/src/self-service-portal/app/package.json index 7e8e6bf3..e15340df 100644 --- a/src/self-service-portal/app/package.json +++ b/src/self-service-portal/app/package.json @@ -9,16 +9,15 @@ "npm": ">=10.9.4" }, "scripts": { - "prestart": "test \"$SKIP_PRESTART\" = \"1\" || (npm run watch:css-lib & sleep 2 && npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-css --workspace @curity/ui-kit-component-library) || true", + "prestart": "test \"$SKIP_PRESTART\" = \"1\" || npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-component-library || true", "start": "vite --config vite-previewer.config.ts --mode previewer", "dev": "vite --open", - "prebuild": "npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-css --workspace @curity/ui-kit-component-library || true", + "prebuild": "npm run build --workspace @curity/ui-kit-icons --workspace @curity/ui-kit-component-library || true", "build": "npm run tsBuild && vite build", "tsBuild": "tsc -b", "tsBuild:watch": "tsc -b -w", "lint": "eslint .", "lint:watch": "npx onchange '**/*.ts?(x)' -- npm run lint", - "watch:css-lib": "npm run watch --workspace @curity/ui-kit-css-lib", "preview": "vite preview", "test": "vitest", "coverage": "vitest run --coverage", diff --git a/src/self-service-portal/app/previewer/main.tsx b/src/self-service-portal/app/previewer/main.tsx index f9aac44c..13de8993 100644 --- a/src/self-service-portal/app/previewer/main.tsx +++ b/src/self-service-portal/app/previewer/main.tsx @@ -15,7 +15,7 @@ import { App } from '../src/App'; import { mockWorker } from './mocks/browser'; import '@curity/ui-kit-component-library/dist/component-library.css'; -import '@curity/ui-kit-css/lib/dist/index.css'; +import '@curity/ui-kit-css'; import '@styles/index.css'; mockWorker.start().then(() => { diff --git a/src/self-service-portal/app/src/main.tsx b/src/self-service-portal/app/src/main.tsx index 408c31b2..ecba2f4c 100644 --- a/src/self-service-portal/app/src/main.tsx +++ b/src/self-service-portal/app/src/main.tsx @@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client'; import { App } from './App'; import '@curity/ui-kit-component-library/dist/component-library.css'; -import '@curity/ui-kit-css/lib/dist/index.css'; +import '@curity/ui-kit-css'; import '@styles/index.css'; createRoot(document.getElementById('root')!).render( diff --git a/src/self-service-portal/app/tsconfig.app.json b/src/self-service-portal/app/tsconfig.app.json index d4582f8a..da513647 100644 --- a/src/self-service-portal/app/tsconfig.app.json +++ b/src/self-service-portal/app/tsconfig.app.json @@ -30,7 +30,6 @@ "@styles/*": ["./src/styles/*"], "@util/*": ["./src/util/*"], "@curity/ui-kit-icons/*": ["./src/packages/icons/*"], - "@curity/ui-kit-css/*": ["./src/packages/css/*"], "@curity/ui-kit-component-library": ["./src/packages/component-library/src/index.ts"], "@curity/ui-kit-component-library/*": ["./src/packages/component-library/src/*"] }