postcss-focus-within 2.0.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changes to PostCSS Focus Within
 
+### 3.0.0 (September 17, 2018)
+
+- Updated: Support for PostCSS v7+
+- Updated: Support for Node v6+
+
 ### 2.0.0 (April 7, 2018)
 
 - Changed: default functionality to preserve the original rule

package/README.md

@@ -1,8 +1,8 @@
 # PostCSS Focus Within [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
 [![NPM Version][npm-img]][npm-url]
+[![CSS Standard Status][css-img]][css-url]
 [![Build Status][cli-img]][cli-url]
-[![Windows Build Status][win-img]][win-url]
 [![Gitter Chat][git-img]][git-url]
 
 [PostCSS Focus Within] lets you use the `:focus-within` pseudo-class in CSS,
@@ -30,128 +30,40 @@ It is the companion to the [focus-within polyfill].
 with a `[focus-within]` attribute selector, the same selector used by the
 [focus-within polyfill]. This replacement selector can be changed using the
 `replaceWith` option. Also, the preservation of the original `:focus-within`
-rule can be disabled using the `preserve` option. 
+rule can be disabled using the `preserve` option.
 
 ## Usage
 
-Add [PostCSS Focus Within] to your build tool:
+Add [PostCSS Focus Within] to your project:
 
 ```bash
 npm install postcss-focus-within --save-dev
 ```
 
-#### Node
-
 Use [PostCSS Focus Within] to process your CSS:
 
 ```js
-import focusWithin from 'postcss-focus-within';
-
-focusWithin.process(YOUR_CSS);
-```
-
-#### PostCSS
-
-Add [PostCSS] to your build tool:
+const postcssFocusWithin = require('postcss-focus-within');
 
-```bash
-npm install postcss --save-dev
+postcssFocusWithin.process(YOUR_CSS /*, processOptions, pluginOptions */);
 ```
 
-Use [PostCSS Focus Within] as a plugin:
+Or use it as a [PostCSS] plugin:
 
 ```js
-import postcss from 'gulp-postcss';
-import focusWithin from 'postcss-focus-within';
+const postcss = require('postcss');
+const postcssFocusWithin = require('postcss-focus-within');
 
 postcss([
-  focusWithin()
-]).process(YOUR_CSS);
-```
-
-#### Webpack
-
-Add [PostCSS Loader] to your build tool:
-
-```bash
-npm install postcss-loader --save-dev
-```
-
-Use [PostCSS Focus Within] in your Gulpfile:
-
-```js
-import focusWithin from 'postcss-focus-within';
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          { loader: 'css-loader', options: { importLoaders: 1 } },
-          { loader: 'postcss-loader', options: {
-            ident: 'postcss',
-            plugins: () => [ focusWithin() ]
-          } }
-        ]
-      }
-    ]
-  }
-}
-```
-
-#### Gulp
-
-Add [Gulp PostCSS] to your build tool:
-
-```bash
-npm install gulp-postcss --save-dev
-```
-
-Use [PostCSS Focus Within] in your Gulpfile:
-
-```js
-import postcss from 'gulp-postcss';
-import focusWithin from 'postcss-focus-within';
-
-gulp.task('css', () => gulp.src('./src/*.css').pipe(
-  postcss([
-    focusWithin()
-  ])
-).pipe(
-  gulp.dest('.')
-));
-```
-
-#### Grunt
-
-Add [Grunt PostCSS] to your build tool:
-
-```bash
-npm install grunt-postcss --save-dev
+  postcssFocusWithin(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
 ```
 
-Use [PostCSS Focus Within] in your Gruntfile:
+[PostCSS Focus Within] runs in all Node environments, with special
+instructions for:
 
-```js
-import focusWithin from 'postcss-focus-within';
-
-grunt.loadNpmTasks('grunt-postcss');
-
-grunt.initConfig({
-  postcss: {
-    options: {
-      use: [
-       focusWithin()
-      ]
-    },
-    dist: {
-      src: '*.css'
-    }
-  }
-});
-```
+| [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) |
+| --- | --- | --- | --- | --- | --- |
 
 ## Options
 
@@ -201,14 +113,14 @@ focusWithin({ replaceWith: '.focus-within' });
 }
 ```
 
-[npm-url]: https://www.npmjs.com/package/postcss-focus-within
-[npm-img]: https://img.shields.io/npm/v/postcss-focus-within.svg
-[cli-url]: https://travis-ci.org/jonathantneal/postcss-focus-within
+[css-img]: https://cssdb.org/badge/focus-within-pseudo-class.svg
+[css-url]: https://cssdb.org/#focus-within-pseudo-class
 [cli-img]: https://img.shields.io/travis/jonathantneal/postcss-focus-within.svg
-[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-focus-within
-[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-focus-within.svg
-[git-url]: https://gitter.im/postcss/postcss
+[cli-url]: https://travis-ci.org/jonathantneal/postcss-focus-within
 [git-img]: https://img.shields.io/badge/support-chat-blue.svg
+[git-url]: https://gitter.im/postcss/postcss
+[npm-img]: https://img.shields.io/npm/v/postcss-focus-within.svg
+[npm-url]: https://www.npmjs.com/package/postcss-focus-within
 
 [focus-within polyfill]: https://github.com/jonathantneal/focus-within
 [Gulp PostCSS]: https://github.com/postcss/gulp-postcss

package/index.cjs.js

@@ -4,27 +4,27 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var postcss = _interopDefault(require('postcss'));
 
-var selectorRegExp = /:focus-within([^\w-]|$)/gi;
-
-var index = postcss.plugin('postcss-focus-within', function (opts) {
-	var replaceWith = String(Object(opts).replaceWith || '[focus-within]');
-	var preserve = Boolean('preserve' in Object(opts) ? opts.preserve : true);
-
-	return function (root) {
-		root.walkRules(selectorRegExp, function (rule) {
-			var selector = rule.selector.replace(selectorRegExp, function ($0, $1) {
-				return `${replaceWith}${$1}`;
-			});
-
-			var clone = rule.clone({ selector });
-
-			if (preserve) {
-				rule.before(clone);
-			} else {
-				rule.replaceWith(clone);
-			}
-		});
-	};
+const selectorRegExp = /:focus-within([^\w-]|$)/gi;
+var index = postcss.plugin('postcss-focus-within', opts => {
+  const replaceWith = String(Object(opts).replaceWith || '[focus-within]');
+  const preserve = Boolean('preserve' in Object(opts) ? opts.preserve : true);
+  return root => {
+    root.walkRules(selectorRegExp, rule => {
+      const selector = rule.selector.replace(selectorRegExp, ($0, $1) => {
+        return `${replaceWith}${$1}`;
+      });
+      const clone = rule.clone({
+        selector
+      });
+
+      if (preserve) {
+        rule.before(clone);
+      } else {
+        rule.replaceWith(clone);
+      }
+    });
+  };
 });
 
 module.exports = index;
+//# sourceMappingURL=index.cjs.js.map

package/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["index.js"],"sourcesContent":["import postcss from 'postcss';\n\nconst selectorRegExp = /:focus-within([^\\w-]|$)/gi;\n\nexport default postcss.plugin('postcss-focus-within', opts => {\n\tconst replaceWith = String(Object(opts).replaceWith || '[focus-within]');\n\tconst preserve = Boolean('preserve' in Object(opts) ? opts.preserve : true);\n\n\treturn root => {\n\t\troot.walkRules(selectorRegExp, rule => {\n\t\t\tconst selector = rule.selector.replace(selectorRegExp, ($0, $1) => {\n\t\t\t\treturn `${replaceWith}${$1}`;\n\t\t\t});\n\n\t\t\tconst clone = rule.clone({ selector });\n\n\t\t\tif (preserve) {\n\t\t\t\trule.before(clone);\n\t\t\t} else {\n\t\t\t\trule.replaceWith(clone);\n\t\t\t}\n\t\t});\n\t};\n});\n"],"names":["selectorRegExp","postcss","plugin","opts","replaceWith","String","Object","preserve","Boolean","root","walkRules","rule","selector","replace","$0","$1","clone","before"],"mappings":";;;;;;AAEA,MAAMA,cAAc,GAAG,2BAAvB;AAEA,YAAeC,OAAO,CAACC,MAAR,CAAe,sBAAf,EAAuCC,IAAI,IAAI;QACvDC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAACH,IAAD,CAAN,CAAaC,WAAb,IAA4B,gBAA7B,CAA1B;QACMG,QAAQ,GAAGC,OAAO,CAAC,cAAcF,MAAM,CAACH,IAAD,CAApB,GAA6BA,IAAI,CAACI,QAAlC,GAA6C,IAA9C,CAAxB;SAEOE,IAAI,IAAI;IACdA,IAAI,CAACC,SAAL,CAAeV,cAAf,EAA+BW,IAAI,IAAI;YAChCC,QAAQ,GAAGD,IAAI,CAACC,QAAL,CAAcC,OAAd,CAAsBb,cAAtB,EAAsC,CAACc,EAAD,EAAKC,EAAL,KAAY;eAC1D,GAAEX,WAAY,GAAEW,EAAG,EAA3B;OADgB,CAAjB;YAIMC,KAAK,GAAGL,IAAI,CAACK,KAAL,CAAW;QAAEJ;OAAb,CAAd;;UAEIL,QAAJ,EAAc;QACbI,IAAI,CAACM,MAAL,CAAYD,KAAZ;OADD,MAEO;QACNL,IAAI,CAACP,WAAL,CAAiBY,KAAjB;;KAVF;GADD;CAJc,CAAf;;;;"}

package/index.es.mjs

@@ -0,0 +1,26 @@
+import postcss from 'postcss';
+
+const selectorRegExp = /:focus-within([^\w-]|$)/gi;
+var index = postcss.plugin('postcss-focus-within', opts => {
+  const replaceWith = String(Object(opts).replaceWith || '[focus-within]');
+  const preserve = Boolean('preserve' in Object(opts) ? opts.preserve : true);
+  return root => {
+    root.walkRules(selectorRegExp, rule => {
+      const selector = rule.selector.replace(selectorRegExp, ($0, $1) => {
+        return `${replaceWith}${$1}`;
+      });
+      const clone = rule.clone({
+        selector
+      });
+
+      if (preserve) {
+        rule.before(clone);
+      } else {
+        rule.replaceWith(clone);
+      }
+    });
+  };
+});
+
+export default index;
+//# sourceMappingURL=index.es.mjs.map

package/index.es.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.mjs","sources":["index.js"],"sourcesContent":["import postcss from 'postcss';\n\nconst selectorRegExp = /:focus-within([^\\w-]|$)/gi;\n\nexport default postcss.plugin('postcss-focus-within', opts => {\n\tconst replaceWith = String(Object(opts).replaceWith || '[focus-within]');\n\tconst preserve = Boolean('preserve' in Object(opts) ? opts.preserve : true);\n\n\treturn root => {\n\t\troot.walkRules(selectorRegExp, rule => {\n\t\t\tconst selector = rule.selector.replace(selectorRegExp, ($0, $1) => {\n\t\t\t\treturn `${replaceWith}${$1}`;\n\t\t\t});\n\n\t\t\tconst clone = rule.clone({ selector });\n\n\t\t\tif (preserve) {\n\t\t\t\trule.before(clone);\n\t\t\t} else {\n\t\t\t\trule.replaceWith(clone);\n\t\t\t}\n\t\t});\n\t};\n});\n"],"names":["selectorRegExp","postcss","plugin","opts","replaceWith","String","Object","preserve","Boolean","root","walkRules","rule","selector","replace","$0","$1","clone","before"],"mappings":";;AAEA,MAAMA,cAAc,GAAG,2BAAvB;AAEA,YAAeC,OAAO,CAACC,MAAR,CAAe,sBAAf,EAAuCC,IAAI,IAAI;QACvDC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAACH,IAAD,CAAN,CAAaC,WAAb,IAA4B,gBAA7B,CAA1B;QACMG,QAAQ,GAAGC,OAAO,CAAC,cAAcF,MAAM,CAACH,IAAD,CAApB,GAA6BA,IAAI,CAACI,QAAlC,GAA6C,IAA9C,CAAxB;SAEOE,IAAI,IAAI;IACdA,IAAI,CAACC,SAAL,CAAeV,cAAf,EAA+BW,IAAI,IAAI;YAChCC,QAAQ,GAAGD,IAAI,CAACC,QAAL,CAAcC,OAAd,CAAsBb,cAAtB,EAAsC,CAACc,EAAD,EAAKC,EAAL,KAAY;eAC1D,GAAEX,WAAY,GAAEW,EAAG,EAA3B;OADgB,CAAjB;YAIMC,KAAK,GAAGL,IAAI,CAACK,KAAL,CAAW;QAAEJ;OAAb,CAAd;;UAEIL,QAAJ,EAAc;QACbI,IAAI,CAACM,MAAL,CAAYD,KAAZ;OADD,MAEO;QACNL,IAAI,CAACP,WAAL,CAAiBY,KAAjB;;KAVF;GADD;CAJc,CAAf;;;;"}

package/package.json

@@ -1,17 +1,19 @@
 {
   "name": "postcss-focus-within",
-  "version": "2.0.0",
-  "description": "Ise the :focus-within pseudo-selector in CSS",
+  "version": "3.0.0",
+  "description": "Use the :focus-within pseudo-selector in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "license": "CC0-1.0",
   "repository": "jonathantneal/postcss-focus-within",
   "homepage": "https://github.com/jonathantneal/postcss-focus-within#readme",
   "bugs": "https://github.com/jonathantneal/postcss-focus-within/issues",
   "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"
   ],
   "scripts": {
     "prepublishOnly": "npm test",
@@ -21,21 +23,21 @@
     "test:tape": "postcss-tape"
   },
   "engines": {
-    "node": ">=4.0.0"
+    "node": ">=6.0.0"
   },
   "dependencies": {
-    "postcss": "^6.0.21"
+    "postcss": "^7.0.2"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.2",
-    "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.57.1",
-    "rollup-plugin-babel": "^3.0.3"
+    "rollup": "^0.66.0",
+    "rollup-plugin-babel": "^4.0.1"
   },
   "eslintConfig": {
     "extends": "dev",

package/index.es.js

@@ -1,26 +0,0 @@
-import postcss from 'postcss';
-
-var selectorRegExp = /:focus-within([^\w-]|$)/gi;
-
-var index = postcss.plugin('postcss-focus-within', function (opts) {
-	var replaceWith = String(Object(opts).replaceWith || '[focus-within]');
-	var preserve = Boolean('preserve' in Object(opts) ? opts.preserve : true);
-
-	return function (root) {
-		root.walkRules(selectorRegExp, function (rule) {
-			var selector = rule.selector.replace(selectorRegExp, function ($0, $1) {
-				return `${replaceWith}${$1}`;
-			});
-
-			var clone = rule.clone({ selector });
-
-			if (preserve) {
-				rule.before(clone);
-			} else {
-				rule.replaceWith(clone);
-			}
-		});
-	};
-});
-
-export default index;