generator-nitro 7.4.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/CUTAWAYpackage.json

@@ -33,10 +33,8 @@
     "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\"",
-    "playwright-test": "cross-env PORT=8890 NITRO_MODE=test playwright test --config=tests/playwright/playwright.config.ts",
-    "playwright-test-generate": "cross-env PORT=8891 NITRO_MODE=test npm-run-all --parallel --race prod:serve playwright-test-generate:codegen",
-    "playwright-test-generate:codegen": "playwright codegen http://localhost:8891",
-    "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:build": "npm run build",
@@ -89,13 +87,13 @@
     "@gondel/core": "1.2.7",
     "@gondel/plugin-hot": "1.2.7",
     "bootstrap": "5.2.3",<% } %>
-    "core-js": "3.30.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"<% } %>
   },
@@ -104,24 +102,24 @@
     "@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 %>",
-    "@playwright/test": "1.32.2",<% if (options.jsCompiler === 'ts') { %>
+    "@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.2.0",
+    "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.9.0",
+    "cypress": "12.11.0",
     "cz-conventional-changelog": "3.3.0",
     "env-linter": "1.0.0",
     "eslint": "7.32.0",
@@ -129,18 +127,18 @@
     "extend": "3.0.2",
     "generator-nitro": "<%= version %>",
     "gulp": "4.0.2",
-    "html-validate": "7.14.0",
+    "html-validate": "7.15.1",
     "husky": "8.0.3",
     "license-checker": "25.0.1",
-    "lighthouse": "10.1.0",
-    "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.10.1",
+    "npm-check-updates": "16.10.9",
     "npm-run-all": "4.1.5",
-    "prettier": "2.8.7",
-    "rimraf": "4.4.1",
-    "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"
   },
@@ -157,6 +155,7 @@
   },
   "lint-staged": {
     "src/**/*.{css,scss}": [
+      "prettier --write",
       "stylelint --allow-empty-input"
     ],
     "**/*.json": [

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

@@ -36,7 +36,7 @@ module.exports = async (page, scenario) => {
 
 	if (scrollToSelector) {
 		await page.waitForSelector(scrollToSelector);
-		await page.evaluate(scrollToSelector => {
+		await page.evaluate((scrollToSelector) => {
 			document.querySelector(scrollToSelector).scrollIntoView();
 		}, scrollToSelector);
 	}

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

@@ -21,11 +21,11 @@ const IMAGE_DATA_BUFFER = fs.readFileSync(IMAGE_STUB_URL);
 const HEADERS_STUB = {};
 
 module.exports = async function (page, scenario) {
-	page.route(IMAGE_URL_RE, route => {
+	page.route(IMAGE_URL_RE, (route) => {
 		route.fulfill({
 			body: IMAGE_DATA_BUFFER,
 			headers: HEADERS_STUB,
-			status: 200
+			status: 200,
 		});
 	});
 };

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

@@ -20,7 +20,7 @@ const BACKSTOP_TEST_CSS_OVERRIDE = `
 module.exports = async (page, scenario) => {
 	// inject arbitrary css to override styles
 	await page.addStyleTag({
-		content: BACKSTOP_TEST_CSS_OVERRIDE
+		content: BACKSTOP_TEST_CSS_OVERRIDE,
 	});
 
 	console.log('BACKSTOP_TEST_CSS_OVERRIDE injected for: ' + scenario.label);

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/playwright/readme.md

@@ -12,9 +12,8 @@ End-to-end testing with playwright.
 
 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)
-- `npm run playwright-test` to run all tests on your local machine
-- `npm run playwright-test-generate` to open the playwright generator (use this to set up your tests)
 
 or [run and generate playwright tests directly in VS Code](https://playwright.dev/docs/codegen#generate-tests-in-vs-code)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-nitro",
-  "version": "7.4.0",
+  "version": "7.5.0",
   "description": "Yeoman generator for the nitro frontend framework",
   "license": "MIT",
   "repository": "merkle-open/generator-nitro",