cxs - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0-b0

dist/create-rules.js

@@ -6,5 +6,4 @@ 'use strict';
 });
-exports.isNested = undefined;
 
-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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -17,6 +16,2 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _commonDeclarations = require('./common-declarations');
-
-var _commonDeclarations2 = _interopRequireDefault(_commonDeclarations);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,7 +21,2 @@
 
-var isNested = exports.isNested = function isNested(s) {
-  return (/\s|:|^@|^\d|^from$|^to$/.test(s)
-  );
-};
-
 var createRules = function createRules(name, style, parent) {
@@ -55,11 +45,2 @@ // Extract nested rules
 
-  if (!isNested(name) && !parent) {
-    // Extract common declarations as rules
-    styles.reduce(reduceCommonRules(parent), []).forEach(function (r) {
-      return rules.push(r);
-    });
-  }
-  // Remove common declarations
-  var filteredStyles = isNested(name) ? styles : styles.filter(filterCommonDeclarations);
-
   // Add base rule
@@ -73,3 +54,3 @@ var selector = /^([0-9]|from|to)/.test(name) ? name : '.' + name;
       selector: selector,
-      css: createRuleset(selector, filteredStyles)
+      css: createRuleset(selector, styles)
     }];
@@ -82,3 +63,3 @@ }
     selector: selector,
-    css: createRuleset(selector, filteredStyles, parent)
+    css: createRuleset(selector, styles, parent)
   });
@@ -118,23 +99,2 @@
 
-var reduceCommonRules = function reduceCommonRules(parent) {
-  return function (a, style) {
-    var index = _commonDeclarations2.default[style.key] ? _commonDeclarations2.default[style.key].indexOf(style.value) : -1;
-    if (index > -1) {
-      var selector = '.cxs-' + style.prop + '-' + style.value;
-      return [].concat(_toConsumableArray(a), [{
-        id: selector,
-        order: 0,
-        selector: selector,
-        css: createRuleset(selector, [style], parent)
-      }]);
-    } else {
-      return a;
-    }
-  };
-};
-
-var filterCommonDeclarations = function filterCommonDeclarations(style) {
-  return (_commonDeclarations2.default[style.key] ? _commonDeclarations2.default[style.key].indexOf(style.value) : -1) < 0;
-};
-
 var createRuleset = function createRuleset(selector, styles, parent) {
@@ -141,0 +101,0 @@ var declarations = styles.map(function (s) {

dist/index.js

@@ -6,3 +6,2 @@ 'use strict';
 });
-exports.styleId = exports.options = exports.cache = exports.styleTag = undefined;
 
@@ -13,6 +12,2 @@ var _murmurhash3_gc = require('murmurhash-js/murmurhash3_gc');
 
-var _lodash = require('lodash.debounce');
-
-var _lodash2 = _interopRequireDefault(_lodash);
-
 var _createRules = require('./create-rules');
@@ -22,2 +17,6 @@
 
+var _sheet = require('./sheet');
+
+var _sheet2 = _interopRequireDefault(_sheet);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,15 +26,2 @@
 
-var styleTag = exports.styleTag = null;
-var cache = exports.cache = {};
-
-var options = exports.options = {
-  autoAttach: true,
-  debounce: 0
-};
-
-var randomHex = function randomHex() {
-  return Math.floor(Math.random() * 16777215).toString(16);
-};
-var styleId = exports.styleId = 'cxs-' + (0, _murmurhash3_gc2.default)(randomHex(), 128);
-
 var cxs = function cxs(style) {
@@ -46,6 +32,2 @@ var classNames = [];
 
-  rules.forEach(function (r) {
-    cache[r.id] = r;
-  });
-
   rules.filter(function (r) {
@@ -56,8 +38,9 @@ return !/:/.test(r.selector);
   }).forEach(function (r) {
-    return classNames.push(r.selector.replace(/^\./, ''));
+    classNames.push(r.selector.replace(/^\./, ''));
   });
 
-  if (options.autoAttach) {
-    cxs.attach();
-  }
+  rules.forEach(function (r) {
+    _sheet2.default.insert(r.css);
+  });
+
   return classNames.reduce(function (a, b) {
@@ -69,44 +52,7 @@ if (a.indexOf(b) > -1) return a;
 
-var attach = function attach() {
-  if (typeof document === 'undefined') {
-    // console.warn('Cannot attach stylesheet without a document')
-    return;
-  }
+cxs.sheet = _sheet2.default;
 
-  var rules = cxs.rules;
-  exports.styleTag = styleTag = styleTag || document.getElementById(styleId);
-
-  if (styleTag === null) {
-    exports.styleTag = styleTag = document.createElement('style');
-    styleTag.id = styleId;
-    document.head.appendChild(styleTag);
-    cxs.sheet = styleTag.sheet;
-  }
-
-  // Insert all rules
-  // note: filtering for new rules does not seem to have a huge performance impact
-  // .filter(rule => [].slice.call(cxs.sheet.cssRules).map(r => r.selectorText).indexOf(rule.selector) < 0)
-  rules.forEach(function (rule) {
-    try {
-      cxs.sheet.insertRule(rule.css, cxs.sheet.cssRules.length);
-    } catch (e) {}
-  });
-};
-
-cxs.attach = (0, _lodash2.default)(attach, options.debounce);
-
-cxs.options = options;
-cxs.clearCache = function () {
-  exports.cache = cache = {};
-};
-
 Object.defineProperty(cxs, 'rules', {
   get: function get() {
-    return Object.keys(cache || {}).map(function (k) {
-      return cache[k] || false;
-    }).filter(function (r) {
-      return r.css.length;
-    }).sort(function (a, b) {
-      return a.order - b.order;
-    });
+    return _sheet2.default.rules();
   }
@@ -117,4 +63,4 @@ });
   get: function get() {
-    return cxs.rules.map(function (r) {
-      return r.css;
+    return _sheet2.default.rules().map(function (r) {
+      return r.cssText;
     }).join('');
@@ -121,0 +67,0 @@ }

package.json

 {
   "name": "cxs",
-  "version": "1.0.1",
+  "version": "2.0.0-b0",
   "description": "A CSS-in-JS solution for functional CSS in functional UI components",
@@ -12,3 +12,2 @@ "main": "dist/index.js",
     "size": "npm run prepublish && bundle-size ./",
-    "perf": "karma start",
     "standard": "standard",
@@ -36,8 +35,2 @@ "test-watch": "ava -v --watch",
     "json-loader": "^0.5.4",
-    "karma": "^1.1.0",
-    "karma-chrome-launcher": "^1.0.1",
-    "karma-firefox-launcher": "^1.0.0",
-    "karma-mocha": "^1.1.1",
-    "karma-safari-launcher": "^1.0.0",
-    "karma-webpack": "^1.7.0",
     "markdown-loader": "^0.1.7",
@@ -52,3 +45,3 @@ "mocha": "^2.5.3",
     "add-px-to-style": "^1.0.0",
-    "lodash.debounce": "^4.0.6",
+    "glamor": "^2.17.14",
     "murmurhash-js": "^1.0.0"
@@ -55,0 +48,0 @@ },

README.md

@@ -14,2 +14,3 @@
 ## Features
+- 5.6KB gzipped
 - Avoids collisions with consistently hashed classnames
@@ -19,4 +20,5 @@ - Supports pseudo-classes without JS event listeners
 - Support @keyframe rules
-- Dedupes repeated styles
-- Automatically extracts common CSS declarations like `display: block` and `float: left`
+- Supports nested selectors - useful for styling markdown and other user-generated content
+- ~~Dedupes repeated styles~~
+- ~~Automatically extracts common CSS declarations like `display: block` and `float: left`~~
 - Avoid maintaining and using custom syntax or classname DSLs from CSS frameworks and manually written CSS
@@ -32,2 +34,3 @@ - Scoped styles with a component-based architecture
   - Plus whatever you can dream up
+  - No fiddling with tagged template literals
 
@@ -101,23 +104,11 @@
 
-// Attach a style tag and CSSStyleSheet to the document
-// This is useful for manually controlling style insertion
-// when `options.autoAttach` is set to false.
-cxs.attach()
-
-// An array of cached CSS rules
+// An array of attached CSS rules
 const rules = cxs.rules
 
-// A CSS string of cached rules. Useful for server-side rendering
+// A CSS string of attached rules. Useful for server-side rendering
 const css = cxs.css
 
-// Clears the rule cache. This can be used after building a DOM tree and attaching styles
-cxs.clearCache()
-
-// Options
-
-// Disable automatic style insertion by setting `autoAttach` to false.
-cxs.options.autoAttach = true
-
-// Change the debounce time
-cxs.options.debounce = 0
+// The threepointone/glamor StyleSheet instance
+// See https://github.com/threepointone/glamor
+cxs.sheet
 ```
@@ -140,4 +131,10 @@
 
+### Common Declarations
+
+The previous version of cxs attempted to extract common declarations into utility rulesets.
+I plan to add this back as an optional module through a higher-order function.
+
 ### Related
 
+- [glamor](https://github.com/threepointone/glamor)
 - [react-cxs](https://github.com/jxnblk/react-cxs)
@@ -151,2 +148,3 @@ - [hyp](https://github.com/jxnblk/hyp)
 
+- [glamor](https://github.com/threepointone/glamor)
 - [Aphrodite](https://github.com/Khan/aphrodite)
@@ -157,5 +155,3 @@ - [jss](https://github.com/jsstyles/jss)
 
-- IE9 +
-  - Due to the following:
-  - `CSSStyleSheet.insertRule()`
+- IE9+, due to the following:
   - `Array.filter`
@@ -162,0 +158,0 @@ - `Array.map`

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

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

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

20

decreased by-23.08%

Worsened metrics

Total package byte prevSize

12237

decreased by-81.88%

Number of package files

7

decreased by-63.16%

Lines of code

178

decreased by-84.75%

Number of low quality alerts

2

increased by100%

Number of lines in readme file

156

decreased by-2.5%

Dependency changes

• + Addedglamor@^2.17.14

• + Addedasap@2.0.6(transitive)

• + Addedbowser@1.9.4(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcss-in-js-utils@2.0.1(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedglamor@2.20.40(transitive)

• + Addedhyphenate-style-name@1.1.0(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedinline-style-prefixer@3.0.8(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisobject@3.0.1(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedthrough@2.3.8(transitive)

• + Addedua-parser-js@0.7.40(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• - Removedlodash.debounce@^4.0.6

• - Removedlodash.debounce@4.0.8(transitive)