generator-nitro 7.1.2 → 7.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/generators/app/templates/.node-version +1 -1
  2. package/generators/app/templates/.prettierrc.js +1 -1
  3. package/generators/app/templates/CUTAWAYpackage.json +17 -17
  4. package/generators/app/templates/project/docs/nitro-themes.md +3 -3
  5. package/generators/app/templates/src/patterns/atoms/box/css/box.scss +4 -2
  6. package/generators/app/templates/src/patterns/atoms/box/css/modifier/box-dark.scss +1 -1
  7. package/generators/app/templates/src/patterns/atoms/button/css/button.scss +1 -1
  8. package/generators/app/templates/src/patterns/atoms/checkbox/css/checkbox.scss +4 -4
  9. package/generators/app/templates/src/patterns/atoms/cta/css/cta.scss +1 -1
  10. package/generators/app/templates/src/patterns/atoms/datepicker/css/datepicker.scss +1 -1
  11. package/generators/app/templates/src/patterns/atoms/heading/css/heading.scss +1 -1
  12. package/generators/app/templates/src/patterns/atoms/loader/css/loader.scss +1 -1
  13. package/generators/app/templates/src/patterns/atoms/quote/css/quote.scss +2 -2
  14. package/generators/app/templates/src/patterns/atoms/stage/css/stage.scss +4 -4
  15. package/generators/app/templates/src/patterns/molecules/example/css/example.scss +2 -2
  16. package/generators/app/templates/src/patterns/molecules/example/css/modifier/example-blue.scss +1 -1
  17. package/generators/app/templates/src/shared/base/document/css/document.scss +1 -1
  18. package/generators/app/templates/src/shared/base/reset/css/reset.scss +1 -1
  19. package/generators/app/templates/src/shared/base/webfonts/css/webfont-gaegu.scss +12 -6
  20. package/generators/app/templates/src/shared/base/webfonts/css/webfont-playfair-display.scss +15 -4
  21. package/generators/app/templates/src/shared/utils/colors/css/colors.scss +2 -2
  22. package/generators/app/templates/src/shared/utils/colors/css/theme/dark.scss +1 -1
  23. package/generators/app/templates/src/shared/utils/colors2/css/colors2.scss +12 -12
  24. package/generators/app/templates/src/shared/utils/fixed-aspect-ratio/css/fixed-aspect-ratio.scss +1 -1
  25. package/generators/app/templates/src/shared/utils/gradients/css/gradients.scss +1 -1
  26. package/generators/app/templates/stylelint.config.js +4 -1
  27. package/generators/app/templates/tsconfig.json +1 -1
  28. package/package.json +1 -1
@@ -1 +1 @@
1
- 16.18.0
1
+ 16.18.1
@@ -1,3 +1,3 @@
1
- const config = require('@namics/prettier-config');
1
+ const config = require('@merkle-open/prettier-config');
2
2
 
3
3
  module.exports = config;
@@ -83,7 +83,7 @@
83
83
  "dependencies": {<% if (options.exampleCode) { %>
84
84
  "@gondel/core": "1.2.7",
85
85
  "@gondel/plugin-hot": "1.2.7",
86
- "bootstrap": "5.2.2",<% } %>
86
+ "bootstrap": "5.2.3",<% } %>
87
87
  "core-js": "3.26.0"<% if (options.exampleCode) { %>,
88
88
  "flatpickr": "4.6.13",
89
89
  "handlebars": "4.7.7",
@@ -91,31 +91,31 @@
91
91
  "lazysizes": "5.3.2",
92
92
  "lottie-web": "5.9.6",
93
93
  "prevent-window-opener-attacks": "0.3.0"<% } %><% if (options.jsCompiler === 'js') { %>,
94
- "regenerator-runtime": "0.13.10"<% } %><% if (options.exampleCode) { %>,
94
+ "regenerator-runtime": "0.13.11"<% } %><% if (options.exampleCode) { %>,
95
95
  "svg4everybody": "2.1.9"<% } %>
96
96
  },
97
97
  "devDependencies": {<% if (options.jsCompiler === 'js') { %>
98
98
  "@babel/eslint-parser": "7.19.1",<% } %>
99
99
  "@khanacademy/tota11y": "0.2.0",
100
- "@merkle-open/html-validate-config": "0.1.1",
100
+ "@merkle-open/html-validate-config": "1.0.0",
101
+ "@merkle-open/prettier-config": "1.0.0",
102
+ "@merkle-open/stylelint-config": "1.0.0",
103
+ "@merkle-open/ts-config": "1.0.0",
101
104
  "@namics/eslint-config": "9.1.1",
102
- "@namics/prettier-config": "3.0.0",
103
- "@namics/stylelint-config": "2.0.0",
104
- "@namics/ts-config": "2.0.0",
105
105
  "@nitro/app": "<%= version %>",
106
106
  "@nitro/exporter": "<%= version %>",
107
107
  "@nitro/gulp": "<%= version %>",
108
108
  "@nitro/webpack": "<%= version %>",<% if (options.jsCompiler === 'ts') { %>
109
- "@types/bootstrap": "5.2.5",<% if (options.exampleCode ) { %>
109
+ "@types/bootstrap": "5.2.6",<% if (options.exampleCode ) { %>
110
110
  "@types/jquery": "3.5.14",<% } %>
111
111
  "@types/svg4everybody": "2.1.2",
112
112
  "@types/webpack-env": "1.18.0",<% } %>
113
- "backstopjs": "6.1.3",
113
+ "backstopjs": "6.1.4",
114
114
  "check-node-version": "4.2.1",
115
115
  "commitizen": "4.2.5",
116
116
  "config": "3.3.8",
117
117
  "cross-env": "7.0.3",
118
- "cypress": "10.11.0",
118
+ "cypress": "11.2.0",
119
119
  "cz-conventional-changelog": "3.3.0",
120
120
  "env-linter": "1.0.0",
121
121
  "eslint": "7.32.0",
@@ -123,20 +123,20 @@
123
123
  "extend": "3.0.2",
124
124
  "generator-nitro": "<%= version %>",
125
125
  "gulp": "4.0.2",
126
- "husky": "8.0.1",
127
- "html-validate": "7.7.1",
126
+ "husky": "8.0.2",
127
+ "html-validate": "7.10.0",
128
128
  "license-checker": "25.0.1",
129
- "lighthouse": "9.6.7",
129
+ "lighthouse": "9.6.8",
130
130
  "lint-staged": "13.0.3",<% if (options.themes) { %>
131
131
  "node-sass": "7.0.3",<% } %>
132
- "npm-check-updates": "16.3.15",
132
+ "npm-check-updates": "16.4.3",
133
133
  "npm-run-all": "4.1.5",
134
- "prettier": "2.7.1",
134
+ "prettier": "2.8.0",
135
135
  "rimraf": "3.0.2",
136
- "stylelint": "13.13.1",<% if (options.jsCompiler === 'ts') { %>
137
- "typescript": "4.8.4",<% } %>
136
+ "stylelint": "14.15.0",<% if (options.jsCompiler === 'ts') { %>
137
+ "typescript": "4.9.3",<% } %>
138
138
  "webpack-cli": "4.10.0",
139
- "yo": "4.3.0"
139
+ "yo": "4.3.1"
140
140
  },
141
141
  "browserslist": [
142
142
  "> 0.2%",
@@ -139,7 +139,7 @@ Abstraction for themed colors as an example:
139
139
 
140
140
  ```
141
141
  // colors.scss
142
- @import './theme/light.scss';
142
+ @import './theme/light';
143
143
 
144
144
  $color-base-font: $foreground;
145
145
  $color-base-background: $background;
@@ -152,8 +152,8 @@ The pattern.scss uses the themed colors and a themed pattern import with variabl
152
152
 
153
153
  ```
154
154
  // pattern.scss
155
- @import '../../../../shared/utils/colors/css/colors.scss';
156
- @import './theme/light.scss';
155
+ @import '../../../../shared/utils/colors/css/colors';
156
+ @import './theme/light';
157
157
 
158
158
  .m-example {
159
159
  margin: 1em 0;
@@ -1,9 +1,9 @@
1
- @import '../../../../shared/utils/colors2/css/colors2.scss';
1
+ @import '../../../../shared/utils/colors2/css/colors2';
2
2
 
3
3
  .a-box {
4
4
  position: relative;
5
5
  margin: 2rem 0 2rem 2rem;
6
- padding: 2rem 2rem 1.5rem 2rem;
6
+ padding: 2rem 2rem 1.5rem;
7
7
  color: $color-gray-1;
8
8
  background-color: $color-gray-8;
9
9
  min-height: 5em;
@@ -27,12 +27,14 @@
27
27
  @mixin box-mixin() {
28
28
  display: block;
29
29
  }
30
+ /* stylelint-disable-next-line no-duplicate-selectors */
30
31
  .a-box {
31
32
  @include box-mixin();
32
33
  }
33
34
  @mixin box-mixin-alternative($display: block) {
34
35
  display: $display;
35
36
  }
37
+ /* stylelint-disable-next-line no-duplicate-selectors */
36
38
  .a-box {
37
39
  @include box-mixin-alternative();
38
40
  @include box-mixin-alternative(block);
@@ -1,4 +1,4 @@
1
- @import '../../../../../shared/utils/colors2/css/colors2.scss';
1
+ @import '../../../../../shared/utils/colors2/css/colors2';
2
2
 
3
3
  .a-box--dark {
4
4
 
@@ -1,4 +1,4 @@
1
- @import '../../../../shared/utils/colors2/css/colors2.scss';
1
+ @import '../../../../shared/utils/colors2/css/colors2';
2
2
 
3
3
  .a-button {
4
4
  cursor: pointer;
@@ -1,8 +1,8 @@
1
- @import '../../../../shared/utils/colors2/css/colors2.scss';
2
- @import '../../../../shared/utils/hidden/css/hidden.scss';
1
+ @import '../../../../shared/utils/colors2/css/colors2';
2
+ @import '../../../../shared/utils/hidden/css/hidden';
3
3
 
4
4
  $checkbox-border: 2px;
5
- $checkbox-size : 1.3em;
5
+ $checkbox-size: 1.3em;
6
6
  $checkbox-color: $color-gray-5;
7
7
 
8
8
  .a-checkbox {
@@ -47,7 +47,7 @@ $checkbox-color: $color-gray-5;
47
47
 
48
48
  .a-checkbox__label {
49
49
  display: inline-block;
50
- padding: 0.3em 1em 0.3em (1 + $checkbox-size) ;
50
+ padding: 0.3em 1em 0.3em (1 + $checkbox-size);
51
51
 
52
52
  cursor: pointer;
53
53
  user-select: none;
@@ -1,4 +1,4 @@
1
- @import '../../../../shared/utils/colors2/css/colors2.scss';
1
+ @import '../../../../shared/utils/colors2/css/colors2';
2
2
 
3
3
  .a-cta {
4
4
  display: block;
@@ -1,4 +1,4 @@
1
- @import '../../../../shared/utils/colors2/css/colors2.scss';
1
+ @import '../../../../shared/utils/colors2/css/colors2';
2
2
  @import '../../../../shared/utils/hidden/css/hidden';
3
3
  @import '~flatpickr/dist/flatpickr.css';
4
4
 
@@ -1,4 +1,4 @@
1
- @import '../../../../shared/utils/webfonts/css/webfonts.scss';
1
+ @import '../../../../shared/utils/webfonts/css/webfonts';
2
2
 
3
3
  .a-heading {
4
4
  margin-bottom: 2em;
@@ -1,4 +1,4 @@
1
- @import '../../../../shared/utils/colors2/css/colors2.scss';
1
+ @import '../../../../shared/utils/colors2/css/colors2';
2
2
 
3
3
  @keyframes a-loader-loading {
4
4
  0% {
@@ -1,6 +1,6 @@
1
- @import '../../../../shared/utils/webfonts/css/webfonts.scss';
1
+ @import '../../../../shared/utils/webfonts/css/webfonts';
2
2
  @import '../../../../shared/utils/colors2/css/colors2';
3
- @import '../../../../shared/utils/breakpoints/css/breakpoints.scss';
3
+ @import '../../../../shared/utils/breakpoints/css/breakpoints';
4
4
 
5
5
  .a-quote {
6
6
  box-sizing: border-box;
@@ -6,10 +6,10 @@
6
6
  width: 100%;
7
7
  height: 190px;
8
8
  background-image:
9
- url(../img/space-ship.svg),
10
- url(../img/satellite.svg),
11
- url(../img/ufo.svg),
12
- url(../img/clouds.png);
9
+ url('../img/space-ship.svg'),
10
+ url('../img/satellite.svg'),
11
+ url('../img/ufo.svg'),
12
+ url('../img/clouds.png');
13
13
  background-position: 10vw 200px, 50% 200px, 70% -100px, 0 0;
14
14
  background-size: 8vw, 5vw, 7vw, auto;
15
15
  background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
@@ -1,5 +1,5 @@
1
- @import '../../../../shared/utils/colors/css/colors.scss';<% if (options.themes) { %>
2
- @import './theme/light.scss';<% } %>
1
+ @import '../../../../shared/utils/colors/css/colors';<% if (options.themes) { %>
2
+ @import './theme/light';<% } %>
3
3
 
4
4
  .m-example {
5
5
  margin: 1em 0;
@@ -1,4 +1,4 @@
1
- @import '../../../../../shared/utils/colors/css/colors.scss';
1
+ @import '../../../../../shared/utils/colors/css/colors';
2
2
 
3
3
  .m-example--blue {
4
4
  color: $color-brand-font;
@@ -1,4 +1,4 @@
1
- @import '../../../../shared/utils/colors/css/colors.scss';
1
+ @import '../../../../shared/utils/colors/css/colors';
2
2
 
3
3
  html {
4
4
  font-family: Arial, sans-serif;
@@ -8,7 +8,7 @@
8
8
  box-sizing: border-box;
9
9
  }
10
10
 
11
- @media (prefers-reduced-motion:no-preference) {
11
+ @media (prefers-reduced-motion: no-preference) {
12
12
  :root {
13
13
  scroll-behavior: smooth;
14
14
  }
@@ -1,32 +1,38 @@
1
1
  /* gaegu-300 - latin */
2
2
  @font-face {
3
- font-family: 'Gaegu';
3
+ font-family: Gaegu;
4
4
  font-style: normal;
5
5
  font-weight: 300;
6
6
  font-display: fallback;
7
- src: local('Gaegu Light'), local('Gaegu-Light'),
7
+ src:
8
+ local('Gaegu Light'),
9
+ local('Gaegu-Light'),
8
10
  url('../fonts/gaegu-v2-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
9
11
  url('../fonts/gaegu-v2-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
10
12
  }
11
13
 
12
14
  /* gaegu-regular - latin */
13
15
  @font-face {
14
- font-family: 'Gaegu';
16
+ font-family: Gaegu;
15
17
  font-style: normal;
16
18
  font-weight: 400;
17
19
  font-display: fallback;
18
- src: local('Gaegu Regular'), local('Gaegu-Regular'),
20
+ src:
21
+ local('Gaegu Regular'),
22
+ local('Gaegu-Regular'),
19
23
  url('../fonts/gaegu-v2-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
20
24
  url('../fonts/gaegu-v2-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
21
25
  }
22
26
 
23
27
  /* gaegu-700 - latin */
24
28
  @font-face {
25
- font-family: 'Gaegu';
29
+ font-family: Gaegu;
26
30
  font-style: normal;
27
31
  font-weight: 700;
28
32
  font-display: fallback;
29
- src: local('Gaegu Bold'), local('Gaegu-Bold'),
33
+ src:
34
+ local('Gaegu Bold'),
35
+ local('Gaegu-Bold'),
30
36
  url('../fonts/gaegu-v2-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
31
37
  url('../fonts/gaegu-v2-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
32
38
  }
@@ -4,37 +4,48 @@
4
4
  font-style: normal;
5
5
  font-weight: 400;
6
6
  font-display: fallback;
7
- src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'),
7
+ src:
8
+ local('Playfair Display Regular'),
9
+ local('PlayfairDisplay-Regular'),
8
10
  url('../fonts/playfair-display-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
9
11
  url('../fonts/playfair-display-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
10
12
  }
13
+
11
14
  /* playfair-display-italic - latin */
12
15
  @font-face {
13
16
  font-family: 'Playfair Display';
14
17
  font-style: italic;
15
18
  font-weight: 400;
16
19
  font-display: fallback;
17
- src: local('Playfair Display Italic'), local('PlayfairDisplay-Italic'),
20
+ src:
21
+ local('Playfair Display Italic'),
22
+ local('PlayfairDisplay-Italic'),
18
23
  url('../fonts/playfair-display-v13-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
19
24
  url('../fonts/playfair-display-v13-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
20
25
  }
26
+
21
27
  /* playfair-display-700 - latin */
22
28
  @font-face {
23
29
  font-family: 'Playfair Display';
24
30
  font-style: normal;
25
31
  font-weight: 700;
26
32
  font-display: fallback;
27
- src: local('Playfair Display Bold'), local('PlayfairDisplay-Bold'),
33
+ src:
34
+ local('Playfair Display Bold'),
35
+ local('PlayfairDisplay-Bold'),
28
36
  url('../fonts/playfair-display-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
29
37
  url('../fonts/playfair-display-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
30
38
  }
39
+
31
40
  /* playfair-display-900 - latin */
32
41
  @font-face {
33
42
  font-family: 'Playfair Display';
34
43
  font-style: normal;
35
44
  font-weight: 900;
36
45
  font-display: fallback;
37
- src: local('Playfair Display Black'), local('PlayfairDisplay-Black'),
46
+ src:
47
+ local('Playfair Display Black'),
48
+ local('PlayfairDisplay-Black'),
38
49
  url('../fonts/playfair-display-v13-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
39
50
  url('../fonts/playfair-display-v13-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
40
51
  }
@@ -1,6 +1,6 @@
1
1
  // colors<% if (options.themes) { %>
2
- @import './theme/light.scss';<% } else { %>
3
- @import './variables/colors.scss';<% } %>
2
+ @import './theme/light';<% } else { %>
3
+ @import './variables/colors';<% } %>
4
4
 
5
5
  $color-base-font: $foreground;
6
6
  $color-base-background: $background;
@@ -1,5 +1,5 @@
1
1
  // base colors
2
- $white: #dcdfe4;
2
+ $white: #dcdfe4;
3
3
  $black: #282c34;
4
4
  $blue: #61afef;
5
5
  $purple: #c678dd;
@@ -1,18 +1,18 @@
1
- @import '../../colors/css/colors.scss';
1
+ @import '../../colors/css/colors';
2
2
 
3
3
  // colors grey
4
- $color-gray: #666;
5
- $color-gray-1: #191919;
6
- $color-gray-2: #333;
7
- $color-gray-3: #434343;
8
- $color-gray-4: $color-gray;
9
- $color-gray-5: #7f7f7f;
10
- $color-gray-6: #999;
11
- $color-gray-7: #b2b2b2;
12
- $color-gray-8: #ccc;
13
- $color-gray-9: #e5e5e5;
4
+ $color-gray: #666;
5
+ $color-gray-1: #191919;
6
+ $color-gray-2: #333;
7
+ $color-gray-3: #434343;
8
+ $color-gray-4: $color-gray;
9
+ $color-gray-5: #7f7f7f;
10
+ $color-gray-6: #999;
11
+ $color-gray-7: #b2b2b2;
12
+ $color-gray-8: #ccc;
13
+ $color-gray-9: #e5e5e5;
14
14
  $color-gray-10: #f2f2f2;
15
- $color-white: #fff;
15
+ $color-white: #fff;
16
16
 
17
17
  // colors
18
18
  $color-orange: #fa8a1a;
@@ -22,6 +22,6 @@
22
22
  }
23
23
 
24
24
  @mixin fluid-height($x, $y) {
25
- padding: 0 0 percentage($y/$x) 0;
25
+ padding: 0 0 percentage($y / $x) 0;
26
26
  height: 0;
27
27
  }
@@ -1,4 +1,4 @@
1
- @import '../../colors/css/colors.scss';
1
+ @import '../../colors/css/colors';
2
2
 
3
3
  // brand color themes
4
4
  $brand-gradient-1: linear-gradient(0deg, $color-brand-1, mix($color-brand-1, #fff, 80%));
@@ -1,8 +1,11 @@
1
- const lintConfig = require('@namics/stylelint-config');
1
+ const lintConfig = require('@merkle-open/stylelint-config');
2
2
 
3
3
  lintConfig.rules['plugin/stylelint-bem-namics'] = {
4
4
  patternPrefixes: ['a', 'm', 'o', 'h'],
5
5
  helperPrefixes: ['state'],
6
6
  };
7
7
 
8
+ // node-sass can't handle modern color function notation
9
+ lintConfig.rules['color-function-notation'] = null;
10
+
8
11
  module.exports = lintConfig;
@@ -1,5 +1,5 @@
1
1
  {
2
- "extends": "@namics/ts-config",
2
+ "extends": "@merkle-open/ts-config",
3
3
  "include": ["src/**/*"],
4
4
  "compilerOptions": {
5
5
  "baseUrl": "./src",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "generator-nitro",
3
- "version": "7.1.2",
3
+ "version": "7.2.0",
4
4
  "description": "Yeoman generator for the nitro frontend framework",
5
5
  "license": "MIT",
6
6
  "repository": "merkle-open/generator-nitro",