css-blank-pseudo - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

browser.js

@@ -0,2 +1,125 @@
+(function () {
 
-//# sourceMappingURL=browser.js.map
+	/* global MutationObserver */
+	function cssBlankPseudo(document, opts) {
+	  // configuration
+	  var className = Object(opts).className;
+	  var attr = Object(opts).attr || 'blank';
+	  var force = Object(opts).force;
+
+	  try {
+	    document.querySelector(':blank');
+
+	    if (!force) {
+	      return;
+	    }
+	  } catch (ignoredError) {
+	    /* do nothing and continue */
+	  } // observe value changes on <input>, <select>, and <textarea>
+
+
+	  var window = (document.ownerDocument || document).defaultView;
+	  observeValueOfHTMLElement(window.HTMLInputElement);
+	  observeValueOfHTMLElement(window.HTMLSelectElement);
+	  observeValueOfHTMLElement(window.HTMLTextAreaElement);
+	  observeSelectedOfHTMLElement(window.HTMLOptionElement); // form control elements selector
+
+	  var selector = 'INPUT,SELECT,TEXTAREA';
+	  var selectorRegExp = /^(INPUT|SELECT|TEXTAREA)$/; // conditionally update all form control elements
+
+	  Array.prototype.forEach.call(document.querySelectorAll(selector), function (node) {
+	    if (node.nodeName === 'SELECT') {
+	      node.addEventListener('change', configureCssBlankAttribute);
+	    } else {
+	      node.addEventListener('input', configureCssBlankAttribute);
+	    }
+
+	    configureCssBlankAttribute.call(node);
+	  }); // conditionally observe added or unobserve removed form control elements
+
+	  new MutationObserver(function (mutationsList) {
+	    mutationsList.forEach(function (mutation) {
+	      Array.prototype.forEach.call(mutation.addedNodes || [], function (node) {
+	        if (node.nodeType === 1 && selectorRegExp.test(node.nodeName)) {
+	          if (node.nodeName === 'SELECT') {
+	            node.addEventListener('change', configureCssBlankAttribute);
+	          } else {
+	            node.addEventListener('input', configureCssBlankAttribute);
+	          }
+
+	          configureCssBlankAttribute.call(node);
+	        }
+	      });
+	      Array.prototype.forEach.call(mutation.removedNodes || [], function (node) {
+	        if (node.nodeType === 1 && selectorRegExp.test(node.nodeName)) {
+	          if (node.nodeName === 'SELECT') {
+	            node.removeEventListener('change', configureCssBlankAttribute);
+	          } else {
+	            node.removeEventListener('input', configureCssBlankAttribute);
+	          }
+	        }
+	      });
+	    });
+	  }).observe(document, {
+	    childList: true,
+	    subtree: true
+	  }); // update a form control element’s css-blank attribute
+
+	  function configureCssBlankAttribute() {
+	    if (this.value || this.nodeName === 'SELECT' && this.options[this.selectedIndex].value) {
+	      if (attr) {
+	        this.removeAttribute(attr);
+	      }
+
+	      if (className) {
+	        this.classList.remove(className);
+	      }
+
+	      this.removeAttribute('blank');
+	    } else {
+	      if (attr) {
+	        this.setAttribute('blank', attr);
+	      }
+
+	      if (className) {
+	        this.classList.add(className);
+	      }
+	    }
+	  } // observe changes to the "value" property on an HTML Element
+
+
+	  function observeValueOfHTMLElement(HTMLElement) {
+	    var descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'value');
+	    var nativeSet = descriptor.set;
+
+	    descriptor.set = function set(value) {
+	      // eslint-disable-line no-unused-vars
+	      nativeSet.apply(this, arguments);
+	      configureCssBlankAttribute.apply(this);
+	    };
+
+	    Object.defineProperty(HTMLElement.prototype, 'value', descriptor);
+	  } // observe changes to the "selected" property on an HTML Element
+
+
+	  function observeSelectedOfHTMLElement(HTMLElement) {
+	    var descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'selected');
+	    var nativeSet = descriptor.set;
+
+	    descriptor.set = function set(value) {
+	      // eslint-disable-line no-unused-vars
+	      nativeSet.apply(this, arguments);
+	      var event = document.createEvent('Event');
+	      event.initEvent('change', true, true);
+	      this.dispatchEvent(event);
+	    };
+
+	    Object.defineProperty(HTMLElement.prototype, 'selected', descriptor);
+	  }
+	}
+
+	/* global self */
+	self.cssBlankPseudo = cssBlankPseudo;
+
+})();
+//# sourceMappingURL=browser-global.js.map

package.json

 {
   "name": "css-blank-pseudo",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Style form elements when they are empty",
   "author": "Jonathan Neal <[e-mail]>",
   "license": "CC0-1.0",
-  "repository": "csstools/css-blank-pseudo",
-  "homepage": "https://github.com/csstools/css-blank-pseudo#readme",
-  "bugs": "https://github.com/csstools/css-blank-pseudo/issues",
-  "main": "index.js",
-  "module": "index.mjs",
-  "bin": {
-    "css-blank-pseudo": "cli.js"
+  "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo#readme",
+  "bugs": "https://github.com/csstools/postcss-plugins/issues",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.mjs"
+    },
+    "./browser": {
+      "default": "./dist/browser.js"
+    },
+    "./browser-global": {
+      "default": "./dist/browser-global.js"
+    }
   },
   "files": [
-    "browser.js",
-    "browser-legacy.js",
-    "cli.js",
-    "index.js",
-    "index.js.map",
-    "index.mjs",
-    "index.mjs.map",
-    "legacy.js",
-    "legacy.js.map",
-    "legacy.mjs",
-    "legacy.mjs.map",
-    "postcss.js",
-    "postcss.js.map",
-    "postcss.mjs",
-    "postcss.mjs.map"
+    "CHANGELOG.md",
+    "INSTALL.md",
+    "LICENSE.md",
+    "README.md",
+    "dist",
+    "browser.js"
   ],
+  "bin": {
+    "css-blank-pseudo": "dist/cli.mjs"
+  },
   "scripts": {
-    "build": "npm run build:browser && npm run build:cli && npm run build:node && npm run build:postcss",
-    "build:browser": "cross-env NODE_ENV=browser rollup --config .rollup.js --silent && cross-env NODE_ENV=browser:legacy rollup --config .rollup.js --silent",
-    "build:cli": "cross-env NODE_ENV=cli rollup --config .rollup.js --silent",
-    "build:postcss": "cross-env NODE_ENV=postcss rollup --config .rollup.js --silent",
-    "build:node": "rollup --config .rollup.js --silent && cross-env NODE_ENV=legacy rollup --config .rollup.js --silent",
-    "prepublishOnly": "npm test && npm run build",
-    "pretest:postcss": "npm run build:postcss",
-    "test": "npm run test:js && npm run test:postcss",
-    "test:js": "eslint src/{*,**/*}.js --cache --ignore-path .gitignore --quiet",
-    "test:postcss": "postcss-tape --plugin postcss.js"
+    "build": "rollup -c ../../rollup/default.js && npm run copy-browser-scripts-to-old-location",
+    "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
+    "copy-browser-scripts-to-old-location": "node -e \"fs.copyFileSync('./dist/browser-global.js', './browser.js'); fs.copyFileSync('./dist/browser-global.js', './browser-legacy.js')\"",
+    "lint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
+    "prepublishOnly": "npm run clean && npm run build && npm run test",
+    "stryker": "stryker run --logLevel error",
+    "test": "postcss-tape --ci",
+    "cli": "css-blank-pseudo"
   },
   "engines": {
-    "node": ">=10.0.0"
+    "node": "^12 || ^14 || >=16"
   },
-  "peerDependencies": {
-    "postcss": "^8.3"
+  "dependencies": {
+    "postcss-selector-parser": "^6.0.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
-    "@rollup/plugin-babel": "^5.3.0",
-    "cross-env": "^7.0.3",
-    "eslint": "^7.32.0",
     "postcss": "^8.3.6",
-    "postcss-tape": "^6.0.1",
-    "pre-commit": "^1.2.2",
-    "rollup": "^2.56.3",
-    "rollup-plugin-terser": "^7.0.2"
+    "postcss-tape": "^6.0.1"
   },
-  "eslintConfig": {
-    "env": {
-      "browser": true,
-      "es6": true,
-      "node": true
-    },
-    "parserOptions": {
-      "sourceType": "module"
-    },
-    "root": true
+  "peerDependencies": {
+    "postcss": "^8.3"
   },
@@ -89,3 +74,8 @@ "keywords": [
     "textarea"
-  ]
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/csstools/postcss-plugins.git",
+    "directory": "plugins/css-blank-pseudo"
+  }
 }

README.md

 # CSS Blank Pseudo [<img src="http://jonathantneal.github.io/js-logo.svg" alt="" width="90" height="90" align="right">][CSS Blank Pseudo]
 
 [![NPM Version][npm-img]][npm-url]
-[![Build Status][cli-img]][cli-url]
 [![Support Chat][git-img]][git-url]
@@ -25,3 +24,3 @@
 ```bash
-npx css-blank-pseudo SOURCE.css TRANSFORMED.css
+npx css-blank-pseudo SOURCE.css --output TRANSFORMED.css
 ```
@@ -33,19 +32,14 @@
 <link rel="stylesheet" href="TRANSFORMED.css">
-<script src="https://unpkg.com/css-blank-pseudo/browser"></script>
+<script src="https://unpkg.com/css-blank-pseudo/dist/browser-global.js"></script>
 <script>cssBlankPseudo(document)</script>
 ```
 
-That’s it. The script is 509 bytes and works in all browsers.
+⚠️ Please use a versioned url, like this : `https://unpkg.com/css-blank-pseudo@3.0.0/dist/browser-global.js`
+Without the version, you might unexpectedly get a new major version of the library with breaking changes.
 
----
+⚠️ If you were using an older version via a CDN, please update the entire url.
+The old URL will no longer work in a future release.
 
-If you support Internet Explorer 11, use the **browser legacy** script, which
-is 671 bytes:
+That’s it. The script works in most browsers.
 
-```html
-<link rel="stylesheet" href="TRANSFORMED.css">
-<script src="https://unpkg.com/css-blank-pseudo/browser-legacy"></script>
-<script>cssBlankPseudo(document)</script>
-```
-
 ## How it works
@@ -80,4 +74,28 @@
 
-[cli-img]: https://img.shields.io/travis/csstools/css-blank-pseudo/master.svg
-[cli-url]: https://travis-ci.org/csstools/css-blank-pseudo
+## ⚠️ `:not(:blank)`
+
+with option : `preserve` `true`
+
+```css
+input:not(:blank) {
+  background-color: yellow;
+}
+
+/* becomes */
+
+input:not([blank]) {
+  background-color: yellow;
+}
+
+input:not(:blank) {
+  background-color: yellow;
+}
+```
+
+When you do not include the JS polyfill one will always match in browsers that support `:blank` natively.
+In browsers that do not support `:blank` natively the rule will be invalid.
+
+_currently no browsers support `:blank`_
+
+
 [git-img]: https://img.shields.io/badge/support-chat-blue.svg
@@ -88,4 +106,4 @@ [git-url]: https://gitter.im/postcss/postcss
 
-[CSS Blank Pseudo]: https://github.com/csstools/css-blank-pseudo
+[CSS Blank Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo
 [PostCSS Preset Env]: https://preset-env.cssdb.org/
 [Selectors Level 4]: https://drafts.csswg.org/selectors-4/#blank

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

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 4 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

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

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

134527

increased by112.13%

Dev dependency count

2

decreased by-80%

Lines of code

633

increased by21.97%

Number of lines in readme file

106

increased by20.45%

Worsened metrics

Dependency count

2

increased by100%

Number of package files

14

decreased by-22.22%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

12

increased by500%

Number of medium supply chain risk alerts

3

increased byInfinity%

Dependency changes

• + Addedpostcss-selector-parser@^6.0.7

• + Addedcssesc@3.0.0(transitive)

• + Addedpostcss-selector-parser@6.1.2(transitive)

• + Addedutil-deprecate@1.0.2(transitive)