fix: set css variables with :root (#16)

Author: TeemuKoivisto

.changeset/brave-cups-fail.md

@@ -0,0 +1,5 @@
+---
+'svelte-tree-view': patch
+---
+
+fix: set css variables with :root

packages/svelte-tree-view/cypress/plugins/index.ts

@@ -13,8 +13,4 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// Import commands.js using ES2015 syntax:
 import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

packages/svelte-tree-view/cypress/support/e2e.ts

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["es5", "dom", "dom.iterable"],
+    "lib": ["esnext", "dom", "dom.iterable"],
     "types": ["node", "cypress", "@testing-library/cypress"],
     "esModuleInterop": true,
     "resolveJsonModule": true

packages/svelte-tree-view/cypress/tsconfig.json

@@ -23,7 +23,7 @@
     "build": "pnpm build:pkg && pnpm build:dist",
     "build:dist": "vite build --config vite.config.dist.ts",
     "build:pkg": "svelte-kit sync && svelte-package -o pkg",
-    "watch:pkg": "svelte-package --watch",
+    "watch:pkg": "svelte-package --watch -o pkg",
     "dev": "vite",
     "preversion": "pnpm svelte-check && pnpm test && pnpm build",
     "prepublishOnly": "cp ../../README.md . && cp ../../LICENSE . && rm -r ./pkg/__tests__",

packages/svelte-tree-view/package.json

@@ -109,10 +109,7 @@
 </ul>
 
 <style>
-  * {
-    box-sizing: border-box;
-  }
-  .svelte-tree-view {
+  :root {
     --tree-view-font-family: 'Helvetica Neue', 'Calibri Light', Roboto, sans-serif;
     --tree-view-font-size: 13px;
     --tree-view-left-indent: 0.875em;