Fixed requested changes

playground/config/typescript.json

@@ -7,7 +7,7 @@
   "extends": "@rushstack/heft-web-rig/profiles/library/config/typescript.json",
 
   "staticAssetsToCopy": {
-    "fileExtensions": [".json", ".css"],
+    "fileExtensions": [".json", ".css", ".scss"],
     "includeGlobs": ["samples/*.ts"]
   }
 }

playground/package.json

@@ -12,7 +12,6 @@
     "@microsoft/tsdoc": "0.14.1",
     "@types/react-dom": "16.9.3",
     "@types/react": "16.9.11",
-    "react": "18.2.0",
     "monaco-editor": "~0.17.1",
     "promise": "~8.0.3",
     "tslib": "~1.10.0"

playground/src/PlaygroundView.module.scss

@@ -1,10 +1,10 @@
-.playground-main-row {
+.playgroundMainRow {
   align-items: stretch;
   flex: 1;
 }
 
 @media screen and (max-width: 700px) {
-  .playground-main-row {
+  .playgroundMainRow {
     align-items: stretch;
     flex: 1;
     flex-direction: column !important;

playground/src/PlaygroundView.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as tsdoc from '@microsoft/tsdoc';
-import './PlaygroundView.css';
+import './PlaygroundView.module.scss';
 
 import { TabPane } from './TabPane';
 import { FlexRowDiv, FlexColDiv } from './FlexDivs';
@@ -25,7 +25,7 @@ export interface IPlaygroundViewState {
   selectedTheme: string;
 }
 
-const errorsPaneStyle: React.CSSProperties = {
+const ERRORS_PANE_STYLE: React.CSSProperties = {
   height: '130px',
   marginTop: '20px'
 };
@@ -75,7 +75,7 @@ export class PlaygroundView extends React.Component<IPlaygroundViewProps, IPlayg
   public render(): React.ReactNode {
     return (
       <FlexColDiv className="playground-content-area" style={{ margin: '4px', flex: 1 }}>
-        <FlexRowDiv className="playground-main-row">
+        <FlexRowDiv className="playgroundMainRow">
           {this._renderInputBox()}
           <TabPane
             style={{ flex: 1, marginLeft: '4px' }}
@@ -89,7 +89,7 @@ export class PlaygroundView extends React.Component<IPlaygroundViewProps, IPlayg
             ]}
           />
         </FlexRowDiv>
-        <FlexColDiv className="playground-errors-pane" style={errorsPaneStyle}>
+        <FlexColDiv className="playground-errors-pane" style={ERRORS_PANE_STYLE}>
           {this._renderErrorList()}
         </FlexColDiv>
       </FlexColDiv>

playground/webpack.shared.config.js

@@ -23,10 +23,6 @@ const MONACO_URL = {
   dev: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.14.3/min/',
   production: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.14.3/min/'
 };
-const REACT_MEDIA_URL = {
-  dev: 'https://cdnjs.cloudflare.com/ajax/libs/react-media/1.10.0/umd/react-media.development.js',
-  production: 'https://cdnjs.cloudflare.com/ajax/libs/react-media/1.10.0/umd/react-media.production.min.js'
-};
 
 module.exports.generateBuildWebpackConfiguration = function (env) {
   return _generateBaseWebpackConfiguration((env || {}).production);