aphrodite-to-jss - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

CHANGELOG.md

 # Changelog
 
+## 1.1.2
+
+- Fix false-positive with merge of shorthand properties (ex: `border-radius` and `border`)
+
 ## 1.1.1
@@ -4,0 +8,0 @@

dist/__tests__/mergeStyles.js

@@ -21,3 +21,3 @@ "use strict";
 });
-it('should merge the sub-property', () => {
+it('should merge the shorthands', () => {
     expect(mergeStyles_1.default({
@@ -31,9 +31,10 @@ 'margin-right': 5
 });
-it('should merge the sub-property (camel-case)', () => {
+it('should not merge non-shorthand', () => {
     expect(mergeStyles_1.default({
-        marginRight: 5
+        'border-radius': 5
     }, {
-        margin: 3
+        border: '1px solid'
     })).toEqual({
-        margin: 3
+        'border-radius': 5,
+        border: '1px solid'
     });
@@ -40,0 +41,0 @@ });

dist/mergeStyles.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const cssShorthandProps = require("css-shorthand-properties");
 const utils_1 = require("./utils");
@@ -11,5 +12,6 @@ /*
     Object.keys(b).forEach(key => {
-        Object.keys(result).forEach(aKey => {
-            if (isSubProperty(aKey, key)) {
-                delete result[aKey];
+        const shorthands = cssShorthandProps.expand(key);
+        shorthands.forEach(shorthand => {
+            if (shorthand !== key) {
+                delete result[shorthand];
             }
@@ -50,17 +52,2 @@ });
 }
-/*
- * Test if a property is a sub-property of another.
- * ex: isSubProperty('margin-right', 'margin') === true
- */
-function isSubProperty(subProperty, property) {
-    if (subProperty.indexOf(`${property}-`) === 0) {
-        return true;
-    }
-    if (subProperty.indexOf(property) !== 0) {
-        return false;
-    }
-    // Handle the camel case
-    const charAfter = subProperty[property.length];
-    return Boolean(charAfter && charAfter === charAfter.toUpperCase());
-}
 exports.default = mergeStyles;

package.json

 {
   "name": "aphrodite-to-jss",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Aphrodite compatible API on top of JSS.",
@@ -10,2 +10,3 @@ "main": "dist/index.js",
   "dependencies": {
+    "css-shorthand-properties": "^1.1.1",
     "hyphenate-style-name": "^1.0.2",
@@ -12,0 +13,0 @@ "inline-style-prefixer": "^5.0.3",

README.md

@@ -94,4 +94,6 @@ # aphrodite-to-jss
 
-With Aphrodite:
+`aphrodite-to-jss` takes the best of both worlds:
 
+From Aphrodite:
+
 - ✅ **Pseudo-elements**: `{ ':hover': { color: 'red' } }`
@@ -103,3 +105,3 @@ - ✅ **Animation keyframes**: `{ animation: { from: { opacity: 0 }, to: { opacity: 1} } }`
 
-With JSS:
+From JSS:
 
@@ -109,2 +111,3 @@ - ✅ **JSS pseudo-elements**: `{ '&:hover': { color: 'red' } }`
 - ✅ **JSS global styles**: `{ '@global': { html: { color: 'black' } } }`
+- ✅ **Sorted properties**: `{ margin: 2, marginRight: 4 }`
 
@@ -111,0 +114,0 @@ # Server-side rendering (SSR)

src/__tests__/mergeStyles.ts

@@ -26,3 +26,3 @@ import mergeStyles from '../mergeStyles';
 
-it('should merge the sub-property', () => {
+it('should merge the shorthands', () => {
   expect(
@@ -42,14 +42,15 @@ mergeStyles(
 
-it('should merge the sub-property (camel-case)', () => {
+it('should not merge non-shorthand', () => {
   expect(
     mergeStyles(
       {
-        marginRight: 5
+        'border-radius': 5
       },
       {
-        margin: 3
+        border: '1px solid'
       }
     )
   ).toEqual({
-    margin: 3
+    'border-radius': 5,
+    border: '1px solid'
   });
@@ -56,0 +57,0 @@ });

src/mergeStyles.ts

@@ -0,1 +1,2 @@
+import cssShorthandProps = require('css-shorthand-properties');
 import { StyleDefinition } from './types';
@@ -12,5 +13,7 @@ import { isObject } from './utils';
   Object.keys(b).forEach(key => {
-    Object.keys(result).forEach(aKey => {
-      if (isSubProperty(aKey, key)) {
-        delete result[aKey];
+    const shorthands = cssShorthandProps.expand(key);
+
+    shorthands.forEach(shorthand => {
+      if (shorthand !== key) {
+        delete result[shorthand];
       }
@@ -64,20 +67,2 @@ });
 
-/*
- * Test if a property is a sub-property of another.
- * ex: isSubProperty('margin-right', 'margin') === true
- */
-function isSubProperty(subProperty: string, property: string): boolean {
-  if (subProperty.indexOf(`${property}-`) === 0) {
-    return true;
-  }
-
-  if (subProperty.indexOf(property) !== 0) {
-    return false;
-  }
-
-  // Handle the camel case
-  const charAfter = subProperty[property.length];
-  return Boolean(charAfter && charAfter === charAfter.toUpperCase());
-}
-
 export default mergeStyles;

No alert changes

Improved metrics

Number of package files

44

2.33%

Number of lines in readme file

169

1.81%

Worsened metrics

Total package byte prevSize

311081

-0.02%

Dependency count

9

12.5%

Lines of code

1912

-0.93%

Dependency changes

• + Added

  css-shorthand-properties@^1.1.1

• + Added

  css-shorthand-properties@1.1.2
  (transitive)