diff --git a/examples/vite-app/src/examples/CustomNode/index.tsx b/examples/vite-app/src/examples/CustomNode/index.tsx
index 72c58126..9c62f46a 100644
--- a/examples/vite-app/src/examples/CustomNode/index.tsx
+++ b/examples/vite-app/src/examples/CustomNode/index.tsx
@@ -11,6 +11,7 @@ import {
   Connection,
   useNodesState,
   useEdgesState,
+  Background,
 } from '@xyflow/react';
 
 import ColorSelectorNode from './ColorSelectorNode';
@@ -133,7 +134,6 @@ const CustomNodeFlow = () => {
       onNodeClick={onNodeClick}
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
-      style={{ background: bgColor }}
       onInit={onInit}
       nodeTypes={nodeTypes}
       connectionLineStyle={connectionLineStyle}
@@ -158,6 +158,7 @@ const CustomNodeFlow = () => {
         }}
       />
       <Controls />
+      <Background bgColor={bgColor} />
     </ReactFlow>
   );
 };
diff --git a/package.json b/package.json
index be5c86ad..e9583c5d 100644
--- a/package.json
+++ b/package.json
@@ -22,17 +22,11 @@
     "@changesets/cli": "^2.25.0",
     "@typescript-eslint/eslint-plugin": "latest",
     "@typescript-eslint/parser": "latest",
-    "autoprefixer": "^10.4.8",
     "concurrently": "^7.6.0",
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "latest",
-    "postcss": "^8.4.21",
-    "postcss-cli": "^10.1.0",
-    "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-import": "^15.1.0",
-    "postcss-nested": "^6.0.0",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/packages/react/package.json b/packages/react/package.json
index dae94edf..1c3194d5 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -42,7 +42,7 @@
   "scripts": {
     "dev": "concurrently \"rollup --config node:@xyflow/rollup-config --watch\" pnpm:css-watch",
     "build": "rollup --config node:@xyflow/rollup-config --environment NODE_ENV:production && npm run css",
-    "css": "postcss src/styles/{base,style}.css --config ./../../tooling/postcss-config/postcss.config.js --dir dist",
+    "css": "postcss src/styles/{base,style}.css --config ./../../tooling/postcss-config/ --dir dist ",
     "css-watch": "pnpm css --watch",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
     "typecheck": "tsc --noEmit"
@@ -70,6 +70,14 @@
     "@xyflow/eslint-config": "workspace:*",
     "@xyflow/rollup-config": "workspace:*",
     "@xyflow/tsconfig": "workspace:*",
+    "autoprefixer": "^10.4.15",
+    "cssnano": "^6.0.1",
+    "postcss": "^8.4.21",
+    "postcss-cli": "^10.1.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-import": "^15.1.0",
+    "postcss-nested": "^6.0.0",
+    "postcss-rename": "^0.6.1",
     "react": "^18.2.0",
     "typescript": "5.1.3"
   },
diff --git a/packages/react/src/additional-components/Background/Background.tsx b/packages/react/src/additional-components/Background/Background.tsx
index 31a280d0..73664f9f 100644
--- a/packages/react/src/additional-components/Background/Background.tsx
+++ b/packages/react/src/additional-components/Background/Background.tsx
@@ -1,4 +1,4 @@
-import { memo, useRef } from 'react';
+import { CSSProperties, memo, useRef } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 
@@ -6,12 +6,7 @@ import { useStore } from '../../hooks/useStore';
 import { type ReactFlowState } from '../../types';
 import { BackgroundProps, BackgroundVariant } from './types';
 import { DotPattern, LinePattern } from './Patterns';
-
-const defaultColor = {
-  [BackgroundVariant.Dots]: '#91919a',
-  [BackgroundVariant.Lines]: '#eee',
-  [BackgroundVariant.Cross]: '#e2e2e2',
-};
+import { containerStyle } from '../../styles/utils';
 
 const defaultSize = {
   [BackgroundVariant.Dots]: 1,
@@ -31,12 +26,13 @@ function Background({
   lineWidth = 1,
   offset = 2,
   color,
+  bgColor,
   style,
   className,
+  patternClassName,
 }: BackgroundProps) {
   const ref = useRef<SVGSVGElement>(null);
   const { transform, patternId } = useStore(selector, shallow);
-  const patternColor = color || defaultColor[variant];
   const patternSize = size || defaultSize[variant];
   const isDots = variant === BackgroundVariant.Dots;
   const isCross = variant === BackgroundVariant.Cross;
@@ -53,14 +49,14 @@ function Background({
   return (
     <svg
       className={cc(['react-flow__background', className])}
-      style={{
-        ...style,
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        top: 0,
-        left: 0,
-      }}
+      style={
+        {
+          ...style,
+          ...containerStyle,
+          '--background-color-props': bgColor,
+          '--background-pattern-color-props': color,
+        } as CSSProperties
+      }
       ref={ref}
       data-testid="rf__background"
     >
@@ -74,9 +70,14 @@ function Background({
         patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`}
       >
         {isDots ? (
-          <DotPattern color={patternColor} radius={scaledSize / offset} />
+          <DotPattern radius={scaledSize / offset} className={patternClassName} />
         ) : (
-          <LinePattern dimensions={patternDimensions} color={patternColor} lineWidth={lineWidth} />
+          <LinePattern
+            dimensions={patternDimensions}
+            lineWidth={lineWidth}
+            variant={variant}
+            className={patternClassName}
+          />
         )}
       </pattern>
       <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId + id})`} />
diff --git a/packages/react/src/additional-components/Background/Patterns.tsx b/packages/react/src/additional-components/Background/Patterns.tsx
index 8e6007b9..1fc71ae5 100644
--- a/packages/react/src/additional-components/Background/Patterns.tsx
+++ b/packages/react/src/additional-components/Background/Patterns.tsx
@@ -1,30 +1,31 @@
+import cc from 'classcat';
+
+import { BackgroundVariant } from './types';
+
 type LinePatternProps = {
   dimensions: [number, number];
+  variant: BackgroundVariant;
   lineWidth?: number;
-  color: string;
+  className?: string;
 };
 
-export function LinePattern({
-  color,
-  dimensions,
-  lineWidth,
-}: LinePatternProps) {
+export function LinePattern({ dimensions, lineWidth, variant, className }: LinePatternProps) {
   return (
     <path
-      stroke={color}
       strokeWidth={lineWidth}
-      d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${
-        dimensions[0]
-      }`}
+      d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`}
+      className={cc(['react-flow__background-pattern', variant, className])}
     />
   );
 }
 
 type DotPatternProps = {
   radius: number;
-  color: string;
+  className?: string;
 };
 
-export function DotPattern({ color, radius }: DotPatternProps) {
-  return <circle cx={radius} cy={radius} r={radius} fill={color} />;
+export function DotPattern({ radius, className }: DotPatternProps) {
+  return (
+    <circle cx={radius} cy={radius} r={radius} className={cc(['react-flow__background-pattern', 'dot', className])} />
+  );
 }
diff --git a/packages/react/src/additional-components/Background/types.ts b/packages/react/src/additional-components/Background/types.ts
index f4cae1b5..5d21b23f 100644
--- a/packages/react/src/additional-components/Background/types.ts
+++ b/packages/react/src/additional-components/Background/types.ts
@@ -7,9 +7,11 @@ export enum BackgroundVariant {
 }
 
 export type BackgroundProps = {
-  id?: string
+  id?: string;
   color?: string;
+  bgColor?: string;
   className?: string;
+  patternClassName?: string;
   gap?: number | [number, number];
   size?: number;
   offset?: number;
diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx
index f09f6563..34fb4c55 100644
--- a/packages/react/src/container/NodeRenderer/index.tsx
+++ b/packages/react/src/container/NodeRenderer/index.tsx
@@ -4,7 +4,7 @@ import { internalsSymbol, errorMessages, Position, clampPosition, getPositionWit
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
 import { useStore } from '../../hooks/useStore';
-import { containerStyle } from '../../styles';
+import { containerStyle } from '../../styles/utils';
 import { GraphViewProps } from '../GraphView';
 import type { NodeTypesWrapped, ReactFlowState, WrapNodeProps } from '../../types';
 
diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 84e38b55..d5d951ca 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -8,7 +8,7 @@ import cc from 'classcat';
 import { getNodesInside, getEventPosition, SelectionMode } from '@xyflow/system';
 
 import UserSelection from '../../components/UserSelection';
-import { containerStyle } from '../../styles';
+import { containerStyle } from '../../styles/utils';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { getSelectionChanges, getConnectedEdges } from '../../utils';
 import type { ReactFlowProps, ReactFlowState, NodeChange, EdgeChange } from '../../types';
diff --git a/packages/react/src/container/ZoomPane/index.tsx b/packages/react/src/container/ZoomPane/index.tsx
index f04ed0f4..e24056cf 100644
--- a/packages/react/src/container/ZoomPane/index.tsx
+++ b/packages/react/src/container/ZoomPane/index.tsx
@@ -6,7 +6,7 @@ import { XYPanZoom, PanOnScrollMode, type Transform, type PanZoomInstance } from
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
 import { useStore, useStoreApi } from '../../hooks/useStore';
-import { containerStyle } from '../../styles';
+import { containerStyle } from '../../styles/utils';
 import type { FlowRendererProps } from '../FlowRenderer';
 import type { ReactFlowState } from '../../types';
 
diff --git a/packages/react/src/styles/base.css b/packages/react/src/styles/base.css
index 129006b3..d6be5b10 100644
--- a/packages/react/src/styles/base.css
+++ b/packages/react/src/styles/base.css
@@ -1,28 +1,3 @@
 /* this will be exported as base.css and can be used for a basic styling */
-@import './init.css';
-
-.react-flow__handle {
-  background-color: #333;
-}
-
-.react-flow__node-default,
-.react-flow__node-input,
-.react-flow__node-output,
-.react-flow__node-group {
-  border-width: 1px;
-  border-style: solid;
-  border-color: #bbb;
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    border: 1px solid #555;
-  }
-}
-
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(150, 150, 180, 0.1);
-  border: 1px dotted rgba(155, 155, 155, 0.8);
-}
+@import '../../../system/src/styles/init.css';
+@import '../../../system/src/styles/base.css';
diff --git a/packages/react/src/styles/init.css b/packages/react/src/styles/init.css
deleted file mode 100644
index 6b4f5b87..00000000
--- a/packages/react/src/styles/init.css
+++ /dev/null
@@ -1,238 +0,0 @@
-/* these are the necessary styles for React Flow, they get used by base.css and style.css */
-.react-flow__container {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-
-.react-flow__pane {
-  z-index: 1;
-  cursor: grab;
-
-  &.selection {
-    cursor: pointer;
-  }
-
-  &.dragging {
-    cursor: grabbing;
-  }
-}
-
-.react-flow__viewport {
-  transform-origin: 0 0;
-  z-index: 2;
-  pointer-events: none;
-}
-
-.react-flow__renderer {
-  z-index: 4;
-}
-
-.react-flow__selection {
-  z-index: 6;
-}
-
-.react-flow__nodesselection-rect:focus,
-.react-flow__nodesselection-rect:focus-visible {
-  outline: none;
-}
-
-.react-flow .react-flow__edges {
-  pointer-events: none;
-  overflow: visible;
-}
-
-.react-flow__edge-path,
-.react-flow__connection-path {
-  stroke: #b1b1b7;
-  stroke-width: 1;
-  fill: none;
-}
-
-.react-flow__edge {
-  pointer-events: visibleStroke;
-  cursor: pointer;
-
-  &.animated path {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-
-  &.animated path.react-flow__edge-interaction {
-    stroke-dasharray: none;
-    animation: none;
-  }
-
-  &.inactive {
-    pointer-events: none;
-  }
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-
-  &.selected .react-flow__edge-path,
-  &:focus .react-flow__edge-path,
-  &:focus-visible .react-flow__edge-path {
-    stroke: #555;
-  }
-
-  &-textwrapper {
-    pointer-events: all;
-  }
-
-  &-textbg {
-    fill: white;
-  }
-
-  .react-flow__edge-text {
-    pointer-events: none;
-    user-select: none;
-  }
-}
-
-.react-flow__connection {
-  pointer-events: none;
-
-  .animated {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-}
-
-.react-flow__connectionline {
-  z-index: 1001;
-}
-
-.react-flow__nodes {
-  pointer-events: none;
-  transform-origin: 0 0;
-}
-
-.react-flow__node {
-  position: absolute;
-  user-select: none;
-  pointer-events: all;
-  transform-origin: 0 0;
-  box-sizing: border-box;
-  cursor: grab;
-
-  &.dragging {
-    cursor: grabbing;
-  }
-}
-
-.react-flow__nodesselection {
-  z-index: 3;
-  transform-origin: left top;
-  pointer-events: none;
-
-  &-rect {
-    position: absolute;
-    pointer-events: all;
-    cursor: grab;
-  }
-}
-
-.react-flow__handle {
-  position: absolute;
-  pointer-events: none;
-  min-width: 5px;
-  min-height: 5px;
-
-  &.connectionindicator {
-    pointer-events: all;
-    cursor: crosshair;
-  }
-
-  &-bottom {
-    top: auto;
-    left: 50%;
-    bottom: -4px;
-    transform: translate(-50%, 0);
-  }
-
-  &-top {
-    left: 50%;
-    top: -4px;
-    transform: translate(-50%, 0);
-  }
-
-  &-left {
-    top: 50%;
-    left: -4px;
-    transform: translate(0, -50%);
-  }
-
-  &-right {
-    right: -4px;
-    top: 50%;
-    transform: translate(0, -50%);
-  }
-}
-
-.react-flow__edgeupdater {
-  cursor: move;
-  pointer-events: all;
-}
-
-.react-flow__panel {
-  position: absolute;
-  z-index: 5;
-  margin: 15px;
-
-  &.top {
-    top: 0;
-  }
-
-  &.bottom {
-    bottom: 0;
-  }
-
-  &.left {
-    left: 0;
-  }
-
-  &.right {
-    right: 0;
-  }
-
-  &.center {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-
-.react-flow__attribution {
-  font-size: 10px;
-  background: rgba(255, 255, 255, 0.5);
-  padding: 2px 3px;
-  margin: 0;
-
-  a {
-    text-decoration: none;
-    color: #999;
-  }
-}
-
-@keyframes dashdraw {
-  from {
-    stroke-dashoffset: 10;
-  }
-}
-
-.react-flow__edgelabel-renderer {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  user-select: none;
-}
-
-.react-flow__minimap {
-  background-color: #fff;
-}
diff --git a/packages/react/src/styles/node-resizer.css b/packages/react/src/styles/node-resizer.css
deleted file mode 100644
index f0113a53..00000000
--- a/packages/react/src/styles/node-resizer.css
+++ /dev/null
@@ -1,105 +0,0 @@
-.react-flow__resize-control {
-  position: absolute;
-}
-
-.react-flow__resize-control.left,
-.react-flow__resize-control.right {
-  cursor: ew-resize;
-}
-
-.react-flow__resize-control.top,
-.react-flow__resize-control.bottom {
-  cursor: ns-resize;
-}
-
-.react-flow__resize-control.top.left,
-.react-flow__resize-control.bottom.right {
-  cursor: nwse-resize;
-}
-
-.react-flow__resize-control.bottom.left,
-.react-flow__resize-control.top.right {
-  cursor: nesw-resize;
-}
-
-/* handle styles */
-.react-flow__resize-control.handle {
-  width: 4px;
-  height: 4px;
-  border: 1px solid #fff;
-  border-radius: 1px;
-  background-color: #3367d9;
-  transform: translate(-50%, -50%);
-}
-
-.react-flow__resize-control.handle.left {
-  left: 0;
-  top: 50%;
-}
-.react-flow__resize-control.handle.right {
-  left: 100%;
-  top: 50%;
-}
-.react-flow__resize-control.handle.top {
-  left: 50%;
-  top: 0;
-}
-.react-flow__resize-control.handle.bottom {
-  left: 50%;
-  top: 100%;
-}
-.react-flow__resize-control.handle.top.left {
-  left: 0;
-}
-.react-flow__resize-control.handle.bottom.left {
-  left: 0;
-}
-.react-flow__resize-control.handle.top.right {
-  left: 100%;
-}
-.react-flow__resize-control.handle.bottom.right {
-  left: 100%;
-}
-
-/* line styles */
-.react-flow__resize-control.line {
-  border-color: #3367d9;
-  border-width: 0;
-  border-style: solid;
-}
-
-.react-flow__resize-control.line.left,
-.react-flow__resize-control.line.right {
-  width: 1px;
-  transform: translate(-50%, 0);
-  top: 0;
-  height: 100%;
-}
-
-.react-flow__resize-control.line.left {
-  left: 0;
-  border-left-width: 1px;
-}
-
-.react-flow__resize-control.line.right {
-  left: 100%;
-  border-right-width: 1px;
-}
-
-.react-flow__resize-control.line.top,
-.react-flow__resize-control.line.bottom {
-  height: 1px;
-  transform: translate(0, -50%);
-  left: 0;
-  width: 100%;
-}
-
-.react-flow__resize-control.line.top {
-  top: 0;
-  border-top-width: 1px;
-}
-
-.react-flow__resize-control.line.bottom {
-  border-bottom-width: 1px;
-  top: 100%;
-}
diff --git a/packages/react/src/styles/style.css b/packages/react/src/styles/style.css
index 4ac170c4..406af4e9 100644
--- a/packages/react/src/styles/style.css
+++ b/packages/react/src/styles/style.css
@@ -1,110 +1,4 @@
 /* this gets exported as style.css and can be used for the default theming */
-@import './init.css';
-@import './node-resizer.css';
-
-.react-flow__edge {
-  &.updating {
-    .react-flow__edge-path {
-      stroke: #777;
-    }
-  }
-
-  &-text {
-    font-size: 10px;
-  }
-}
-
-.react-flow__node.selectable {
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.react-flow__node-default,
-.react-flow__node-input,
-.react-flow__node-output,
-.react-flow__node-group {
-  padding: 10px;
-  border-radius: 3px;
-  width: 150px;
-  font-size: 12px;
-  color: #222;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #1a192b;
-  background-color: white;
-
-  &.selectable {
-    &:hover {
-      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-    }
-
-    &.selected,
-    &:focus,
-    &:focus-visible {
-      box-shadow: 0 0 0 0.5px #1a192b;
-    }
-  }
-}
-
-.react-flow__node-group {
-  background-color: rgba(240, 240, 240, 0.25);
-}
-
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(0, 89, 220, 0.08);
-  border: 1px dotted rgba(0, 89, 220, 0.8);
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.react-flow__handle {
-  width: 6px;
-  height: 6px;
-  background: #1a192b;
-  border: 1px solid white;
-  border-radius: 100%;
-}
-
-.react-flow__controls {
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-
-  &-button {
-    border: none;
-    background: #fefefe;
-    border-bottom: 1px solid #eee;
-    box-sizing: content-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    user-select: none;
-    padding: 5px;
-
-    &:hover {
-      background: #f4f4f4;
-    }
-
-    svg {
-      width: 100%;
-      max-width: 12px;
-      max-height: 12px;
-    }
-
-    &:disabled {
-      pointer-events: none;
-
-      svg {
-        fill-opacity: 0.4;
-      }
-    }
-  }
-}
+@import '../../../system/src/styles/init.css';
+@import '../../../system/src/styles/style.css';
+@import '../../../system/src/styles/node-resizer.css';
diff --git a/packages/react/src/styles/index.ts b/packages/react/src/styles/utils.ts
similarity index 100%
rename from packages/react/src/styles/index.ts
rename to packages/react/src/styles/utils.ts
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index fdfcaeb6..c8fc6a5e 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -12,10 +12,12 @@
     "xyflow"
   ],
   "scripts": {
-    "dev": "vite dev",
+    "dev": "concurrently \"vite dev\" pnpm:css-watch",
     "build": "svelte-kit sync && svelte-package -o dist",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "css": "postcss src/styles/{base,style}.css --config ./../../tooling/postcss-config --dir dist",
+    "css-watch": "pnpm css --watch",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
     "typecheck": "pnpm check"
@@ -43,9 +45,18 @@
     "@sveltejs/package": "^2.2.1",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
+    "autoprefixer": "^10.4.15",
+    "cssnano": "^6.0.1",
+    "dotenv": "^16.3.1",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-svelte": "^2.31.1",
+    "postcss": "^8.4.21",
+    "postcss-cli": "^10.1.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-import": "^15.1.0",
+    "postcss-nested": "^6.0.0",
+    "postcss-rename": "^0.6.1",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
     "svelte": "^4.2.0",
diff --git a/packages/svelte/src/lib/components/Attribution/Attribution.svelte b/packages/svelte/src/lib/components/Attribution/Attribution.svelte
index 03132723..0e7d78f8 100644
--- a/packages/svelte/src/lib/components/Attribution/Attribution.svelte
+++ b/packages/svelte/src/lib/components/Attribution/Attribution.svelte
@@ -24,17 +24,3 @@
     </a>
   </Panel>
 {/if}
-
-<style>
-  :global(.svelte-flow__panel.svelte-flow__attribution) {
-    font-size: 10px;
-    background: rgba(255, 255, 255, 0.5);
-    padding: 2px 3px;
-    margin: 0;
-  }
-
-  :global(.svelte-flow__attribution) a {
-    text-decoration: none;
-    color: #999;
-  }
-</style>
diff --git a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
index 7390c17c..5676d135 100644
--- a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
+++ b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
@@ -47,30 +47,3 @@
     </div>
   </EdgeLabelRenderer>
 {/if}
-
-<style>
-  .svelte-flow__edge-label {
-    position: absolute;
-    background: white;
-  }
-
-  .svelte-flow__edge-path {
-    stroke: var(--edge-color, var(--edge-color-default));
-    stroke-width: 1;
-  }
-
-  :global(.selected) .svelte-flow__edge-path {
-    stroke: var(--edge-color-selected, var(--edge-color-selected-default));
-  }
-
-  :global(.animated) .svelte-flow__edge-path {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-
-  @keyframes dashdraw {
-    from {
-      stroke-dashoffset: 10;
-    }
-  }
-</style>
diff --git a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
index 748fe27d..f2abe041 100644
--- a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
+++ b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
@@ -13,27 +13,3 @@
     </g>
   </svg>
 {/if}
-
-<style>
-  .svelte-flow__connectionline {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    overflow: visible;
-    z-index: 1001;
-  }
-
-  .svelte-flow__connection {
-    pointer-events: none;
-  }
-
-  .svelte-flow__edge-path,
-  .svelte-flow__connection-path {
-    stroke: var(--connection-line-color, var(--connection-line-color-default));
-    stroke-width: 1;
-    fill: none;
-  }
-</style>
diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index b271bbf8..cc9f4eb0 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -89,10 +89,3 @@
     markerEnd={markerEndUrl}
   />
 </g>
-
-<style>
-  .svelte-flow__edge {
-    pointer-events: visibleStroke;
-    cursor: pointer;
-  }
-</style>
diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index f8cf43d3..84e50bce 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -93,6 +93,7 @@
   class:connectablestart={isConnectableStart}
   class:connectableend={isConnectableEnd}
   class:connectable={isConnectable}
+  class:connectionindicator={isConnectable}
   on:mousedown={onPointerDown}
   on:touchstart={onPointerDown}
   {style}
@@ -101,46 +102,3 @@
 >
   <slot />
 </div>
-
-<style>
-  .svelte-flow__handle {
-    position: absolute;
-    pointer-events: none;
-    min-width: 5px;
-    min-height: 5px;
-    width: 6px;
-    height: 6px;
-    background: var(--handle-background-color, var(--handle-background-color-default));
-    border: 1px solid var(--handle-border-color, var(--handle-border-color-default));
-    border-radius: 100%;
-  }
-
-  .connectable {
-    pointer-events: all;
-    cursor: crosshair;
-  }
-
-  .bottom {
-    top: 100%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .top {
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .left {
-    top: 50%;
-    left: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .right {
-    top: 50%;
-    left: 100%;
-    transform: translate(-50%, -50%);
-  }
-</style>
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 54913971..75025c30 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -75,6 +75,8 @@
 
     dispatchEvent('nodeclick');
   }
+
+  // @todo: add selectable state
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -95,6 +97,7 @@
   class:selected
   class:draggable
   class:connectable
+  class:selectable
   class:parent={isParent}
   style:z-index={zIndex}
   style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
@@ -123,33 +126,3 @@
     on:connectend
   />
 </div>
-
-<style>
-  .svelte-flow__node {
-    border-radius: 3px;
-    color: var(--node-color, var(--node-color-default));
-    text-align: center;
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--node-border-color, var(--node-border-color-default));
-    background-color: var(--node-background-color, var(--node-background-color-default));
-    position: absolute;
-    pointer-events: none;
-    user-select: none;
-  }
-
-  .draggable {
-    cursor: grab;
-    pointer-events: all;
-  }
-
-  .selected {
-    outline: none;
-    box-shadow: 0 0 0 0.5px
-      var(--node-shadow-color-selected, var(--node-shadow-color-selected-default));
-  }
-
-  .dragging {
-    cursor: grabbing;
-  }
-</style>
diff --git a/packages/svelte/src/lib/components/Selection/Selection.svelte b/packages/svelte/src/lib/components/Selection/Selection.svelte
index 24755b3a..552c05ae 100644
--- a/packages/svelte/src/lib/components/Selection/Selection.svelte
+++ b/packages/svelte/src/lib/components/Selection/Selection.svelte
@@ -18,13 +18,5 @@
     position: absolute;
     top: 0;
     left: 0;
-    background: rgba(0, 89, 220, 0.08);
-    border: 1px dotted rgba(0, 89, 220, 0.8);
-    z-index: 6;
-  }
-
-  .svelte-flow__selection:focus,
-  .svelte-flow__selection:focus-visible {
-    outline: none;
   }
 </style>
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
index 9563cf53..0658f47a 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
@@ -30,7 +30,5 @@
     position: absolute;
     top: 0;
     left: 0;
-    pointer-events: none;
-    overflow: visible;
   }
 </style>
diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
index 154e5578..3d212dba 100644
--- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
@@ -79,7 +79,8 @@
   .svelte-flow__nodes {
     width: 100%;
     height: 100%;
-    pointer-events: none;
-    transform-origin: 0 0;
+    position: absolute;
+    left: 0;
+    top: 0;
   }
 </style>
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index dc9772e7..d98fb106 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -203,20 +203,10 @@
 
 <style>
   .svelte-flow__pane {
-    cursor: grab;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 1;
-  }
-
-  .selection {
-    cursor: pointer;
-  }
-
-  .dragging {
-    cursor: grabbing;
   }
 </style>
diff --git a/packages/svelte/src/lib/container/Panel/Panel.svelte b/packages/svelte/src/lib/container/Panel/Panel.svelte
index 86b8aa35..e1629ccc 100644
--- a/packages/svelte/src/lib/container/Panel/Panel.svelte
+++ b/packages/svelte/src/lib/container/Panel/Panel.svelte
@@ -16,32 +16,3 @@
 <div class={cc(['svelte-flow__panel', className, ...positionClasses])} {style} {...$$restProps}>
   <slot />
 </div>
-
-<style>
-  .svelte-flow__panel {
-    position: absolute;
-    z-index: 5;
-    margin: 15px;
-  }
-
-  .svelte-flow__panel.top {
-    top: 0;
-  }
-
-  .svelte-flow__panel.bottom {
-    bottom: 0;
-  }
-
-  .svelte-flow__panel.left {
-    left: 0;
-  }
-
-  .svelte-flow__panel.right {
-    right: 0;
-  }
-
-  .svelte-flow__panel.center {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-</style>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 1c475331..bb359302 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -175,25 +175,10 @@
     background-color: var(--background-color, var(--background-color-default));
   }
 
-  .svelte-flow :global(.svelte-flow__node-default),
-  .svelte-flow :global(.svelte-flow__node-input),
-  .svelte-flow :global(.svelte-flow__node-output) {
-    padding: 10px;
-  }
-
-  .svelte-flow__edgelabel-renderer {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    user-select: none;
-  }
-
   :root {
     --background-color-default: #fff;
     --background-pattern-color-default: #ddd;
 
-    --minimap-background-color-default: #fff;
     --minimap-mask-color-default: rgb(240, 240, 240, 0.6);
     --minimap-mask-stroke-color-default: none;
     --minimap-mask-stroke-width-default: 1;
@@ -203,18 +188,5 @@
     --controls-button-color-default: inherit;
     --controls-button-color-hover-default: inherit;
     --controls-button-border-color-default: #eee;
-
-    --edge-color-default: #cfcfcf;
-    --edge-color-selected-default: #555;
-
-    --node-color-default: inherit;
-    --node-border-color-default: #1a192b;
-    --node-background-color-default: #fff;
-    --node-shadow-color-selected-default: #1a192b;
-
-    --handle-background-color-default: #1a192b;
-    --handle-border-color-default: #fff;
-
-    --connection-line-color-default: #b1b1b7;
   }
 </style>
diff --git a/packages/svelte/src/lib/container/Viewport/Viewport.svelte b/packages/svelte/src/lib/container/Viewport/Viewport.svelte
index 11b864e6..2d331ba1 100644
--- a/packages/svelte/src/lib/container/Viewport/Viewport.svelte
+++ b/packages/svelte/src/lib/container/Viewport/Viewport.svelte
@@ -16,10 +16,7 @@
     width: 100%;
     height: 100%;
     position: absolute;
-    transform-origin: 0 0;
     top: 0;
     left: 0;
-    z-index: 2;
-    pointer-events: none;
   }
 </style>
diff --git a/packages/svelte/src/lib/plugins/Background/Background.svelte b/packages/svelte/src/lib/plugins/Background/Background.svelte
index c5bfec39..033cdb9f 100644
--- a/packages/svelte/src/lib/plugins/Background/Background.svelte
+++ b/packages/svelte/src/lib/plugins/Background/Background.svelte
@@ -22,6 +22,7 @@
   export let lineWidth: $$Props['lineWidth'] = 1;
   export let bgColor: $$Props['bgColor'] = undefined;
   export let patternColor: $$Props['patternColor'] = undefined;
+  export let patternClassName: $$Props['patternClassName'] = undefined;
   let className: $$Props['class'] = '';
   export { className as class };
 
@@ -44,6 +45,7 @@
   class={cc(['svelte-flow__background', className])}
   data-testid="svelte-flow__background"
   style:--background-color-props={bgColor}
+  style:--pattern-color-props={patternColor}
 >
   <pattern
     id={patternId}
@@ -55,9 +57,9 @@
     patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`}
   >
     {#if isDots}
-      <DotPattern color={patternColor} radius={scaledSize / 2} />
+      <DotPattern radius={scaledSize / 2} class={patternClassName} />
     {:else}
-      <LinePattern dimensions={patternDimensions} color={patternColor} {lineWidth} />
+      <LinePattern dimensions={patternDimensions} {variant} {lineWidth} class={patternClassName} />
     {/if}
   </pattern>
   <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
@@ -70,8 +72,5 @@
     height: 100%;
     top: 0;
     left: 0;
-    pointer-events: none;
-    z-index: -1;
-    background-color: var(--background-color-props, 'transparent');
   }
 </style>
diff --git a/packages/svelte/src/lib/plugins/Background/DotPattern.svelte b/packages/svelte/src/lib/plugins/Background/DotPattern.svelte
index 474e555c..1951a3d2 100644
--- a/packages/svelte/src/lib/plugins/Background/DotPattern.svelte
+++ b/packages/svelte/src/lib/plugins/Background/DotPattern.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
+  import cc from 'classcat';
+
   export let radius = 5;
-  export let color: string | undefined = undefined;
+  let className: string = '';
+  export { className as class };
 </script>
 
-<circle cx={radius} cy={radius} r={radius} style:--pattern-color-props={color} />
-
-<style>
-  circle {
-    fill: var(
-      --pattern-color-props,
-      var(--background-pattern-color, var(--background-pattern-color-default))
-    );
-  }
-</style>
+<circle
+  cx={radius}
+  cy={radius}
+  r={radius}
+  class={cc(['svelte-flow__background-pattern', 'dot', className])}
+/>
diff --git a/packages/svelte/src/lib/plugins/Background/LinePattern.svelte b/packages/svelte/src/lib/plugins/Background/LinePattern.svelte
index 16d72071..6ef75599 100644
--- a/packages/svelte/src/lib/plugins/Background/LinePattern.svelte
+++ b/packages/svelte/src/lib/plugins/Background/LinePattern.svelte
@@ -1,20 +1,16 @@
 <script lang="ts">
+  import cc from 'classcat';
+  import type { BackgroundVariant } from './types';
+
   export let lineWidth = 1;
-  export let color: string | undefined = undefined;
   export let dimensions: [number, number];
+  export let variant: BackgroundVariant | undefined = undefined;
+  let className: string = '';
+  export { className as class };
 </script>
 
 <path
   stroke-width={lineWidth}
   d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`}
-  style:--pattern-color-props={color}
+  class={cc(['svelte-flow__background-pattern', variant, className])}
 />
-
-<style>
-  path {
-    stroke: var(
-      --pattern-color-props,
-      var(--background-pattern-color, var(--background-pattern-color-default))
-    );
-  }
-</style>
diff --git a/packages/svelte/src/lib/plugins/Background/types.ts b/packages/svelte/src/lib/plugins/Background/types.ts
index 6f44057d..d0935b4c 100644
--- a/packages/svelte/src/lib/plugins/Background/types.ts
+++ b/packages/svelte/src/lib/plugins/Background/types.ts
@@ -7,6 +7,7 @@ export enum BackgroundVariant {
 export type BackgroundProps = {
   bgColor?: string;
   patternColor?: string;
+  patternClassName?: string;
   class?: string;
   gap?: number | [number, number];
   size?: number;
diff --git a/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte b/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
index 0fd3dc09..bd73ee30 100644
--- a/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
@@ -24,59 +24,3 @@
 >
   <slot class="button-svg" />
 </button>
-
-<style>
-  .svelte-flow__controls-button {
-    border: none;
-    background: var(
-      --controls-button-background-color-props,
-      var(--controls-button-background-color, var(--controls-button-background-color-default))
-    );
-    border-bottom: 1px solid
-      var(
-        --controls-button-border-color-props,
-        var(--controls-button-border-color, var(--controls-button-border-color-default))
-      );
-    color: var(
-      --controls-button-color-props,
-      var(--controls-button-color, var(--controls-button-color-default))
-    );
-    box-sizing: content-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    user-select: none;
-    padding: 5px;
-  }
-
-  .svelte-flow__controls-button:hover {
-    background: var(
-      --controls-button-background-color-hover-props,
-      var(
-        --controls-button-background-color-hover,
-        var(--controls-button-background-color-hover-default)
-      )
-    );
-    color: var(
-      --controls-button-color-hover-props,
-      var(--controls-button-hover-color, var(--controls-button-hover-color-default))
-    );
-  }
-
-  .svelte-flow__controls-button :global(svg) {
-    width: 100%;
-    max-width: 12px;
-    max-height: 12px;
-  }
-
-  .svelte-flow__controls-button:disabled {
-    pointer-events: none;
-  }
-
-  .svelte-flow__controls-button:disabled :global(svg) {
-    fill-opacity: 0.4;
-  }
-</style>
diff --git a/packages/svelte/src/routes/overview/+page.svelte b/packages/svelte/src/routes/overview/+page.svelte
index 9285f50f..d8ac5982 100644
--- a/packages/svelte/src/routes/overview/+page.svelte
+++ b/packages/svelte/src/routes/overview/+page.svelte
@@ -12,8 +12,10 @@
     type EdgeTypes
   } from '../../lib/index';
 
-  import { CustomNode } from './CustomNode';
-  import { CustomEdge } from './CustomEdge';
+  import CustomNode from './CustomNode.svelte';
+  import CustomEdge from './CustomEdge.svelte';
+
+  import '../../styles/style.css';
 
   const nodeTypes: NodeTypes = {
     custom: CustomNode
diff --git a/packages/svelte/src/routes/overview/CustomEdge/Custom.svelte b/packages/svelte/src/routes/overview/CustomEdge.svelte
similarity index 97%
rename from packages/svelte/src/routes/overview/CustomEdge/Custom.svelte
rename to packages/svelte/src/routes/overview/CustomEdge.svelte
index b858b453..692961d6 100644
--- a/packages/svelte/src/routes/overview/CustomEdge/Custom.svelte
+++ b/packages/svelte/src/routes/overview/CustomEdge.svelte
@@ -5,7 +5,7 @@
     useSvelteFlow,
     type EdgeProps,
     getBezierPath
-  } from '../../../lib/index';
+  } from '../../lib/index';
 
   type $$Props = EdgeProps;
 
diff --git a/packages/svelte/src/routes/overview/CustomEdge/index.ts b/packages/svelte/src/routes/overview/CustomEdge/index.ts
deleted file mode 100644
index 6e7bab0a..00000000
--- a/packages/svelte/src/routes/overview/CustomEdge/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as CustomEdge } from './Custom.svelte';
diff --git a/packages/svelte/src/routes/overview/CustomNode/Custom.svelte b/packages/svelte/src/routes/overview/CustomNode.svelte
similarity index 89%
rename from packages/svelte/src/routes/overview/CustomNode/Custom.svelte
rename to packages/svelte/src/routes/overview/CustomNode.svelte
index e636cdfe..91115e5c 100644
--- a/packages/svelte/src/routes/overview/CustomNode/Custom.svelte
+++ b/packages/svelte/src/routes/overview/CustomNode.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Handle, Position, type NodeProps } from '../../../lib/index';
+  import { Handle, Position, type NodeProps } from '../../lib/index';
 
   type $$Props = NodeProps;
 
diff --git a/packages/svelte/src/routes/overview/CustomNode/index.ts b/packages/svelte/src/routes/overview/CustomNode/index.ts
deleted file mode 100644
index c22c77aa..00000000
--- a/packages/svelte/src/routes/overview/CustomNode/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as CustomNode } from './Custom.svelte';
diff --git a/packages/svelte/src/styles/base.css b/packages/svelte/src/styles/base.css
new file mode 100644
index 00000000..5cb2b8ff
--- /dev/null
+++ b/packages/svelte/src/styles/base.css
@@ -0,0 +1,3 @@
+/* this gets exported as style.css and can be used for the default theming */
+@import '../../../system/src/styles/init.css';
+@import '../../../system/src/styles/base.css';
diff --git a/packages/svelte/src/styles/style.css b/packages/svelte/src/styles/style.css
new file mode 100644
index 00000000..7bd97d4a
--- /dev/null
+++ b/packages/svelte/src/styles/style.css
@@ -0,0 +1,3 @@
+/* this gets exported as style.css and can be used for the default theming */
+@import '../../../system/src/styles/init.css';
+@import '../../../system/src/styles/style.css';
diff --git a/packages/svelte/vite.config.ts b/packages/svelte/vite.config.ts
index f2eb6d93..d0269f72 100644
--- a/packages/svelte/vite.config.ts
+++ b/packages/svelte/vite.config.ts
@@ -2,7 +2,10 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
 
 const config: UserConfig = {
-  plugins: [sveltekit()]
+  plugins: [sveltekit()],
+  css: {
+    postcss: './../../tooling/postcss-config/'
+  }
 };
 
 export default config;
diff --git a/packages/system/src/styles/base.css b/packages/system/src/styles/base.css
new file mode 100644
index 00000000..31afe71a
--- /dev/null
+++ b/packages/system/src/styles/base.css
@@ -0,0 +1,33 @@
+.xy-flow {
+  --node-border-default: 1px solid #bbb;
+  --node-border-selected-default: 1px solid #555;
+
+  --handle-background-color-default: #333;
+
+  --selection-background-color-default: rgba(150, 150, 180, 0.1);
+  --selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
+}
+
+.xy-flow__handle {
+  background-color: var(--handle-background-color, var(--handle-background-color-default));
+}
+
+.xy-flow__node-input,
+.xy-flow__node-default,
+.xy-flow__node-output,
+.xy-flow__node-group {
+  border: var(--node-border, var(--node-border-default));
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    border: var(--node-border-selected, var(--node-border-selected-default));
+  }
+}
+
+.xy-flow__nodesselection-rect,
+.xy-flow__selection {
+  background: var(--selection-background-color, var(--selection-background-color-default));
+  border: var(--selection-border, var(--selection-border-default));
+}
diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
new file mode 100644
index 00000000..b41e0431
--- /dev/null
+++ b/packages/system/src/styles/init.css
@@ -0,0 +1,298 @@
+/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
+
+.xy-flow {
+  --edge-stroke-default: #b1b1b7;
+  --edge-stroke-width-default: 1;
+  --edge-stroke-selected-default: #555;
+
+  --connectionline-stroke-default: #b1b1b7;
+  --connectionline-stroke-width-default: 1;
+
+  --attribution-background-color-default: rgba(255, 255, 255, 0.5);
+
+  --minimap-background-color-default: #fff;
+
+  --background-pattern-dot-color-default: #91919a;
+  --background-pattern-line-color-default: #eee;
+  --background-pattern-cross-color-default: #e2e2e2;
+}
+
+.xy-flow__container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.xy-flow__pane {
+  z-index: 1;
+  cursor: grab;
+
+  &.selection {
+    cursor: pointer;
+  }
+
+  &.dragging {
+    cursor: grabbing;
+  }
+}
+
+.xy-flow__viewport {
+  transform-origin: 0 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.xy-flow__renderer {
+  z-index: 4;
+}
+
+.xy-flow__selection {
+  z-index: 6;
+}
+
+.xy-flow__nodesselection-rect:focus,
+.xy-flow__nodesselection-rect:focus-visible {
+  outline: none;
+}
+
+.xy-flow .xy-flow__edges {
+  pointer-events: none;
+  overflow: visible;
+}
+
+.xy-flow__edge-path {
+  stroke: var(--edge-stroke, var(--edge-stroke-default));
+  stroke-width: var(--edge-stroke-width, var(--edge-stroke-width-default));
+  fill: none;
+}
+
+.xy-flow__connection-path {
+  stroke: var(--connectionline-stroke, var(--connectionline-stroke-default));
+  stroke-width: var(--connectionline-stroke-width, var(--connectionline-stroke-width-default));
+  fill: none;
+}
+
+.xy-flow__edge {
+  pointer-events: visibleStroke;
+  cursor: pointer;
+
+  &.animated path {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+
+  &.animated path.xy-flow__edge-interaction {
+    stroke-dasharray: none;
+    animation: none;
+  }
+
+  &.inactive {
+    pointer-events: none;
+  }
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
+  &.selected .xy-flow__edge-path,
+  &:focus .xy-flow__edge-path,
+  &:focus-visible .xy-flow__edge-path {
+    stroke: var(--edge-stroke-selected, var(--edge-stroke-selected-default));
+  }
+
+  &-textwrapper {
+    pointer-events: all;
+  }
+
+  &-textbg {
+    fill: white;
+  }
+
+  .xy-flow__edge-text {
+    pointer-events: none;
+    user-select: none;
+  }
+}
+
+.xy-flow__connection {
+  pointer-events: none;
+
+  .animated {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+}
+
+.xy-flow__connectionline {
+  z-index: 1001;
+}
+
+.xy-flow__nodes {
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
+.xy-flow__node {
+  position: absolute;
+  user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  cursor: grab;
+
+  &.dragging {
+    cursor: grabbing;
+  }
+
+  /* only used in Svelte Flow, should we remove it here? */
+  &.draggable {
+    cursor: grab;
+    pointer-events: all;
+  }
+}
+
+.xy-flow__nodesselection {
+  z-index: 3;
+  transform-origin: left top;
+  pointer-events: none;
+
+  &-rect {
+    position: absolute;
+    pointer-events: all;
+    cursor: grab;
+  }
+}
+
+.xy-flow__handle {
+  position: absolute;
+  pointer-events: none;
+  min-width: 5px;
+  min-height: 5px;
+
+  &.connectionindicator {
+    pointer-events: all;
+    cursor: crosshair;
+  }
+
+  &-bottom {
+    top: auto;
+    left: 50%;
+    bottom: -4px;
+    transform: translate(-50%, 0);
+  }
+
+  &-top {
+    left: 50%;
+    top: -4px;
+    transform: translate(-50%, 0);
+  }
+
+  &-left {
+    top: 50%;
+    left: -4px;
+    transform: translate(0, -50%);
+  }
+
+  &-right {
+    right: -4px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+}
+
+.xy-flow__edgeupdater {
+  cursor: move;
+  pointer-events: all;
+}
+
+.xy-flow__panel {
+  position: absolute;
+  z-index: 5;
+  margin: 15px;
+
+  &.top {
+    top: 0;
+  }
+
+  &.bottom {
+    bottom: 0;
+  }
+
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  &.center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.xy-flow__attribution {
+  font-size: 10px;
+  background: var(--attribution-background-color, var(--attribution-background-color-default));
+  padding: 2px 3px;
+  margin: 0;
+
+  a {
+    text-decoration: none;
+    color: #999;
+  }
+}
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+
+.xy-flow__edgelabel-renderer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  user-select: none;
+  left: 0;
+  top: 0;
+}
+
+.xy-flow__minimap {
+  stroke: var(--minimap-background-color, var(--minimap-background-color-default));
+}
+
+.xy-flow__background {
+  pointer-events: none;
+  z-index: -1;
+  background-color: var(--background-color-props, 'transparent');
+}
+
+.xy-flow__background-pattern {
+  &.dot {
+    fill: var(
+      --background-pattern-color-props,
+      var(--background-pattern-color, var(--background-pattern-dot-color-default))
+    );
+  }
+
+  &.line {
+    stroke: var(
+      --background-pattern-color-props,
+      var(--background-pattern-color, var(--background-pattern-line-color-default))
+    );
+  }
+
+  &.cross {
+    stroke: var(
+      --background-pattern-color-props,
+      var(--background-pattern-color, var(--background-pattern-cross-color-default))
+    );
+  }
+}
diff --git a/packages/system/src/styles/node-resizer.css b/packages/system/src/styles/node-resizer.css
new file mode 100644
index 00000000..7918666a
--- /dev/null
+++ b/packages/system/src/styles/node-resizer.css
@@ -0,0 +1,105 @@
+.xy-flow__resize-control {
+  position: absolute;
+}
+
+.xy-flow__resize-control.left,
+.xy-flow__resize-control.right {
+  cursor: ew-resize;
+}
+
+.xy-flow__resize-control.top,
+.xy-flow__resize-control.bottom {
+  cursor: ns-resize;
+}
+
+.xy-flow__resize-control.top.left,
+.xy-flow__resize-control.bottom.right {
+  cursor: nwse-resize;
+}
+
+.xy-flow__resize-control.bottom.left,
+.xy-flow__resize-control.top.right {
+  cursor: nesw-resize;
+}
+
+/* handle styles */
+.xy-flow__resize-control.handle {
+  width: 4px;
+  height: 4px;
+  border: 1px solid #fff;
+  border-radius: 1px;
+  background-color: #3367d9;
+  transform: translate(-50%, -50%);
+}
+
+.xy-flow__resize-control.handle.left {
+  left: 0;
+  top: 50%;
+}
+.xy-flow__resize-control.handle.right {
+  left: 100%;
+  top: 50%;
+}
+.xy-flow__resize-control.handle.top {
+  left: 50%;
+  top: 0;
+}
+.xy-flow__resize-control.handle.bottom {
+  left: 50%;
+  top: 100%;
+}
+.xy-flow__resize-control.handle.top.left {
+  left: 0;
+}
+.xy-flow__resize-control.handle.bottom.left {
+  left: 0;
+}
+.xy-flow__resize-control.handle.top.right {
+  left: 100%;
+}
+.xy-flow__resize-control.handle.bottom.right {
+  left: 100%;
+}
+
+/* line styles */
+.xy-flow__resize-control.line {
+  border-color: #3367d9;
+  border-width: 0;
+  border-style: solid;
+}
+
+.xy-flow__resize-control.line.left,
+.xy-flow__resize-control.line.right {
+  width: 1px;
+  transform: translate(-50%, 0);
+  top: 0;
+  height: 100%;
+}
+
+.xy-flow__resize-control.line.left {
+  left: 0;
+  border-left-width: 1px;
+}
+
+.xy-flow__resize-control.line.right {
+  left: 100%;
+  border-right-width: 1px;
+}
+
+.xy-flow__resize-control.line.top,
+.xy-flow__resize-control.line.bottom {
+  height: 1px;
+  transform: translate(0, -50%);
+  left: 0;
+  width: 100%;
+}
+
+.xy-flow__resize-control.line.top {
+  top: 0;
+  border-top-width: 1px;
+}
+
+.xy-flow__resize-control.line.bottom {
+  border-bottom-width: 1px;
+  top: 100%;
+}
diff --git a/packages/system/src/styles/style.css b/packages/system/src/styles/style.css
new file mode 100644
index 00000000..35096046
--- /dev/null
+++ b/packages/system/src/styles/style.css
@@ -0,0 +1,138 @@
+.xy-flow {
+  --node-color-default: inherit;
+  --node-border-default: 1px solid #1a192b;
+  --node-background-color-default: #fff;
+  --node-group-background-color-default: rgba(240, 240, 240, 0.25);
+  --node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+  --node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
+
+  --handle-background-color-default: #1a192b;
+  --handle-border-color-default: #fff;
+
+  --selection-background-color-default: rgba(0, 89, 220, 0.08);
+  --selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
+
+  --controls-button-background-color-default: #fefefe;
+  --controls-button-background-color-hover-default: #f4f4f4;
+  --controls-button-color-default: inherit;
+  --controls-button-color-hover-default: inherit;
+  --controls-button-border-color-default: #eee;
+  --controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+}
+
+.xy-flow__edge {
+  &.updating {
+    .xy-flow__edge-path {
+      stroke: #777;
+    }
+  }
+
+  &-text {
+    font-size: 10px;
+  }
+}
+
+.xy-flow__node.selectable {
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.xy-flow__node-input,
+.xy-flow__node-default,
+.xy-flow__node-output,
+.xy-flow__node-group {
+  padding: 10px;
+  border-radius: 3px;
+  width: 150px;
+  font-size: 12px;
+  color: var(--node-color, var(--node-color-default));
+  text-align: center;
+  border: var(--node-border, var(--node-border-default));
+  background-color: var(--node-background-color, var(--node-background-color-default));
+
+  &.selectable {
+    &:hover {
+      box-shadow: var(--node-boxshadow-hover, var(--node-boxshadow-hover-default));
+    }
+
+    &.selected,
+    &:focus,
+    &:focus-visible {
+      box-shadow: var(--node-boxshadow-selected, var(--node-boxshadow-selected-default));
+    }
+  }
+}
+
+.xy-flow__node-group {
+  background-color: var(--node-group-background-color, var(--node-group-background-color-default));
+}
+
+.xy-flow__nodesselection-rect,
+.xy-flow__selection {
+  background: var(--selection-background-color, var(--selection-background-color-default));
+  border: var(--selection-border, var(--selection-border-default));
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.xy-flow__handle {
+  width: 6px;
+  height: 6px;
+  background-color: var(--handle-background-color, var(--handle-background-color-default));
+  border: 1px solid var(--handle-border-color, var(--handle-border-color-default));
+  border-radius: 100%;
+}
+
+.xy-flow__controls {
+  box-shadow: var(--controls-box-shadow, var(--controls-box-shadow-default));
+
+  &-button {
+    border: none;
+    background: var(--controls-button-background-color, var(--controls-button-background-color-default));
+    border-bottom: 1px solid
+      var(
+        --controls-button-border-color-props,
+        var(--controls-button-border-color, var(--controls-button-border-color-default))
+      );
+    color: var(--controls-button-color-props, var(--controls-button-color, var(--controls-button-color-default)));
+    box-sizing: content-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    user-select: none;
+    padding: 5px;
+
+    &:hover {
+      background: var(
+        --controls-button-background-color-hover-props,
+        var(--controls-button-background-color-hover, var(--controls-button-background-color-hover-default))
+      );
+      color: var(
+        --controls-button-color-hover-props,
+        var(--controls-button-hover-color, var(--controls-button-hover-color-default))
+      );
+    }
+
+    svg {
+      width: 100%;
+      max-width: 12px;
+      max-height: 12px;
+    }
+
+    &:disabled {
+      pointer-events: none;
+
+      svg {
+        fill-opacity: 0.4;
+      }
+    }
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c3320495..1782aafc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,9 +20,6 @@ importers:
       '@typescript-eslint/parser':
         specifier: latest
         version: registry.npmjs.org/@typescript-eslint/parser@6.3.0(eslint@8.42.0)(typescript@5.1.3)
-      autoprefixer:
-        specifier: ^10.4.8
-        version: registry.npmjs.org/autoprefixer@10.4.14(postcss@8.4.24)
       concurrently:
         specifier: ^7.6.0
         version: registry.npmjs.org/concurrently@7.6.0
@@ -38,21 +35,6 @@ importers:
       eslint-plugin-react:
         specifier: latest
         version: registry.npmjs.org/eslint-plugin-react@7.33.1(eslint@8.42.0)
-      postcss:
-        specifier: ^8.4.21
-        version: registry.npmjs.org/postcss@8.4.24
-      postcss-cli:
-        specifier: ^10.1.0
-        version: registry.npmjs.org/postcss-cli@10.1.0(postcss@8.4.24)
-      postcss-combine-duplicated-selectors:
-        specifier: ^10.0.3
-        version: registry.npmjs.org/postcss-combine-duplicated-selectors@10.0.3(postcss@8.4.24)
-      postcss-import:
-        specifier: ^15.1.0
-        version: registry.npmjs.org/postcss-import@15.1.0(postcss@8.4.24)
-      postcss-nested:
-        specifier: ^6.0.0
-        version: registry.npmjs.org/postcss-nested@6.0.1(postcss@8.4.24)
       prettier:
         specifier: ^2.7.1
         version: registry.npmjs.org/prettier@2.8.8
@@ -190,6 +172,30 @@ importers:
       '@xyflow/tsconfig':
         specifier: workspace:*
         version: link:../../tooling/tsconfig
+      autoprefixer:
+        specifier: ^10.4.15
+        version: registry.npmjs.org/autoprefixer@10.4.15(postcss@8.4.27)
+      cssnano:
+        specifier: ^6.0.1
+        version: registry.npmjs.org/cssnano@6.0.1(postcss@8.4.27)
+      postcss:
+        specifier: ^8.4.21
+        version: registry.npmjs.org/postcss@8.4.27
+      postcss-cli:
+        specifier: ^10.1.0
+        version: registry.npmjs.org/postcss-cli@10.1.0(postcss@8.4.27)
+      postcss-combine-duplicated-selectors:
+        specifier: ^10.0.3
+        version: registry.npmjs.org/postcss-combine-duplicated-selectors@10.0.3(postcss@8.4.27)
+      postcss-import:
+        specifier: ^15.1.0
+        version: registry.npmjs.org/postcss-import@15.1.0(postcss@8.4.27)
+      postcss-nested:
+        specifier: ^6.0.0
+        version: registry.npmjs.org/postcss-nested@6.0.1(postcss@8.4.27)
+      postcss-rename:
+        specifier: ^0.6.1
+        version: registry.npmjs.org/postcss-rename@0.6.1(postcss@8.4.27)
       react:
         specifier: ^18.2.0
         version: registry.npmjs.org/react@18.2.0
@@ -224,6 +230,15 @@ importers:
       '@typescript-eslint/parser':
         specifier: ^5.60.0
         version: registry.npmjs.org/@typescript-eslint/parser@5.60.0(eslint@8.43.0)(typescript@5.1.3)
+      autoprefixer:
+        specifier: ^10.4.15
+        version: registry.npmjs.org/autoprefixer@10.4.15(postcss@8.4.27)
+      cssnano:
+        specifier: ^6.0.1
+        version: registry.npmjs.org/cssnano@6.0.1(postcss@8.4.27)
+      dotenv:
+        specifier: ^16.3.1
+        version: registry.npmjs.org/dotenv@16.3.1
       eslint:
         specifier: ^8.43.0
         version: registry.npmjs.org/eslint@8.43.0
@@ -233,6 +248,24 @@ importers:
       eslint-plugin-svelte:
         specifier: ^2.31.1
         version: registry.npmjs.org/eslint-plugin-svelte@2.31.1(eslint@8.43.0)(svelte@4.2.0)
+      postcss:
+        specifier: ^8.4.21
+        version: registry.npmjs.org/postcss@8.4.27
+      postcss-cli:
+        specifier: ^10.1.0
+        version: registry.npmjs.org/postcss-cli@10.1.0(postcss@8.4.27)
+      postcss-combine-duplicated-selectors:
+        specifier: ^10.0.3
+        version: registry.npmjs.org/postcss-combine-duplicated-selectors@10.0.3(postcss@8.4.27)
+      postcss-import:
+        specifier: ^15.1.0
+        version: registry.npmjs.org/postcss-import@15.1.0(postcss@8.4.27)
+      postcss-nested:
+        specifier: ^6.0.0
+        version: registry.npmjs.org/postcss-nested@6.0.1(postcss@8.4.27)
+      postcss-rename:
+        specifier: ^0.6.1
+        version: registry.npmjs.org/postcss-rename@0.6.1(postcss@8.4.27)
       prettier:
         specifier: ^2.8.8
         version: registry.npmjs.org/prettier@2.8.8
@@ -2041,6 +2074,13 @@ packages:
       '@swc/core-win32-x64-msvc': registry.npmjs.org/@swc/core-win32-x64-msvc@1.3.63
     dev: true
 
+  registry.npmjs.org/@trysound/sax@0.2.0:
+    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz}
+    name: '@trysound/sax'
+    version: 0.2.0
+    engines: {node: '>=10.13.0'}
+    dev: true
+
   registry.npmjs.org/@types/cookie@0.5.1:
     resolution: {integrity: sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/cookie/-/cookie-0.5.1.tgz}
     name: '@types/cookie'
@@ -3019,22 +3059,22 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: true
 
-  registry.npmjs.org/autoprefixer@10.4.14(postcss@8.4.24):
-    resolution: {integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz}
-    id: registry.npmjs.org/autoprefixer/10.4.14
+  registry.npmjs.org/autoprefixer@10.4.15(postcss@8.4.27):
+    resolution: {integrity: sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz}
+    id: registry.npmjs.org/autoprefixer/10.4.15
     name: autoprefixer
-    version: 10.4.14
+    version: 10.4.15
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      browserslist: registry.npmjs.org/browserslist@4.21.8
-      caniuse-lite: registry.npmjs.org/caniuse-lite@1.0.30001502
+      browserslist: registry.npmjs.org/browserslist@4.21.10
+      caniuse-lite: registry.npmjs.org/caniuse-lite@1.0.30001521
       fraction.js: registry.npmjs.org/fraction.js@4.2.0
       normalize-range: registry.npmjs.org/normalize-range@0.1.2
       picocolors: registry.npmjs.org/picocolors@1.0.0
-      postcss: registry.npmjs.org/postcss@8.4.24
+      postcss: registry.npmjs.org/postcss@8.4.27
       postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
     dev: true
 
@@ -3125,6 +3165,12 @@ packages:
     version: 3.7.2
     dev: true
 
+  registry.npmjs.org/boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz}
+    name: boolbase
+    version: 1.0.0
+    dev: true
+
   registry.npmjs.org/brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz}
     name: brace-expansion
@@ -3172,19 +3218,6 @@ packages:
       update-browserslist-db: registry.npmjs.org/update-browserslist-db@1.0.11(browserslist@4.21.10)
     dev: true
 
-  registry.npmjs.org/browserslist@4.21.8:
-    resolution: {integrity: sha512-j+7xYe+v+q2Id9qbBeCI8WX5NmZSRe8es1+0xntD/+gaWXznP8tFEkv5IgSaHf5dS1YwVMbX/4W6m937mj+wQw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/browserslist/-/browserslist-4.21.8.tgz}
-    name: browserslist
-    version: 4.21.8
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-    dependencies:
-      caniuse-lite: registry.npmjs.org/caniuse-lite@1.0.30001502
-      electron-to-chromium: registry.npmjs.org/electron-to-chromium@1.4.428
-      node-releases: registry.npmjs.org/node-releases@2.0.12
-      update-browserslist-db: registry.npmjs.org/update-browserslist-db@1.0.11(browserslist@4.21.8)
-    dev: true
-
   registry.npmjs.org/buffer-crc32@0.2.13:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz}
     name: buffer-crc32
@@ -3263,10 +3296,15 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  registry.npmjs.org/caniuse-lite@1.0.30001502:
-    resolution: {integrity: sha512-AZ+9tFXw1sS0o0jcpJQIXvFTOB/xGiQ4OQ2t98QX3NDn2EZTSRBC801gxrsGgViuq2ak/NLkNgSNEPtCr5lfKg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001502.tgz}
-    name: caniuse-lite
-    version: 1.0.30001502
+  registry.npmjs.org/caniuse-api@3.0.0:
+    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz}
+    name: caniuse-api
+    version: 3.0.0
+    dependencies:
+      browserslist: registry.npmjs.org/browserslist@4.21.10
+      caniuse-lite: registry.npmjs.org/caniuse-lite@1.0.30001521
+      lodash.memoize: registry.npmjs.org/lodash.memoize@4.1.2
+      lodash.uniq: registry.npmjs.org/lodash.uniq@4.5.0
     dev: true
 
   registry.npmjs.org/caniuse-lite@1.0.30001521:
@@ -3451,6 +3489,12 @@ packages:
     version: 1.1.4
     dev: true
 
+  registry.npmjs.org/colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/colord/-/colord-2.9.3.tgz}
+    name: colord
+    version: 2.9.3
+    dev: true
+
   registry.npmjs.org/colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz}
     name: colorette
@@ -3479,6 +3523,13 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
+  registry.npmjs.org/commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/commander/-/commander-7.2.0.tgz}
+    name: commander
+    version: 7.2.0
+    engines: {node: '>= 10'}
+    dev: true
+
   registry.npmjs.org/common-tags@1.8.2:
     resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz}
     name: common-tags
@@ -3556,6 +3607,40 @@ packages:
       which: registry.npmjs.org/which@2.0.2
     dev: true
 
+  registry.npmjs.org/css-declaration-sorter@6.4.1(postcss@8.4.27):
+    resolution: {integrity: sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz}
+    id: registry.npmjs.org/css-declaration-sorter/6.4.1
+    name: css-declaration-sorter
+    version: 6.4.1
+    engines: {node: ^10 || ^12 || >=14}
+    peerDependencies:
+      postcss: ^8.0.9
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+    dev: true
+
+  registry.npmjs.org/css-select@5.1.0:
+    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz}
+    name: css-select
+    version: 5.1.0
+    dependencies:
+      boolbase: registry.npmjs.org/boolbase@1.0.0
+      css-what: registry.npmjs.org/css-what@6.1.0
+      domhandler: registry.npmjs.org/domhandler@5.0.3
+      domutils: registry.npmjs.org/domutils@3.1.0
+      nth-check: registry.npmjs.org/nth-check@2.1.1
+    dev: true
+
+  registry.npmjs.org/css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz}
+    name: css-tree
+    version: 2.2.1
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+    dependencies:
+      mdn-data: registry.npmjs.org/mdn-data@2.0.28
+      source-map-js: registry.npmjs.org/source-map-js@1.0.2
+    dev: true
+
   registry.npmjs.org/css-tree@2.3.1:
     resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz}
     name: css-tree
@@ -3566,6 +3651,13 @@ packages:
       source-map-js: registry.npmjs.org/source-map-js@1.0.2
     dev: true
 
+  registry.npmjs.org/css-what@6.1.0:
+    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz}
+    name: css-what
+    version: 6.1.0
+    engines: {node: '>= 6'}
+    dev: true
+
   registry.npmjs.org/cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz}
     name: cssesc
@@ -3574,6 +3666,82 @@ packages:
     hasBin: true
     dev: true
 
+  registry.npmjs.org/cssnano-preset-default@6.0.1(postcss@8.4.27):
+    resolution: {integrity: sha512-7VzyFZ5zEB1+l1nToKyrRkuaJIx0zi/1npjvZfbBwbtNTzhLtlvYraK/7/uqmX2Wb2aQtd983uuGw79jAjLSuQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-6.0.1.tgz}
+    id: registry.npmjs.org/cssnano-preset-default/6.0.1
+    name: cssnano-preset-default
+    version: 6.0.1
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      css-declaration-sorter: registry.npmjs.org/css-declaration-sorter@6.4.1(postcss@8.4.27)
+      cssnano-utils: registry.npmjs.org/cssnano-utils@4.0.0(postcss@8.4.27)
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-calc: registry.npmjs.org/postcss-calc@9.0.1(postcss@8.4.27)
+      postcss-colormin: registry.npmjs.org/postcss-colormin@6.0.0(postcss@8.4.27)
+      postcss-convert-values: registry.npmjs.org/postcss-convert-values@6.0.0(postcss@8.4.27)
+      postcss-discard-comments: registry.npmjs.org/postcss-discard-comments@6.0.0(postcss@8.4.27)
+      postcss-discard-duplicates: registry.npmjs.org/postcss-discard-duplicates@6.0.0(postcss@8.4.27)
+      postcss-discard-empty: registry.npmjs.org/postcss-discard-empty@6.0.0(postcss@8.4.27)
+      postcss-discard-overridden: registry.npmjs.org/postcss-discard-overridden@6.0.0(postcss@8.4.27)
+      postcss-merge-longhand: registry.npmjs.org/postcss-merge-longhand@6.0.0(postcss@8.4.27)
+      postcss-merge-rules: registry.npmjs.org/postcss-merge-rules@6.0.1(postcss@8.4.27)
+      postcss-minify-font-values: registry.npmjs.org/postcss-minify-font-values@6.0.0(postcss@8.4.27)
+      postcss-minify-gradients: registry.npmjs.org/postcss-minify-gradients@6.0.0(postcss@8.4.27)
+      postcss-minify-params: registry.npmjs.org/postcss-minify-params@6.0.0(postcss@8.4.27)
+      postcss-minify-selectors: registry.npmjs.org/postcss-minify-selectors@6.0.0(postcss@8.4.27)
+      postcss-normalize-charset: registry.npmjs.org/postcss-normalize-charset@6.0.0(postcss@8.4.27)
+      postcss-normalize-display-values: registry.npmjs.org/postcss-normalize-display-values@6.0.0(postcss@8.4.27)
+      postcss-normalize-positions: registry.npmjs.org/postcss-normalize-positions@6.0.0(postcss@8.4.27)
+      postcss-normalize-repeat-style: registry.npmjs.org/postcss-normalize-repeat-style@6.0.0(postcss@8.4.27)
+      postcss-normalize-string: registry.npmjs.org/postcss-normalize-string@6.0.0(postcss@8.4.27)
+      postcss-normalize-timing-functions: registry.npmjs.org/postcss-normalize-timing-functions@6.0.0(postcss@8.4.27)
+      postcss-normalize-unicode: registry.npmjs.org/postcss-normalize-unicode@6.0.0(postcss@8.4.27)
+      postcss-normalize-url: registry.npmjs.org/postcss-normalize-url@6.0.0(postcss@8.4.27)
+      postcss-normalize-whitespace: registry.npmjs.org/postcss-normalize-whitespace@6.0.0(postcss@8.4.27)
+      postcss-ordered-values: registry.npmjs.org/postcss-ordered-values@6.0.0(postcss@8.4.27)
+      postcss-reduce-initial: registry.npmjs.org/postcss-reduce-initial@6.0.0(postcss@8.4.27)
+      postcss-reduce-transforms: registry.npmjs.org/postcss-reduce-transforms@6.0.0(postcss@8.4.27)
+      postcss-svgo: registry.npmjs.org/postcss-svgo@6.0.0(postcss@8.4.27)
+      postcss-unique-selectors: registry.npmjs.org/postcss-unique-selectors@6.0.0(postcss@8.4.27)
+    dev: true
+
+  registry.npmjs.org/cssnano-utils@4.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-Z39TLP+1E0KUcd7LGyF4qMfu8ZufI0rDzhdyAMsa/8UyNUU8wpS0fhdBxbQbv32r64ea00h4878gommRVg2BHw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-4.0.0.tgz}
+    id: registry.npmjs.org/cssnano-utils/4.0.0
+    name: cssnano-utils
+    version: 4.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+    dev: true
+
+  registry.npmjs.org/cssnano@6.0.1(postcss@8.4.27):
+    resolution: {integrity: sha512-fVO1JdJ0LSdIGJq68eIxOqFpIJrZqXUsBt8fkrBcztCQqAjQD51OhZp7tc0ImcbwXD4k7ny84QTV90nZhmqbkg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/cssnano/-/cssnano-6.0.1.tgz}
+    id: registry.npmjs.org/cssnano/6.0.1
+    name: cssnano
+    version: 6.0.1
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      cssnano-preset-default: registry.npmjs.org/cssnano-preset-default@6.0.1(postcss@8.4.27)
+      lilconfig: registry.npmjs.org/lilconfig@2.1.0
+      postcss: registry.npmjs.org/postcss@8.4.27
+    dev: true
+
+  registry.npmjs.org/csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/csso/-/csso-5.0.5.tgz}
+    name: csso
+    version: 5.0.5
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+    dependencies:
+      css-tree: registry.npmjs.org/css-tree@2.2.1
+    dev: true
+
   registry.npmjs.org/csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz}
     name: csstype
@@ -3942,6 +4110,41 @@ packages:
       esutils: registry.npmjs.org/esutils@2.0.3
     dev: true
 
+  registry.npmjs.org/dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz}
+    name: dom-serializer
+    version: 2.0.0
+    dependencies:
+      domelementtype: registry.npmjs.org/domelementtype@2.3.0
+      domhandler: registry.npmjs.org/domhandler@5.0.3
+      entities: registry.npmjs.org/entities@4.5.0
+    dev: true
+
+  registry.npmjs.org/domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz}
+    name: domelementtype
+    version: 2.3.0
+    dev: true
+
+  registry.npmjs.org/domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz}
+    name: domhandler
+    version: 5.0.3
+    engines: {node: '>= 4'}
+    dependencies:
+      domelementtype: registry.npmjs.org/domelementtype@2.3.0
+    dev: true
+
+  registry.npmjs.org/domutils@3.1.0:
+    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz}
+    name: domutils
+    version: 3.1.0
+    dependencies:
+      dom-serializer: registry.npmjs.org/dom-serializer@2.0.0
+      domelementtype: registry.npmjs.org/domelementtype@2.3.0
+      domhandler: registry.npmjs.org/domhandler@5.0.3
+    dev: true
+
   registry.npmjs.org/dotenv@16.0.3:
     resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz}
     name: dotenv
@@ -3949,6 +4152,13 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  registry.npmjs.org/dotenv@16.3.1:
+    resolution: {integrity: sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz}
+    name: dotenv
+    version: 16.3.1
+    engines: {node: '>=12'}
+    dev: true
+
   registry.npmjs.org/dotenv@8.6.0:
     resolution: {integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz}
     name: dotenv
@@ -3971,12 +4181,6 @@ packages:
       safer-buffer: registry.npmjs.org/safer-buffer@2.1.2
     dev: true
 
-  registry.npmjs.org/electron-to-chromium@1.4.428:
-    resolution: {integrity: sha512-L7uUknyY286of0AYC8CKfgWstD0Smk2DvHDi9F0GWQhSH90Bzi7iDrmCbZKz75tYJxeGSAc7TYeKpmbjMDoh1w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.428.tgz}
-    name: electron-to-chromium
-    version: 1.4.428
-    dev: true
-
   registry.npmjs.org/electron-to-chromium@1.4.492:
     resolution: {integrity: sha512-36K9b/6skMVwAIEsC7GiQ8I8N3soCALVSHqWHzNDtGemAcI9Xu8hP02cywWM0A794rTHm0b0zHPeLJHtgFVamQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.492.tgz}
     name: electron-to-chromium
@@ -4006,6 +4210,13 @@ packages:
       ansi-colors: registry.npmjs.org/ansi-colors@4.1.3
     dev: true
 
+  registry.npmjs.org/entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/entities/-/entities-4.5.0.tgz}
+    name: entities
+    version: 4.5.0
+    engines: {node: '>=0.12'}
+    dev: true
+
   registry.npmjs.org/error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz}
     name: error-ex
@@ -4284,9 +4495,9 @@ packages:
       eslint: registry.npmjs.org/eslint@8.43.0
       esutils: registry.npmjs.org/esutils@2.0.3
       known-css-properties: registry.npmjs.org/known-css-properties@0.27.0
-      postcss: registry.npmjs.org/postcss@8.4.24
-      postcss-load-config: registry.npmjs.org/postcss-load-config@3.1.4(postcss@8.4.24)
-      postcss-safe-parser: registry.npmjs.org/postcss-safe-parser@6.0.0(postcss@8.4.24)
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-load-config: registry.npmjs.org/postcss-load-config@3.1.4(postcss@8.4.27)
+      postcss-safe-parser: registry.npmjs.org/postcss-safe-parser@6.0.0(postcss@8.4.27)
       postcss-selector-parser: registry.npmjs.org/postcss-selector-parser@6.0.13
       semver: registry.npmjs.org/semver@7.5.3
       svelte: registry.npmjs.org/svelte@4.2.0
@@ -5863,6 +6074,12 @@ packages:
       p-locate: registry.npmjs.org/p-locate@5.0.0
     dev: true
 
+  registry.npmjs.org/lodash.memoize@4.1.2:
+    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz}
+    name: lodash.memoize
+    version: 4.1.2
+    dev: true
+
   registry.npmjs.org/lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz}
     name: lodash.merge
@@ -5881,6 +6098,12 @@ packages:
     version: 4.4.0
     dev: true
 
+  registry.npmjs.org/lodash.uniq@4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz}
+    name: lodash.uniq
+    version: 4.5.0
+    dev: true
+
   registry.npmjs.org/lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz}
     name: lodash
@@ -5988,6 +6211,12 @@ packages:
     version: 0.1.0
     dev: true
 
+  registry.npmjs.org/mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz}
+    name: mdn-data
+    version: 2.0.28
+    dev: true
+
   registry.npmjs.org/mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz}
     name: mdn-data
@@ -6193,12 +6422,6 @@ packages:
       whatwg-url: registry.npmjs.org/whatwg-url@5.0.0
     dev: true
 
-  registry.npmjs.org/node-releases@2.0.12:
-    resolution: {integrity: sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz}
-    name: node-releases
-    version: 2.0.12
-    dev: true
-
   registry.npmjs.org/node-releases@2.0.13:
     resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz}
     name: node-releases
@@ -6239,6 +6462,14 @@ packages:
       path-key: registry.npmjs.org/path-key@3.1.1
     dev: true
 
+  registry.npmjs.org/nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz}
+    name: nth-check
+    version: 2.1.1
+    dependencies:
+      boolbase: registry.npmjs.org/boolbase@1.0.0
+    dev: true
+
   registry.npmjs.org/object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz}
     name: object-assign
@@ -6561,7 +6792,21 @@ packages:
       find-up: registry.npmjs.org/find-up@4.1.0
     dev: true
 
-  registry.npmjs.org/postcss-cli@10.1.0(postcss@8.4.24):
+  registry.npmjs.org/postcss-calc@9.0.1(postcss@8.4.27):
+    resolution: {integrity: sha512-TipgjGyzP5QzEhsOZUaIkeO5mKeMFpebWzRogWG/ysonUlnHcq5aJe0jOjpfzUU8PeSaBQnrE8ehR0QA5vs8PQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-calc/-/postcss-calc-9.0.1.tgz}
+    id: registry.npmjs.org/postcss-calc/9.0.1
+    name: postcss-calc
+    version: 9.0.1
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.2
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-selector-parser: registry.npmjs.org/postcss-selector-parser@6.0.13
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-cli@10.1.0(postcss@8.4.27):
     resolution: {integrity: sha512-Zu7PLORkE9YwNdvOeOVKPmWghprOtjFQU3srMUGbdz3pHJiFh7yZ4geiZFMkjMfB0mtTFR3h8RemR62rPkbOPA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-cli/-/postcss-cli-10.1.0.tgz}
     id: registry.npmjs.org/postcss-cli/10.1.0
     name: postcss-cli
@@ -6577,9 +6822,9 @@ packages:
       get-stdin: registry.npmjs.org/get-stdin@9.0.0
       globby: registry.npmjs.org/globby@13.1.4
       picocolors: registry.npmjs.org/picocolors@1.0.0
-      postcss: registry.npmjs.org/postcss@8.4.24
-      postcss-load-config: registry.npmjs.org/postcss-load-config@4.0.1(postcss@8.4.24)
-      postcss-reporter: registry.npmjs.org/postcss-reporter@7.0.5(postcss@8.4.24)
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-load-config: registry.npmjs.org/postcss-load-config@4.0.1(postcss@8.4.27)
+      postcss-reporter: registry.npmjs.org/postcss-reporter@7.0.5(postcss@8.4.27)
       pretty-hrtime: registry.npmjs.org/pretty-hrtime@1.0.3
       read-cache: registry.npmjs.org/read-cache@1.0.0
       slash: registry.npmjs.org/slash@5.1.0
@@ -6588,7 +6833,23 @@ packages:
       - ts-node
     dev: true
 
-  registry.npmjs.org/postcss-combine-duplicated-selectors@10.0.3(postcss@8.4.24):
+  registry.npmjs.org/postcss-colormin@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-EuO+bAUmutWoZYgHn2T1dG1pPqHU6L4TjzPlu4t1wZGXQ/fxV16xg2EJmYi0z+6r+MGV1yvpx1BHkUaRrPa2bw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-colormin/6.0.0
+    name: postcss-colormin
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: registry.npmjs.org/browserslist@4.21.10
+      caniuse-api: registry.npmjs.org/caniuse-api@3.0.0
+      colord: registry.npmjs.org/colord@2.9.3
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-combine-duplicated-selectors@10.0.3(postcss@8.4.27):
     resolution: {integrity: sha512-IP0BmwFloCskv7DV7xqvzDXqMHpwdczJa6ZvIW8abgHdcIHs9mCJX2ltFhu3EwA51ozp13DByng30+Ke+eIExA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-combine-duplicated-selectors/-/postcss-combine-duplicated-selectors-10.0.3.tgz}
     id: registry.npmjs.org/postcss-combine-duplicated-selectors/10.0.3
     name: postcss-combine-duplicated-selectors
@@ -6597,11 +6858,73 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: registry.npmjs.org/postcss@8.4.24
+      postcss: registry.npmjs.org/postcss@8.4.27
       postcss-selector-parser: registry.npmjs.org/postcss-selector-parser@6.0.13
     dev: true
 
-  registry.npmjs.org/postcss-import@15.1.0(postcss@8.4.24):
+  registry.npmjs.org/postcss-convert-values@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-U5D8QhVwqT++ecmy8rnTb+RL9n/B806UVaS3m60lqle4YDFcpbS3ae5bTQIh3wOGUSDHSEtMYLs/38dNG7EYFw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-convert-values/6.0.0
+    name: postcss-convert-values
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: registry.npmjs.org/browserslist@4.21.10
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-discard-comments@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-p2skSGqzPMZkEQvJsgnkBhCn8gI7NzRH2683EEjrIkoMiwRELx68yoUJ3q3DGSGuQ8Ug9Gsn+OuDr46yfO+eFw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-discard-comments/6.0.0
+    name: postcss-discard-comments
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+    dev: true
+
+  registry.npmjs.org/postcss-discard-duplicates@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-bU1SXIizMLtDW4oSsi5C/xHKbhLlhek/0/yCnoMQany9k3nPBq+Ctsv/9oMmyqbR96HYHxZcHyK2HR5P/mqoGA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-discard-duplicates/6.0.0
+    name: postcss-discard-duplicates
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+    dev: true
+
+  registry.npmjs.org/postcss-discard-empty@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-b+h1S1VT6dNhpcg+LpyiUrdnEZfICF0my7HAKgJixJLW7BnNmpRH34+uw/etf5AhOlIhIAuXApSzzDzMI9K/gQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-discard-empty/6.0.0
+    name: postcss-discard-empty
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+    dev: true
+
+  registry.npmjs.org/postcss-discard-overridden@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-4VELwssYXDFigPYAZ8vL4yX4mUepF/oCBeeIT4OXsJPYOtvJumyz9WflmJWTfDwCUcpDR+z0zvCWBXgTx35SVw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-discard-overridden/6.0.0
+    name: postcss-discard-overridden
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+    dev: true
+
+  registry.npmjs.org/postcss-import@15.1.0(postcss@8.4.27):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz}
     id: registry.npmjs.org/postcss-import/15.1.0
     name: postcss-import
@@ -6610,13 +6933,13 @@ packages:
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: registry.npmjs.org/postcss@8.4.24
+      postcss: registry.npmjs.org/postcss@8.4.27
       postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
       read-cache: registry.npmjs.org/read-cache@1.0.0
       resolve: registry.npmjs.org/resolve@1.22.2
     dev: true
 
-  registry.npmjs.org/postcss-load-config@3.1.4(postcss@8.4.24):
+  registry.npmjs.org/postcss-load-config@3.1.4(postcss@8.4.27):
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz}
     id: registry.npmjs.org/postcss-load-config/3.1.4
     name: postcss-load-config
@@ -6632,11 +6955,11 @@ packages:
         optional: true
     dependencies:
       lilconfig: registry.npmjs.org/lilconfig@2.1.0
-      postcss: registry.npmjs.org/postcss@8.4.24
+      postcss: registry.npmjs.org/postcss@8.4.27
       yaml: registry.npmjs.org/yaml@1.10.2
     dev: true
 
-  registry.npmjs.org/postcss-load-config@4.0.1(postcss@8.4.24):
+  registry.npmjs.org/postcss-load-config@4.0.1(postcss@8.4.27):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz}
     id: registry.npmjs.org/postcss-load-config/4.0.1
     name: postcss-load-config
@@ -6652,11 +6975,97 @@ packages:
         optional: true
     dependencies:
       lilconfig: registry.npmjs.org/lilconfig@2.1.0
-      postcss: registry.npmjs.org/postcss@8.4.24
+      postcss: registry.npmjs.org/postcss@8.4.27
       yaml: registry.npmjs.org/yaml@2.3.1
     dev: true
 
-  registry.npmjs.org/postcss-nested@6.0.1(postcss@8.4.24):
+  registry.npmjs.org/postcss-merge-longhand@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-4VSfd1lvGkLTLYcxFuISDtWUfFS4zXe0FpF149AyziftPFQIWxjvFSKhA4MIxMe4XM3yTDgQMbSNgzIVxChbIg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-merge-longhand/6.0.0
+    name: postcss-merge-longhand
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+      stylehacks: registry.npmjs.org/stylehacks@6.0.0(postcss@8.4.27)
+    dev: true
+
+  registry.npmjs.org/postcss-merge-rules@6.0.1(postcss@8.4.27):
+    resolution: {integrity: sha512-a4tlmJIQo9SCjcfiCcCMg/ZCEe0XTkl/xK0XHBs955GWg9xDX3NwP9pwZ78QUOWB8/0XCjZeJn98Dae0zg6AAw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-6.0.1.tgz}
+    id: registry.npmjs.org/postcss-merge-rules/6.0.1
+    name: postcss-merge-rules
+    version: 6.0.1
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: registry.npmjs.org/browserslist@4.21.10
+      caniuse-api: registry.npmjs.org/caniuse-api@3.0.0
+      cssnano-utils: registry.npmjs.org/cssnano-utils@4.0.0(postcss@8.4.27)
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-selector-parser: registry.npmjs.org/postcss-selector-parser@6.0.13
+    dev: true
+
+  registry.npmjs.org/postcss-minify-font-values@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-zNRAVtyh5E8ndZEYXA4WS8ZYsAp798HiIQ1V2UF/C/munLp2r1UGHwf1+6JFu7hdEhJFN+W1WJQKBrtjhFgEnA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-minify-font-values/6.0.0
+    name: postcss-minify-font-values
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-minify-gradients@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-wO0F6YfVAR+K1xVxF53ueZJza3L+R3E6cp0VwuXJQejnNUH0DjcAFe3JEBeTY1dLwGa0NlDWueCA1VlEfiKgAA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-minify-gradients/6.0.0
+    name: postcss-minify-gradients
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      colord: registry.npmjs.org/colord@2.9.3
+      cssnano-utils: registry.npmjs.org/cssnano-utils@4.0.0(postcss@8.4.27)
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-minify-params@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-Fz/wMQDveiS0n5JPcvsMeyNXOIMrwF88n7196puSuQSWSa+/Ofc1gDOSY2xi8+A4PqB5dlYCKk/WfqKqsI+ReQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-minify-params/6.0.0
+    name: postcss-minify-params
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: registry.npmjs.org/browserslist@4.21.10
+      cssnano-utils: registry.npmjs.org/cssnano-utils@4.0.0(postcss@8.4.27)
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-minify-selectors@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-ec/q9JNCOC2CRDNnypipGfOhbYPuUkewGwLnbv6omue/PSASbHSU7s6uSQ0tcFRVv731oMIx8k0SP4ZX6be/0g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-minify-selectors/6.0.0
+    name: postcss-minify-selectors
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-selector-parser: registry.npmjs.org/postcss-selector-parser@6.0.13
+    dev: true
+
+  registry.npmjs.org/postcss-nested@6.0.1(postcss@8.4.27):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz}
     id: registry.npmjs.org/postcss-nested/6.0.1
     name: postcss-nested
@@ -6665,11 +7074,182 @@ packages:
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
-      postcss: registry.npmjs.org/postcss@8.4.24
+      postcss: registry.npmjs.org/postcss@8.4.27
       postcss-selector-parser: registry.npmjs.org/postcss-selector-parser@6.0.13
     dev: true
 
-  registry.npmjs.org/postcss-reporter@7.0.5(postcss@8.4.24):
+  registry.npmjs.org/postcss-normalize-charset@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-cqundwChbu8yO/gSWkuFDmKrCZ2vJzDAocheT2JTd0sFNA4HMGoKMfbk2B+J0OmO0t5GUkiAkSM5yF2rSLUjgQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-normalize-charset/6.0.0
+    name: postcss-normalize-charset
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+    dev: true
+
+  registry.npmjs.org/postcss-normalize-display-values@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-Qyt5kMrvy7dJRO3OjF7zkotGfuYALETZE+4lk66sziWSPzlBEt7FrUshV6VLECkI4EN8Z863O6Nci4NXQGNzYw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-normalize-display-values/6.0.0
+    name: postcss-normalize-display-values
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-normalize-positions@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-mPCzhSV8+30FZyWhxi6UoVRYd3ZBJgTRly4hOkaSifo0H+pjDYcii/aVT4YE6QpOil15a5uiv6ftnY3rm0igPg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-normalize-positions/6.0.0
+    name: postcss-normalize-positions
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-normalize-repeat-style@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-50W5JWEBiOOAez2AKBh4kRFm2uhrT3O1Uwdxz7k24aKtbD83vqmcVG7zoIwo6xI2FZ/HDlbrCopXhLeTpQib1A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-normalize-repeat-style/6.0.0
+    name: postcss-normalize-repeat-style
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-normalize-string@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-KWkIB7TrPOiqb8ZZz6homet2KWKJwIlysF5ICPZrXAylGe2hzX/HSf4NTX2rRPJMAtlRsj/yfkrWGavFuB+c0w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-normalize-string/6.0.0
+    name: postcss-normalize-string
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-normalize-timing-functions@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-tpIXWciXBp5CiFs8sem90IWlw76FV4oi6QEWfQwyeREVwUy39VSeSqjAT7X0Qw650yAimYW5gkl2Gd871N5SQg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-normalize-timing-functions/6.0.0
+    name: postcss-normalize-timing-functions
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-normalize-unicode@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-ui5crYkb5ubEUDugDc786L/Me+DXp2dLg3fVJbqyAl0VPkAeALyAijF2zOsnZyaS1HyfPuMH0DwyY18VMFVNkg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-normalize-unicode/6.0.0
+    name: postcss-normalize-unicode
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: registry.npmjs.org/browserslist@4.21.10
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-normalize-url@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-98mvh2QzIPbb02YDIrYvAg4OUzGH7s1ZgHlD3fIdTHLgPLRpv1ZTKJDnSAKr4Rt21ZQFzwhGMXxpXlfrUBKFHw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-normalize-url/6.0.0
+    name: postcss-normalize-url
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-normalize-whitespace@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-7cfE1AyLiK0+ZBG6FmLziJzqQCpTQY+8XjMhMAz8WSBSCsCNNUKujgIgjCAmDT3cJ+3zjTXFkoD15ZPsckArVw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-normalize-whitespace/6.0.0
+    name: postcss-normalize-whitespace
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-ordered-values@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-K36XzUDpvfG/nWkjs6d1hRBydeIxGpKS2+n+ywlKPzx1nMYDYpoGbcjhj5AwVYJK1qV2/SDoDEnHzlPD6s3nMg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-ordered-values/6.0.0
+    name: postcss-ordered-values
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      cssnano-utils: registry.npmjs.org/cssnano-utils@4.0.0(postcss@8.4.27)
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-reduce-initial@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-s2UOnidpVuXu6JiiI5U+fV2jamAw5YNA9Fdi/GRK0zLDLCfXmSGqQtzpUPtfN66RtCbb9fFHoyZdQaxOB3WxVA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-reduce-initial/6.0.0
+    name: postcss-reduce-initial
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: registry.npmjs.org/browserslist@4.21.10
+      caniuse-api: registry.npmjs.org/caniuse-api@3.0.0
+      postcss: registry.npmjs.org/postcss@8.4.27
+    dev: true
+
+  registry.npmjs.org/postcss-reduce-transforms@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-FQ9f6xM1homnuy1wLe9lP1wujzxnwt1EwiigtWwuyf8FsqqXUDUp2Ulxf9A5yjlUOTdCJO6lonYjg1mgqIIi2w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-reduce-transforms/6.0.0
+    name: postcss-reduce-transforms
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+    dev: true
+
+  registry.npmjs.org/postcss-rename@0.6.1(postcss@8.4.27):
+    resolution: {integrity: sha512-bsj9TMuPnh8pqF/FMX6BB3aZMjTxRdGP0qJHOg4yC2S1DCAomtAVuQaTJC16QTkH5fnrYMP/yYjuXZAibP3QnQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-rename/-/postcss-rename-0.6.1.tgz}
+    id: registry.npmjs.org/postcss-rename/0.6.1
+    name: postcss-rename
+    version: 0.6.1
+    engines: {node: '>=8.3.0'}
+    peerDependencies:
+      postcss: ^8.2.6
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-selector-parser: registry.npmjs.org/postcss-selector-parser@6.0.13
+    dev: true
+
+  registry.npmjs.org/postcss-reporter@7.0.5(postcss@8.4.27):
     resolution: {integrity: sha512-glWg7VZBilooZGOFPhN9msJ3FQs19Hie7l5a/eE6WglzYqVeH3ong3ShFcp9kDWJT1g2Y/wd59cocf9XxBtkWA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.0.5.tgz}
     id: registry.npmjs.org/postcss-reporter/7.0.5
     name: postcss-reporter
@@ -6679,11 +7259,11 @@ packages:
       postcss: ^8.1.0
     dependencies:
       picocolors: registry.npmjs.org/picocolors@1.0.0
-      postcss: registry.npmjs.org/postcss@8.4.24
+      postcss: registry.npmjs.org/postcss@8.4.27
       thenby: registry.npmjs.org/thenby@1.3.4
     dev: true
 
-  registry.npmjs.org/postcss-safe-parser@6.0.0(postcss@8.4.24):
+  registry.npmjs.org/postcss-safe-parser@6.0.0(postcss@8.4.27):
     resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz}
     id: registry.npmjs.org/postcss-safe-parser/6.0.0
     name: postcss-safe-parser
@@ -6692,19 +7272,7 @@ packages:
     peerDependencies:
       postcss: ^8.3.3
     dependencies:
-      postcss: registry.npmjs.org/postcss@8.4.24
-    dev: true
-
-  registry.npmjs.org/postcss-scss@4.0.6(postcss@8.4.24):
-    resolution: {integrity: sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.6.tgz}
-    id: registry.npmjs.org/postcss-scss/4.0.6
-    name: postcss-scss
-    version: 4.0.6
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.4.19
-    dependencies:
-      postcss: registry.npmjs.org/postcss@8.4.24
+      postcss: registry.npmjs.org/postcss@8.4.27
     dev: true
 
   registry.npmjs.org/postcss-scss@4.0.6(postcss@8.4.27):
@@ -6729,23 +7297,39 @@ packages:
       util-deprecate: registry.npmjs.org/util-deprecate@1.0.2
     dev: true
 
+  registry.npmjs.org/postcss-svgo@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-r9zvj/wGAoAIodn84dR/kFqwhINp5YsJkLoujybWG59grR/IHx+uQ2Zo+IcOwM0jskfYX3R0mo+1Kip1VSNcvw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-svgo/6.0.0
+    name: postcss-svgo
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >= 18}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0
+      svgo: registry.npmjs.org/svgo@3.0.2
+    dev: true
+
+  registry.npmjs.org/postcss-unique-selectors@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-EPQzpZNxOxP7777t73RQpZE5e9TrnCrkvp7AH7a0l89JmZiPnS82y216JowHXwpBCQitfyxrof9TK3rYbi7/Yw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-6.0.0.tgz}
+    id: registry.npmjs.org/postcss-unique-selectors/6.0.0
+    name: postcss-unique-selectors
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-selector-parser: registry.npmjs.org/postcss-selector-parser@6.0.13
+    dev: true
+
   registry.npmjs.org/postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz}
     name: postcss-value-parser
     version: 4.2.0
     dev: true
 
-  registry.npmjs.org/postcss@8.4.24:
-    resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz}
-    name: postcss
-    version: 8.4.24
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: registry.npmjs.org/nanoid@3.3.6
-      picocolors: registry.npmjs.org/picocolors@1.0.0
-      source-map-js: registry.npmjs.org/source-map-js@1.0.2
-    dev: true
-
   registry.npmjs.org/postcss@8.4.27:
     resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz}
     name: postcss
@@ -7702,6 +8286,20 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  registry.npmjs.org/stylehacks@6.0.0(postcss@8.4.27):
+    resolution: {integrity: sha512-+UT589qhHPwz6mTlCLSt/vMNTJx8dopeJlZAlBMJPWA3ORqu6wmQY7FBXf+qD+FsqoBJODyqNxOUP3jdntFRdw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/stylehacks/-/stylehacks-6.0.0.tgz}
+    id: registry.npmjs.org/stylehacks/6.0.0
+    name: stylehacks
+    version: 6.0.0
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: registry.npmjs.org/browserslist@4.21.10
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-selector-parser: registry.npmjs.org/postcss-selector-parser@6.0.13
+    dev: true
+
   registry.npmjs.org/supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz}
     name: supports-color
@@ -7781,8 +8379,8 @@ packages:
       eslint-scope: registry.npmjs.org/eslint-scope@7.2.0
       eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys@3.4.3
       espree: registry.npmjs.org/espree@9.5.2
-      postcss: registry.npmjs.org/postcss@8.4.24
-      postcss-scss: registry.npmjs.org/postcss-scss@4.0.6(postcss@8.4.24)
+      postcss: registry.npmjs.org/postcss@8.4.27
+      postcss-scss: registry.npmjs.org/postcss-scss@4.0.6(postcss@8.4.27)
       svelte: registry.npmjs.org/svelte@4.2.0
     dev: true
 
@@ -7905,6 +8503,21 @@ packages:
       periscopic: registry.npmjs.org/periscopic@3.1.0
     dev: true
 
+  registry.npmjs.org/svgo@3.0.2:
+    resolution: {integrity: sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz}
+    name: svgo
+    version: 3.0.2
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      '@trysound/sax': registry.npmjs.org/@trysound/sax@0.2.0
+      commander: registry.npmjs.org/commander@7.2.0
+      css-select: registry.npmjs.org/css-select@5.1.0
+      css-tree: registry.npmjs.org/css-tree@2.3.1
+      csso: registry.npmjs.org/csso@5.0.5
+      picocolors: registry.npmjs.org/picocolors@1.0.0
+    dev: true
+
   registry.npmjs.org/term-size@2.2.1:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz}
     name: term-size
@@ -8323,20 +8936,6 @@ packages:
       picocolors: registry.npmjs.org/picocolors@1.0.0
     dev: true
 
-  registry.npmjs.org/update-browserslist-db@1.0.11(browserslist@4.21.8):
-    resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz}
-    id: registry.npmjs.org/update-browserslist-db/1.0.11
-    name: update-browserslist-db
-    version: 1.0.11
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-    dependencies:
-      browserslist: registry.npmjs.org/browserslist@4.21.8
-      escalade: registry.npmjs.org/escalade@3.1.1
-      picocolors: registry.npmjs.org/picocolors@1.0.0
-    dev: true
-
   registry.npmjs.org/uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz}
     name: uri-js
@@ -8417,7 +9016,7 @@ packages:
         optional: true
     dependencies:
       esbuild: registry.npmjs.org/esbuild@0.17.19
-      postcss: registry.npmjs.org/postcss@8.4.24
+      postcss: registry.npmjs.org/postcss@8.4.27
       rollup: registry.npmjs.org/rollup@3.25.1
     optionalDependencies:
       fsevents: registry.npmjs.org/fsevents@2.3.2
diff --git a/tooling/postcss-config/postcss.config.js b/tooling/postcss-config/postcss.config.js
index b183d86e..e78c12e8 100644
--- a/tooling/postcss-config/postcss.config.js
+++ b/tooling/postcss-config/postcss.config.js
@@ -1,8 +1,23 @@
-module.exports = {
-  plugins: [
-    require('postcss-import'),
-    require('postcss-nested'),
-    require('postcss-combine-duplicated-selectors'),
-    require('autoprefixer'),
-  ],
+require('dotenv').config();
+
+const postcssImport = require('postcss-import');
+const postcssNested = require('postcss-nested');
+const postcssCombine = require('postcss-combine-duplicated-selectors');
+const postcssRename = require('postcss-rename');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+
+module.exports = (ctx) => {
+  return {
+    plugins: [
+      postcssImport,
+      postcssNested,
+      postcssCombine,
+      postcssRename({
+        strategy: (className) => className.replace('xy', process.env.LIB),
+      }),
+      autoprefixer,
+      ctx.env === 'production' && cssnano,
+    ],
+  };
 };