fix: stackblitz with css

angular/angular.json

@@ -15,7 +15,7 @@
 			"prefix": "app",
 			"architect": {
 				"build": {
-					"builder": "@angular-devkit/build-angular:browser",
+					"builder": "ngx-build-plus:browser",
 					"options": {
 						"outputPath": "dist/demo",
 						"index": "demo/src/index.html",
@@ -24,7 +24,9 @@
 						"tsConfig": "demo/tsconfig.app.json",
 						"assets": ["demo/src/favicon.ico", "demo/src/assets"],
 						"styles": ["demo/src/styles.css", "../common/demo.scss"],
-						"scripts": []
+						"scripts": [],
+						"inlineStyleLanguage": "scss",
+						"extraWebpackConfig": "./demo/webpack.js"
 					},
 					"configurations": {
 						"production": {
@@ -60,7 +62,10 @@
 					"defaultConfiguration": "production"
 				},
 				"serve": {
-					"builder": "@angular-devkit/build-angular:dev-server",
+					"builder": "ngx-build-plus:dev-server",
+					"options": {
+						"extraWebpackConfig": "./demo/webpack.js"
+					},
 					"configurations": {
 						"production": {
 							"servePath": "/angular/samples",

angular/demo/src/app/links.component.ts

@@ -14,6 +14,7 @@ export const links = new InjectionToken<string[]>('app-links');
 			</div>
 		</div>
 	`,
+	styles: ["@import '@agnos-ui/common/samples/links.scss';"],
 })
 export class LinksComponent {
 	links = inject(links);

angular/demo/src/app/samples/rating/customTemplate.route.ts

@@ -7,9 +7,10 @@ import {Component} from '@angular/core';
 	template: `
 		<au-rating className="rating-custom" [rating]="7" ariaLabel="custom rating">
 			<ng-template auRatingStar let-fill="fill" let-index="index">
-				<span class="star-2" [class.filled]="fill === 100" [class.bad]="index < 3">&#9733;</span>
+				<span class="star" [class.filled]="fill === 100" [class.bad]="index < 3">&#9733;</span>
 			</ng-template>
 		</au-rating>
 	`,
+	styles: ["@import '@agnos-ui/common/samples/rating/custom.scss';"],
 })
 export default class CustomTemplateComponent {}

angular/demo/src/app/samples/rating/readonly.route.ts

@@ -1,5 +1,5 @@
 import {AgnosUIAngularModule} from '@agnos-ui/angular';
-import {Component, inject} from '@angular/core';
+import {Component, ViewEncapsulation, inject} from '@angular/core';
 import heartFill from '!raw-loader!bootstrap-icons/icons/heart-fill.svg';
 import {DomSanitizer} from '@angular/platform-browser';
 
@@ -13,8 +13,10 @@ import {DomSanitizer} from '@angular/platform-browser';
 				<span [innerHTML]="sanitizer.bypassSecurityTrustHtml(heartFill)"></span>
 			</span>
 		</ng-template>
-		<au-rating class="rating-custom" [rating]="3.64" [slotStar]="custom" [readonly]="true" [maxRating]="5" ariaLabel="readonly rating" />
+		<au-rating class="rating-readonly" [rating]="3.64" [slotStar]="custom" [readonly]="true" [maxRating]="5" ariaLabel="readonly rating" />
 	`,
+	encapsulation: ViewEncapsulation.None,
+	styles: ["@import '@agnos-ui/common/samples/rating/readonly.scss';"],
 })
 export default class ReadonlyRatingComponent {
 	readonly sanitizer = inject(DomSanitizer);

angular/demo/webpack.js

@@ -0,0 +1,7 @@
+module.exports = {
+	resolve: {
+		alias: {
+			'@agnos-ui/common': require('path').join(__dirname, '..', '..', 'common'),
+		},
+	},
+};

angular/package.json

@@ -25,6 +25,7 @@
 		"@angular/platform-browser": "^16.2.2",
 		"@angular/platform-browser-dynamic": "^16.2.2",
 		"@angular/router": "^16.2.2",
+		"ngx-build-plus": "^16.0.0",
 		"rxjs": "^7.8.1",
 		"tslib": "^2.6.2",
 		"zone.js": "^0.13.1"

common/demo.scss

@@ -1,5 +1,3 @@
-@import 'variables';
-
 body {
 	min-height: 100vh;
 }
@@ -9,69 +7,10 @@ main {
 	flex-wrap: nowrap;
 }
 
-.sample-links {
-	column-count: 1;
-
-	@include media-breakpoint-up(sm) {
-		column-count: 2;
-	}
-	@include media-breakpoint-up(md) {
-		column-count: 3;
-	}
-	@include media-breakpoint-up(lg) {
-		column-count: 5;
-	}
-	@include media-breakpoint-up(xl) {
-		column-count: 6;
-	}
-}
-
 .agnos-ui {
 	padding: 0;
 
 	&-logo {
 		height: 30px;
 	}
 }
-
-.rating-custom {
-	.star {
-		position: relative;
-		display: inline-block;
-		font-size: 2.5rem;
-		color: #d3d3d3;
-		svg {
-			width: 1em;
-			height: 1em;
-			padding-right: 0.1rem;
-		}
-	}
-
-	.full {
-		color: red;
-	}
-
-	.half {
-		position: absolute;
-		display: inline-block;
-		overflow: hidden;
-		color: red;
-	}
-
-	.star-2 {
-		font-size: 150%;
-		color: #b0c4de;
-	}
-
-	.filled {
-		color: #1e90ff;
-	}
-
-	.bad {
-		color: #deb0b0;
-	}
-
-	.filled.bad {
-		color: #ff1e1e;
-	}
-}

common/samples/links.scss

@@ -0,0 +1,18 @@
+@import '../variables';
+
+.sample-links {
+	column-count: 1;
+
+	@include media-breakpoint-up(sm) {
+		column-count: 2;
+	}
+	@include media-breakpoint-up(md) {
+		column-count: 3;
+	}
+	@include media-breakpoint-up(lg) {
+		column-count: 5;
+	}
+	@include media-breakpoint-up(xl) {
+		column-count: 6;
+	}
+}

common/samples/rating/custom.scss

@@ -0,0 +1,15 @@
+.rating-custom {
+	.star {
+		font-size: 150%;
+		color: #b0c4de;
+	}
+	.filled {
+		color: #1e90ff;
+	}
+	.bad {
+		color: #deb0b0;
+	}
+	.filled.bad {
+		color: #ff1e1e;
+	}
+}

common/samples/rating/readonly.scss

@@ -0,0 +1,22 @@
+.rating-readonly {
+	.star {
+		position: relative;
+		display: inline-block;
+		font-size: 2.5rem;
+		color: #d3d3d3;
+		svg {
+			width: 1em !important;
+			height: 1em !important;
+			padding-right: 0.1rem;
+		}
+	}
+	.full {
+		color: red;
+	}
+	.half {
+		position: absolute;
+		display: inline-block;
+		overflow: hidden;
+		color: red;
+	}
+}

demo/scripts/includeSamples.plugin.ts

@@ -46,6 +46,8 @@ export const includeSamples = (): Plugin => {
 						const dependencyParts = dependency.split('/');
 						if (dependencyParts[0] === '.') {
 							await addFile(framework, path.basename(dependency), path.join(directory, dependency));
+						} else if (dependency.startsWith('@agnos-ui/common/samples')) {
+							await addFile(framework, path.basename(dependency), path.join(__dirname, '..', '..', 'common', dependency.substring(17)));
 						} else {
 							// TODO: check that the dependency is valid and included in package.json
 						}
@@ -73,7 +75,9 @@ export const includeSamples = (): Plugin => {
 					const frameworkFiles = files[framework];
 					output += `${JSON.stringify(framework)}:{entryPoint:${JSON.stringify(frameworkFiles[0].fileName)},files:{`;
 					frameworkFiles.forEach(({fileName, filePath}) => {
-						output += `[${JSON.stringify(fileName)}]: () => import(${JSON.stringify(filePath + '?raw')}).then(file=>file.default),`;
+						output += `[${JSON.stringify(fileName)}]: () => import(${JSON.stringify(
+							filePath + '?raw'
+						)}).then(file=>file.default).then(file=>file.replace(/@agnos-ui\\/common\\/samples\\/[^/]+/g,'.')),`;
 					});
 					output += `}},`;
 				});

demo/src/lib/layout/highlight.ts

@@ -1,12 +1,14 @@
 import hljs from 'highlight.js/lib/core';
 import typescript from 'highlight.js/lib/languages/typescript';
 import css from 'highlight.js/lib/languages/css';
+import scss from 'highlight.js/lib/languages/scss';
 import xml from 'highlight.js/lib/languages/xml';
 
 hljs.registerLanguage('typescript', typescript);
 hljs.registerLanguage('html', xml);
 hljs.registerLanguage('xml', xml);
 hljs.registerLanguage('css', css);
+hljs.registerLanguage('scss', scss);
 hljs.registerLanguage('angular', () => ({
 	subLanguage: 'typescript',
 	contains: [
@@ -85,6 +87,8 @@ export const languageFromFileName = (fileName: string | undefined) => {
 				return 'html';
 			case '.css':
 				return 'css';
+			case '.scss':
+				return 'scss';
 			case '.svelte':
 				return 'svelte';
 		}

demo/src/lib/stackblitz/angular/angular.json

@@ -23,7 +23,8 @@
 						"polyfills": "src/polyfills.ts",
 						"outputPath": "dist/demo",
 						"scripts": [],
-						"styles": ["src/demo.scss"],
+						"inlineStyleLanguage": "scss",
+						"styles": [],
 						"tsConfig": "tsconfig.json"
 					}
 				},

demo/src/lib/stackblitz/angular/index.html

@@ -11,7 +11,7 @@
 			crossorigin="anonymous"
 		/>
 	</head>
-	<body class="m-3">
+	<body class="m-3 min-vh-100">
 		<ng-component id="root"></ng-component>
 	</body>
 </html>

demo/src/lib/stackblitz/index.ts

@@ -16,10 +16,6 @@ const addAsyncFiles =
 		);
 	};
 
-const demoCSS: StackblitzProcessor = async (project) => {
-	project.files['src/demo.scss'] = (await import('@agnos-ui/common/demo.scss?raw')).default;
-};
-
 const frameworkCreateStackblitz: Record<Frameworks, StackblitzProcessor[]> = {
 	angular: [
 		addAsyncFiles(import.meta.glob('./angular/**', {as: 'raw', import: 'default'}) as any, '', './angular/'),
@@ -35,15 +31,15 @@ const frameworkCreateStackblitz: Record<Frameworks, StackblitzProcessor[]> = {
 	react: [
 		addAsyncFiles(import.meta.glob('./react/**', {as: 'raw', import: 'default'}) as any, '', './react/'),
 		async (project, sample) => {
-			project.files['src/main.tsx'] = `import "./demo.scss";\nimport {createRoot} from "react-dom/client";\nimport App from ${JSON.stringify(
+			project.files['src/main.tsx'] = `import {createRoot} from "react-dom/client";\nimport App from ${JSON.stringify(
 				`./${sample.files.react.entryPoint.replace(/\.tsx?$/, '')}`
 			)};\nconst rootElement = document.getElementById('root');\nconst root = createRoot(rootElement);\nroot.render(<App />)`;
 		},
 	],
 	svelte: [
 		addAsyncFiles(import.meta.glob('./svelte/**', {as: 'raw', import: 'default'}) as any, '', './svelte/'),
 		async (project, sample) => {
-			project.files['src/main.ts'] = `import "./demo.scss";\nimport App from ${JSON.stringify(
+			project.files['src/main.ts'] = `import App from ${JSON.stringify(
 				`./${sample.files.svelte.entryPoint}`
 			)};\nconst app = new App({target: document.getElementById('root')});\nexport default app;`;
 			project.template = 'node';
@@ -90,7 +86,7 @@ if (isReleased) {
 	frameworkCreateStackblitz.angular.push(
 		corePackage,
 		addAsyncFiles(
-			import.meta.glob(['../../../../angular/dist/lib/**'], {
+			import.meta.glob(['../../../../angular/dist/lib/**', '!**/*.map'], {
 				as: 'raw',
 				import: 'default',
 			}) as any,
@@ -133,7 +129,7 @@ export const openInStackblitz = async (sample: SampleInfo, framework: Frameworks
 	};
 	const filesInfo = sample.files[framework];
 	const {entryPoint, files} = filesInfo;
-	const processors = [addAsyncFiles(files, 'src/'), demoCSS, ...frameworkCreateStackblitz[framework]];
+	const processors = [addAsyncFiles(files, 'src/'), ...frameworkCreateStackblitz[framework]];
 	for (const processor of processors) {
 		await processor(project, sample, framework);
 	}

demo/src/lib/stackblitz/react/index.html

@@ -11,7 +11,7 @@
 			crossorigin="anonymous"
 		/>
 	</head>
-	<body class="m-3">
+	<body class="m-3 min-vh-100">
 		<div id="root"></div>
 		<script type="module" src="/src/main.tsx"></script>
 	</body>

demo/src/lib/stackblitz/svelte/index.html

@@ -11,7 +11,7 @@
 			crossorigin="anonymous"
 		/>
 	</head>
-	<body class="m-3">
+	<body class="m-3 min-vh-100">
 		<div id="root"></div>
 		<script type="module" src="/src/main.ts"></script>
 	</body>

e2e/rating/rating.e2e-spec.ts

@@ -115,7 +115,7 @@ test.describe.parallel(`Rating tests`, () => {
 		expectedClasses.length = 5;
 		expectedClasses.fill(['au-rating-star']);
 		const expectedState: State = {
-			rootClasses: ['d-inline-flex', 'au-rating', 'rating-custom'],
+			rootClasses: ['d-inline-flex', 'au-rating', 'rating-readonly'],
 			min: '0',
 			max: '5',
 			value: '3.64',