postcss-dir-pseudo-class - npm Package Compare versions

Comparing version 4.0.0 to 5.0.0

CHANGELOG.md

 # Changes to PostCSS Dir Pseudo Class
 
+### 5.0.0 (September 17, 2018)
+
+- Updated: Support for PostCSS v7+
+- Updated: Support for Node v6+
+- Updated: `postcss-selector-parser` to v5.0.0-rc.3+ (major)
+
 ### 4.0.0 (May 8, 2018)
@@ -4,0 +10,0 @@

index.cjs.js

@@ -8,99 +8,92 @@ 'use strict';
 
-var index = postcss.plugin('postcss-dir-pseudo-class', function (opts) {
-	var dir = Object(opts).dir;
-	var preserve = Boolean(Object(opts).preserve);
+var index = postcss.plugin('postcss-dir-pseudo-class', opts => {
+  const dir = Object(opts).dir;
+  const preserve = Boolean(Object(opts).preserve);
+  return root => {
+    // walk rules using the :dir pseudo-class
+    root.walkRules(/:dir\([^\)]*\)/, rule => {
+      let currentRule = rule; // conditionally preserve the original rule
 
-	return function (root) {
-		// walk rules using the :dir pseudo-class
-		root.walkRules(/:dir\([^\)]*\)/, function (rule) {
-			var currentRule = rule;
+      if (preserve) {
+        currentRule = rule.cloneBefore();
+      } // update the rule selector
 
-			// conditionally preserve the original rule
-			if (preserve) {
-				currentRule = rule.cloneBefore();
-			}
 
-			// update the rule selector
-			currentRule.selector = selectorParser(function (selectors) {
-				// for each (comma separated) selector
-				selectors.nodes.forEach(function (selector) {
-					// walk all selector nodes that are :dir pseudo-classes
-					selector.walk(function (node) {
-						if ('pseudo' === node.type && ':dir' === node.value) {
-							// previous and next selector nodes
-							var prev = node.prev();
-							var next = node.next();
+      currentRule.selector = selectorParser(selectors => {
+        // for each (comma separated) selector
+        selectors.nodes.forEach(selector => {
+          // walk all selector nodes that are :dir pseudo-classes
+          selector.walk(node => {
+            if ('pseudo' === node.type && ':dir' === node.value) {
+              // previous and next selector nodes
+              const prev = node.prev();
+              const next = node.next();
+              const prevIsSpaceCombinator = prev && prev.type && 'combinator' === prev.type && ' ' === prev.value;
+              const nextIsSpaceCombinator = next && next.type && 'combinator' === next.type && ' ' === next.value; // preserve the selector tree
 
-							var prevIsSpaceCombinator = prev && prev.type && 'combinator' === prev.type && ' ' === prev.value;
-							var nextIsSpaceCombinator = next && next.type && 'combinator' === next.type && ' ' === next.value;
+              if (prevIsSpaceCombinator && (nextIsSpaceCombinator || !next)) {
+                node.replaceWith(selectorParser.universal());
+              } else {
+                node.remove();
+              } // conditionally prepend a combinator before inserting the [dir] attribute
 
-							// preserve the selector tree
-							if (prevIsSpaceCombinator && (nextIsSpaceCombinator || !next)) {
-								node.replaceWith(selectorParser.universal());
-							} else {
-								node.remove();
-							}
 
-							// conditionally prepend a combinator before inserting the [dir] attribute
-							var first = selector.nodes[0];
-							var firstIsSpaceCombinator = first && 'combinator' === first.type && ' ' === first.value;
-							var firstIsHtml = first && 'tag' === first.type && 'html' === first.value;
-							var firstIsRoot = first && 'pseudo' === first.type && ':root' === first.value;
+              const first = selector.nodes[0];
+              const firstIsSpaceCombinator = first && 'combinator' === first.type && ' ' === first.value;
+              const firstIsHtml = first && 'tag' === first.type && 'html' === first.value;
+              const firstIsRoot = first && 'pseudo' === first.type && ':root' === first.value;
 
-							if (first && !firstIsHtml && !firstIsRoot && !firstIsSpaceCombinator) {
-								selector.prepend(selectorParser.combinator({
-									value: ' '
-								}));
-							}
+              if (first && !firstIsHtml && !firstIsRoot && !firstIsSpaceCombinator) {
+                selector.prepend(selectorParser.combinator({
+                  value: ' '
+                }));
+              } // value of the :dir pseudo-class
 
-							// value of the :dir pseudo-class
-							var value = node.nodes.toString();
 
-							// whether :dir matches the presumed direction
-							var isdir = dir === value;
+              const value = node.nodes.toString(); // whether :dir matches the presumed direction
 
-							// [dir] attribute
-							var dirAttr = selectorParser.attribute({
-								attribute: 'dir',
-								operator: '=',
-								quoteMark: '"',
-								value: `"${value}"`
-							});
+              const isdir = dir === value; // [dir] attribute
 
-							// not[dir] attribute
-							var notDirAttr = selectorParser.pseudo({
-								value: `${firstIsHtml || firstIsRoot ? '' : 'html'}:not`
-							});
+              const dirAttr = selectorParser.attribute({
+                attribute: 'dir',
+                operator: '=',
+                quoteMark: '"',
+                value: `"${value}"`
+              }); // not[dir] attribute
 
-							notDirAttr.append(selectorParser.attribute({
-								attribute: 'dir',
-								operator: '=',
-								quoteMark: '"',
-								value: `"${'ltr' === value ? 'rtl' : 'ltr'}"`
-							}));
+              const notDirAttr = selectorParser.pseudo({
+                value: `${firstIsHtml || firstIsRoot ? '' : 'html'}:not`
+              });
+              notDirAttr.append(selectorParser.attribute({
+                attribute: 'dir',
+                operator: '=',
+                quoteMark: '"',
+                value: `"${'ltr' === value ? 'rtl' : 'ltr'}"`
+              }));
 
-							if (isdir) {
-								// if the direction is presumed
-								if (firstIsHtml) {
-									// insert :root after html tag
-									selector.insertAfter(first, notDirAttr);
-								} else {
-									// prepend :root
-									selector.prepend(notDirAttr);
-								}
-							} else if (firstIsHtml) {
-								// otherwise, insert dir attribute after html tag
-								selector.insertAfter(first, dirAttr);
-							} else {
-								// otherwise, prepend the dir attribute
-								selector.prepend(dirAttr);
-							}
-						}
-					});
-				});
-			}).processSync(currentRule.selector);
-		});
-	};
+              if (isdir) {
+                // if the direction is presumed
+                if (firstIsHtml) {
+                  // insert :root after html tag
+                  selector.insertAfter(first, notDirAttr);
+                } else {
+                  // prepend :root
+                  selector.prepend(notDirAttr);
+                }
+              } else if (firstIsHtml) {
+                // otherwise, insert dir attribute after html tag
+                selector.insertAfter(first, dirAttr);
+              } else {
+                // otherwise, prepend the dir attribute
+                selector.prepend(dirAttr);
+              }
+            }
+          });
+        });
+      }).processSync(currentRule.selector);
+    });
+  };
 });
 
 module.exports = index;
+//# sourceMappingURL=index.cjs.js.map

package.json

 {
   "name": "postcss-dir-pseudo-class",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Use the :dir pseudo-class in CSS",
@@ -11,6 +11,8 @@ "author": "Jonathan Neal <[e-mail]>",
   "main": "index.cjs.js",
-  "module": "index.es.js",
+  "module": "index.es.mjs",
   "files": [
     "index.cjs.js",
-    "index.es.js"
+    "index.cjs.js.map",
+    "index.es.mjs",
+    "index.es.mjs.map"
   ],
@@ -29,15 +31,15 @@ "scripts": {
   "dependencies": {
-    "postcss": "^6.0.22",
-    "postcss-selector-parser": "^4.0.0"
+    "postcss": "^7.0.2",
+    "postcss-selector-parser": "^5.0.0-rc.3"
   },
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.3",
-    "babel-preset-env": "^1.6.1",
-    "eslint": "^4.19.1",
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "babel-eslint": "^9.0.0",
+    "eslint": "^5.6.0",
     "eslint-config-dev": "^2.0.0",
     "postcss-tape": "^2.2.0",
     "pre-commit": "^1.2.2",
-    "rollup": "^0.58.2",
-    "rollup-plugin-babel": "^3.0.4"
+    "rollup": "^0.66.0",
+    "rollup-plugin-babel": "^4.0.1"
   },
@@ -44,0 +46,0 @@ "eslintConfig": {

README.md

@@ -6,3 +6,2 @@ # PostCSS Dir Pseudo Class [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 [![Build Status][cli-img]][cli-url]
-[![Windows Build Status][win-img]][win-url]
 [![Support Chat][git-img]][git-url]
@@ -51,3 +50,3 @@
 
-Add [PostCSS Dir Pseudo Class] to your build tool:
+Add [PostCSS Dir Pseudo Class] to your project:
 
@@ -58,117 +57,26 @@ ```bash
 
-#### Node
-
 Use [PostCSS Dir Pseudo Class] to process your CSS:
 
 ```js
-import postcssDirPseudoClass from 'postcss-dir-pseudo-class';
+const postcssDirPseudoClass = require('postcss-dir-pseudo-class');
 
-postcssDirPseudoClass.process(YOUR_CSS, /* processOptions */, /* pluginOptions */);
+postcssDirPseudoClass.process(YOUR_CSS /*, processOptions, pluginOptions */);
 ```
 
-#### PostCSS
+Or use it as a [PostCSS] plugin:
 
-Add [PostCSS] to your build tool:
-
-```bash
-npm install postcss --save-dev
-```
-
-Use [PostCSS Dir Pseudo Class] as a plugin:
-
 ```js
-import postcss from 'gulp-postcss';
-import postcssDirPseudoClass from 'postcss-dir-pseudo-class';
+const postcss = require('postcss');
+const postcssDirPseudoClass = require('postcss-dir-pseudo-class');
 
 postcss([
   postcssDirPseudoClass(/* pluginOptions */)
-]).process(YOUR_CSS);
+]).process(YOUR_CSS /*, processOptions */);
 ```
 
-#### Webpack
+[PostCSS Dir Pseudo Class] runs in all Node environments, with special instructions for:
 
-Add [PostCSS Loader] to your build tool:
+| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
+| --- | --- | --- | --- | --- | --- |
 
-```bash
-npm install postcss-loader --save-dev
-```
-
-Use [PostCSS Dir Pseudo Class] in your Webpack configuration:
-
-```js
-import postcssDirPseudoClass from 'postcss-dir-pseudo-class';
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          { loader: 'css-loader', options: { importLoaders: 1 } },
-          { loader: 'postcss-loader', options: {
-            ident: 'postcss',
-            plugins: () => [
-              postcssDirPseudoClass(/* pluginOptions */)
-            ]
-          } }
-        ]
-      }
-    ]
-  }
-}
-```
-
-#### Gulp
-
-Add [Gulp PostCSS] to your build tool:
-
-```bash
-npm install gulp-postcss --save-dev
-```
-
-Use [PostCSS Dir Pseudo Class] in your Gulpfile:
-
-```js
-import postcss from 'gulp-postcss';
-import postcssDirPseudoClass from 'postcss-dir-pseudo-class';
-
-gulp.task('css', () => gulp.src('./src/*.css').pipe(
-  postcss([
-    postcssDirPseudoClass(/* pluginOptions */)
-  ])
-).pipe(
-  gulp.dest('.')
-));
-```
-
-#### Grunt
-
-Add [Grunt PostCSS] to your build tool:
-
-```bash
-npm install grunt-postcss --save-dev
-```
-
-Use [PostCSS Dir Pseudo Class] in your Gruntfile:
-
-```js
-import postcssDirPseudoClass from 'postcss-dir-pseudo-class';
-
-grunt.loadNpmTasks('grunt-postcss');
-
-grunt.initConfig({
-  postcss: {
-    options: {
-      use: [
-       postcssDirPseudoClass(/* pluginOptions */)
-      ]
-    },
-    dist: {
-      src: '*.css'
-    }
-  }
-});
-```
-
 ## Options
@@ -248,4 +156,4 @@
 [cli-url]: https://travis-ci.org/jonathantneal/postcss-dir-pseudo-class
-[css-img]: https://jonathantneal.github.io/cssdb/badge/dir-pseudo-class.svg
-[css-url]: https://jonathantneal.github.io/cssdb/#dir-pseudo-class
+[css-img]: https://cssdb.org/badge/dir-pseudo-class.svg
+[css-url]: https://cssdb.org/#dir-pseudo-class
 [git-img]: https://img.shields.io/badge/support-chat-blue.svg
@@ -252,0 +160,0 @@ [git-url]: https://gitter.im/postcss/postcss

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

Total package byte prevSize

35646

increased by62.69%

Number of package files

8

increased by33.33%

Worsened metrics

Lines of code

160

decreased by-8.05%

Number of lines in readme file

168

decreased by-35.38%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedcssesc@2.0.0(transitive)

• + Addedpicocolors@0.2.1(transitive)

• + Addedpostcss@7.0.39(transitive)

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

• - Removedansi-styles@3.2.1(transitive)

• - Removedchalk@2.4.2(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removedcssesc@1.0.1(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedhas-flag@3.0.0(transitive)

• - Removedpostcss@6.0.23(transitive)

• - Removedpostcss-selector-parser@4.0.0(transitive)

• - Removedsupports-color@5.5.0(transitive)

• Updatedpostcss@^7.0.2

• Updatedpostcss-selector-parser@^5.0.0-rc.3