aphrodite-to-jss - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

CHANGELOG.md

 # Changelog
 
+## 1.1.0
+
+- Fix output of prefixed property with fallback (ex: `display: flex`)
+- Add support for aphrodite fallbacks: `background: ['red', 'linear-gradient(to right, red 0%, green 100%)']`
+
 ## 1.0.1
@@ -4,0 +9,0 @@

dist/__tests__/aphrodite-to-jss.js

@@ -94,3 +94,7 @@ "use strict";
         expect(cssText).toEqual(`html {
-  display: -webkit-box, -moz-box, -ms-flexbox, -webkit-flex, flex;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
   box-sizing: border-box;
@@ -97,0 +101,0 @@ align-items: center;

dist/__tests__/normalize.js

@@ -13,2 +13,18 @@ "use strict";
     });
+    it('should handle prefixed fallback', () => {
+        expect(normalize_1.normalizeStyle({
+            display: 'flex'
+        })).toEqual({
+            globals: {},
+            style: {
+                display: 'flex',
+                fallbacks: [
+                    { display: '-webkit-box' },
+                    { display: '-moz-box' },
+                    { display: '-ms-flexbox' },
+                    { display: '-webkit-flex' }
+                ]
+            }
+        });
+    });
     it('should prefix properties', () => {
@@ -125,16 +141,15 @@ expect(normalize_1.normalizeStyle({
         })).toEqual({
+            globals: {},
             styles: {
                 html: {
-                    display: [
-                        '-webkit-box',
-                        '-moz-box',
-                        '-ms-flexbox',
-                        '-webkit-flex',
-                        'flex'
-                    ],
                     '-webkit-box-align': 'center',
-                    'align-items': 'center'
+                    'align-items': 'center',
+                    display: '-webkit-flex',
+                    fallbacks: [
+                        { display: '-webkit-box' },
+                        { display: '-moz-box' },
+                        { display: '-ms-flexbox' }
+                    ]
                 }
-            },
-            globals: {}
+            }
         });
@@ -141,0 +156,0 @@ });

dist/mergeStyles.js

@@ -20,5 +20,5 @@ "use strict";
         // Media-queries, pseudo-elements
-        if (utils_1.isObject(bStyle)) {
+        if (utils_1.isObject(bStyle) && !Array.isArray(bStyle)) {
             const aStyle = result[key];
-            result[key] = mergeStyles(utils_1.isObject(aStyle) ? aStyle : {}, bStyle);
+            result[key] = mergeStyles(utils_1.isObject(aStyle) && !Array.isArray(aStyle) ? aStyle : {}, bStyle);
         }
@@ -25,0 +25,0 @@ else {

dist/normalize.js

@@ -14,3 +14,5 @@ "use strict";
         const value = input[key];
-        if (typeof value !== 'object' ||
+        if (!value ||
+            typeof value !== 'object' ||
+            Array.isArray(value) ||
             (!isPseudoElementKey(key) && !isMediaQueryKey(key))) {
@@ -63,3 +65,3 @@ return;
         const value = keyFrame[key];
-        if (typeof value !== 'object' || !value) {
+        if (typeof value !== 'object' || !value || Array.isArray(value)) {
             throw new Error('KeyFrame should only contains a map of keys to styles');
@@ -83,3 +85,15 @@ }
         }
-        result[hyphenate(key)] = value;
+        const resultKey = hyphenate(key);
+        if (Array.isArray(value)) {
+            result[resultKey] = value.pop();
+            const propertyFallbacks = value.map(fallbackValue => ({
+                [resultKey]: fallbackValue
+            }));
+            result.fallbacks = (Array.isArray(result.fallbacks)
+                ? result.fallbacks
+                : []).concat(propertyFallbacks);
+        }
+        else {
+            result[resultKey] = value;
+        }
     });
@@ -86,0 +100,0 @@ return result;

dist/types.d.ts

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

package.json

 {
   "name": "aphrodite-to-jss",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Aphrodite compatible API on top of JSS.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -99,2 +99,3 @@ # aphrodite-to-jss
 - ✅ **SSR autoprefixing**: properties are auto-prefixed during server and browser rendering
+- ✅ **Array fallback**: `{ display: ['-webkit-flex', 'flex'] }`
 - ❌ **Font-face**: not currently implemented, but could be (PR welcomed !)
@@ -101,0 +102,0 @@

src/__tests__/aphrodite-to-jss.ts

@@ -108,3 +108,7 @@ import { css, StyleSheet } from '../';
     expect(cssText).toEqual(`html {
-  display: -webkit-box, -moz-box, -ms-flexbox, -webkit-flex, flex;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
   box-sizing: border-box;
@@ -111,0 +115,0 @@ align-items: center;

src/__tests__/normalize.ts

@@ -15,2 +15,21 @@ import { normalizeStyle, normalizeStyles } from '../normalize';
 
+  it('should handle prefixed fallback', () => {
+    expect(
+      normalizeStyle({
+        display: 'flex'
+      })
+    ).toEqual({
+      globals: {},
+      style: {
+        display: 'flex',
+        fallbacks: [
+          { display: '-webkit-box' },
+          { display: '-moz-box' },
+          { display: '-ms-flexbox' },
+          { display: '-webkit-flex' }
+        ]
+      }
+    });
+  });
+
   it('should prefix properties', () => {
@@ -147,16 +166,15 @@ expect(
     ).toEqual({
+      globals: {},
       styles: {
         html: {
-          display: [
-            '-webkit-box',
-            '-moz-box',
-            '-ms-flexbox',
-            '-webkit-flex',
-            'flex'
-          ],
           '-webkit-box-align': 'center',
-          'align-items': 'center'
+          'align-items': 'center',
+          display: '-webkit-flex',
+          fallbacks: [
+            { display: '-webkit-box' },
+            { display: '-moz-box' },
+            { display: '-ms-flexbox' }
+          ]
         }
-      },
-      globals: {}
+      }
     });
@@ -163,0 +181,0 @@ });

src/mergeStyles.ts

@@ -23,5 +23,8 @@ import { StyleDefinition } from './types';
     // Media-queries, pseudo-elements
-    if (isObject(bStyle)) {
+    if (isObject(bStyle) && !Array.isArray(bStyle)) {
       const aStyle = result[key];
-      result[key] = mergeStyles(isObject(aStyle) ? aStyle : {}, bStyle);
+      result[key] = mergeStyles(
+        isObject(aStyle) && !Array.isArray(aStyle) ? aStyle : {},
+        bStyle
+      );
     } else {
@@ -28,0 +31,0 @@ result[key] = bStyle;

src/normalize.ts

@@ -20,3 +20,5 @@ import hyphenate = require('hyphenate-style-name');
     if (
+      !value ||
       typeof value !== 'object' ||
+      Array.isArray(value) ||
       (!isPseudoElementKey(key) && !isMediaQueryKey(key))
@@ -86,3 +88,3 @@ ) {
 
-    if (typeof value !== 'object' || !value) {
+    if (typeof value !== 'object' || !value || Array.isArray(value)) {
       throw new Error('KeyFrame should only contains a map of keys to styles');
@@ -112,3 +114,18 @@ }
 
-    result[hyphenate(key)] = value;
+    const resultKey = hyphenate(key);
+
+    if (Array.isArray(value)) {
+      result[resultKey] = value.pop();
+
+      const propertyFallbacks = value.map(fallbackValue => ({
+        [resultKey]: fallbackValue
+      }));
+
+      result.fallbacks = (Array.isArray(result.fallbacks)
+        ? result.fallbacks
+        : []
+      ).concat(propertyFallbacks);
+    } else {
+      result[resultKey] = value;
+    }
   });
@@ -115,0 +132,0 @@

src/types.ts

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

No alert changes

Improved metrics

Total package byte prevSize

305312

0.83%

Lines of code

1735

4.77%

Number of lines in readme file

166

0.61%

No dependency changes