chore(deps): update dependency tailwindcss to v4 (#1102)

* chore(deps): update dependency tailwindcss to v4 * feat: tailwind 4 and daisyui 5 beta * fix: mysterious ut bug * fix: new daisyui 5 looks * fix: angular daisyui rating / collapse --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Quentin Deroubaix <[email protected]>
AmadeusITGroup · Feb 19, 2025 · 0997e15 · 0997e15
1 parent 7f521aa
commit 0997e15
Show file tree

Hide file tree

Showing 75 changed files with 1,146 additions and 4,740 deletions.
diff --git a/angular/demo/.browserslistrc b/angular/demo/.browserslistrc
@@ -0,0 +1,19 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.dev/reference/versions#browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+# Compared to the default of Angular, we only support the last major of Safari and the last major of iOS
+
+last 2 Chrome versions
+last 1 Firefox version
+last 2 Edge major versions
+last 1 Safari major versions
+last 1 iOS major versions
+last 2 Android major versions
+Firefox ESR
diff --git a/angular/demo/.postcssrc.json b/angular/demo/.postcssrc.json
@@ -0,0 +1,5 @@
+{
+	"plugins": {
+		"@tailwindcss/postcss": {}
+	}
+}
diff --git a/angular/demo/daisyui/src/app/samples/accordion/accordion-item.component.ts b/angular/demo/daisyui/src/app/samples/accordion/accordion-item.component.ts
@@ -14,17 +14,20 @@ import {AccordionComponent} from './accordion.component';
 	selector: 'app-accordion-item',
 	imports: [UseDirective, UseMultiDirective],
 	template: `
-		<div class="collapse collapse-arrow bg-base-200" [auUseMulti]="[directives.itemDirective, directives.transitionDirective]">
+		<div
+			class="collapse collapse-arrow bg-base-100 border border-base-300 has-[:focus-visible]:ring"
+			[auUseMulti]="[directives.itemDirective, directives.transitionDirective]"
+		>
 			<div
 				role="button"
 				tabindex="0"
-				class="collapse-title text-xl font-medium focus-visible:outline-none"
+				class="collapse-title font-semibold focus-visible:outline-hidden"
 				[auUse]="directives.toggleDirective"
 				(keydown.enter)="api.toggle()"
 			>
 				<ng-content select="[header]" />
 			</div>
-			<div class="collapse-content" [auUse]="directives.bodyContainerAttrsDirective">
+			<div class="collapse-content text-sm" [auUse]="directives.bodyContainerAttrsDirective">
 				@if (state.shouldBeInDOM()) {
 					<ng-content />
 				}

diff --git a/angular/demo/daisyui/src/app/samples/alert/alert.component.ts b/angular/demo/daisyui/src/app/samples/alert/alert.component.ts
@@ -17,11 +17,11 @@ import {DomSanitizer} from '@angular/platform-browser';
 	imports: [UseDirective],
 	template: `
 		@if (!state.hidden()) {
-			<div role="alert" class="flex alert {{ state.className() }}" [auUse]="directives.transitionDirective">
+			<div role="alert" class="alert {{ state.className() }}" [auUse]="directives.transitionDirective">
 				<ng-content />
 				@if (state.dismissible()) {
 					<button
-						class="btn btn-sm btn-circle btn-ghost ms-auto"
+						class="btn btn-xs btn-circle btn-ghost"
 						(click)="api.close()"
 						[attr.aria-label]="state.ariaCloseButtonLabel()"
 						[innerHTML]="closeIcon"

diff --git a/angular/demo/daisyui/src/app/samples/collapse/collapse.component.ts b/angular/demo/daisyui/src/app/samples/collapse/collapse.component.ts
@@ -13,12 +13,12 @@ import {ChangeDetectionStrategy, Component, input, output} from '@angular/core';
 	template: `
 		<div
 			tabindex="0"
-			class="collapse bg-base-200"
+			class="collapse collapse-arrow bg-base-100 border border-base-300"
 			[auUse]="transition.directives.directive"
 			(blur)="transition.api.hide()"
 			(focus)="transition.api.show()"
 		>
-			<div class="collapse-title font-medium text-xl">{{ title() }}</div>
+			<div class="collapse-title font-semibold">{{ title() }}</div>
 			<div class="collapse-content"><ng-content /></div>
 		</div>
 	`,

diff --git a/angular/demo/daisyui/src/app/samples/pagination/pagination.component.html b/angular/demo/daisyui/src/app/samples/pagination/pagination.component.html
@@ -2,7 +2,7 @@
 	<div class="join" [class]="state.className()">
 		@if (state.boundaryLinks()) {
 			<button
-				class="join-item btn btn-outline"
+				class="join-item btn"
 				[attr.aria-label]="state.ariaFirstLabel()"
 				(click)="api.first()"
 				[disabled]="state.previousDisabled()"
@@ -14,7 +14,7 @@
 		}
 		@if (state.directionLinks()) {
 			<button
-				class="join-item btn btn-outline"
+				class="join-item btn"
 				[attr.aria-label]="state.ariaPreviousLabel()"
 				(click)="api.previous()"
 				[disabled]="state.previousDisabled()"
@@ -26,7 +26,7 @@
 		}
 		@for (page of state.pages(); track page; let i = $index) {
 			<button
-				class="join-item btn btn-outline"
+				class="join-item btn"
 				[class.btn-active]="page === state.page()"
 				[attr.aria-current]="page === state.page() ? 'page' : null"
 				[attr.tabindex]="state.disabled() ? -1 : undefined"
@@ -41,7 +41,7 @@
 		}
 		@if (state.directionLinks()) {
 			<button
-				class="join-item btn btn-outline"
+				class="join-item btn"
 				[attr.aria-label]="state.ariaNextLabel()"
 				(click)="api.next()"
 				[disabled]="state.nextDisabled()"
@@ -53,7 +53,7 @@
 		}
 		@if (state.boundaryLinks()) {
 			<button
-				class="join-item btn btn-outline"
+				class="join-item btn"
 				[attr.aria-label]="state.ariaLastLabel()"
 				(click)="api.last()"
 				[disabled]="state.nextDisabled()"

diff --git a/angular/demo/daisyui/src/app/samples/rating/default.route.ts b/angular/demo/daisyui/src/app/samples/rating/default.route.ts
@@ -5,7 +5,7 @@ import {Component} from '@angular/core';
 	imports: [RatingComponent],
 	template: `
 		<app-rating [(rating)]="rating" (hover)="hovered = $event" (leave)="left = $event" />
-		<div>
+		<div class="mt-2">
 			Current rate: <span id="defaultRating">{{ rating }}</span
 			><br />
 			Hovered: <span id="defaultHovered">{{ hovered }}</span

diff --git a/angular/demo/daisyui/src/app/samples/rating/rating.component.html b/angular/demo/daisyui/src/app/samples/rating/rating.component.html
@@ -7,7 +7,7 @@
 			(click)="api.setRating(index + 1)"
 			type="radio"
 			name="rating-1"
-			class="mask mask-star"
+			class="mask mask-star-2 bg-orange-400"
 			[attr.aria-label]="getAriaLabel(index)"
 			[checked]="index + 1 === state.visibleRating()"
 		/>

diff --git a/angular/demo/daisyui/src/app/samples/rating/rating.component.ts b/angular/demo/daisyui/src/app/samples/rating/rating.component.ts
@@ -6,7 +6,6 @@ import {NG_VALUE_ACCESSOR} from '@angular/forms';
 
 @Component({
 	selector: 'app-rating',
-
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	templateUrl: './rating.component.html',
 	providers: [{provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true}],

diff --git a/angular/demo/daisyui/src/app/samples/slider/default.route.ts b/angular/demo/daisyui/src/app/samples/slider/default.route.ts
@@ -1,19 +1,13 @@
 import {SliderComponent} from './slider.component';
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 
 @Component({
 	imports: [SliderComponent],
 	template: `
-		<h2 class="text-lg mb-2">DaisyUI Example</h2>
-
-		<app-slider min="0" max="100" stepSize="1" [values]="values" (valuesChange)="valuesChange($event)" />
-		Value: {{ values }}
+		<app-slider min="0" max="100" stepSize="1" [(values)]="values" className="w-full" />
+		Value: {{ values() }}
 	`,
 })
 export default class DefaultSliderComponent {
-	values = [20];
-
-	valuesChange(event: number[]) {
-		this.values = event;
-	}
+	readonly values = signal([20]);
 }
diff --git a/angular/demo/daisyui/src/app/samples/toast/toast.component.ts b/angular/demo/daisyui/src/app/samples/toast/toast.component.ts
@@ -7,11 +7,11 @@ import {DomSanitizer} from '@angular/platform-browser';
 	selector: 'app-toast',
 	template: `
 		@if (!state.hidden()) {
-			<div class="alert {{ state.className() }} flex">
+			<div class="alert {{ state.className() }}">
 				<ng-content />
 				@if (state.dismissible()) {
 					<button
-						class="btn btn-sm btn-circle btn-ghost"
+						class="btn btn-xs btn-circle btn-ghost"
 						(click)="api.close()"
 						[attr.aria-label]="state.ariaCloseButtonLabel()"
 						[innerHTML]="closeIcon"

diff --git a/angular/demo/daisyui/src/styles.css b/angular/demo/daisyui/src/styles.css
@@ -1,3 +1,2 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss' source('.');
+@plugin 'daisyui';
diff --git a/angular/demo/package.json b/angular/demo/package.json
@@ -101,8 +101,7 @@
 			],
 			"files": [
 				"daisyui/src/**",
-				"postcss.config.js",
-				"tailwind.config.js",
+				".postcssrc.json",
 				"daisyui/tsconfig.build.json",
 				"angular.json",
 				"tsconfig.build.json",
@@ -147,8 +146,7 @@
 			],
 			"files": [
 				"daisyui/src/**",
-				"postcss.config.js",
-				"tailwind.config.js",
+				".postcssrc.json",
 				"daisyui/tsconfig.json",
 				"angular.json",
 				"tsconfig.build.json",
@@ -186,10 +184,10 @@
 		"@angular/build": "^19.0.0",
 		"@angular/cli": "^19.0.0",
 		"@angular/compiler-cli": "^19.0.0",
-		"autoprefixer": "^10.4.20",
-		"daisyui": "^4.12.20",
+		"@tailwindcss/postcss": "^4.0.6",
+		"daisyui": "^5.0.0-beta.8",
 		"postcss": "^8.4.49",
-		"tailwindcss": "^3.4.16",
+		"tailwindcss": "^4.0.0",
 		"typescript": "~5.6.3"
 	}
 }
diff --git a/angular/demo/postcss.config.js b/angular/demo/postcss.config.js
diff --git a/angular/demo/tailwind.config.js b/angular/demo/tailwind.config.js
diff --git a/angular/demo/tsconfig.json b/angular/demo/tsconfig.json
@@ -1,4 +1,4 @@
 {
 	"extends": "../../tsconfig.json",
-	"files": ["postcss.config.js", "tailwind.config.js", "scripts/regen-links.js"]
+	"files": ["scripts/regen-links.js"]
 }
diff --git a/code-coverage/lib/filter.ts b/code-coverage/lib/filter.ts
@@ -1,4 +1,4 @@
-import {createFilter} from 'vite';
+import {createFilter} from '@rollup/pluginutils';
 import path from 'path';
 
 export const rootFolder = path.join(import.meta.dirname, '..', '..', '..');