postcss-focus-within 1.0.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changes to PostCSS Focus Within
 
+### 2.0.0 (April 7, 2018)
+
+- Changed: default functionality to preserve the original rule
+- Added: `preserve` option to preserve the original rule using `:focus-within`
+
 ### 1.0.0 (February 17, 2018)
 
 - Initial version

package/README.md

@@ -5,8 +5,10 @@
 [![Windows Build Status][win-img]][win-url]
 [![Gitter Chat][git-img]][git-url]
 
-[PostCSS Focus Within] lets you use the `:focus-within` pseudo-selector in
-CSS, following the [Selectors Level 4 specification].
+[PostCSS Focus Within] lets you use the `:focus-within` pseudo-class in CSS,
+following the [Selectors Level 4 specification].
+
+It is the companion to the [focus-within polyfill].
 
 ```css
 .my-form-field:focus-within label {
@@ -18,12 +20,17 @@ CSS, following the [Selectors Level 4 specification].
 .my-form-field[focus-within] label {
   background-color: yellow;
 }
+
+.my-form-field:focus-within label {
+  background-color: yellow;
+}
 ```
 
-[PostCSS Focus Within] replaces the `:focus-within` pseudo-selector with a
-`.focus-within` class selector, the same selector used by the
-[focus-within polyfill]. The replacement selector can be changed using the
-`replaceWith` option.
+[PostCSS Focus Within] duplicates rules using the `:focus-within` pseudo-class
+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. 
 
 ## Usage
 
@@ -148,6 +155,27 @@ grunt.initConfig({
 
 ## Options
 
+### preserve
+
+The `preserve` option defines whether the original selector should remain. By
+default, the original selector is preserved.
+
+```js
+focusWithin({ preserve: false });
+```
+
+```css
+.my-form-field:focus-within label {
+  background-color: yellow;
+}
+
+/* becomes */
+
+.my-form-field[focus-within] label {
+  background-color: yellow;
+}
+```
+
 ### replaceWith
 
 The `replaceWith` option defines the selector to replace `:focus-within`. By
@@ -158,14 +186,18 @@ focusWithin({ replaceWith: '.focus-within' });
 ```
 
 ```css
-:focus:not(:focus-within) {
-  outline: none;
+.my-form-field:focus-within label {
+  background-color: yellow;
 }
 
 /* becomes */
 
-:focus:not(.focus-within]) {
-  outline: none;
+.my-form-field.focus-within label {
+  background-color: yellow;
+}
+
+.my-form-field:focus-within label {
+  background-color: yellow;
 }
 ```
 
@@ -176,7 +208,7 @@ focusWithin({ replaceWith: '.focus-within' });
 [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
-[git-img]: https://img.shields.io/badge/chat-gitter-blue.svg
+[git-img]: https://img.shields.io/badge/support-chat-blue.svg
 
 [focus-within polyfill]: https://github.com/jonathantneal/focus-within
 [Gulp PostCSS]: https://github.com/postcss/gulp-postcss
@@ -184,3 +216,4 @@ focusWithin({ replaceWith: '.focus-within' });
 [PostCSS]: https://github.com/postcss/postcss
 [PostCSS Focus Within]: https://github.com/jonathantneal/postcss-focus-within
 [PostCSS Loader]: https://github.com/postcss/postcss-loader
+[Selectors Level 4 specification]: https://www.w3.org/TR/selectors-4/#the-focus-within-pseudo

package/{index.bundle.js → index.cjs.js}

@@ -8,12 +8,21 @@ 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) {
-			rule.selector = rule.selector.replace(selectorRegExp, function ($0, $1) {
+			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);
+			}
 		});
 	};
 });

package/index.es.js

@@ -0,0 +1,26 @@
+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;

package/package.json

@@ -1,23 +1,22 @@
 {
   "name": "postcss-focus-within",
-  "version": "1.0.0",
-  "description": "",
+  "version": "2.0.0",
+  "description": "Ise 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.bundle.js",
-  "module": "index.js",
+  "main": "index.cjs.js",
+  "module": "index.es.js",
   "files": [
-    "index.js",
-    "index.bundle.js"
+    "index.cjs.js",
+    "index.es.js"
   ],
   "scripts": {
     "prepublishOnly": "npm test",
     "pretest": "rollup -c .rollup.js --silent",
-    "test": "echo 'Running tests...'; npm run test:ec && npm run test:js && npm run test:tape",
-    "test:ec": "echint --ignore index.bundle.js test",
+    "test": "echo 'Running tests...'; npm run test:js && npm run test:tape",
     "test:js": "eslint *.js --cache --ignore-path .gitignore --quiet",
     "test:tape": "postcss-tape"
   },
@@ -25,19 +24,18 @@
     "node": ">=4.0.0"
   },
   "dependencies": {
-    "postcss": "^6.0"
+    "postcss": "^6.0.21"
   },
   "devDependencies": {
-    "babel-core": "^6.26",
-    "babel-eslint": "^8.2",
-    "babel-preset-env": "^1.6",
-    "echint": "^4.0",
-    "eslint": "^4.18",
-    "eslint-config-dev": "2.0",
-    "postcss-tape": "2.2",
-    "pre-commit": "^1.2",
-    "rollup": "^0.56",
-    "rollup-plugin-babel": "^3.0"
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.2",
+    "babel-preset-env": "^1.6.1",
+    "eslint": "^4.19.1",
+    "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"
   },
   "eslintConfig": {
     "extends": "dev",

package/index.js

@@ -1,15 +0,0 @@
-import postcss from 'postcss';
-
-const selectorRegExp = /:focus-within([^\w-]|$)/gi;
-
-export default postcss.plugin('postcss-focus-within', opts => {
-	const replaceWith = String(Object(opts).replaceWith || '[focus-within]');
-
-	return root => {
-		root.walkRules(selectorRegExp, rule => {
-			rule.selector = rule.selector.replace(selectorRegExp, ($0, $1) => {
-				return `${replaceWith}${$1}`;
-			});
-		});
-	};
-});