cxs - npm Package Compare versions

Comparing version 1.0.0-beta.11 to 1.0.0

dist/create-rules.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.isNested = undefined;
 
@@ -24,2 +25,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
 
+var isNested = exports.isNested = function isNested(s) {
+  return (/\s|:|^@|^\d|^from$|^to$/.test(s)
+  );
+};
+
 var createRules = function createRules(name, style, parent) {
@@ -48,5 +54,3 @@ // Extract nested rules
 
-  var isPseudo = /:/.test(name);
-
-  if (!isPseudo) {
+  if (!isNested(name) && !parent) {
     // Extract common declarations as rules
@@ -58,3 +62,3 @@ styles.reduce(reduceCommonRules(parent), []).forEach(function (r) {
   // Remove common declarations
-  var filteredStyles = isPseudo ? styles : styles.filter(filterCommonDeclarations);
+  var filteredStyles = isNested(name) ? styles : styles.filter(filterCommonDeclarations);
 
@@ -61,0 +65,0 @@ // Add base rule

dist/index.js

@@ -22,2 +22,4 @@ 'use strict';
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 var styleTag = exports.styleTag = null;
@@ -56,3 +58,6 @@ var cache = exports.cache = {};
   }
-  return classNames.join(' ');
+  return classNames.reduce(function (a, b) {
+    if (a.indexOf(b) > -1) return a;
+    return [].concat(_toConsumableArray(a), [b]);
+  }, []).join(' ');
 };
@@ -59,0 +64,0 @@

package.json

 {
   "name": "cxs",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0",
   "description": "A CSS-in-JS solution for functional CSS in functional UI components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/create-rules.js

@@ -5,2 +5,4 @@
 
+export const isNested = s => /\s|:|^@|^\d|^from$|^to$/.test(s)
+
 const createRules = (name, style, parent) => {
@@ -28,5 +30,3 @@ // Extract nested rules
 
-  const isPseudo = /:/.test(name)
-
-  if (!isPseudo) {
+  if (!isNested(name) && !parent) {
     // Extract common declarations as rules
@@ -38,3 +38,3 @@ styles
   // Remove common declarations
-  const filteredStyles = isPseudo
+  const filteredStyles = isNested(name)
     ? styles
@@ -41,0 +41,0 @@ : styles.filter(filterCommonDeclarations)

src/index.js

@@ -24,4 +24,4 @@
 
-  rules.filter(r => !/:/.test(r.selector))
-    .filter(r => !/\s/.test(r.selector))
+  rules.filter(r => !(/:/.test(r.selector)))
+    .filter(r => !(/\s/.test(r.selector)))
     .forEach(r => classNames.push(r.selector.replace(/^\./, '')))
@@ -32,3 +32,6 @@
   }
-  return classNames.join(' ')
+  return classNames.reduce((a, b) => {
+    if (a.indexOf(b) > -1) return a
+    return [ ...a, b ]
+  }, []).join(' ')
 }
@@ -35,0 +38,0 @@

test/common-declarations-test.js

@@ -14,3 +14,26 @@
     textAlign: 'center',
-    fontSize: 48
+    fontSize: 48,
+    ':hover': {
+      textDecoration: 'none'
+    },
+    'h1': {
+      display: 'inline-block',
+      ':hover': {
+        display: 'inline'
+      }
+    },
+    '@media screen': {
+      display: 'table'
+    },
+    '@keyframes hello': {
+      from: {
+        display: 'block'
+      },
+      '50%': {
+        display: 'table'
+      },
+      to: {
+        display: 'inline-block'
+      }
+    }
   }
@@ -30,4 +53,11 @@
 
+test('does not extract common declarations from nested rules', t => {
+  t.plan(3)
+  t.false(/text\-decoration\-none/.test(t.context.cx))
+  t.false(/inline\-block/.test(t.context.cx))
+  t.false(/table/.test(t.context.cx))
+})
+
 test('extracted declarations are included in className', t => {
   t.is(t.context.cx.split(' ').length, 3)
 })

test/cxs.js

@@ -32,5 +32,8 @@
 test('returns a consistent hashed classname', t => {
+  t.plan(2)
   const hashname = hash(JSON.stringify(style), 128)
   const cx = cxs(style)
+  const cxtwo = cxs(style)
   t.is(cx, `cxs-${hashname}`)
+  t.is(cx, cxtwo) // Double-double checking
 })
@@ -105,2 +108,24 @@
 
+test('keeps @media rules order', t => {
+  t.plan(4)
+  const sx = {
+    color: 'cyan',
+    '@media screen and (min-width:32em)': {
+      color: 'magenta'
+    },
+    '@media screen and (min-width:48em)': {
+      color: 'yellow'
+    },
+    '@media screen and (min-width:64em)': {
+      color: 'black'
+    }
+  }
+  cxs(sx)
+  const rules = cxs.rules
+  t.is(rules.length, 4)
+  t.regex(rules[1].css, /32/)
+  t.regex(rules[2].css, /48/)
+  t.regex(rules[3].css, /64/)
+})
+
 test('creates @keyframe rules', t => {
@@ -107,0 +132,0 @@ t.plan(2)

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

66699

decreased by-2.47%

Number of package files

19

decreased by-26.92%

Lines of code

1156

decreased by-2.28%

No dependency changes