aphrodite-to-jss - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/__tests__/aphrodite-to-jss.js

@@ -15,3 +15,4 @@ "use strict";
 afterEach(() => {
-    __1.StyleSheet.reset();
+    // Also reset the globals for testing
+    __1.StyleSheet.reset(true);
 });
@@ -82,2 +83,48 @@ describe('css()', () => {
     });
+    it('should return normalized global style', () => {
+        __1.StyleSheet.create({
+            '@global': {
+                html: {
+                    display: 'flex',
+                    boxSizing: 'border-box',
+                    alignItems: 'center'
+                }
+            }
+        });
+        const cssText = __1.StyleSheet.toCSSString();
+        expect(cssText).toEqual(`html {
+  display: -webkit-box, -moz-box, -ms-flexbox, -webkit-flex, flex;
+  box-sizing: border-box;
+  align-items: center;
+  -webkit-box-align: center;
+}
+
+`);
+    });
+    it('should support animations in global', () => {
+        __1.StyleSheet.create({
+            '@global': {
+                html: {
+                    animation: {
+                        from: { opacity: 0 },
+                        to: { opacity: 1 }
+                    }
+                }
+            }
+        });
+        const cssText = __1.StyleSheet.toCSSString();
+        expect(cssText).toEqual(`@keyframes keyframes-animation-1936999747-0-1-1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+html {
+  animation: keyframes-animation-1936999747-0-1-1;
+}
+
+`);
+    });
 });

dist/css.js

@@ -16,4 +16,4 @@ "use strict";
     rules.forEach(rule => {
-        Object.keys(rule.extras).forEach(extraKey => {
-            stylesheet_1.default.sheet.addRule(extraKey, rule.extras[extraKey]);
+        Object.keys(rule.globals).forEach(extraKey => {
+            stylesheet_1.default.sheet.addRule(extraKey, rule.globals[extraKey]);
         });
@@ -20,0 +20,0 @@ });

dist/stylesheet.d.ts

@@ -16,3 +16,3 @@ import { StyleSheet } from 'jss';
 declare function attachStyleSheet(): void;
-declare function resetStyleSheet(): void;
+declare function resetStyleSheet(globals?: boolean): void;
 export default StyleSheet;

dist/stylesheet.js

@@ -8,3 +8,3 @@ "use strict";
 const jss_plugin_props_sort_1 = require("jss-plugin-props-sort");
-const normalizeStyle_1 = require("./normalizeStyle");
+const normalize_1 = require("./normalize");
 const utils_1 = require("./utils");
@@ -29,13 +29,16 @@ const jss = jss_1.create({
     return Object.keys(input).reduce((map, name) => {
-        const { style, extras } = normalizeStyle_1.default(input[name]);
         if (name === '@global') {
-            StyleSheet.globalSheet.addRule(name, style);
-            Object.keys(extras).forEach(extraKey => {
-                StyleSheet.globalSheet.addRule(extraKey, extras[extraKey]);
-            });
+            // @ts-ignore
+            const globalStyle = input[name];
+            if (!utils_1.isObject(globalStyle)) {
+                throw new Error('"@global" should be an object');
+            }
+            createGlobalStyleSheet(globalStyle);
+            return map;
         }
+        const { style, globals } = normalize_1.normalizeStyle(input[name]);
         const className = generateClassName(name, style);
         map[name] = {
             className,
-            extras,
+            globals,
             style
@@ -46,2 +49,15 @@ };
 }
+/*
+ * Create and inject some global styles.
+ */
+function createGlobalStyleSheet(input) {
+    const { styles, globals } = normalize_1.normalizeStyles(input);
+    Object.keys(globals).forEach(key => {
+        StyleSheet.globalSheet.addRule(key, globals[key]);
+    });
+    StyleSheet.globalSheet.addRule('@global', styles);
+}
+/*
+ * Generate a local class name.
+ */
 function generateClassName(name, style) {
@@ -74,6 +90,10 @@ return `${name}-${utils_1.hash(style)}`;
  */
-function resetStyleSheet() {
+function resetStyleSheet(globals = false) {
     jss.removeStyleSheet(StyleSheet.sheet);
     StyleSheet.sheet = createSheet();
+    if (globals) {
+        jss.removeStyleSheet(StyleSheet.globalSheet);
+        StyleSheet.globalSheet = createSheet();
+    }
 }
 exports.default = StyleSheet;

dist/types.d.ts

@@ -10,3 +10,3 @@ export interface StyleDefinition {
     style: StyleDefinition;
-    extras: StyleDefinitions;
+    globals: StyleDefinitions;
 }
@@ -13,0 +13,0 @@ export declare type SheetDefinitions = SheetDefinitionArray;

package.json

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

README.md

@@ -37,2 +37,11 @@ # aphrodite-to-jss
 
+    blink: {
+        animationName: {
+            from: { opacity: 0 },
+            to: { opacity: 1 }
+        },
+        animationDuration: '3s, 1200ms',
+        animationIterationCount: 'infinite'
+    },
+
     hover: {
@@ -66,2 +75,5 @@ ':hover': {
             </span>
+            <span className={css(styles.blue, styles.blink)}>
+                This is blue and blink
+            </span>
             <span className={css(styles.blue, styles.small)}>
@@ -68,0 +80,0 @@ This is blue and turns red when the browser is less than

src/__tests__/aphrodite-to-jss.ts

@@ -15,3 +15,4 @@ import { css, StyleSheet } from '../';
 afterEach(() => {
-  StyleSheet.reset();
+  // Also reset the globals for testing
+  StyleSheet.reset(true);
 });
@@ -94,2 +95,52 @@
   });
+
+  it('should return normalized global style', () => {
+    StyleSheet.create({
+      '@global': {
+        html: {
+          display: 'flex',
+          boxSizing: 'border-box',
+          alignItems: 'center'
+        }
+      }
+    });
+
+    const cssText = StyleSheet.toCSSString();
+    expect(cssText).toEqual(`html {
+  display: -webkit-box, -moz-box, -ms-flexbox, -webkit-flex, flex;
+  box-sizing: border-box;
+  align-items: center;
+  -webkit-box-align: center;
+}
+
+`);
+  });
+
+  it('should support animations in global', () => {
+    StyleSheet.create({
+      '@global': {
+        html: {
+          animation: {
+            from: { opacity: 0 },
+            to: { opacity: 1 }
+          }
+        }
+      }
+    });
+
+    const cssText = StyleSheet.toCSSString();
+    expect(cssText).toEqual(`@keyframes keyframes-animation-1936999747-0-1-1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+html {
+  animation: keyframes-animation-1936999747-0-1-1;
+}
+
+`);
+  });
 });

src/css.ts

@@ -22,4 +22,4 @@ import mergeStyles from './mergeStyles';
   rules.forEach(rule => {
-    Object.keys(rule.extras).forEach(extraKey => {
-      StyleSheet.sheet.addRule(extraKey, rule.extras[extraKey]);
+    Object.keys(rule.globals).forEach(extraKey => {
+      StyleSheet.sheet.addRule(extraKey, rule.globals[extraKey]);
     });
@@ -26,0 +26,0 @@ });

src/stylesheet.ts

@@ -9,4 +9,4 @@ import { create, StyleSheet } from 'jss';
 
-import normalizeStyle from './normalizeStyle';
-import { hash } from './utils';
+import { normalizeStyle, normalizeStyles } from './normalize';
+import { hash, isObject } from './utils';
 
@@ -36,12 +36,16 @@ const jss = create({
     (map: { [key: string]: SheetDefinition }, name: string) => {
-      const { style, extras } = normalizeStyle(input[name]);
-
       if (name === '@global') {
-        StyleSheet.globalSheet.addRule(name, style);
+        // @ts-ignore
+        const globalStyle: StyleDefinitions = input[name];
 
-        Object.keys(extras).forEach(extraKey => {
-          StyleSheet.globalSheet.addRule(extraKey, extras[extraKey]);
-        });
+        if (!isObject(globalStyle)) {
+          throw new Error('"@global" should be an object');
+        }
+
+        createGlobalStyleSheet(globalStyle);
+
+        return map;
       }
 
+      const { style, globals } = normalizeStyle(input[name]);
       const className = generateClassName(name, style);
@@ -51,3 +55,3 @@
         className,
-        extras,
+        globals,
         style
@@ -61,2 +65,18 @@ };
 
+/*
+ * Create and inject some global styles.
+ */
+function createGlobalStyleSheet(input: StyleDefinitions) {
+  const { styles, globals } = normalizeStyles(input);
+
+  Object.keys(globals).forEach(key => {
+    StyleSheet.globalSheet.addRule(key, globals[key]);
+  });
+
+  StyleSheet.globalSheet.addRule('@global', styles);
+}
+
+/*
+ * Generate a local class name.
+ */
 function generateClassName(name: string, style: any): string {
@@ -98,7 +118,12 @@ return `${name}-${hash(style)}`;
  */
-function resetStyleSheet() {
+function resetStyleSheet(globals: boolean = false) {
   jss.removeStyleSheet(StyleSheet.sheet);
   StyleSheet.sheet = createSheet();
+
+  if (globals) {
+    jss.removeStyleSheet(StyleSheet.globalSheet);
+    StyleSheet.globalSheet = createSheet();
+  }
 }
 
 export default StyleSheet;

src/types.ts

@@ -12,3 +12,3 @@ export interface StyleDefinition {
   style: StyleDefinition;
-  extras: StyleDefinitions;
+  globals: StyleDefinitions;
 }
@@ -15,0 +15,0 @@ export type SheetDefinitions = SheetDefinitionArray;

No alert changes

Improved metrics

Total package byte prevSize

302786

4.76%

Number of package files

43

13.16%

Lines of code

1656

40.7%

Number of lines in readme file

165

7.84%

No dependency changes