Merge pull request #40 from josefaidt/next

.eslintrc.cjs

@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  extends: ['eslint:recommended'],
+  plugins: ['svelte3', 'jest'],
+  overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2020,
+  },
+  env: {
+    browser: true,
+    es2020: true,
+    node: true,
+    'jest/globals': true,
+  },
+}

components/ThemeToggle.test.js

@@ -1,3 +1,6 @@
+/**
+ * @jest-environment jsdom
+ */
 import '@testing-library/jest-dom/extend-expect'
 import { render, fireEvent, getByTestId } from '@testing-library/svelte'
 import { currentThemeName } from '../support/store'

components/ThemeWrapper.svelte

@@ -15,10 +15,11 @@
   import { onMount, afterUpdate, setContext } from 'svelte'
   import { presets } from './presets'
   import toggle from '../support/toggle'
-  import createCSS from '../support/createCSS'
+  import { createCSS } from '../support/css'
   import {
     currentThemeName,
     currentThemeObject,
+    currentMode,
     themes as themesStore,
   } from '../support/store'
   import isObject from '../support/isObject'

components/ThemeWrapper.test.js

@@ -1,3 +1,6 @@
+/**
+ * @jest-environment jsdom
+ */
 import '@testing-library/jest-dom/extend-expect'
 import { render } from '@testing-library/svelte'
 import ThemeWrapper, {
@@ -26,7 +29,9 @@ describe(ThemeWrapper.name, () => {
   })
 
   afterEach(() => {
-    document.querySelectorAll('style').forEach(sheet => sheet.cssRules && sheet.remove())
+    document
+      .querySelectorAll('style')
+      .forEach(sheet => sheet.cssRules && sheet.remove())
   })
 
   it('should render', () => {
@@ -61,7 +66,9 @@ describe(ThemeWrapper.name, () => {
     })
 
     it('should not use CSS Variables prefix when prefix is null', () => {
-      const { container } = TestHarness({ prefix: null })
+      const { container } = TestHarness({
+        prefix: null,
+      })
       expect(getCSSVar('--colors-text')).toBeTruthy()
     })
 
@@ -70,6 +77,24 @@ describe(ThemeWrapper.name, () => {
     })
   })
 
+  it('should accept base styles as initial CSS Variables values', () => {
+    const base = {
+      colors: {
+        primary: 'red',
+      },
+    }
+    const themes = {
+      test: {
+        colors: {
+          primary: 'blue',
+        },
+      },
+    }
+    const results = TestHarness({ base, themes })
+    expect(getCSSVar('--theme-colors-primary')).not.toEqual('initial')
+    expect(getCSSVar('--theme-colors-primary')).toEqual('red')
+  })
+
   describe('server-side context', () => {
     const { window } = global
     beforeEach(() => {
@@ -78,7 +103,7 @@ describe(ThemeWrapper.name, () => {
     afterAll(() => {
       global.window = window
     })
-    it('should not fail to render', () => {
+    it('should render', () => {
       const { component } = TestHarness()
       expect(component).toBeTruthy()
     })

docs/package.json

@@ -7,12 +7,12 @@
     "serve": "vite preview"
   },
   "devDependencies": {
-    "@rollup/plugin-replace": "^2.4.1",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.5",
-    "autoprefixer": "^10.2.5",
-    "postcss": "^8.2.8",
-    "svelte": "^3.35.0",
+    "@rollup/plugin-replace": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22",
+    "autoprefixer": "^10.3.4",
+    "postcss": "^8.3.6",
+    "svelte": "^3.42.4",
     "svelte-themer": "../",
-    "vite": "^2.1.3"
+    "vite": "^2.5.6"
   }
 }

docs/src/App.svelte

@@ -33,12 +33,17 @@
       <section id="intro">
         <header>
           <h1>Svelte Themer</h1>
-          <p>A theming engine for your Svelte apps using CSS Variables, persisted.</p>
+          <p>
+            A theming engine for your Svelte apps using CSS Variables,
+            persisted.
+          </p>
         </header>
         <div class="apps">
           <a
             href="https://github.com/josefaidt/svelte-themer/blob/main/README.md#svelte-themer"
-          >readme</a>
+          >
+            readme
+          </a>
           <a href="https://www.npmjs.com/package/svelte-themer">npm</a>
           <a href="https://github.com/josefaidt/svelte-themer">github</a>
         </div>

docs/vite.config.js

@@ -1,6 +1,6 @@
 import { readFile } from 'fs/promises'
 import { resolve } from 'path'
-import svelte from '@sveltejs/vite-plugin-svelte'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
 import replace from '@rollup/plugin-replace'
 import autoprefixer from 'autoprefixer'
 import { defineConfig } from 'vite'