fix(shared): CssValueDisplay bundle too big (#705)

Author: fulopdaniel

packages/shared/package.json

@@ -41,9 +41,9 @@
         "vitest": "^1.0.0"
     },
     "dependencies": {
+        "@codemirror/lang-css": "^6.2.1",
         "@frontify/app-bridge": "^3.0.0",
         "@frontify/fondue": "12.0.0-beta.382",
-        "@uiw/codemirror-extensions-langs": "^4.21.12",
         "@uiw/react-codemirror": "^4.21.12"
     },
     "peerDependencies": {

packages/shared/src/components/CssValueDisplay/CssValueDisplay.tsx

@@ -2,14 +2,12 @@
 
 import React from 'react';
 import CodeMirror from '@uiw/react-codemirror';
-import { langs } from '@uiw/codemirror-extensions-langs';
+import { css } from '@codemirror/lang-css';
 
 import { IconCheckMark16, IconClipboard16, useCopy } from '@frontify/fondue';
 
 import { CssValueDisplayProps } from './types';
 
-const CSS_LANG = langs.css();
-
 export const CssValueDisplay = ({ cssValue, placeholder = 'No CSS value' }: CssValueDisplayProps) => {
     const { copy, status } = useCopy();
     const isCopied = status === 'success';
@@ -44,7 +42,7 @@ export const CssValueDisplay = ({ cssValue, placeholder = 'No CSS value' }: CssV
                 </div>
                 <CodeMirror
                     value={cssValue}
-                    extensions={[CSS_LANG]}
+                    extensions={[css()]}
                     readOnly={true}
                     basicSetup={{
                         highlightActiveLineGutter: false,