cxs - npm Package Compare versions

Comparing version 2.0.0-b0 to 2.0.0-b1

dist/common-declarations.js

@@ -13,2 +13,3 @@ 'use strict';
   float: ['none', 'left', 'right'],
+  clear: ['none', 'left', 'right', 'both'],
 
@@ -15,0 +16,0 @@ textAlign: ['left', 'center', 'right', 'justify'],

dist/create-rules.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.kebab = exports.parseValue = exports.createRuleset = undefined;
 
@@ -49,3 +50,2 @@ 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; };
       id: name + parent,
-      order: 3,
       selector: selector,
@@ -58,3 +58,2 @@ css: createRuleset(selector, styles)
     id: name + (parent || ''),
-    order: parent ? 2 : 1,
     selector: selector,
@@ -79,3 +78,2 @@ css: createRuleset(selector, styles, parent)
         id: key,
-        order: 3,
         selector: key,
@@ -97,3 +95,3 @@ css: key + ' { ' + subrules.map(function (r) {
 
-var createRuleset = function createRuleset(selector, styles, parent) {
+var createRuleset = exports.createRuleset = function createRuleset(selector, styles, parent) {
   var declarations = styles.map(function (s) {
@@ -112,6 +110,7 @@ return s.prop + ':' + s.value;
 };
-var parseValue = function parseValue(prop, val) {
+
+var parseValue = exports.parseValue = function parseValue(prop, val) {
   return typeof val === 'number' ? (0, _addPxToStyle2.default)(prop, val) : val;
 };
-var kebab = function kebab(str) {
+var kebab = exports.kebab = function kebab(str) {
   return str.replace(/([A-Z]|^ms)/g, function (g) {
@@ -118,0 +117,0 @@ return '-' + g.toLowerCase();

dist/index.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.cache = undefined;
 
@@ -24,2 +25,4 @@ var _murmurhash3_gc = require('murmurhash-js/murmurhash3_gc');
 
+var cache = exports.cache = [];
+
 var cxs = function cxs(style) {
@@ -38,3 +41,6 @@ var classNames = [];
 
-  rules.forEach(function (r) {
+  rules.filter(function (r) {
+    return cache.indexOf(r.id) < 0;
+  }).forEach(function (r) {
+    cache.push(r.id);
     _sheet2.default.insert(r.css);
@@ -51,2 +57,8 @@ });
 
+cxs.clear = function () {
+  while (cache.length) {
+    cache.pop();
+  }
+};
+
 Object.defineProperty(cxs, 'rules', {
@@ -53,0 +65,0 @@ get: function get() {

package.json

 {
   "name": "cxs",
-  "version": "2.0.0-b0",
+  "version": "2.0.0-b1",
   "description": "A CSS-in-JS solution for functional CSS in functional UI components",
@@ -14,3 +14,3 @@ "main": "dist/index.js",
     "test-watch": "ava -v --watch",
-    "test": "standard && ava -v"
+    "test": "ava -v"
   },
@@ -21,10 +21,11 @@ "keywords": [],
   "devDependencies": {
-    "ava": "^0.15.2",
+    "ava": "^0.16.0",
     "babel-cli": "^6.10.1",
-    "babel-eslint": "^6.1.0",
+    "babel-eslint": "^7.1.0",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.5.0",
     "babel-register": "^6.9.0",
-    "bundle-size": "^0.6.0",
+    "bundle-size": "^1.1.4",
     "gh-pages": "^0.11.0",
@@ -37,4 +38,5 @@ "html-loader": "^0.4.3",
     "markdown-loader": "^0.1.7",
-    "mocha": "^2.5.3",
-    "standard": "^7.1.2",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "standard": "^8.5.0",
     "webpack": "^1.13.1",
@@ -55,13 +57,4 @@ "webpack-dev-server": "^1.14.1",
   "standard": {
-    "parser": "babel-eslint",
-    "globals": [
-      "describe",
-      "it",
-      "context",
-      "before",
-      "after",
-      "beforeEach",
-      "afterEach"
-    ]
+    "parser": "babel-eslint"
   }
 }

README.md

@@ -7,4 +7,2 @@
 
-**Experimental**
-
 Functional CSS for functional UI components
@@ -21,7 +19,7 @@
 - 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`~~
+- Dedupes repeated styles
 - Avoid maintaining and using custom syntax or classname DSLs from CSS frameworks and manually written CSS
 - Scoped styles with a component-based architecture
 - No separate CSS files to process or maintain
+- Optionally extract common CSS declarations like `display: block` and `float: left`
 - **Use JavaScript to author styles**
@@ -95,2 +93,23 @@ - Objects & Object.assign
 
+```js
+// React example
+import React from 'react'
+
+const Box = (props) => {
+  return (
+    <div {...props} className={cx} />
+  )
+}
+
+// Static styles can be outside of the component render function for better performance.
+const cx = cxs({
+  boxSizing: 'border-box',
+  padding: 32,
+  borderRadius: 3,
+  backgroundColor: '#f6f6f6'
+})
+
+export default Button
+```
+
 *Note: if you ARE NOT using babel, be sure to import with `require('cxs').default`*
@@ -130,7 +149,17 @@
 
-### Common Declarations
+### Common Declaration Utilities
 
-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.
+Cxs comes with an alternative, experimental module that attempts to extract
+commonly used declarations, such as `margin: 0` and `display: block`, into global utility rulesets.
 
+To use the common declarations version, import the following instead of `cxs`.
+
+```js
+import cxs from 'cxs/optimized'
+```
+
+Each common utility selector follows this pattern: `.cxs-<property>-<value>`.
+Once a utility ruleset has been registered,
+cxs will not add that ruleset to the stylesheet again, unless the `cxs.clear()` method has been called.
+
 ### Related
@@ -153,8 +182,8 @@
 
-- IE9+, due to the following:
-  - `Array.filter`
-  - `Array.map`
-  - `Array.reduce`
-  - `Array.forEach`
+IE9+, due to the following:
+- `Array.filter`
+- `Array.map`
+- `Array.reduce`
+- `Array.forEach`
 
 MIT License

Fixed 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

Improved metrics

Total package byte prevSize

16341

increased by33.54%

Number of package files

9

increased by28.57%

Lines of code

281

increased by57.87%

Number of lines in readme file

185

increased by18.59%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

22

increased by10%

No dependency changes