postcss-button - npm Package Compare versions

Comparing version 0.3.17 to 0.4.0

lib/button.js

@@ -14,5 +14,5 @@ "use strict";
   const apply = (sel, modifier) => {
-    const sels = sel.split(' ');
+    const sels = sel.split(" ");
     const child = applyToParent && (sels.length >= 1 && isClass || sels.length > 1) ? sels.pop() : null;
-    return applyToParent && child ? `${sels.join(' ')}${modifier} ${child}` : `${sels.join(' ')}${modifier}`;
+    return applyToParent && child ? `${sels.join(" ")}${modifier} ${child}` : `${sels.join(" ")}${modifier}`;
   };
@@ -27,3 +27,3 @@
   rule.selectors = ruleSelectors.map(selector => {
-    const selectorDefault = selectorApply(selector, [':disabled', ':disabled:active', ':disabled:hover'], options.classParent);
+    const selectorDefault = selectorApply(selector, [":disabled", ":disabled:active", ":disabled:hover"], options.classParent);
     const selectorClass = options.classDisabled ? selectorApply(selector, [`.${options.classDisabled}`, `.${options.classDisabled}:active`, `.${options.classDisabled}:hover`], options.classParent, true) : [];
@@ -33,19 +33,19 @@ return [...selectorDefault, ...selectorClass];
   rule.append({
-    prop: 'opacity',
-    value: '0.25'
+    prop: "opacity",
+    value: "0.25"
   });
   rule.append({
-    prop: 'cursor',
-    value: 'default'
+    prop: "cursor",
+    value: "default"
   });
   rule.append({
-    prop: 'color',
+    prop: "color",
     value: options.color
   });
   rule.append({
-    prop: 'background-color',
+    prop: "background-color",
     value: options.backgroundColor
   });
   rule.append({
-    prop: 'box-shadow',
+    prop: "box-shadow",
     value: `inset 0 0 0 ${options.borderWidth} ${options.borderColor}`
@@ -60,4 +60,4 @@ });
   rule.selectors = ruleSelectors.map(selector => {
-    const selectorDefault = selectorApply(selector, ':hover', options.classParent);
-    const selectorClass = options.classActive ? selectorApply(selector, `.${options.classActive}:hover`, options.classParent, true) : '';
+    const selectorDefault = selectorApply(selector, ":hover", options.classParent);
+    const selectorClass = options.classActive ? selectorApply(selector, `.${options.classActive}:hover`, options.classParent, true) : "";
     return [selectorDefault, selectorClass];
@@ -68,3 +68,3 @@ });
     rule.append({
-      prop: 'color',
+      prop: "color",
       value: options.colorHover
@@ -76,3 +76,3 @@ });
     rule.append({
-      prop: 'background-color',
+      prop: "background-color",
       value: options.backgroundColorHover
@@ -82,5 +82,5 @@ });
 
-  if (options.borderColorHover && options.borderWidth !== '0') {
+  if (options.borderColorHover && options.borderWidth !== "0") {
     rule.append({
-      prop: 'box-shadow',
+      prop: "box-shadow",
       value: `inset 0 0 0 ${options.borderWidth} ${options.borderColorHover}`
@@ -97,4 +97,4 @@ });
   rule.selectors = ruleSelectors.map(selector => {
-    const selectorDefault = selectorApply(selector, ':active', options.classParent);
-    const selectorClass = options.classActive ? selectorApply(selector, `.${options.classActive}`, options.classParent, true) : '';
+    const selectorDefault = selectorApply(selector, ":active", options.classParent);
+    const selectorClass = options.classActive ? selectorApply(selector, `.${options.classActive}`, options.classParent, true) : "";
     return [selectorDefault, selectorClass];
@@ -105,3 +105,3 @@ });
     rule.append({
-      prop: 'color',
+      prop: "color",
       value: options.colorActive
@@ -113,3 +113,3 @@ });
     rule.append({
-      prop: 'background-color',
+      prop: "background-color",
       value: options.backgroundColorActive
@@ -119,5 +119,5 @@ });
 
-  if (options.borderColorActive && options.borderWidth !== '0') {
+  if (options.borderColorActive && options.borderWidth !== "0") {
     rule.append({
-      prop: 'box-shadow',
+      prop: "box-shadow",
       value: `inset 0 0 0 ${options.borderWidth} ${options.borderColorActive}`
@@ -132,24 +132,24 @@ });
   const d1 = [_postcss.default.decl({
-    prop: 'cursor',
-    value: 'pointer'
+    prop: "cursor",
+    value: "pointer"
   }), _postcss.default.decl({
-    prop: 'text-decoration',
-    value: 'none'
+    prop: "text-decoration",
+    value: "none"
   }), _postcss.default.decl({
-    prop: 'border',
-    value: 'none'
+    prop: "border",
+    value: "none"
   }), _postcss.default.decl({
-    prop: 'display',
-    value: 'inline-block'
+    prop: "display",
+    value: "inline-block"
   })];
   const d2 = options.color ? _postcss.default.decl({
-    prop: 'color',
+    prop: "color",
     value: options.color
-  }) : '';
+  }) : "";
   const d3 = options.backgroundColor ? _postcss.default.decl({
-    prop: 'background-color',
+    prop: "background-color",
     value: options.backgroundColor
-  }) : '';
-  const d4 = options.borderWidth && options.borderWidth !== '0' ? [_postcss.default.decl({
-    prop: 'box-shadow',
+  }) : "";
+  const d4 = options.borderWidth && options.borderWidth !== "0" ? [_postcss.default.decl({
+    prop: "box-shadow",
     value: `inset 0 0 0 ${options.borderWidth} ${options.borderColor}`
@@ -171,3 +171,3 @@ })] : [];
 
-  rule.selectors = rule.selectors.map(selector => `${selector},${selectorApply(selector, ':visited', options.classParent)}`);
+  rule.selectors = rule.selectors.map(selector => `${selector},${selectorApply(selector, ":visited", options.classParent)}`);
   rule.prepend(declDefault(options));
@@ -174,0 +174,0 @@ };

lib/index.js

@@ -38,3 +38,3 @@ "use strict";
   } else if (decl.prop.match(/^button-class-parent$/)) {
-    option.classParent = !!value[0] && value[0] !== 'false';
+    option.classParent = !!value[0] && value[0] !== "false";
   } else if (decl.prop.match(/^button-color$/)) {
@@ -82,3 +82,3 @@ option.color = value[0];
     if (value[2]) {
-      option.classParent = !!value[2] && value[2] !== 'false';
+      option.classParent = !!value[2] && value[2] !== "false";
     }
@@ -98,17 +98,17 @@ }
 
-const postcssButton = _postcss.default.plugin('postcss-button', opts => {
+const postcssButton = opts => {
   const options = {
     default: {
-      borderWidth: '0',
-      color: 'grey',
-      colorActive: 'white',
-      colorHover: 'white',
-      backgroundColor: 'white',
-      backgroundColorActive: 'red',
-      backgroundColorHover: 'grey',
-      borderColor: 'grey',
-      borderColorActive: 'red',
-      borderColorHover: 'grey',
-      classActive: 'active',
-      classDisabled: 'disabled',
+      borderWidth: "0",
+      color: "grey",
+      colorActive: "white",
+      colorHover: "white",
+      backgroundColor: "white",
+      backgroundColorActive: "red",
+      backgroundColorHover: "grey",
+      borderColor: "grey",
+      borderColorActive: "red",
+      borderColorHover: "grey",
+      classActive: "active",
+      classDisabled: "disabled",
       classParent: false
@@ -126,23 +126,28 @@ }
   Object.assign(options.default, opts);
-  return css => {
-    css.walk(node => {
-      if (node.type === 'atrule' && node.name.match(/^button/)) {
-        const name = node.params || 'default';
-        options[name] = options[name] || {};
-        Object.assign(options[name], atruleOptions(node, options));
-        node.remove();
-      } else if (node.parent.type === 'rule' && node.type === 'decl') {
-        if (node.prop.match(/^button/)) {
-          options.tmp = options.tmp || Object.assign({}, options.default);
-          Object.assign(options.tmp, propOption(node, options[node.value]));
-          buttonMake(node);
+  return {
+    postcssPlugin: "postcss-button",
+
+    Once(root) {
+      root.walk(node => {
+        if (node.type === "atrule" && node.name.match(/^button/)) {
+          const name = node.params || "default";
+          options[name] = options[name] || {};
+          Object.assign(options[name], atruleOptions(node, options));
           node.remove();
-        } else {
-          buttonMake(node);
+        } else if (node.parent.type === "rule" && node.type === "decl") {
+          if (node.prop.match(/^button/)) {
+            options.tmp = options.tmp || Object.assign({}, options.default);
+            Object.assign(options.tmp, propOption(node, options[node.value]));
+            buttonMake(node);
+            node.remove();
+          } else {
+            buttonMake(node);
+          }
         }
-      }
-    });
+      });
+    }
+
   };
-});
+};
 
 module.exports = postcssButton;

package.json

 {
   "name": "postcss-button",
-  "version": "0.3.17",
+  "version": "0.4.0",
   "description": "A PostCSS plugin to create buttons.",
@@ -27,20 +27,31 @@ "keywords": [
   },
-  "dependencies": {
-    "postcss": "^7.0.17"
+  "peerDependencies": {
+    "postcss": "^8.2.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.5",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/register": "^7.4.4",
-    "ava": "^2.0.0",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.13.0"
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/register": "^7.12.10",
+    "ava": "^3.15.0",
+    "eslint": "^7.17.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0"
   },
   "eslintConfig": {
-    "extends": "airbnb",
+    "extends": [
+      "airbnb",
+      "prettier"
+    ],
+    "plugins": [
+      "prettier"
+    ],
     "rules": {
+      "prettier/prettier": [
+        "error"
+      ],
       "no-param-reassign": [
@@ -47,0 +58,0 @@ "error",

README.md

@@ -12,15 +12,15 @@ # postcss-button
 [github.io]: http://francoisromain.github.io/postcss-button
-[PostCSS]:   https://github.com/postcss/postcss
-[ci-img]:    https://travis-ci.org/francoisromain/postcss-button.svg
-[ci]:        https://travis-ci.org/francoisromain/postcss-button
-[npm-img]:   https://badge.fury.io/js/postcss-button.svg
-[npm]:       https://badge.fury.io/js/postcss-button
-[dep-img]:   https://david-dm.org/francoisromain/postcss-button.svg
-[dep]:       https://david-dm.org/francoisromain/postcss-button
+[postcss]: https://github.com/postcss/postcss
+[ci-img]: https://travis-ci.org/francoisromain/postcss-button.svg
+[ci]: https://travis-ci.org/francoisromain/postcss-button
+[npm-img]: https://badge.fury.io/js/postcss-button.svg
+[npm]: https://badge.fury.io/js/postcss-button
+[dep-img]: https://david-dm.org/francoisromain/postcss-button.svg
+[dep]: https://david-dm.org/francoisromain/postcss-button
 
-* * *
+---
 
 This plugin outputs a lot of the repetitive css code necessary to create clean buttons. It also uses `box-shadow` to create borders which does not break the vertical rhythm.
 
-* * *
+---
 
@@ -33,3 +33,3 @@ ## Examples
 
-``` css
+```css
 .my-button-class {
@@ -54,3 +54,3 @@ /* short-hand syntax example */
 
-``` css
+```css
 @button my-button-name {
@@ -82,3 +82,3 @@ /* detailed-syntax example */
 
-``` css
+```css
 .my-button-class {
@@ -93,3 +93,3 @@ button: my-button-name;
 
-* * *
+---
 
@@ -100,4 +100,4 @@ ## Installation
 
-``` bash
-npm install postcss-button --save-dev
+```bash
+npm install --save-dev postcss postcss-button
 ```
@@ -107,4 +107,4 @@
 
-``` js
-postcss([ require('postcss-button') ])
+```js
+postcss([require("postcss-button")]);
 ```
@@ -114,3 +114,3 @@
 
-* * *
+---
 
@@ -121,3 +121,3 @@ ## Usage
 
-``` css
+```css
 
@@ -138,3 +138,3 @@ @button ([name]) {
 
-``` css
+```css
 .my-class {
@@ -149,3 +149,3 @@ [button-css-rules…]
 
-``` css
+```css
 /* Button text color when active */
@@ -163,3 +163,3 @@ button-color-active: [color];
 
-``` css
+```css
 /* button background color when active */
@@ -172,3 +172,4 @@ button-background-active: [color];
 /* short-hand syntax */
-button-background: [background-color] ([background-color-active]) ([background-color-hover]);
+button-background: [background-color] ([background-color-active])
+  ([background-color-hover]);
 ```
@@ -178,3 +179,3 @@
 
-``` css
+```css
 /* width and units of the border */
@@ -193,3 +194,4 @@ button-border-width: [width];
 /* short-hand syntax */
-button-border: [border-width] ([border-color]) ([border-color-active]) ([border-color-hover]);
+button-border: [border-width] ([border-color]) ([border-color-active])
+  ([border-color-hover]);
 ```
@@ -199,3 +201,3 @@
 
-``` css
+```css
 /* class name to apply the active styles */
@@ -202,0 +204,0 @@ button-class-active: [class-name];

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Lines of code

264

increased by1.15%

Number of lines in readme file

204

increased by0.99%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

18268

decreased by-24.47%

Dev dependency count

12

increased by20%

Number of package files

8

decreased by-11.11%

Dependency changes

• + Addednanoid@3.3.8(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.49(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• - Removedpostcss@^7.0.17

• - Removedpicocolors@0.2.1(transitive)

• - Removedpostcss@7.0.39(transitive)

• - Removedsource-map@0.6.1(transitive)