generator-nitro 7.3.0 → 7.5.0

package/generators/app/templates/.node-version

@@ -1 +1 @@
-18.15.0
+18.16.0

package/generators/app/templates/.prettierignore

@@ -22,3 +22,4 @@
 
 # Project
 **/export
+src/shared/base/reset/css/yui/reset.css

package/generators/app/templates/CUTAWAY.gitignore

@@ -40,11 +40,13 @@ debug.log
 /project/tmp
 /public/assets
 /public/proto
-/public/reports
+/public/reports/**/*
+!/public/reports/lighthouse/
 /src/patterns/**/template/*.js
 /src/patterns/**/template/partial/*.js
 /tests/cypress/cypress/screenshots
 /tests/cypress/cypress/videos
+/tests/playwright/test-results/
 
 # allow
 !.gitkeep

package/generators/app/templates/CUTAWAYpackage.json

@@ -6,8 +6,8 @@
   "private": true,
   "author": "The Nitro Team",
   "engines": {
-	  "node": ">=14.15.0 <19",
-	  "npm": ">=6.14.8 <10"
+    "node": ">=14.15.0 <19",
+    "npm": ">=6.14.8 <10"
   },
   "scripts": {
     "\n# PROJECT ------- ": "",
@@ -23,25 +23,28 @@
     "postinstall": "<% if (git.root) { %>cd <%= git.root %> && husky install <% if (git.project) { %><%= git.project %>/.husky && cd <%= git.project %> <% } %>&& <% } %><% if (options.themes) { %>npm rebuild node-sass && <% } %>env-linter<% if (git.root) { %> --hooksInstalled<% } %> --saveExact --dependenciesExactVersion --lts",
     "\n# LINT/TEST ------- ": "",
     "check-node-version": "check-node-version --print --package",
-    "cypress-test": "npm run build && cross-env PORT=8888 NITRO_MODE=test npm-run-all --parallel --race test:cypress:serve cypress-test:open",
+    "cypress-test": "npm run build && cross-env PORT=8888 NITRO_MODE=test npm-run-all --parallel --race prod:serve cypress-test:open",
     "cypress-test:open": "cypress open --project ./tests/cypress/ --e2e --browser chrome",
-    "lighthouse-test": "npm run build && cross-env PORT=8890 NITRO_MODE=test npm-run-all --parallel --race lighthouse-test:*",
-    "lighthouse-test:serve": "npm run prod:serve",
-    "lighthouse-test:run": "lighthouse http://localhost:8890/<% if (options.exampleCode) { %>example-patterns<% } else { %>index<% } %> --quiet --configPath=./tests/lighthouse/lighthouse.config.js --output-path=./public/reports/lighthouse/report.html --view",
+    "lighthouse-test": "npm run build && cross-env PORT=8889 NITRO_MODE=test npm-run-all --parallel --race prod:serve lighthouse-test:run",
+    "lighthouse-test:run": "lighthouse http://localhost:8889/<% if (options.exampleCode) { %>example-patterns<% } else { %>index<% } %> --quiet --configPath=./tests/lighthouse/lighthouse.config.js --output-path=./public/reports/lighthouse/report.html --view",
     "lint": "npm-run-all lint:*",
     "lint:css": "stylelint src/**/*.*ss --allow-empty-input",
     "lint:data": "nitro-app-validate-pattern-data",
     "lint:html": "gulp lint-html",
     "lint:js": "eslint ./src --ext <% if (options.jsCompiler === 'js') { %>.js,.jsx<% } else { %>.ts,.tsx<% } %>",
     "lint:license": "license-checker --production --summary --exclude \"Apache-2.0, BSD, ISC, LGPL, MIT, MPL\" --failOn \"AGPL; EPL; GPL\"",
-    "prettier": "prettier --write \"**/*.*(js|jsx|ts|tsx|json|md|mdx|graphql|gql|yml|yaml)\"",
+    "playwright-test": "cross-env PORT=8890 NITRO_MODE=test playwright test --config=tests/playwright/playwright.config.ts --ui",
+    "prettier": "prettier --write \"**/*.*(js|jsx|ts|tsx|json|css|scss|md|mdx|graphql|gql|yml|yaml)\"",
     "test": "npm-run-all test:*",
     "test:lint": "npm run lint",
-    "test:cypress": "npm run build && cross-env PORT=8888 NITRO_MODE=test npm-run-all --parallel --race test:cypress:*",
-    "test:cypress:serve": "npm run prod:serve",
-    "test:cypress:test": "cypress run --project ./tests/cypress/",
+    "test:build": "npm run build",
+    "test:e2e": "cross-env PORT=8899 NITRO_MODE=test npm-run-all --parallel --race test:e2e:*",
+    "test:e2e:serve": "npm run prod:serve",
+    "test:e2e:run": "npm-run-all --serial test:e2e:run:*",
+    "test:e2e:run:cypress": "cypress run --project ./tests/cypress/",
+    "test:e2e:run:playwright": "playwright test --config=tests/playwright/playwright.config.ts",
     "visual-approve": "backstop approve --config=tests/backstop/backstop.config.js --docker",
-    "visual-test": "npm run build && cross-env PORT=8889 npm-run-all --parallel --race visual-test:*",
+    "visual-test": "npm run build && cross-env PORT=8892 npm-run-all --parallel --race visual-test:*",
     "visual-test:serve": "npm run prod:serve",
     "visual-test:test": "backstop test --config=tests/backstop/backstop.config.js --docker",
     "\n# BUILD/RELEASE ------- ": "",
@@ -84,38 +87,39 @@
     "@gondel/core": "1.2.7",
     "@gondel/plugin-hot": "1.2.7",
     "bootstrap": "5.2.3",<% } %>
-    "core-js": "3.29.0"<% if (options.exampleCode) { %>,
+    "core-js": "3.30.1"<% if (options.exampleCode) { %>,
     "flatpickr": "4.6.13",
     "handlebars": "4.7.7",
     "jquery": "3.6.4",
     "lazysizes": "5.3.2",
-    "lottie-web": "5.10.2",
-    "prevent-window-opener-attacks": "0.3.0"<% } %><% if (options.jsCompiler === 'js') { %>,
+    "lottie-web": "5.11.0",
+    "prevent-window-opener-attacks": "0.3.1"<% } %><% if (options.jsCompiler === 'js') { %>,
     "regenerator-runtime": "0.13.11"<% } %><% if (options.exampleCode) { %>,
     "svg4everybody": "2.1.9"<% } %>
   },
   "devDependencies": {<% if (options.jsCompiler === 'js') { %>
-    "@babel/eslint-parser": "7.19.1",<% } %>
+    "@babel/eslint-parser": "7.21.3",<% } %>
     "@khanacademy/tota11y": "0.2.0",
     "@merkle-open/eslint-config": "1.0.0",
     "@merkle-open/html-validate-config": "1.0.1",
-    "@merkle-open/prettier-config": "1.0.1",
-    "@merkle-open/stylelint-config": "1.0.0",
-    "@merkle-open/ts-config": "1.0.1",
+    "@merkle-open/prettier-config": "1.1.0",
+    "@merkle-open/stylelint-config": "2.1.0",
+    "@merkle-open/ts-config": "1.1.0",
     "@nitro/app": "<%= version %>",
     "@nitro/exporter": "<%= version %>",
     "@nitro/gulp": "<%= version %>",
-    "@nitro/webpack": "<%= version %>",<% if (options.jsCompiler === 'ts') { %>
+    "@nitro/webpack": "<%= version %>",
+    "@playwright/test": "1.33.0",<% if (options.jsCompiler === 'ts') { %>
     "@types/bootstrap": "5.2.6",<% if (options.exampleCode ) { %>
     "@types/jquery": "3.5.16",<% } %>
     "@types/svg4everybody": "2.1.2",
     "@types/webpack-env": "1.18.0",<% } %>
-    "backstopjs": "6.1.4",
+    "backstopjs": "6.2.1",
     "check-node-version": "4.2.1",
     "commitizen": "4.3.0",
     "config": "3.3.9",
     "cross-env": "7.0.3",
-    "cypress": "12.7.0",
+    "cypress": "12.11.0",
     "cz-conventional-changelog": "3.3.0",
     "env-linter": "1.0.0",
     "eslint": "7.32.0",
@@ -123,18 +127,18 @@
     "extend": "3.0.2",
     "generator-nitro": "<%= version %>",
     "gulp": "4.0.2",
+    "html-validate": "7.15.1",
     "husky": "8.0.3",
-    "html-validate": "7.13.3",
     "license-checker": "25.0.1",
-    "lighthouse": "10.0.2",
-    "lint-staged": "13.2.0",<% if (options.themes) { %>
+    "lighthouse": "10.1.1",
+    "lint-staged": "13.2.2",<% if (options.themes) { %>
     "node-sass": "8.0.0",<% } %>
-    "npm-check-updates": "16.7.12",
+    "npm-check-updates": "16.10.9",
     "npm-run-all": "4.1.5",
-    "prettier": "2.8.4",
-    "rimraf": "4.4.0",
-    "stylelint": "14.16.1",<% if (options.jsCompiler === 'ts') { %>
-    "typescript": "4.9.5",<% } %>
+    "prettier": "2.8.8",
+    "rimraf": "5.0.0",
+    "stylelint": "15.6.0",<% if (options.jsCompiler === 'ts') { %>
+    "typescript": "5.0.4",<% } %>
     "webpack-cli": "4.10.0",
     "yo": "4.3.1"
   },
@@ -151,6 +155,7 @@
   },
   "lint-staged": {
     "src/**/*.{css,scss}": [
+      "prettier --write",
       "stylelint --allow-empty-input"
     ],
     "**/*.json": [

package/generators/app/templates/config/default.js

@@ -10,9 +10,6 @@ const baseConfig = require('@nitro/app/app/core/config');
 const defaultConfig = {
 	code: {
 		validation: {
-			eslint: {
-				live: false,
-			},
 			htmllint: {
 				// enabling this live validation slows down rendering
 				live: false,
@@ -22,9 +19,6 @@ const defaultConfig = {
 				logMissingSchemaAsError: false,
 				logMissingSchemaAsWarning: true,
 			},
-			stylelint: {
-				live: false,
-			},
 		},
 	},
 	nitro: {

package/generators/app/templates/config/webpack/options.js

@@ -4,12 +4,9 @@ const theme = process.env.THEME ? process.env.THEME : validThemes.find((theme) =
 const options = {
 	rules: {
 		<% if (options.jsCompiler === 'ts') { %>js: false,
-		ts: true,<% } else { %>js: {
-			eslint: config.get('code.validation.eslint.live'),
-		},
+		ts: true,<% } else { %>js: true,
 		ts: false,<% } %>
-		scss: {
-			stylelint: config.get('code.validation.stylelint.live'),<% if (options.themes) { %>
+		scss: {<% if (options.themes) { %>
 			implementation: require('node-sass'),<% } %>
 		},
 		hbs: <% if (options.clientTpl) { %>true<% } else { %>false<% } %>,

package/generators/app/templates/project/docs/nitro-config.md

@@ -12,14 +12,6 @@ the main nodes from nitro: `code`, `nitro`,`server`, `gulp`, `feature`, `exporte
 
 ### Validation
 
-#### `code.validation.eslint`
-
-Type: Object
-
-- `code.validation.eslint.live` - default: false
-
-Enable/disable JavaScript linting on change.
-
 #### `code.validation.htmllint`
 
 Type: Object
@@ -37,14 +29,6 @@ Type: Object
 - `code.validation.jsonSchema.logMissingSchemaAsError` - default: false
 - `code.validation.jsonSchema.logMissingSchemaAsWarning` - default: true
 
-#### `code.validation.stylelint`
-
-Type: Object
-
-- `code.validation.stylelint.live` - default: false
-
-Enable/disable CSS linting on change.
-
 ## Nitro
 
 The node `nitro` contains following properties

package/generators/app/templates/project/docs/nitro.md

@@ -12,7 +12,7 @@ Nitro is simple, fast and flexible. Use this app for all your frontend work.
 - Webpack Builder with HMR
 - Gulp Tasks for additional functionality
 - Linting, Source Maps, PostCSS & Browsersync
-- Setup for e2e and visual regression testing (cypress, backstopjs) & lighthouse
+- Setup for e2e and visual regression testing (playwright, cypress, backstopjs) & lighthouse
 - Pattern generator<% if (options.clientTpl) { %>
 - [Client side templates](./client-templates.md)<% } %><% if (options.exporter) { %>
 - [Static Exports](./nitro-exporter.md)<% } %>

package/generators/app/templates/src/patterns/atoms/box/css/modifier/box-dark.scss

@@ -1,7 +1,6 @@
 @import '../../../../../shared/utils/colors2/css/colors2';
 
 .a-box--dark {
-
 	color: $color-gray-9;
 	background-color: $color-gray-3;
 

package/generators/app/templates/src/patterns/atoms/stage/css/stage.scss

@@ -5,10 +5,7 @@
 	display: block;
 	width: 100%;
 	height: 190px;
-	background-image:
-		url('../img/space-ship.svg'),
-		url('../img/satellite.svg'),
-		url('../img/ufo.svg'),
+	background-image: url('../img/space-ship.svg'), url('../img/satellite.svg'), url('../img/ufo.svg'),
 		url('../img/clouds.png');
 	background-position: 10vw 200px, 50% 200px, 70% -100px, 0 0;
 	background-size: 8vw, 5vw, 7vw, auto;
@@ -18,6 +15,10 @@
 }
 
 @keyframes a-stage-sky {
-	from { background-position: 10vw 600px, 50% 200px, 70% -170px, 0 0; }
-	to { background-position: 20vw -200px, 120% -100px, 30% 300px, 100% 0; }
+	from {
+		background-position: 10vw 600px, 50% 200px, 70% -170px, 0 0;
+	}
+	to {
+		background-position: 20vw -200px, 120% -100px, 30% 300px, 100% 0;
+	}
 }

package/generators/app/templates/src/patterns/molecules/example/css/modifier/example-blue.scss

@@ -7,7 +7,14 @@
 }
 
 @keyframes blue-background-change {
-	0%,100% { background-color: darken(desaturate($color-brand-1, 30%), 10%); }
-	30% { background-color: darken($color-brand-1, 20%); }
-	60% { background-color: darken($color-brand-1, 10%); }
+	0%,
+	100% {
+		background-color: darken(desaturate($color-brand-1, 30%), 10%);
+	}
+	30% {
+		background-color: darken($color-brand-1, 20%);
+	}
+	60% {
+		background-color: darken($color-brand-1, 10%);
+	}
 }

package/generators/app/templates/src/shared/base/grid/css/variables/grid.scss

@@ -8,7 +8,7 @@ $grid-breakpoints: (
 	md: $size-md-min,
 	lg: $size-lg-min,
 	xl: $size-xl-min,
-	xxl: $size-xxl-min
+	xxl: $size-xxl-min,
 );
 
 $container-max-widths: (
@@ -16,5 +16,5 @@ $container-max-widths: (
 	md: $size-md-max,
 	lg: $size-lg-max,
 	xl: $size-xl-max,
-	xxl: $size-xl-max + 1
+	xxl: $size-xl-max + 1,
 );

package/generators/app/templates/src/shared/base/webfonts/css/webfont-gaegu.scss

@@ -4,11 +4,8 @@
 	font-style: normal;
 	font-weight: 300;
 	font-display: fallback;
-	src:
-		local('Gaegu Light'),
-		local('Gaegu-Light'),
-		url('../fonts/gaegu-v2-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		url('../fonts/gaegu-v2-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+	src: local('Gaegu Light'), local('Gaegu-Light'), url('../fonts/gaegu-v2-latin-300.woff2') format('woff2'),
+		url('../fonts/gaegu-v2-latin-300.woff') format('woff');
 }
 
 /* gaegu-regular - latin */
@@ -17,11 +14,8 @@
 	font-style: normal;
 	font-weight: 400;
 	font-display: fallback;
-	src:
-		local('Gaegu Regular'),
-		local('Gaegu-Regular'),
-		url('../fonts/gaegu-v2-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		url('../fonts/gaegu-v2-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+	src: local('Gaegu Regular'), local('Gaegu-Regular'), url('../fonts/gaegu-v2-latin-regular.woff2') format('woff2'),
+		url('../fonts/gaegu-v2-latin-regular.woff') format('woff');
 }
 
 /* gaegu-700 - latin */
@@ -30,9 +24,6 @@
 	font-style: normal;
 	font-weight: 700;
 	font-display: fallback;
-	src:
-		local('Gaegu Bold'),
-		local('Gaegu-Bold'),
-		url('../fonts/gaegu-v2-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		url('../fonts/gaegu-v2-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+	src: local('Gaegu Bold'), local('Gaegu-Bold'), url('../fonts/gaegu-v2-latin-700.woff2') format('woff2'),
+		url('../fonts/gaegu-v2-latin-700.woff') format('woff');
 }

package/generators/app/templates/src/shared/base/webfonts/css/webfont-playfair-display.scss

@@ -4,11 +4,9 @@
 	font-style: normal;
 	font-weight: 400;
 	font-display: fallback;
-	src:
-		local('Playfair Display Regular'),
-		local('PlayfairDisplay-Regular'),
-		url('../fonts/playfair-display-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		url('../fonts/playfair-display-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+	src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'),
+		url('../fonts/playfair-display-v13-latin-regular.woff2') format('woff2'),
+		url('../fonts/playfair-display-v13-latin-regular.woff') format('woff');
 }
 
 /* playfair-display-italic - latin */
@@ -17,11 +15,9 @@
 	font-style: italic;
 	font-weight: 400;
 	font-display: fallback;
-	src:
-		local('Playfair Display Italic'),
-		local('PlayfairDisplay-Italic'),
-		url('../fonts/playfair-display-v13-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		url('../fonts/playfair-display-v13-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+	src: local('Playfair Display Italic'), local('PlayfairDisplay-Italic'),
+		url('../fonts/playfair-display-v13-latin-italic.woff2') format('woff2'),
+		url('../fonts/playfair-display-v13-latin-italic.woff') format('woff');
 }
 
 /* playfair-display-700 - latin */
@@ -30,11 +26,9 @@
 	font-style: normal;
 	font-weight: 700;
 	font-display: fallback;
-	src:
-		local('Playfair Display Bold'),
-		local('PlayfairDisplay-Bold'),
-		url('../fonts/playfair-display-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		url('../fonts/playfair-display-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+	src: local('Playfair Display Bold'), local('PlayfairDisplay-Bold'),
+		url('../fonts/playfair-display-v13-latin-700.woff2') format('woff2'),
+		url('../fonts/playfair-display-v13-latin-700.woff') format('woff');
 }
 
 /* playfair-display-900 - latin */
@@ -43,9 +37,7 @@
 	font-style: normal;
 	font-weight: 900;
 	font-display: fallback;
-	src:
-		local('Playfair Display Black'),
-		local('PlayfairDisplay-Black'),
-		url('../fonts/playfair-display-v13-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-		url('../fonts/playfair-display-v13-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+	src: local('Playfair Display Black'), local('PlayfairDisplay-Black'),
+		url('../fonts/playfair-display-v13-latin-900.woff2') format('woff2'),
+		url('../fonts/playfair-display-v13-latin-900.woff') format('woff');
 }

package/generators/app/templates/src/shared/utils/fixed-aspect-ratio/css/fixed-aspect-ratio.scss

@@ -1,4 +1,4 @@
-@mixin fixed-aspect-ratio($ratio:75%, $width:100%, $display:'inline-block', $child:'>*', $elementPadding: 0) {
+@mixin fixed-aspect-ratio($ratio: 75%, $width: 100%, $display: 'inline-block', $child: '>*', $elementPadding: 0) {
 	display: #{$display};
 	position: relative;
 	width: $width;
@@ -9,15 +9,13 @@
 		margin-top: $ratio;
 	}
 
-	#{$child} { // stylelint-disable-line
-		bottom: 0;
-		left: 0;
+	/* stylelint-disable-next-line */
+	#{$child} {
 		max-height: 100%;
 		padding-left: $elementPadding;
 		padding-right: $elementPadding;
 		position: absolute;
-		right: 0;
-		top: 0;
+		inset: 0;
 	}
 }
 

package/generators/app/templates/src/shared/utils/typo/css/typo.scss

@@ -23,13 +23,13 @@ $typography-definitions: (
 		mobile: (
 			'font-size': 16px,
 			'line-height': 24px,
-			'letter-spacing': 0.3px
+			'letter-spacing': 0.3px,
 		),
 		desktop: (
 			'font-size': 24px,
 			'line-height': 32px,
-			'letter-spacing': 0.75px
-		)
+			'letter-spacing': 0.75px,
+		),
 	),
 	body-small: (
 		all: (
@@ -38,13 +38,13 @@ $typography-definitions: (
 		mobile: (
 			'font-size': 12px,
 			'line-height': 24px,
-			'letter-spacing': 0.3px
+			'letter-spacing': 0.3px,
 		),
 		desktop: (
 			'font-size': 18px,
 			'line-height': 32px,
-			'letter-spacing': 0.75px
-		)
+			'letter-spacing': 0.75px,
+		),
 	),
 	h1: (
 		all: (
@@ -54,13 +54,13 @@ $typography-definitions: (
 		mobile: (
 			'font-size': 32px,
 			'line-height': 44px,
-			'letter-spacing': 0.3px
+			'letter-spacing': 0.3px,
 		),
 		desktop: (
 			'font-size': 44px,
 			'line-height': 56px,
-			'letter-spacing': 0.3px
-		)
+			'letter-spacing': 0.3px,
+		),
 	),
 	h2: (
 		all: (
@@ -70,13 +70,13 @@ $typography-definitions: (
 		mobile: (
 			'font-size': 24px,
 			'line-height': 32px,
-			'letter-spacing': 0.3px
+			'letter-spacing': 0.3px,
 		),
 		desktop: (
 			'font-size': 32px,
 			'line-height': 44px,
-			'letter-spacing': 0.3px
-		)
+			'letter-spacing': 0.3px,
+		),
 	),
 	button: (
 		all: (
@@ -85,13 +85,13 @@ $typography-definitions: (
 		mobile: (
 			'font-size': 18px,
 			'line-height': 18px,
-			'letter-spacing': 0.3px
+			'letter-spacing': 0.3px,
 		),
 		desktop: (
 			'font-size': 20px,
 			'line-height': 20px,
-			'letter-spacing': 0.3px
-		)
+			'letter-spacing': 0.3px,
+		),
 	),
 );
 
@@ -129,7 +129,10 @@ $typography-definitions: (
 	@if (map-has-key(map-get($typography-definitions, $font-bundle), 'all')) {
 		$all-font-definition: map-get(map-get($typography-definitions, $font-bundle), 'all');
 	}
-	$font-definition: map-merge($all-font-definition, map-get(map-get($typography-definitions, $font-bundle), $viewport));
+	$font-definition: map-merge(
+		$all-font-definition,
+		map-get(map-get($typography-definitions, $font-bundle), $viewport)
+	);
 
 	@return $font-definition;
 }

package/generators/app/templates/src/shared/utils/z-index/css/z-index.scss

@@ -10,6 +10,7 @@
 // the first element in $layers is on the top (high z-index)
 // The last element in $layers list is on the bottom (low z-index)
 
+/* prettier-ignore */
 $layers: (
 	'overlay',       // overlay content incl. image overlay, ...
 	'offcanvas',     // off-canvas

package/generators/app/templates/stylelint.config.js

@@ -5,6 +5,24 @@ lintConfig.rules['plugin/stylelint-bem-namics'] = {
 	helperPrefixes: ['state'],
 };
 
+// remove deprecated checks - handled by prettier
+lintConfig.rules['at-rule-name-case'] = null;
+lintConfig.rules['color-hex-case'] = null;
+lintConfig.rules['declaration-block-semicolon-newline-after'] = null;
+lintConfig.rules['declaration-block-trailing-semicolon'] = null;
+lintConfig.rules['declaration-colon-space-after'] = null;
+lintConfig.rules['max-empty-lines'] = null;
+lintConfig.rules['media-feature-name-case'] = null;
+lintConfig.rules['no-missing-end-of-source-newline'] = null;
+lintConfig.rules['number-leading-zero'] = null;
+lintConfig.rules['property-case'] = null;
+lintConfig.rules['selector-list-comma-newline-after'] = null;
+lintConfig.rules['selector-pseudo-class-case'] = null;
+lintConfig.rules['selector-pseudo-element-case'] = null;
+lintConfig.rules['string-quotes'] = null;
+lintConfig.rules['unit-case'] = null;
+lintConfig.rules['indentation'] = null;
+
 // node-sass can't handle modern color function notation
 lintConfig.rules['color-function-notation'] = null;
 

package/generators/app/templates/tests/backstop/engine_scripts/playwright/clickAndHoverHelper.js

@@ -0,0 +1,43 @@
+module.exports = async (page, scenario) => {
+	const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
+	const clickSelector = scenario.clickSelectors || scenario.clickSelector;
+	const keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
+	const scrollToSelector = scenario.scrollToSelector;
+	const postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+	if (keyPressSelector) {
+		for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
+			await page.waitForSelector(keyPressSelectorItem.selector);
+			await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
+		}
+	}
+
+	if (hoverSelector) {
+		for (const hoverSelectorIndex of [].concat(hoverSelector)) {
+			await page.waitForSelector(hoverSelectorIndex);
+			await page.hover(hoverSelectorIndex);
+		}
+	}
+
+	if (clickSelector) {
+		for (const clickSelectorIndex of [].concat(clickSelector)) {
+			await page.waitForSelector(clickSelectorIndex);
+			await page.click(clickSelectorIndex);
+		}
+	}
+
+	if (postInteractionWait) {
+		if (parseInt(postInteractionWait) > 0) {
+			await page.waitForTimeout(postInteractionWait);
+		} else {
+			await page.waitForSelector(postInteractionWait);
+		}
+	}
+
+	if (scrollToSelector) {
+		await page.waitForSelector(scrollToSelector);
+		await page.evaluate((scrollToSelector) => {
+			document.querySelector(scrollToSelector).scrollIntoView();
+		}, scrollToSelector);
+	}
+};

package/generators/app/templates/tests/backstop/engine_scripts/playwright/interceptImages.js

@@ -0,0 +1,31 @@
+/**
+ * INTERCEPT IMAGES
+ * Listen to all requests. If a request matches IMAGE_URL_RE
+ * then stub the image with data from IMAGE_STUB_URL
+ *
+ * Use this in an onBefore script E.G.
+  ```
+  module.exports = async function(page, scenario) {
+    require('./interceptImages')(page, scenario);
+  }
+  ```
+ *
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const IMAGE_URL_RE = /\.gif|\.jpg|\.png/i;
+const IMAGE_STUB_URL = path.resolve(__dirname, '../../imageStub.jpg');
+const IMAGE_DATA_BUFFER = fs.readFileSync(IMAGE_STUB_URL);
+const HEADERS_STUB = {};
+
+module.exports = async function (page, scenario) {
+	page.route(IMAGE_URL_RE, (route) => {
+		route.fulfill({
+			body: IMAGE_DATA_BUFFER,
+			headers: HEADERS_STUB,
+			status: 200,
+		});
+	});
+};

package/generators/app/templates/tests/backstop/engine_scripts/playwright/loadCookies.js

@@ -0,0 +1,16 @@
+const fs = require('fs');
+
+module.exports = async (browserContext, scenario) => {
+	let cookies = [];
+	const cookiePath = scenario.cookiePath;
+
+	// Read Cookies from File, if exists
+	if (fs.existsSync(cookiePath)) {
+		cookies = JSON.parse(fs.readFileSync(cookiePath));
+	}
+
+	// Add cookies to browser
+	browserContext.addCookies(cookies);
+
+	console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2));
+};

package/generators/app/templates/tests/backstop/engine_scripts/playwright/onBefore.js

@@ -0,0 +1,3 @@
+module.exports = async (page, scenario, viewport, isReference, browserContext) => {
+	await require('./loadCookies')(browserContext, scenario);
+};

package/generators/app/templates/tests/backstop/engine_scripts/playwright/onReady.js

@@ -0,0 +1,6 @@
+module.exports = async (page, scenario, viewport, isReference, browserContext) => {
+	console.log('SCENARIO > ' + scenario.label);
+	await require('./clickAndHoverHelper')(page, scenario);
+
+	// add more ready handlers here...
+};

package/generators/app/templates/tests/backstop/engine_scripts/playwright/overrideCSS.js

@@ -0,0 +1,27 @@
+/**
+ * OVERRIDE CSS
+ * Apply this CSS to the loaded page, as a way to override styles.
+ *
+ * Use this in an onReady script E.G.
+  ```
+  module.exports = async function(page, scenario) {
+    await require('./overrideCSS')(page, scenario);
+  }
+  ```
+ *
+ */
+
+const BACKSTOP_TEST_CSS_OVERRIDE = `
+  html {
+    background-image: none;
+  }
+`;
+
+module.exports = async (page, scenario) => {
+	// inject arbitrary css to override styles
+	await page.addStyleTag({
+		content: BACKSTOP_TEST_CSS_OVERRIDE,
+	});
+
+	console.log('BACKSTOP_TEST_CSS_OVERRIDE injected for: ' + scenario.label);
+};

package/generators/app/templates/tests/backstop/engine_scripts/puppet/clickAndHoverHelper.js

@@ -1,39 +1,39 @@
-module.exports = async (page, scenario) => {
-	const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
-	const clickSelector = scenario.clickSelectors || scenario.clickSelector;
-	const keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
-	const scrollToSelector = scenario.scrollToSelector;
-	const postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
-
-	if (keyPressSelector) {
-		for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
-			await page.waitFor(keyPressSelectorItem.selector);
-			await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
-		}
-	}
-
-	if (hoverSelector) {
-		for (const hoverSelectorIndex of [].concat(hoverSelector)) {
-			await page.waitFor(hoverSelectorIndex);
-			await page.hover(hoverSelectorIndex);
-		}
-	}
-
-	if (clickSelector) {
-		for (const clickSelectorIndex of [].concat(clickSelector)) {
-			await page.waitFor(clickSelectorIndex);
-			await page.click(clickSelectorIndex);
-		}
-	}
-
-	if (postInteractionWait) {
-		await page.waitFor(postInteractionWait);
-	}
-
-	if (scrollToSelector) {
-		await page.waitFor(scrollToSelector);
-		await page.evaluate((scrollToSelector) => {
-			document.querySelector(scrollToSelector).scrollIntoView();
-		}, scrollToSelector);
-	}
-};
+module.exports = async (page, scenario) => {
+	const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
+	const clickSelector = scenario.clickSelectors || scenario.clickSelector;
+	const keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
+	const scrollToSelector = scenario.scrollToSelector;
+	const postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+	if (keyPressSelector) {
+		for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
+			await page.waitForSelector(keyPressSelectorItem.selector);
+			await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
+		}
+	}
+
+	if (hoverSelector) {
+		for (const hoverSelectorIndex of [].concat(hoverSelector)) {
+			await page.waitForSelector(hoverSelectorIndex);
+			await page.hover(hoverSelectorIndex);
+		}
+	}
+
+	if (clickSelector) {
+		for (const clickSelectorIndex of [].concat(clickSelector)) {
+			await page.waitForSelector(clickSelectorIndex);
+			await page.click(clickSelectorIndex);
+		}
+	}
+
+	if (postInteractionWait) {
+		await page.waitForTimeout(postInteractionWait);
+	}
+
+	if (scrollToSelector) {
+		await page.waitForSelector(scrollToSelector);
+		await page.evaluate((scrollToSelector) => {
+			document.querySelector(scrollToSelector).scrollIntoView();
+		}, scrollToSelector);
+	}
+};

package/generators/app/templates/tests/backstop/engine_scripts/puppet/ignoreCSP.js

@@ -36,7 +36,7 @@ module.exports = async function (page, scenario) {
 			const cookies = cookiesList.map((cookie) => `${cookie.name}=${cookie.value}`).join('; ');
 			const headers = Object.assign(request.headers(), { cookie: cookies });
 			const options = {
-				headers: headers,
+				headers,
 				body: request.postData(),
 				method: request.method(),
 				follow: 20,

package/generators/app/templates/tests/backstop/readme.md

@@ -19,5 +19,5 @@ Use following npm scripts for your test workflow:
 
 - `npm run visual-test` runs the tests, compares the results against the reference screenshots
   and generates a report under '/public/reports/backstop/html/'
-  - use this also for creating new reference screenshots, ignore the failed tests and approve with npm script `npm run visual-approve`)
+  (use this also for creating new reference screenshots, ignore the failed tests and approve with `npm run visual-approve`)
 - `npm run visual-approve` updates the references with results from last test

package/generators/app/templates/tests/cypress/cypress/e2e/pages/404.cy.js

@@ -1,31 +1,34 @@
 /// <reference types="cypress" />
 
+const page404Url = '/404';
+const nonExistingUrl = '/pagenotfound';
+
 // test 404 page
 context('404 Page Test', () => {
 	beforeEach(() => {
-		cy.visit('/404');
+		cy.visit(page404Url);
 	});
 
 	describe('HTML Head', () => {
-		it('charset meta tag is UTF-8', () => {
+		it('Character encoding is UTF-8', () => {
 			cy.document().should('have.property', 'charset').and('eq', 'UTF-8');
 		});
 
-		it('title includes 404', () => {
+		it('Title includes 404', () => {
 			cy.title().should('include', '404');
 		});
 	});
 
 	describe('Root DOM node', () => {
-		it('has lang attribute', () => {
+		it('Has lang attribute', () => {
 			cy.root().should('match', 'html').and('have.attr', 'lang', 'en');
 		});
 	});
 
 	describe('Status Code', () => {
-		it('should be 404 for a non existing page', () => {
+		it('Should be 404 for a non existing page', () => {
 			cy.request({
-				url: '/pagenotfound',
+				url: nonExistingUrl,
 				failOnStatusCode: false,
 			}).then((response) => {
 				expect(response.status).to.eq(404);

package/generators/app/templates/tests/cypress/cypress/e2e/pages/index.cy.js

@@ -7,11 +7,11 @@ context('Index Page Test', () => {
 	});
 
 	describe('Location', () => {
-		it('has no hash', () => {
+		it('Has no hash', () => {
 			cy.hash().should('be.empty');
 		});
 
-		it('passes window.location tests', () => {
+		it('Passes window.location tests', () => {
 			const baseUrl = Cypress.config().baseUrl;
 
 			cy.location().should((location) => {
@@ -25,17 +25,17 @@ context('Index Page Test', () => {
 	});
 
 	describe('HTML Head', () => {
-		it('charset meta tag is UTF-8', () => {
+		it('Character encoding is UTF-8', () => {
 			cy.document().should('have.property', 'charset').and('eq', 'UTF-8');
 		});
 
-		it('title includes index page', () => {
+		it('Title includes index page', () => {
 			cy.title().should('include', 'index page');
 		});
 	});
 
 	describe('Root DOM node', () => {
-		it('has lang attribute', () => {
+		it('Has correct lang attribute', () => {
 			cy.root().should('match', 'html').and('have.attr', 'lang', 'en');
 		});
 	});

package/generators/app/templates/tests/cypress/readme.md

@@ -1,6 +1,6 @@
 # Cypress e2e Tests
 
-End to end testing with cypress.
+End-to-end testing with cypress.
 
 [More about cypress](https://www.npmjs.com/package/cypress)
 
@@ -16,7 +16,7 @@ We use the [default configuration](https://docs.cypress.io/guides/core-concepts/
 Use following npm scripts for your test workflow:
 
 - `npm run cypress-test` to run full cypress test suite (use this to set up your tests)
-- `npm run test:cypress` to run cypress tests in headless mode (use this for ci)
+- `npm test` cypress tests are run in the test chain
 
 ## CI setup
 

package/generators/app/templates/tests/playwright/e2e/pages/404.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect } from '@playwright/test';
+
+const page404Url = '/404';
+const nonExistingUrl = '/pagenotfound';
+
+test.describe('404 Page', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto(page404Url);
+	});
+
+	test.describe('HTML Head', () => {
+		test('character encoding is UTF-8', async ({ page }) => {
+			const charset = await page.evaluate(() => window.document.characterSet);
+			expect(charset).toEqual('UTF-8');
+		});
+
+		test('Title includes 404', async ({ page }) => {
+			await expect(page).toHaveTitle(/404/);
+		});
+	});
+
+	test.describe('Root DOM node', () => {
+		test('Has correct lang attribute', async ({ page }) => {
+			const lang = await page.locator('html').getAttribute('lang');
+			expect(lang).toEqual('en');
+		});
+	});
+});
+
+test.describe('404 Page', () => {
+	test.describe('Status Code', () => {
+		test('Should be 404 for a non existing page', async ({ page }) => {
+			page.on('response', (response) => {
+				if (response.url().includes(nonExistingUrl)) {
+					expect(response.status()).toBe(404);
+				}
+			});
+			await page.goto(nonExistingUrl);
+		});
+	});
+});

package/generators/app/templates/tests/playwright/e2e/pages/index.spec.ts

@@ -0,0 +1,42 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Index Page', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto('/index');
+	});
+
+	test.describe('Location', () => {
+		test('Has no hash', async ({ page }) => {
+			expect(page.url().includes('#')).toBeFalsy();
+		});
+
+		test('Passes window.location tests', async ({ page }, testInfo) => {
+			const baseUrl = testInfo.project.use.baseURL;
+			const location = await page.evaluate(() => window.location);
+
+			expect(location.hash).toEqual('');
+			expect(location.href).toEqual(`${baseUrl}/index`);
+			expect(location.origin).toEqual(`${baseUrl}`);
+			expect(location.pathname).toEqual('/index');
+			expect(location.search).toEqual('');
+		});
+	});
+
+	test.describe('HTML Head', () => {
+		test('Character encoding is UTF-8', async ({ page }) => {
+			const charset = await page.evaluate(() => window.document.characterSet);
+			expect(charset).toEqual('UTF-8');
+		});
+
+		test('Title includes index page', async ({ page }) => {
+			await expect(page).toHaveTitle(/index page/);
+		});
+	});
+
+	test.describe('Root DOM node', () => {
+		test('Has correct lang attribute', async ({ page }) => {
+			const lang = await page.locator('html').getAttribute('lang');
+			expect(lang).toEqual('en');
+		});
+	});
+});

package/generators/app/templates/tests/playwright/playwright.config.ts

@@ -0,0 +1,108 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const port = process.env.PORT || 8080;
+
+/**
+ * See https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+	testDir: './e2e',
+	/* Maximum time one test can run for. */
+	timeout: 30 * 1000,
+	expect: {
+		/**
+		 * Maximum time expect() should wait for the condition to be met.
+		 * For example in `await expect(locator).toHaveText();`
+		 */
+		timeout: 5000,
+	},
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: process.env.CI
+		? [
+			['dot'],
+			[
+				'html',
+				{
+					open: 'never',
+					outputFolder: '../../public/reports/playwright',
+				},
+			],
+		]
+		: [
+			['list'],
+			[
+				'html',
+				{
+					open: 'on-failure',
+					outputFolder: '../../public/reports/playwright',
+				},
+			],
+		],
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+		actionTimeout: 0,
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL: `http://localhost:${port}`,
+		/* Capture screenshot. Defaults to 'off' */
+		screenshot: 'only-on-failure',
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] },
+		},
+
+		// {
+		// 	name: 'firefox',
+		// 	use: { ...devices['Desktop Firefox'] },
+		// },
+
+		// {
+		// 	name: 'webkit',
+		// 	use: { ...devices['Desktop Safari'] },
+		// },
+
+		/* Test against mobile viewports. */
+		// {
+		//   name: 'Mobile Chrome',
+		//   use: { ...devices['Pixel 5'] },
+		// },
+		// {
+		//   name: 'Mobile Safari',
+		//   use: { ...devices['iPhone 12'] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { channel: 'chrome' },
+		// },
+	],
+
+	/* Folder for test artifacts such as screenshots, videos, traces, etc. */
+	outputDir: 'test-results/',
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: 'npm run prod:serve',
+		port: Number(port),
+		reuseExistingServer: true,
+	},
+});

package/generators/app/templates/tests/playwright/readme.md

@@ -0,0 +1,24 @@
+# Playwright e2e Tests
+
+End-to-end testing with playwright.
+
+[More about playwright](https://playwright.dev/)
+
+## Directories
+
+- `./e2e` is the place for your tests (you may create subfolders as well)
+
+## Scripts
+
+Use following npm scripts for your test workflow:
+
+- `npm run playwright-test` to run playwright ui-mode (use this to set up your tests)
+- `npm test` playwright tests run in the test chain (this also works well in ci environments)
+
+or [run and generate playwright tests directly in VS Code](https://playwright.dev/docs/codegen#generate-tests-in-vs-code)
+
+## CI setup
+
+Add `CI=true` as environment variable.
+
+More on [configuation for continous integration](https://playwright.dev/docs/ci)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-nitro",
-  "version": "7.3.0",
+  "version": "7.5.0",
   "description": "Yeoman generator for the nitro frontend framework",
   "license": "MIT",
   "repository": "merkle-open/generator-nitro",
@@ -45,11 +45,11 @@
   },
   "devDependencies": {
     "@merkle-open/eslint-config": "1.0.0",
-    "ejs": "3.1.8",
+    "ejs": "3.1.9",
     "eslint": "7.32.0",
     "eslint-plugin-import": "2.27.5",
-    "fs-extra": "11.1.0",
-    "jasmine": "4.5.0",
+    "fs-extra": "11.1.1",
+    "jasmine": "4.6.0",
     "yeoman-assert": "3.1.1",
     "yeoman-test": "6.3.0"
   }