postcss-button - npm Package Compare versions

Comparing version 0.4.0 to 0.4.2

lib/button.js

@@ -8,11 +8,7 @@ "use strict";
 
-var _postcss = _interopRequireDefault(require("postcss"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const selectorApply = (selector, modifiers, applyToParent, isClass) => {
   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}`;
   };
@@ -23,39 +19,37 @@
 
-const ruleDisabled = (ruleSelectors, options) => {
-  const rule = _postcss.default.rule();
-
-  rule.selectors = ruleSelectors.map(selector => {
-    const selectorDefault = selectorApply(selector, [":disabled", ":disabled:active", ":disabled:hover"], options.classParent);
+const ruleDisabled = (ruleSelectors, options, rule) => {
+  const node = rule();
+  node.selectors = ruleSelectors.map(selector => {
+    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) : [];
     return [...selectorDefault, ...selectorClass];
   });
-  rule.append({
-    prop: "opacity",
-    value: "0.25"
+  node.append({
+    prop: 'opacity',
+    value: '0.25'
   });
-  rule.append({
-    prop: "cursor",
-    value: "default"
+  node.append({
+    prop: 'cursor',
+    value: 'default'
   });
-  rule.append({
-    prop: "color",
+  node.append({
+    prop: 'color',
     value: options.color
   });
-  rule.append({
-    prop: "background-color",
+  node.append({
+    prop: 'background-color',
     value: options.backgroundColor
   });
-  rule.append({
-    prop: "box-shadow",
+  node.append({
+    prop: 'box-shadow',
     value: `inset 0 0 0 ${options.borderWidth} ${options.borderColor}`
   });
-  return rule;
+  return node;
 };
 
-const ruleHover = (ruleSelectors, options) => {
-  const rule = _postcss.default.rule();
-
-  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 ruleHover = (ruleSelectors, options, rule) => {
+  const node = rule();
+  node.selectors = ruleSelectors.map(selector => {
+    const selectorDefault = selectorApply(selector, ':hover', options.classParent);
+    const selectorClass = options.classActive ? selectorApply(selector, `.${options.classActive}:hover`, options.classParent, true) : '';
     return [selectorDefault, selectorClass];
@@ -65,4 +59,4 @@ });
   if (options.colorHover) {
-    rule.append({
-      prop: "color",
+    node.append({
+      prop: 'color',
       value: options.colorHover
@@ -73,4 +67,4 @@ });
   if (options.backgroundColorHover) {
-    rule.append({
-      prop: "background-color",
+    node.append({
+      prop: 'background-color',
       value: options.backgroundColorHover
@@ -80,5 +74,5 @@ });
 
-  if (options.borderColorHover && options.borderWidth !== "0") {
-    rule.append({
-      prop: "box-shadow",
+  if (options.borderColorHover && options.borderWidth !== '0') {
+    node.append({
+      prop: 'box-shadow',
       value: `inset 0 0 0 ${options.borderWidth} ${options.borderColorHover}`
@@ -88,11 +82,10 @@ });
 
-  return rule;
+  return node;
 };
 
-const ruleActive = (ruleSelectors, options) => {
-  const rule = _postcss.default.rule();
-
-  rule.selectors = ruleSelectors.map(selector => {
-    const selectorDefault = selectorApply(selector, ":active", options.classParent);
-    const selectorClass = options.classActive ? selectorApply(selector, `.${options.classActive}`, options.classParent, true) : "";
+const ruleActive = (ruleSelectors, options, rule) => {
+  const node = rule();
+  node.selectors = ruleSelectors.map(selector => {
+    const selectorDefault = selectorApply(selector, ':active', options.classParent);
+    const selectorClass = options.classActive ? selectorApply(selector, `.${options.classActive}`, options.classParent, true) : '';
     return [selectorDefault, selectorClass];
@@ -102,4 +95,4 @@ });
   if (options.colorActive) {
-    rule.append({
-      prop: "color",
+    node.append({
+      prop: 'color',
       value: options.colorActive
@@ -110,4 +103,4 @@ });
   if (options.backgroundColorActive) {
-    rule.append({
-      prop: "background-color",
+    node.append({
+      prop: 'background-color',
       value: options.backgroundColorActive
@@ -117,5 +110,5 @@ });
 
-  if (options.borderColorActive && options.borderWidth !== "0") {
-    rule.append({
-      prop: "box-shadow",
+  if (options.borderColorActive && options.borderWidth !== '0') {
+    node.append({
+      prop: 'box-shadow',
       value: `inset 0 0 0 ${options.borderWidth} ${options.borderColorActive}`
@@ -125,29 +118,29 @@ });
 
-  return rule;
+  return node;
 };
 
-const declDefault = options => {
-  const d1 = [_postcss.default.decl({
-    prop: "cursor",
-    value: "pointer"
-  }), _postcss.default.decl({
-    prop: "text-decoration",
-    value: "none"
-  }), _postcss.default.decl({
-    prop: "border",
-    value: "none"
-  }), _postcss.default.decl({
-    prop: "display",
-    value: "inline-block"
+const declDefault = (options, decl) => {
+  const d1 = [decl({
+    prop: 'cursor',
+    value: 'pointer'
+  }), decl({
+    prop: 'text-decoration',
+    value: 'none'
+  }), decl({
+    prop: 'border',
+    value: 'none'
+  }), decl({
+    prop: 'display',
+    value: 'inline-block'
   })];
-  const d2 = options.color ? _postcss.default.decl({
-    prop: "color",
+  const d2 = options.color ? decl({
+    prop: 'color',
     value: options.color
-  }) : "";
-  const d3 = options.backgroundColor ? _postcss.default.decl({
-    prop: "background-color",
+  }) : '';
+  const d3 = options.backgroundColor ? decl({
+    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' ? [decl({
+    prop: 'box-shadow',
     value: `inset 0 0 0 ${options.borderWidth} ${options.borderColor}`
@@ -158,15 +151,18 @@ })] : [];
 
-const button = (rule, options) => {
-  rule.after(ruleDisabled(rule.selectors, options));
+const button = (node, options, {
+  rule,
+  decl
+}) => {
+  node.after(ruleDisabled(node.selectors, options, rule));
 
   if (options.colorHover || options.backgroundColorHover || options.borderColorHover) {
-    rule.after(ruleHover(rule.selectors, options));
+    node.after(ruleHover(node.selectors, options, rule));
   }
 
   if (options.colorActive || options.backgroundColorActive || options.borderColorActive) {
-    rule.after(ruleActive(rule.selectors, options));
+    node.after(ruleActive(node.selectors, options, rule));
   }
 
-  rule.selectors = rule.selectors.map(selector => `${selector},${selectorApply(selector, ":visited", options.classParent)}`);
-  rule.prepend(declDefault(options));
+  node.selectors = node.selectors.map(selector => `${selector},${selectorApply(selector, ':visited', options.classParent)}`);
+  node.prepend(declDefault(options, decl));
 };
@@ -173,0 +169,0 @@

lib/index.js

 "use strict";
 
-var _postcss = _interopRequireDefault(require("postcss"));
-
 var _button = _interopRequireDefault(require("./button"));
@@ -9,2 +7,3 @@
 
+/* eslint-disable prefer-destructuring */
 const propOption = (decl, optionsCurrent) => {
@@ -39,3 +38,3 @@ const option = {};
   } 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$/)) {
@@ -83,3 +82,3 @@ option.color = value[0];
     if (value[2]) {
-      option.classParent = !!value[2] && value[2] !== "false";
+      option.classParent = !!value[2] && value[2] !== 'false';
     }
@@ -91,3 +90,3 @@ }
 
-const atruleOptions = (node, options) => {
+const atRuleOptions = (node, options) => {
   const option = {};
@@ -103,14 +102,14 @@ node.walkDecls(decl => {
     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
@@ -120,5 +119,11 @@ }
 
-  const buttonMake = node => {
+  const buttonMake = (node, {
+    rule,
+    decl
+  }) => {
     if (options.tmp && !node.next()) {
-      (0, _button.default)(node.parent, options.tmp);
+      (0, _button.default)(node.parent, options.tmp, {
+        rule,
+        decl
+      });
       delete options.tmp;
@@ -130,22 +135,34 @@ }
   return {
-    postcssPlugin: "postcss-button",
+    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));
+    AtRule(node) {
+      if (node.name.match(/^button/)) {
+        const name = node.params || 'default';
+        options[name] = options[name] || {};
+        Object.assign(options[name], atRuleOptions(node, options));
+        node.remove();
+      }
+    },
+
+    Declaration(node, {
+      rule,
+      decl
+    }) {
+      if (node.parent.type === 'rule') {
+        if (node.prop.match(/^button/)) {
+          options.tmp = options.tmp || { ...options.default
+          };
+          Object.assign(options.tmp, propOption(node, options[node.value]));
+          buttonMake(node, {
+            rule,
+            decl
+          });
           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);
-            node.remove();
-          } else {
-            buttonMake(node);
-          }
+        } else {
+          buttonMake(node, {
+            rule,
+            decl
+          });
         }
-      });
+      }
     }
@@ -152,0 +169,0 @@

package.json

 {
   "name": "postcss-button",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "A PostCSS plugin to create buttons.",
@@ -23,43 +23,5 @@ "keywords": [
   "main": "./lib/index.js",
-  "scripts": {
-    "build": "babel src --out-dir lib",
-    "test": "npm run build && ava"
-  },
   "peerDependencies": {
     "postcss": "^8.2.2"
   },
-  "devDependencies": {
-    "@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",
-      "prettier"
-    ],
-    "plugins": [
-      "prettier"
-    ],
-    "rules": {
-      "prettier/prettier": [
-        "error"
-      ],
-      "no-param-reassign": [
-        "error",
-        {
-          "props": false
-        }
-      ]
-    }
-  },
   "ava": {
@@ -72,15 +34,3 @@ "files": [
     ]
-  },
-  "babel": {
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "targets": {
-            "node": "10"
-          }
-        }
-      ]
-    ]
   }
 }

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

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

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

Dev dependency count

0

decreased by-100%

Lines of code

282

increased by6.82%

Worsened metrics

Total package byte prevSize

16919

decreased by-7.38%

Number of package files

6

decreased by-25%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes