postcss-button - npm Package Compare versions

Comparing version 0.1.0 to 0.1.2

lib/button.js

@@ -76,3 +76,3 @@ 'use strict';
   // default rule
-  var declNew = [_postcss2.default.decl({ prop: 'display', value: 'inline-block' }), _postcss2.default.decl({ prop: 'margin', value: 0 }), _postcss2.default.decl({ prop: 'cursor', value: 'pointer' }), _postcss2.default.decl({ prop: 'text-decoration', value: 'none' }), _postcss2.default.decl({ prop: 'border', value: 'none' })];
+  var declNew = [_postcss2.default.decl({ prop: 'display', value: 'inline-block' }), _postcss2.default.decl({ prop: 'margin', value: '0' }), _postcss2.default.decl({ prop: 'cursor', value: 'pointer' }), _postcss2.default.decl({ prop: 'text-decoration', value: 'none' }), _postcss2.default.decl({ prop: 'border', value: 'none' })];
 
@@ -94,6 +94,2 @@ if (options.color) {
 
-  if (options.borderRadius && options.borderRadius !== '0') {
-    declNew = declNew.concat([_postcss2.default.decl({ prop: 'border-radius', value: options.borderRadius })]);
-  }
-
   var ruleSelectorsNew = [];
@@ -100,0 +96,0 @@

lib/index.js

@@ -18,8 +18,7 @@ 'use strict';
       backgroundColor: 'white',
-      colorActive: 'black',
-      backgroundColorActive: 'silver',
-      borderWidth: 0,
+      colorActive: 'white',
+      backgroundColorActive: 'grey',
+      borderWidth: '0',
       borderColor: 'grey',
-      borderColorActive: 'black',
-      borderRadius: 0,
+      borderColorActive: 'grey',
       classActive: 'active',
@@ -67,3 +66,3 @@ classDisabled: 'disabled'
       } else if (node.type === 'decl' && node.prop.match(/^button/)) {
-        options.tmp = options.tmp ? options.tmp : options.default;
+        options.tmp = options.tmp ? options.tmp : Object.assign({}, options.default);
 
@@ -73,3 +72,3 @@ if (node.prop.match(/^button$/)) {
         } else if (node.prop.match(/^button-color$/)) {
-          var value = node.value.split(' ');
+          var value = node.value.split(/\s+(?![^\[]*\]|[^(]*\)|[^\{]*})/);
 
@@ -89,6 +88,4 @@ options.tmp.color = value[0];
           }
-        } else if (node.prop.match(/^button-radius$/)) {
-          options.tmp.borderRadius = node.value;
         } else if (node.prop.match(/^button-border$/)) {
-          var _value = node.value.split(' ');
+          var _value = node.value.split(/\s+(?![^\[]*\]|[^(]*\)|[^\{]*})/);
 
@@ -105,3 +102,3 @@ options.tmp.borderWidth = _value[0];
         } else if (node.prop.match(/^button-class$/)) {
-          var _value2 = node.value.split(' ');
+          var _value2 = node.value.split(/\s+(?![^\[]*\]|[^(]*\)|[^\{]*})/);
           options.tmp.classActive = _value2[0];
@@ -108,0 +105,0 @@

package.json

 {
   "name": "postcss-button",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A PostCSS plugin to create buttons.",
@@ -37,3 +37,3 @@ "keywords": [
     "eslint-config-airbnb": "^8.0.0",
-    "eslint-plugin-import": "^1.5.0",
+    "eslint-plugin-import": "^1.6.0",
     "eslint-plugin-jsx-a11y": "^1.0.2",
@@ -40,0 +40,0 @@ "eslint-plugin-react": "^5.0.1"

README.md

@@ -35,7 +35,7 @@ # postcss-button [![Build Status][ci-img]][ci]
 
-@button {
+@button [name] {
   color: grey;
   background-color: white;
-  color-active: black;
-  background-color-active: silver;
+  color-active: white;
+  background-color-active: grey;
   border-width: 0;
@@ -45,3 +45,2 @@ border-style: none;
   border-color-active: black;
-  border-radius: 0;
   class-active: active;
@@ -67,13 +66,14 @@ class-disabled: disabled;
   background-color: white;
-  color-active: black;
-  background-color-active: silver;
+  color-active: white;
+  background-color-active: grey;
   border-width: 0;
   border-style: none;
   border-color: grey;
-  border-color-active: black;
-  border-radius: 0;
+  border-color-active: grey;
   class-active: active;
   class-disabled: disabled;
 }
+```
 
+```css
 .my-button {
@@ -91,4 +91,3 @@ button: [name]
   button-color: [color] [background-color] [color-active] [background-color-active];
-  button-border: [width] [style] [color] [color-active];
-  button-radius: [size];
+  button-border: [width] [border-color] [border-color-active];
   button-classes: [active] [disabled];
@@ -100,3 +99,5 @@ }
 
-Example: [input](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/src/00.css), [output](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/dist/00.css), [markup](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/00.html), [demo](http://localhost/francoisromain.github.io/postcss-button/test/00.html)
+Example: [input](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/src/01.css), [output](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/dist/01.css), [markup](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/01.html), [demo](http://localhost/francoisromain.github.io/postcss-button/test/01.html)
 
+Example: [input](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/src/02.css), [output](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/dist/02.css), [markup](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/02.html), [demo](http://localhost/francoisromain.github.io/postcss-button/test/02.html)
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12624

increased by0.89%

Number of lines in readme file

99

increased by1.02%

Worsened metrics

Lines of code

169

decreased by-3.43%

No dependency changes