svelte-body - npm Package Compare versions

Comparing version 1.1.3 to 1.2.4

dist/index.js

@@ -330,3 +330,3 @@ (function (global, factory) {
                 for (const [property, value] of Object.entries(styleData))
-                    pseudoElement.style[property] = value;
+                    pseudoElement.style.setProperty(property, value);
 
@@ -364,3 +364,3 @@ // Combine body's existing styles with computed ones
 
-    /* src/Body.svelte generated by Svelte v3.44.0 */
+    /* src/Body.svelte generated by Svelte v3.44.2 */
 
@@ -400,3 +400,3 @@ function create_fragment(ctx) {
     	let { class: classes = '' } = $$props;
-    	let { style } = $$props;
+    	let { style = '' } = $$props;
 
@@ -403,0 +403,0 @@ $$self.$$set = $$props => {

package.json

 {
   "name": "svelte-body",
-  "version": "1.1.3",
+  "version": "1.2.4",
   "description": "Apply styles to the body in routes! Designed to work with Svelte Kit and Routify.",
@@ -38,3 +38,6 @@ "main": "./dist/index.js",
     "svelte": "^3.24.0"
+  },
+  "dependencies": {
+    "csstype": "^3.0.10"
   }
-}
+}

README.md

 # Svelte Body
+
 Apply styles to the body in routes! Designed to work with Svelte Kit and Routify.
@@ -7,12 +8,22 @@
 # Why?
+
 Currently in Svelte Kit and Routify, applying styles per page to the body doesn't work. You can't use `:global(body)` since the style tags aren't removed and reapplied on route change. `svelte-body` handles that for you!
 
 # Install
+
 ```bash
 npm i svelte-body -D
+
+# pnpm
+pnpm add svelte-body -D
+
+# yarn
+yarn add svelte-body -D
 ```
 
 # Usage
+
 Just like in regular html you can apply classes with `class=""` and styles with `style=""`.
-```svelte
+
+```html
 <script>
@@ -26,3 +37,4 @@ import { Body } from 'svelte-body';
 Alternativley you can use a style object like so:
-```svelte
+
+```html
 <script>
@@ -32,5 +44,6 @@ import { Body } from 'svelte-body';
     const style = {
-        "background-color": "violet", 
-        "color": "white"
-    }
+        backgroundColor: 'violet',
+        color: 'white',
+        '--cool-css-prop': '😎'
+    };
 </script>
@@ -42,8 +55,10 @@
 # Actions
+
 There are also [svelte actions](https://svelte.dev/docs#use_action) that can be used on `<svelte:body />`:
 
-- `classList`
+-   `classList`
+
     ```html
     <script>
-        import { classList } from 'svelte/body';
+        import { classList } from 'svelte-body';
     </script>
@@ -54,6 +69,7 @@
 
-- `style`
+-   `style`
+
     ```html
     <script>
-        import { style } from 'svelte/body';
+        import { style } from 'svelte-body';
     </script>
@@ -64,4 +80,17 @@
 
+    It can also take an object:
+
+    ```html
+    <script>
+        import { style } from 'svelte-body';
+    </script>
+
+    <svelte:body
+        use:style="{{ backgroundColor: 'blue', '--cool-css-prop': '😎' }}"
+    />
+    ```
+
 # Support
+
 -   Join the [discord](https://discord.gg/2Vd4wAjJnm)<br>
 -   Create a issue on the [github](https://github.com/ghostdevv/svelte-body)

src/actions.js

@@ -36,3 +36,3 @@ import { writable, get } from 'svelte/store';
             for (const [property, value] of Object.entries(styleData))
-                pseudoElement.style[property] = value;
+                pseudoElement.style.setProperty(property, value);
 
@@ -39,0 +39,0 @@ // Combine body's existing styles with computed ones

types/actions.d.ts

@@ -1,1 +0,61 @@
-/// <reference types="svelte" />
+/// <reference types="svelte" />
+import { Properties } from 'csstype';
+
+declare module 'csstype' {
+    interface Properties {
+        // Add a CSS Custom Property
+        [key: `--${string}`]: any;
+    }
+}
+
+/**
+ * Svelte action to change class on `body`
+ *
+ * @example
+ *
+ *```svelte
+ * <script>
+ *   import { classList } from 'svelte-body';
+ * </script>
+ *
+ * <svelte:body use:classList={"red green blue"}>
+ *```
+ *
+ * @param {HTMLElement} node
+ * @param classString
+ */
+export function classList(
+    node: HTMLElement,
+    classString: string,
+): { update: () => void; destroy: () => void };
+
+/**
+ * Svelte action to add style on `body`. style can either be a string or an object.
+ *
+ * @example
+ *
+ *```svelte
+ * <script>
+ *   import { style } from 'svelte-body';
+ * </script>
+ *
+ * <svelte:body use:style={"background-color: blue;"}>
+ *```
+ *
+ * @example
+ *
+ *```svelte
+ * <script>
+ *   import { style } from 'svelte-body';
+ * </script>
+ *
+ * <svelte:body use:style={{ backgroundColor: 'blue' }}>
+ *```
+ *
+ * @param {HTMLElement} node
+ * @param classString
+ */
+export function style(
+    node: HTMLElement,
+    styleData: string | Properties,
+): { update: () => void; destroy: () => void };

types/Body.svelte.d.ts

 /// <reference types="svelte" />
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponentTyped } from 'svelte';
+import { Properties } from 'csstype';
 
 export interface BodyProps {
-  /**
-   * A string of styles (style="" on a HTML element)
-   */
-  style?: string | CSSStyleDeclaration;
+    /**
+     * A string of styles (style="" on a HTML element)
+     */
+    style?: string | Properties;
 
-  /**
-   * A string of class names (class="" on a HTML element)
-   */
-  class?: string;
+    /**
+     * A string of class names (class="" on a HTML element)
+     */
+    class?: string;
 }
 
 export default class Body extends SvelteComponentTyped<BodyProps, {}, {}> {}

types/index.d.ts

@@ -1,2 +0,2 @@
-export { default as Body } from "./Body.svelte";
-export {} from './actions.d';
+export { default as Body } from './Body.svelte';
+export * from './actions.d';

No alert changes

Improved metrics

Total package byte prevSize

33268

5.18%

Lines of code

904

6.98%

Number of lines in readme file

91

46.77%

Worsened metrics

Dependency count

1

Infinity%

Dependency changes

• + Added

  csstype@^3.0.10

• + Added

  csstype@3.1.3
  (transitive)