Scope imported CSS to only affect the canvas (#4604)

* fix(canvas) Scope imported CSS to only affect the canvas

* fix(canvas) Fix css handling of keyframes

* fix(tests) Fix package-manager.spec.ts

editor/package.json

@@ -142,7 +142,7 @@
     "clipboard-polyfill": "2.4.6",
     "console-feed": "2.8.11",
     "create-react-class": "15.6.3",
-    "css-tree": "1.1.3",
+    "css-tree": "2.3.1",
     "eslint-plugin-import": "2.25.3",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-react": "7.23.2",
@@ -261,7 +261,7 @@
     "@types/classnames": "2.2.4",
     "@types/codemirror": "0.0.40",
     "@types/create-react-class": "15.6.2",
-    "@types/css-tree": "1.0.6",
+    "@types/css-tree": "2.3.4",
     "@types/diff": "4.0.2",
     "@types/dom-to-image": "2.6.0",
     "@types/enzyme": "3.1.9",

editor/src/core/es-modules/package-manager/package-manager.spec.ts

@@ -33,10 +33,11 @@ import { svgToBase64 } from '../../shared/file-utils'
 import { createBuiltInDependenciesList } from './built-in-dependencies-list'
 import * as moduleResolutionExamples from '../test-cases/module-resolution-examples.json'
 import { createNodeModules } from './test-utils'
+import { CanvasContainerID } from '../../../components/canvas/canvas-types'
 
 require('jest-fetch-mock').enableMocks()
 
-const simpleCssContent = '.utopiaClass { background-color: red; }'
+const simpleCssContent = '.utopiaClass{background-color:red}'
 
 beforeEach(() => {
   resetDepPackagerCache()
@@ -378,7 +379,8 @@ describe('ES Dependency Manager — Downloads extra files as-needed', () => {
         const styleTag = document.getElementById(
           `${InjectedCSSFilePrefix}/node_modules/mypackage/dist/style.css`,
         )
-        expect(styleTag?.innerHTML).toEqual(simpleCssContent)
+        const rescopedCSS = `#${CanvasContainerID} ${simpleCssContent}`
+        expect(styleTag?.innerHTML).toEqual(rescopedCSS)
         expect(innerOnRemoteModuleDownload).toBeCalledTimes(0)
 
         done()