inlines - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0-alpha.0

dist/transform.js

@@ -15,7 +15,11 @@ import { css, keyframes } from 'goober';
 export const transform = (p, style, ref) => {
+    // add some defaults
+    if ('onClick' in p && !('cursor' in style)) {
+        style.cursor = 'pointer';
+    }
     const props = { ...p, ref };
     const s = {};
-    for (const key in style) {
+    for (let key in style) {
         // @ts-ignore
-        const value = style[key];
+        let value = style[key];
         if (typeof value === 'object') {
@@ -33,2 +37,6 @@ if (value !== null) {
                 else if (key[0] === '&') {
+                    if (key.includes(':hover')) {
+                        value = { [key]: value };
+                        key = '@media (hover: hover)';
+                    }
                     addImportant(value, style);
@@ -35,0 +43,0 @@ }

package.json

 {
   "name": "inlines",
   "description": "When you just want to use the style prop in React",
-  "version": "0.3.0",
+  "version": "0.4.0-alpha.0",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "types": "dist/index.d.ts",

src/transform.ts

@@ -1,2 +0,1 @@
-import { CSSAttribute } from 'goober'
 import { css, keyframes } from 'goober'
@@ -18,7 +17,13 @@ import type { Props, Style } from './types'
 export const transform = (p: Props, style: Style, ref: any) => {
+  // add some defaults
+  if ('onClick' in p && !('cursor' in style)) {
+    style.cursor = 'pointer'
+  }
+
   const props = { ...p, ref } as Props
   const s = {} as Style
-  for (const key in style) {
+
+  for (let key in style) {
     // @ts-ignore
-    const value = style[key]
+    let value = style[key]
     if (typeof value === 'object') {
@@ -30,9 +35,13 @@ if (value !== null) {
           } else if (key[1] === 'k') {
-            s.animation = `${keyframes(value as CSSAttribute)} 1s`
+            s.animation = `${keyframes(value)} 1s`
             continue
           }
         } else if (key[0] === '&') {
+          if (key.includes(':hover')) {
+            value = { [key]: value }
+            key = '@media (hover: hover)'
+          }
           addImportant(value, style)
         }
-        const className = css({ [key]: value as CSSAttribute })
+        const className = css({ [key]: value })
         props.className = props.className
@@ -39,0 +48,0 @@ ? `${props.className} ${className}`

No alert changes

Improved metrics

Total package byte prevSize

11275

increased by4.24%

Lines of code

228

increased by7.04%

No dependency changes