Merge pull request #939 from FDMediagroep/develop

Develop

package.json

@@ -47,6 +47,7 @@
         "@testing-library/jest-dom": "^5.16.3",
         "@testing-library/react": "^12.1.4",
         "@testing-library/user-event": "^14.0.0",
+        "@types/cssbeautify": "^0.3.2",
         "@types/fetch-jsonp": "^1.1.0",
         "@types/jest": "^27.4.1",
         "@types/js-cookie": "^3.0.1",
@@ -60,6 +61,7 @@
         "copyfiles": "^2.4.1",
         "cross-env": "^7.0.3",
         "css-loader": "^6.7.1",
+        "cssbeautify": "^0.3.1",
         "eslint": "^8.12.0",
         "eslint-config-next": "^12.1.2",
         "eslint-config-prettier": "^8.5.0",
@@ -100,8 +102,8 @@
     "dependencies": {
         "js-cookie": "^3.0.1",
         "next": "^12.1.2",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
     },
     "browserslist": {
         "production": [

pages/_document.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-css-tags */
 import React from 'react';
 import Document, { Html, Main, NextScript, Head } from 'next/document';
 
@@ -83,7 +84,6 @@ class MyDocument extends Document<any> {
                         content="/ms-icon-144x144.png"
                     />
 
-                    <script src="/assets/cssbeautify.js" />
                     <link href="/assets/fonts/style.css" rel="stylesheet" />
 
                     <meta property="og:site_name" content="FD Design System" />

src/components/Explain.tsx

@@ -18,9 +18,9 @@ import {
     clearDesignTokensTooltips,
 } from '../utils/designTokensTooltip';
 import { PaperclipIcon } from '../design-tokens/icons';
+import cssbeautify from 'cssbeautify';
 
 declare let window: Window | any;
-declare let cssbeautify: (css: string) => string;
 
 interface Props {
     /**