postcss-focus-within - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

CHANGELOG.md

 # 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.json

 {
   "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 <[e-mail]>",
@@ -10,7 +10,7 @@ "license": "CC0-1.0",
   "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"
   ],
@@ -20,4 +20,3 @@ "scripts": {
     "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",
@@ -30,15 +29,14 @@ "test:tape": "postcss-tape"
   "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"
   },
@@ -45,0 +43,0 @@ "eslintConfig": {

README.md

@@ -8,5 +8,7 @@ # PostCSS Focus Within [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-[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
@@ -22,8 +24,13 @@ .my-form-field:focus-within label {
 }
+
+.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. 
 
@@ -153,2 +160,23 @@ ## Usage
 
+### 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
@@ -164,4 +192,4 @@
 ```css
-:focus:not(:focus-within) {
-  outline: none;
+.my-form-field:focus-within label {
+  background-color: yellow;
 }
@@ -171,5 +199,9 @@
 
-:focus:not(.focus-within]) {
-  outline: none;
+.my-form-field.focus-within label {
+  background-color: yellow;
 }
+
+.my-form-field:focus-within label {
+  background-color: yellow;
+}
 ```
@@ -184,3 +216,3 @@
 [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
 
@@ -193,1 +225,2 @@ [focus-within polyfill]: https://github.com/jonathantneal/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

No alert changes

Improved metrics

Total package byte prevSize

14736

increased by10.35%

Dev dependency count

9

decreased by-10%

Lines of code

42

increased by55.56%

Number of lines in readme file

220

increased by17.65%

Dependency changes

• Updatedpostcss@^6.0.21