docs(playground): fix reset styles (#2296)

* docs(playground): fix reset styles

* chore: update to latest uikit and docskit

* docs: changeset

* docs: update gatsby experimental flags

.changeset/few-timers-poke.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/mc-scripts': patch
+---
+
+Update `@pmmmwh/react-refresh-webpack-plugin` to `0.5.0-rc.2`

package.json

@@ -176,7 +176,7 @@
   "resolutions": {
     "@babel/core": "7.14.6",
     "@babel/preset-env": "7.14.7",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.2",
     "@types/puppeteer": "5.4.4",
     "@types/react-router": "5.1.16",
     "@typescript-eslint/eslint-plugin": "4.28.2",

packages/mc-scripts/package.json

@@ -37,7 +37,7 @@
     "@commercetools-frontend/babel-preset-mc-app": "20.7.0",
     "@commercetools-frontend/mc-dev-authentication": "19.0.0",
     "@commercetools-frontend/mc-html-template": "20.7.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.2",
     "@svgr/webpack": "5.5.0",
     "autoprefixer": "10.3.0",
     "babel-loader": "8.2.2",

playground/package.json

@@ -14,7 +14,7 @@
     "extract-intl": "formatjs extract --format=$(pwd)/intl-formatter.js --out-file=$(pwd)/src/i18n/data/core.json 'src/**/!(*.spec).js'"
   },
   "dependencies": {
-    "@commercetools-docs/ui-kit": "16.3.1",
+    "@commercetools-docs/ui-kit": "17.0.2",
     "@commercetools-frontend/actions-global": "20.7.0",
     "@commercetools-frontend/application-components": "20.7.0",
     "@commercetools-frontend/application-shell": "20.7.0",

website-components-playground/gatsby-config.js

@@ -7,7 +7,6 @@ module.exports = {
     DEV_SSR: true,
     FAST_DEV: true,
     PRESERVE_FILE_DOWNLOAD_CACHE: true,
-    PRESERVE_WEBPACK_CACHE: true,
   },
   pathPrefix: '/custom-applications/playground',
   siteMetadata: {

website-components-playground/src/layouts/layout-app.js

@@ -17,6 +17,12 @@ const LayoutApp = (props) => {
     <>
       <Global
         styles={css`
+          *,
+          *::before,
+          *::after {
+            box-sizing: inherit;
+          }
+
           html,
           body {
             padding: 0;

website/gatsby-config.js

@@ -4,10 +4,9 @@ module.exports = {
   // https://www.gatsbyjs.com/docs/reference/release-notes/v2.28/#feature-flags-in-gatsby-configjs
   // https://www.gatsbyjs.com/docs/reference/release-notes/v2.30
   flags: {
-    DEV_SSR: true,
+    DEV_SSR: false, // good for catching bugs when developing, but too slow for productive content authoring
     FAST_DEV: true,
     PRESERVE_FILE_DOWNLOAD_CACHE: true,
-    PRESERVE_WEBPACK_CACHE: true,
   },
   pathPrefix: '/custom-applications',
   siteMetadata: {

website/package.json

@@ -12,8 +12,8 @@
     "generate-icons": "svgr -d src/icons/generated src/icons/svg && prettier --write '**/generated/*.js'"
   },
   "dependencies": {
-    "@commercetools-docs/gatsby-theme-docs": "16.3.1",
-    "@commercetools-docs/ui-kit": "16.3.1",
+    "@commercetools-docs/gatsby-theme-docs": "17.0.2",
+    "@commercetools-docs/ui-kit": "17.0.2",
     "@commercetools-uikit/card": "^12.2.0",
     "@commercetools-uikit/spacings-inline": "^12.2.0",
     "@commercetools-uikit/spacings-stack": "^12.2.0",