From 3298ba5721d54c9f24bde4c374cadeedca67c42c Mon Sep 17 00:00:00 2001 From: adrians5j Date: Wed, 15 May 2024 17:01:05 +0200 Subject: [PATCH 1/9] feat: introduce `reset.css` in admin/website's `styles.scss` --- packages/app-admin/package.json | 1 + packages/app-admin/src/styles.scss | 1 + packages/app-admin/src/styles/reset.scss | 1 + packages/app-website/package.json | 3 ++- packages/app-website/src/styles.scss | 1 + packages/app-website/src/styles/reset.scss | 1 + 6 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 packages/app-admin/src/styles/reset.scss create mode 100644 packages/app-website/src/styles.scss create mode 100644 packages/app-website/src/styles/reset.scss diff --git a/packages/app-admin/package.json b/packages/app-admin/package.json index 3ac8bf15c5f..0cebd6050a3 100644 --- a/packages/app-admin/package.json +++ b/packages/app-admin/package.json @@ -52,6 +52,7 @@ "react-dom": "18.2.0", "react-hotkeyz": "^1.0.4", "react-transition-group": "^4.3.0", + "reset-css": "^5.0.1", "store": "^2.0.12" }, "devDependencies": { diff --git a/packages/app-admin/src/styles.scss b/packages/app-admin/src/styles.scss index 3029ad3a2fc..661f11cc324 100644 --- a/packages/app-admin/src/styles.scss +++ b/packages/app-admin/src/styles.scss @@ -1,2 +1,3 @@ +@import "./styles/reset"; @import "./styles/theme"; @import "./styles/material"; diff --git a/packages/app-admin/src/styles/reset.scss b/packages/app-admin/src/styles/reset.scss new file mode 100644 index 00000000000..bb944b67fa8 --- /dev/null +++ b/packages/app-admin/src/styles/reset.scss @@ -0,0 +1 @@ +@import 'reset-css/sass/reset'; \ No newline at end of file diff --git a/packages/app-website/package.json b/packages/app-website/package.json index a500b17cb2d..2094d6152fb 100644 --- a/packages/app-website/package.json +++ b/packages/app-website/package.json @@ -28,7 +28,8 @@ "graphql-tag": "^2.12.6", "react": "18.2.0", "react-dom": "18.2.0", - "react-helmet": "^6.1.0" + "react-helmet": "^6.1.0", + "reset-css": "^5.0.1" }, "devDependencies": { "@babel/cli": "^7.23.9", diff --git a/packages/app-website/src/styles.scss b/packages/app-website/src/styles.scss new file mode 100644 index 00000000000..974f4c0e466 --- /dev/null +++ b/packages/app-website/src/styles.scss @@ -0,0 +1 @@ +@import "./styles/reset"; diff --git a/packages/app-website/src/styles/reset.scss b/packages/app-website/src/styles/reset.scss new file mode 100644 index 00000000000..bb944b67fa8 --- /dev/null +++ b/packages/app-website/src/styles/reset.scss @@ -0,0 +1 @@ +@import 'reset-css/sass/reset'; \ No newline at end of file From a1c3aef71307e0af23e1ed7a46d686d601e77351 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Wed, 15 May 2024 17:01:33 +0200 Subject: [PATCH 2/9] feat: remove `reset.css` styles from `global.scss` --- extensions/theme/src/global.scss | 53 +------------------------------- 1 file changed, 1 insertion(+), 52 deletions(-) diff --git a/extensions/theme/src/global.scss b/extensions/theme/src/global.scss index 6137d59b0fa..74192c3be90 100644 --- a/extensions/theme/src/global.scss +++ b/extensions/theme/src/global.scss @@ -1,53 +1,2 @@ @import "@webiny/react-rich-text-renderer/styles.scss"; -@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700"); - -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -/* HTML5 display-role reset for older browsers */ - -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; -} - -body { - line-height: 1; -} - -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - -blockquote { - &:before, &:after { - content: ''; - content: none; - } -} - -q { - &:before, &:after { - content: ''; - content: none; - } -} - -table { - border-collapse: collapse; - border-spacing: 0; -} +@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700"); \ No newline at end of file From 300131a34b0f1d5d8d0e3f7f3f461b9b94c421a3 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Wed, 15 May 2024 17:02:20 +0200 Subject: [PATCH 3/9] feat: import `app-website` styles in new `App.scss` file --- apps/website/src/App.scss | 1 + apps/website/src/App.tsx | 1 + 2 files changed, 2 insertions(+) create mode 100644 apps/website/src/App.scss diff --git a/apps/website/src/App.scss b/apps/website/src/App.scss new file mode 100644 index 00000000000..e77a728a224 --- /dev/null +++ b/apps/website/src/App.scss @@ -0,0 +1 @@ +@import "~@webiny/app-website/styles.scss"; diff --git a/apps/website/src/App.tsx b/apps/website/src/App.tsx index 39799db5484..42f275b5e53 100644 --- a/apps/website/src/App.tsx +++ b/apps/website/src/App.tsx @@ -1,5 +1,6 @@ import React from "react"; import { Website } from "@webiny/app-website"; +import "./App.scss"; export const App = () => { return ; From c6d7be636993c3fb78b1c088df3b7f694edd023d Mon Sep 17 00:00:00 2001 From: adrians5j Date: Wed, 15 May 2024 17:02:45 +0200 Subject: [PATCH 4/9] chore: update yarn.lock --- yarn.lock | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/yarn.lock b/yarn.lock index 2127a4d1a9b..3d9d2734da9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15203,6 +15203,7 @@ __metadata: react-dom: 18.2.0 react-hotkeyz: ^1.0.4 react-transition-group: ^4.3.0 + reset-css: ^5.0.1 rimraf: ^5.0.5 store: ^2.0.12 ttypescript: ^1.5.12 @@ -16344,6 +16345,7 @@ __metadata: react: 18.2.0 react-dom: 18.2.0 react-helmet: ^6.1.0 + reset-css: ^5.0.1 rimraf: ^5.0.5 ttypescript: ^1.5.12 typescript: 4.7.4 @@ -35894,6 +35896,13 @@ __metadata: languageName: node linkType: hard +"reset-css@npm:^5.0.1": + version: 5.0.2 + resolution: "reset-css@npm:5.0.2" + checksum: d6955ea4d852c21510d6f50dc06e151a90e0d7d6fa43aac7a79f3779c72a1eb3a5769a2eb9f5c490675376888e9a4bfbc34937cd7d4198ab65a1c73620819b1a + languageName: node + linkType: hard + "resize-observer-polyfill@npm:^1.5.1": version: 1.5.1 resolution: "resize-observer-polyfill@npm:1.5.1" From f674b3462e4c949b269cabec8a31e544a31d4695 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 16 May 2024 12:14:42 +0200 Subject: [PATCH 5/9] fix: update CWP template --- .../template/common/apps/website/src/App.scss | 1 + .../template/common/apps/website/src/App.tsx | 1 + .../common/extensions/theme/src/global.scss | 54 ++----------------- 3 files changed, 5 insertions(+), 51 deletions(-) create mode 100644 packages/cwp-template-aws/template/common/apps/website/src/App.scss diff --git a/packages/cwp-template-aws/template/common/apps/website/src/App.scss b/packages/cwp-template-aws/template/common/apps/website/src/App.scss new file mode 100644 index 00000000000..e77a728a224 --- /dev/null +++ b/packages/cwp-template-aws/template/common/apps/website/src/App.scss @@ -0,0 +1 @@ +@import "~@webiny/app-website/styles.scss"; diff --git a/packages/cwp-template-aws/template/common/apps/website/src/App.tsx b/packages/cwp-template-aws/template/common/apps/website/src/App.tsx index 39799db5484..42f275b5e53 100644 --- a/packages/cwp-template-aws/template/common/apps/website/src/App.tsx +++ b/packages/cwp-template-aws/template/common/apps/website/src/App.tsx @@ -1,5 +1,6 @@ import React from "react"; import { Website } from "@webiny/app-website"; +import "./App.scss"; export const App = () => { return ; diff --git a/packages/cwp-template-aws/template/common/extensions/theme/src/global.scss b/packages/cwp-template-aws/template/common/extensions/theme/src/global.scss index 6137d59b0fa..0595cb7ac6f 100644 --- a/packages/cwp-template-aws/template/common/extensions/theme/src/global.scss +++ b/packages/cwp-template-aws/template/common/extensions/theme/src/global.scss @@ -1,53 +1,5 @@ +// Styles for the rich text editor that's used with Form Builder. @import "@webiny/react-rich-text-renderer/styles.scss"; -@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700"); - -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -/* HTML5 display-role reset for older browsers */ - -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; -} - -body { - line-height: 1; -} -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - -blockquote { - &:before, &:after { - content: ''; - content: none; - } -} - -q { - &:before, &:after { - content: ''; - content: none; - } -} - -table { - border-collapse: collapse; - border-spacing: 0; -} +// Font used with the default theme. +@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700"); From 24261aacce732f73457bda65a64a6a3a1be4482e Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 16 May 2024 12:15:29 +0200 Subject: [PATCH 6/9] fix: update CWP template --- extensions/theme/src/global.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/extensions/theme/src/global.scss b/extensions/theme/src/global.scss index 74192c3be90..0595cb7ac6f 100644 --- a/extensions/theme/src/global.scss +++ b/extensions/theme/src/global.scss @@ -1,2 +1,5 @@ +// Styles for the rich text editor that's used with Form Builder. @import "@webiny/react-rich-text-renderer/styles.scss"; -@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700"); \ No newline at end of file + +// Font used with the default theme. +@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700"); From 32fdd9d70ceab4a07f143c52535a2577d03573b3 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 16 May 2024 13:13:31 +0200 Subject: [PATCH 7/9] chore: update adio config --- packages/app-admin/package.json | 3 ++- packages/app-website/package.json | 7 +++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/app-admin/package.json b/packages/app-admin/package.json index 0cebd6050a3..3a84da3e117 100644 --- a/packages/app-admin/package.json +++ b/packages/app-admin/package.json @@ -86,7 +86,8 @@ "dependencies": [ "@svgr/webpack", "@emotion/react", - "@types/mime" + "@types/mime", + "reset-css" ], "peerDependencies": [ "react-dom" diff --git a/packages/app-website/package.json b/packages/app-website/package.json index 2094d6152fb..fac17518df3 100644 --- a/packages/app-website/package.json +++ b/packages/app-website/package.json @@ -51,6 +51,13 @@ "build": "yarn webiny run build", "watch": "yarn webiny run watch" }, + "adio": { + "ignore": { + "dependencies": [ + "reset-css" + ] + } + }, "svgo": { "plugins": { "removeViewBox": false From 52d5212982d30b9b5031bfe08c6ba7c06e7b6372 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 16 May 2024 15:34:46 +0200 Subject: [PATCH 8/9] chore: run prettier on SCSS files --- package.json | 2 +- packages/app-admin/src/styles/material.scss | 1 - packages/app-admin/src/styles/reset.scss | 2 +- packages/app-website/src/styles/reset.scss | 2 +- .../template/code/src/styles/global.scss | 2 +- 5 files changed, 4 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 246bdde8a81..e1f962e879e 100644 --- a/package.json +++ b/package.json @@ -135,7 +135,7 @@ "lint-staged": "lint-staged", "postinstall": "yarn node ./scripts/linkWorkspaces.js", "prepublishOnly": "node scripts/prepublishOnly", - "prettier": "prettier \"**/**/*.{js,jsx,ts,tsx,json}\" --config .prettierrc.js", + "prettier": "prettier \"**/**/*.{js,jsx,ts,tsx,json,scss}\" --config .prettierrc.js", "prettier:check": "yarn prettier --check", "prettier:fix": "yarn prettier --write", "lint:fix": "yarn eslint:fix && yarn prettier:fix", diff --git a/packages/app-admin/src/styles/material.scss b/packages/app-admin/src/styles/material.scss index c3e66338a33..7b4d5c8707f 100644 --- a/packages/app-admin/src/styles/material.scss +++ b/packages/app-admin/src/styles/material.scss @@ -40,4 +40,3 @@ body { font-family: "Source Sans Pro"; } - diff --git a/packages/app-admin/src/styles/reset.scss b/packages/app-admin/src/styles/reset.scss index bb944b67fa8..3c5f558d261 100644 --- a/packages/app-admin/src/styles/reset.scss +++ b/packages/app-admin/src/styles/reset.scss @@ -1 +1 @@ -@import 'reset-css/sass/reset'; \ No newline at end of file +@import "reset-css/sass/reset"; diff --git a/packages/app-website/src/styles/reset.scss b/packages/app-website/src/styles/reset.scss index bb944b67fa8..3c5f558d261 100644 --- a/packages/app-website/src/styles/reset.scss +++ b/packages/app-website/src/styles/reset.scss @@ -1 +1 @@ -@import 'reset-css/sass/reset'; \ No newline at end of file +@import "reset-css/sass/reset"; diff --git a/packages/cli-plugin-scaffold-react-app/template/code/src/styles/global.scss b/packages/cli-plugin-scaffold-react-app/template/code/src/styles/global.scss index e2417306dde..e6fc74cf997 100644 --- a/packages/cli-plugin-scaffold-react-app/template/code/src/styles/global.scss +++ b/packages/cli-plugin-scaffold-react-app/template/code/src/styles/global.scss @@ -4,7 +4,7 @@ body { margin: 0; color: white; background-color: white; - font-family: 'Trebuchet MS', sans-serif; + font-family: "Trebuchet MS", sans-serif; } a { From e8e7f0b7413f8f0f97eaaec6dfdf43ed6de48d79 Mon Sep 17 00:00:00 2001 From: adrians5j Date: Thu, 16 May 2024 15:36:54 +0200 Subject: [PATCH 9/9] chore: change 'Font' to 'Fonts' --- extensions/theme/src/global.scss | 2 +- .../template/common/extensions/theme/src/global.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/extensions/theme/src/global.scss b/extensions/theme/src/global.scss index 0595cb7ac6f..e7061655bd2 100644 --- a/extensions/theme/src/global.scss +++ b/extensions/theme/src/global.scss @@ -1,5 +1,5 @@ // Styles for the rich text editor that's used with Form Builder. @import "@webiny/react-rich-text-renderer/styles.scss"; -// Font used with the default theme. +// Fonts used with the default theme. @import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700"); diff --git a/packages/cwp-template-aws/template/common/extensions/theme/src/global.scss b/packages/cwp-template-aws/template/common/extensions/theme/src/global.scss index 0595cb7ac6f..e7061655bd2 100644 --- a/packages/cwp-template-aws/template/common/extensions/theme/src/global.scss +++ b/packages/cwp-template-aws/template/common/extensions/theme/src/global.scss @@ -1,5 +1,5 @@ // Styles for the rich text editor that's used with Form Builder. @import "@webiny/react-rich-text-renderer/styles.scss"; -// Font used with the default theme. +// Fonts used with the default theme. @import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700");