postcss-focus - npm Package Compare versions

Comparing version 4.0.0 to 5.0.0

CHANGELOG.md

 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 5.0
+* Moved to PostCSS 8.
+* Moved `postcss` to `peerDependencies`.
+
 ## 4.0
@@ -5,0 +9,0 @@ * Use PostCSS 7.

index.js

@@ -1,17 +0,16 @@
-var postcss = require('postcss')
-
 function hasAlready (parent, selector) {
-  return parent.nodes.some(function (i) {
-    return i.type === 'rule' && i.selectors.indexOf(selector) !== -1
+  return parent.some(i => {
+    return i.type === 'rule' && i.selectors.includes(selector)
   })
 }
 
-module.exports = postcss.plugin('postcss-focus', function () {
-  return function (css) {
-    css.walkRules(function (rule) {
-      if (rule.selector.indexOf(':hover') !== -1) {
-        var focuses = []
-        rule.selectors.forEach(function (selector) {
-          if (selector.indexOf(':hover') !== -1) {
-            var replaced = selector.replace(/:hover/g, ':focus')
+module.exports = () => {
+  return {
+    postcssPlugin: 'postcss-focus',
+    Rule: rule => {
+      if (rule.selector.includes(':hover')) {
+        let focuses = []
+        for (let selector of rule.selectors) {
+          if (selector.includes(':hover')) {
+            let replaced = selector.replace(/:hover/g, ':focus')
             if (!hasAlready(rule.parent, replaced)) {
@@ -21,3 +20,3 @@ focuses.push(replaced)
           }
-        })
+        }
         if (focuses.length) {
@@ -27,4 +26,5 @@ rule.selectors = rule.selectors.concat(focuses)
       }
-    })
+    }
   }
-})
+}
+module.exports.postcss = true

package.json

 {
   "name": "postcss-focus",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "PostCSS plugin to add :focus selector to every :hover for keyboard accessibility",
@@ -18,9 +18,8 @@ "keywords": [
   "repository": "postcss/postcss-focus",
-  "bugs": {
-    "url": "https://github.com/postcss/postcss-focus/issues"
+  "engines": {
+    "node": ">=10.0"
   },
-  "homepage": "https://github.com/postcss/postcss-focus",
-  "dependencies": {
-    "postcss": "^7.0.2"
+  "peerDependencies": {
+    "postcss": "^8.0.3"
   }
 }

README.md

@@ -1,6 +0,6 @@
-# PostCSS Focus [![Build Status][ci-img]][ci]
+# PostCSS Focus
 
 <img align="right" width="135" height="95"
      title="Philosopher’s stone, logo of PostCSS"
-     src="http://postcss.github.io/postcss/logo-leftp.svg">
+     src="https://postcss.org/logo-leftp.svg">
 
@@ -14,11 +14,9 @@ [PostCSS] plugin to add `:focus` selector to every `:hover`
 [PostCSS]:                    https://github.com/postcss/postcss
-[ci-img]:                     https://travis-ci.org/postcss/postcss-focus.svg
-[ci]:                         https://travis-ci.org/postcss/postcss-focus
 
 ```css
 *:focus {
-    outline: 0;
+  outline: 0;
 }
 .button:hover {
-    background: red;
+  background: red;
 }
@@ -29,6 +27,6 @@ ```
 *:focus {
-    outline: 0;
+  outline: 0;
 }
 .button:hover, .button:focus {
-    background: red;
+  background: red;
 }
@@ -41,6 +39,6 @@ ```
 .a:hover, .b:hover {
-    outline: 0;
+  outline: 0;
 }
 .b:focus {
-    background: red;
+  background: red;
 }
@@ -51,15 +49,41 @@ ```
 .a:hover, .b:hover, .a:focus {
-    outline: 0;
+  outline: 0;
 }
 .b:focus {
-    background: red;
+  background: red;
 }
 ```
 
+<a href="https://evilmartians.com/?utm_source=postcss-focus">
+  <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
+       alt="Sponsored by Evil Martians" width="236" height="54">
+</a>
+
+
 ## Usage
 
-```js
-postcss([ require('postcss-focus') ])
+**Step 1:** Install plugin:
+
+```sh
+npm install --save-dev postcss postcss-focus
 ```
 
-See [PostCSS] docs for examples for your environment.
+**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`
+in the project root, `"postcss"` section in `package.json`
+or `postcss` in bundle config.
+
+If you do not use PostCSS, add it according to [official docs]
+and set this plugin in settings.
+
+**Step 3:** Add the plugin to plugins list:
+
+```diff
+module.exports = {
+  plugins: [
++   require('postcss-focus'),
+    require('autoprefixer')
+  ]
+}
+```
+
+[official docs]: https://github.com/postcss/postcss#usage

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

No bug tracker

Maintenance

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

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

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

4454

increased by8.82%

Lines of code

27

increased by3.85%

Number of lines in readme file

86

increased by38.71%

Worsened metrics

Number of low maintenance alerts

1

increased byInfinity%

Number of low quality alerts

1

increased byInfinity%

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.2

• - Removedpicocolors@0.2.1(transitive)

• - Removedpostcss@7.0.39(transitive)

• - Removedsource-map@0.6.1(transitive)