IS-11682 Consume UI Kit CSS from source instead of the built artifact

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",

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",

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,

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 {

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";
 ```
 </div>

src/common/css/docs/src/pages/introduction/gettingstarted.mdx

@@ -12,5 +12,5 @@ updatedAt: "August 08 2022"
 In most modern JS tooling and frameworks or when using a separate bundler, you can import the CSS directly from `node_modules` like this:
 
 ```js
-import "@curity/ui-kit-css-lib/dist/index.css";
+import "@curity/ui-kit-css";
 ```

src/common/css/lib/package.json

@@ -14,7 +14,6 @@
     "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",

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)

src/common/css/package.json

@@ -5,12 +5,15 @@
   "author": "Curity",
   "license": "Apache-2.0",
   "private": true,
-  "main": "index.js",
+  "exports": {
+    ".": "./lib/src/main.css",
+    "./src/*": "./lib/src/*",
+    "./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",

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"

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;

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 {

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": {

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";

src/identity-server/vite.config.ts

@@ -54,17 +54,7 @@ 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"));
-            }
-          },
-        },
-      ],
+      plugins: shared.plugins,
       build: {
         ...shared.build,
         emptyOutDir: false,

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",

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(() => {

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(

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/*"]
     }