aphrodite-to-jss - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

CHANGELOG.md

 # Changelog
 
+## 1.1.4
+
+- Fix `fallbacks` being lost and not correctly merged
+
 ## 1.1.3
@@ -4,0 +8,0 @@

dist/__tests__/aphrodite-to-jss.js

@@ -106,2 +106,49 @@ "use strict";
     });
+    it('should return all the fallbacks', () => {
+        const fallbacksStyles = __1.StyleSheet.create({
+            a: {
+                overflow: 'overlay',
+                fallbacks: [{ overflow: 'auto' }]
+            },
+            b: {
+                overflowY: 'overlay',
+                fallbacks: [{ overflowY: 'auto' }]
+            }
+        });
+        __1.css(fallbacksStyles.a, fallbacksStyles.b);
+        const cssText = __1.StyleSheet.toCSSString();
+        expect(cssText).toEqual(`
+
+.a-4ae8808c--b-436018aa {
+  overflowY: auto;
+  overflow: auto;
+  overflow: overlay;
+  overflow-y: overlay;
+}`);
+    });
+    it('should return all the fallbacks (also prefixed ones)', () => {
+        const fallbacksStyles = __1.StyleSheet.create({
+            a: {
+                overflow: 'overlay',
+                display: 'flex',
+                fallbacks: [{ overflow: 'auto' }]
+            },
+            b: {
+                overflowY: 'overlay',
+                fallbacks: [{ overflowY: 'auto' }]
+            }
+        });
+        __1.css(fallbacksStyles.a, fallbacksStyles.b);
+        const cssText = __1.StyleSheet.toCSSString();
+        expect(cssText).toEqual(`
+
+.a-08216426--b-436018aa {
+  overflowY: auto;
+  display: -webkit-box;
+  overflow: auto;
+  display: flex;
+  overflow: overlay;
+  overflow-y: overlay;
+}`);
+    });
     it('should support animations in global', () => {
@@ -108,0 +155,0 @@ __1.StyleSheet.create({

dist/__tests__/mergeStyles.js

@@ -57,12 +57,12 @@ "use strict";
 });
-it('should merge fallbacks', () => {
+it('should merge conflicting fallbacks', () => {
     expect(mergeStyles_1.default({
         display: 'flex',
-        fallback: [{ display: '-webkit-box' }]
+        fallbacks: [{ display: '-webkit-box' }]
     }, {
         display: 'grid',
-        fallback: [{ display: '-webkit-grid' }]
+        fallbacks: [{ display: '-webkit-grid' }]
     })).toEqual({
         display: 'grid',
-        fallback: [{ display: '-webkit-grid' }]
+        fallbacks: [{ display: '-webkit-grid' }]
     });
@@ -74,11 +74,11 @@ });
         background: 'linear-gradient(to right, red 0%, green 100%)',
-        fallback: [{ display: '-webkit-box' }, { background: 'red' }]
+        fallbacks: [{ display: '-webkit-box' }, { background: 'red' }]
     }, {
         display: 'grid',
-        fallback: [{ display: '-webkit-grid' }]
+        fallbacks: [{ display: '-webkit-grid' }]
     })).toEqual({
         display: 'grid',
         background: 'linear-gradient(to right, red 0%, green 100%)',
-        fallback: [{ display: '-webkit-grid' }, { background: 'red' }]
+        fallbacks: [{ display: '-webkit-grid' }, { background: 'red' }]
     });
 });

dist/__tests__/normalize.js

@@ -29,2 +29,35 @@ "use strict";
     });
+    it('should not lost existing fallbacks', () => {
+        expect(normalize_1.normalizeStyle({
+            overflow: 'overlay',
+            fallbacks: [{ overflow: 'auto' }]
+        })).toEqual({
+            globals: {},
+            style: {
+                overflow: 'overlay',
+                fallbacks: [{ overflow: 'auto' }]
+            }
+        });
+    });
+    it('should not lost existing fallbacks (object)', () => {
+        expect(normalize_1.normalizeStyle({
+            overflow: 'overlay',
+            display: 'flex',
+            // @ts-ignore: in that case we want to test user who do not follow the right syntax
+            fallbacks: { overflow: 'auto' }
+        })).toEqual({
+            globals: {},
+            style: {
+                overflow: 'overlay',
+                display: 'flex',
+                fallbacks: [
+                    { display: '-webkit-box' },
+                    { display: '-moz-box' },
+                    { display: '-ms-flexbox' },
+                    { display: '-webkit-flex' },
+                    { overflow: 'auto' }
+                ]
+            }
+        });
+    });
     it('should prefix properties', () => {
@@ -31,0 +64,0 @@ expect(normalize_1.normalizeStyle({

dist/mergeStyles.js

@@ -22,3 +22,3 @@ "use strict";
         const aStyle = result[key];
-        if (key === 'fallback' && Array.isArray(bStyle)) {
+        if (key === 'fallbacks' && Array.isArray(bStyle)) {
             result[key] = Array.isArray(aStyle)
@@ -25,0 +25,0 @@ ? mergeFallbacks(aStyle, bStyle)

dist/normalize.js

@@ -78,2 +78,6 @@ "use strict";
     const prefixed = inline_style_prefixer_1.prefix(input);
+    // Normalize the fallback to always be an array
+    if (prefixed.fallbacks && !Array.isArray(prefixed.fallbacks)) {
+        prefixed.fallbacks = [prefixed.fallbacks];
+    }
     Object.keys(prefixed).forEach(key => {
@@ -84,2 +88,6 @@ const value = prefixed[key];
         }
+        if (key === 'fallbacks' && Array.isArray(value)) {
+            result.fallbacks = (result.fallbacks || []).concat(value);
+            return;
+        }
         const resultKey = hyphenate(key);
@@ -93,5 +101,3 @@ if (Array.isArray(value) && !isAnimationKeyFrameKey(resultKey)) {
             }));
-            result.fallbacks = (Array.isArray(result.fallbacks)
-                ? result.fallbacks
-                : []).concat(propertyFallbacks);
+            result.fallbacks = (result.fallbacks || []).concat(propertyFallbacks);
         }
@@ -98,0 +104,0 @@ else {

dist/stylesheet.d.ts

@@ -1,2 +0,2 @@
-import { StyleSheet } from 'jss';
+import { StyleSheet as JSSStyleSheet } from 'jss';
 import { SheetDefinition, StyleDefinitions } from './types';
@@ -8,4 +8,4 @@ declare const StyleSheet: {
     attach: typeof attachStyleSheet;
-    sheet: StyleSheet;
-    globalSheet: StyleSheet;
+    sheet: JSSStyleSheet;
+    globalSheet: JSSStyleSheet;
 };
@@ -12,0 +12,0 @@ declare function createStyleSheet(input: StyleDefinitions): {

dist/types.d.ts

 export interface StyleDefinition {
-    fallback?: StyleDefinition[];
+    fallbacks?: StyleDefinition[];
     [property: string]: string | null | undefined | number | StyleDefinition | StyleDefinition[];
@@ -4,0 +4,0 @@ }

package.json

 {
   "name": "aphrodite-to-jss",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Aphrodite compatible API on top of JSS.",
@@ -14,7 +14,7 @@ "main": "dist/index.js",
     "inline-style-prefixer": "^5.0.3",
-    "jss": "^10.0.0-alpha.3",
-    "jss-plugin-default-unit": "10.0.0-alpha.3",
-    "jss-plugin-global": "10.0.0-alpha.3",
-    "jss-plugin-nested": "10.0.0-alpha.3",
-    "jss-plugin-props-sort": "10.0.0-alpha.3"
+    "jss": "^10.0.0-alpha.9",
+    "jss-plugin-default-unit": "10.0.0-alpha.9",
+    "jss-plugin-global": "10.0.0-alpha.9",
+    "jss-plugin-nested": "10.0.0-alpha.9",
+    "jss-plugin-props-sort": "10.0.0-alpha.9"
   },
@@ -21,0 +21,0 @@ "devDependencies": {

src/__tests__/aphrodite-to-jss.ts

@@ -121,2 +121,55 @@ import { css, StyleSheet } from '../';
 
+  it('should return all the fallbacks', () => {
+    const fallbacksStyles = StyleSheet.create({
+      a: {
+        overflow: 'overlay',
+        fallbacks: [{ overflow: 'auto' }]
+      },
+      b: {
+        overflowY: 'overlay',
+        fallbacks: [{ overflowY: 'auto' }]
+      }
+    });
+
+    css(fallbacksStyles.a, fallbacksStyles.b);
+
+    const cssText = StyleSheet.toCSSString();
+    expect(cssText).toEqual(`
+
+.a-4ae8808c--b-436018aa {
+  overflowY: auto;
+  overflow: auto;
+  overflow: overlay;
+  overflow-y: overlay;
+}`);
+  });
+
+  it('should return all the fallbacks (also prefixed ones)', () => {
+    const fallbacksStyles = StyleSheet.create({
+      a: {
+        overflow: 'overlay',
+        display: 'flex',
+        fallbacks: [{ overflow: 'auto' }]
+      },
+      b: {
+        overflowY: 'overlay',
+        fallbacks: [{ overflowY: 'auto' }]
+      }
+    });
+
+    css(fallbacksStyles.a, fallbacksStyles.b);
+
+    const cssText = StyleSheet.toCSSString();
+    expect(cssText).toEqual(`
+
+.a-08216426--b-436018aa {
+  overflowY: auto;
+  display: -webkit-box;
+  overflow: auto;
+  display: flex;
+  overflow: overlay;
+  overflow-y: overlay;
+}`);
+  });
+
   it('should support animations in global', () => {
@@ -123,0 +176,0 @@ StyleSheet.create({

src/__tests__/mergeStyles.ts

@@ -80,3 +80,3 @@ import mergeStyles from '../mergeStyles';
 
-it('should merge fallbacks', () => {
+it('should merge conflicting fallbacks', () => {
   expect(
@@ -86,7 +86,7 @@ mergeStyles(
         display: 'flex',
-        fallback: [{ display: '-webkit-box' }]
+        fallbacks: [{ display: '-webkit-box' }]
       },
       {
         display: 'grid',
-        fallback: [{ display: '-webkit-grid' }]
+        fallbacks: [{ display: '-webkit-grid' }]
       }
@@ -96,3 +96,3 @@ )
     display: 'grid',
-    fallback: [{ display: '-webkit-grid' }]
+    fallbacks: [{ display: '-webkit-grid' }]
   });
@@ -107,7 +107,7 @@ });
         background: 'linear-gradient(to right, red 0%, green 100%)',
-        fallback: [{ display: '-webkit-box' }, { background: 'red' }]
+        fallbacks: [{ display: '-webkit-box' }, { background: 'red' }]
       },
       {
         display: 'grid',
-        fallback: [{ display: '-webkit-grid' }]
+        fallbacks: [{ display: '-webkit-grid' }]
       }
@@ -118,4 +118,4 @@ )
     background: 'linear-gradient(to right, red 0%, green 100%)',
-    fallback: [{ display: '-webkit-grid' }, { background: 'red' }]
+    fallbacks: [{ display: '-webkit-grid' }, { background: 'red' }]
   });
 });

src/__tests__/normalize.ts

@@ -34,2 +34,41 @@ import { normalizeStyle, normalizeStyles } from '../normalize';
 
+  it('should not lost existing fallbacks', () => {
+    expect(
+      normalizeStyle({
+        overflow: 'overlay',
+        fallbacks: [{ overflow: 'auto' }]
+      })
+    ).toEqual({
+      globals: {},
+      style: {
+        overflow: 'overlay',
+        fallbacks: [{ overflow: 'auto' }]
+      }
+    });
+  });
+
+  it('should not lost existing fallbacks (object)', () => {
+    expect(
+      normalizeStyle({
+        overflow: 'overlay',
+        display: 'flex',
+        // @ts-ignore: in that case we want to test user who do not follow the right syntax
+        fallbacks: { overflow: 'auto' }
+      })
+    ).toEqual({
+      globals: {},
+      style: {
+        overflow: 'overlay',
+        display: 'flex',
+        fallbacks: [
+          { display: '-webkit-box' },
+          { display: '-moz-box' },
+          { display: '-ms-flexbox' },
+          { display: '-webkit-flex' },
+          { overflow: 'auto' }
+        ]
+      }
+    });
+  });
+
   it('should prefix properties', () => {
@@ -36,0 +75,0 @@ expect(

src/mergeStyles.ts

@@ -26,3 +26,3 @@ import cssShorthandProps = require('css-shorthand-properties');
 
-    if (key === 'fallback' && Array.isArray(bStyle)) {
+    if (key === 'fallbacks' && Array.isArray(bStyle)) {
       result[key] = Array.isArray(aStyle)
@@ -29,0 +29,0 @@ ? mergeFallbacks(aStyle, bStyle)

src/normalize.ts

@@ -105,2 +105,7 @@ import hyphenate = require('hyphenate-style-name');
 
+  // Normalize the fallback to always be an array
+  if (prefixed.fallbacks && !Array.isArray(prefixed.fallbacks)) {
+    prefixed.fallbacks = [prefixed.fallbacks];
+  }
+
   Object.keys(prefixed).forEach(key => {
@@ -113,2 +118,7 @@ const value = prefixed[key];
 
+    if (key === 'fallbacks' && Array.isArray(value)) {
+      result.fallbacks = (result.fallbacks || []).concat(value);
+      return;
+    }
+
     const resultKey = hyphenate(key);
@@ -124,6 +134,3 @@
 
-      result.fallbacks = (Array.isArray(result.fallbacks)
-        ? result.fallbacks
-        : []
-      ).concat(propertyFallbacks);
+      result.fallbacks = (result.fallbacks || []).concat(propertyFallbacks);
     } else {
@@ -130,0 +137,0 @@ result[resultKey] = value;

src/stylesheet.ts

@@ -1,2 +0,2 @@
-import { create, StyleSheet } from 'jss';
+import { create, StyleSheet as JSSStyleSheet } from 'jss';
 import pluginDefaultUnit from 'jss-plugin-default-unit';
@@ -85,3 +85,3 @@ import pluginGlobal from 'jss-plugin-global';
  */
-function createSheet(): StyleSheet {
+function createSheet(): JSSStyleSheet {
   return jss.createStyleSheet(
@@ -88,0 +88,0 @@ {},

src/types.ts

 export interface StyleDefinition {
-  fallback?: StyleDefinition[];
+  fallbacks?: StyleDefinition[];
   [property: string]:
@@ -4,0 +4,0 @@ | string

No alert changes

Improved metrics

Total package byte prevSize

186482

2.94%

Lines of code

2083

8.94%

Dependency changes

• + Added

  jss@10.0.0-alpha.9
  (transitive)

• + Added

  jss-plugin-default-unit@10.0.0-alpha.9
  (transitive)

• + Added

  jss-plugin-global@10.0.0-alpha.9
  (transitive)

• + Added

  jss-plugin-nested@10.0.0-alpha.9
  (transitive)

• + Added

  jss-plugin-props-sort@10.0.0-alpha.9
  (transitive)

• - Removed

  js-tokens@4.0.0
  (transitive)

• - Removed

  jss@9.8.7
  (transitive)

• - Removed

  jss-plugin-default-unit@10.0.0-alpha.3
  (transitive)

• - Removed

  jss-plugin-global@10.0.0-alpha.3
  (transitive)

• - Removed

  jss-plugin-nested@10.0.0-alpha.3
  (transitive)

• - Removed

  jss-plugin-props-sort@10.0.0-alpha.3
  (transitive)

• - Removed

  loose-envify@1.4.0
  (transitive)

• - Removed

  warning@3.0.0
  (transitive)

• Updated

  jss@^10.0.0-alpha.9

• Updated

  jss-plugin-default-unit@10.0.0-alpha.9

• Updated

  jss-plugin-global@10.0.0-alpha.9

• Updated

  jss-plugin-nested@10.0.0-alpha.9

• Updated

  jss-plugin-props-sort@10.0.0-alpha.9