Abstracting reset.css Styles and Cleaning Up global.scss File

apps/website/src/App.scss

@@ -0,0 +1 @@
+@import "~@webiny/app-website/styles.scss";

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 <Website />;

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;
-}
+// Fonts used with the default theme.
+@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700");

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",

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": {
@@ -85,7 +86,8 @@
       "dependencies": [
         "@svgr/webpack",
         "@emotion/react",
-        "@types/mime"
+        "@types/mime",
+        "reset-css"
       ],
       "peerDependencies": [
         "react-dom"

packages/app-admin/src/styles.scss

@@ -1,2 +1,3 @@
+@import "./styles/reset";
 @import "./styles/theme";
 @import "./styles/material";

packages/app-admin/src/styles/material.scss

@@ -40,4 +40,3 @@ body {
 
   font-family: "Source Sans Pro";
 }
-

packages/app-admin/src/styles/reset.scss

@@ -0,0 +1 @@
+@import "reset-css/sass/reset";

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",
@@ -50,6 +51,13 @@
     "build": "yarn webiny run build",
     "watch": "yarn webiny run watch"
   },
+  "adio": {
+    "ignore": {
+      "dependencies": [
+        "reset-css"
+      ]
+    }
+  },
   "svgo": {
     "plugins": {
       "removeViewBox": false

packages/app-website/src/styles.scss

@@ -0,0 +1 @@
+@import "./styles/reset";

packages/app-website/src/styles/reset.scss

@@ -0,0 +1 @@
+@import "reset-css/sass/reset";

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 {

packages/cwp-template-aws/template/common/apps/website/src/App.scss

@@ -0,0 +1 @@
+@import "~@webiny/app-website/styles.scss";

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 <Website />;

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;
-}
+// Fonts used with the default theme.
+@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700");

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"