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

Comparing version 2.0.0 to 2.1.0

CHANGELOG.md

 # Changes to PostCSS :dir()
 
+### 2.1.0 (September 19, 2017)
+
+- Fixed: Enforcement of presumed direction, e.g. `html:dir([dir="rtl"])`
+- Updated: Browserslist and PostCSS
+- Improved: How options are safely called, i.e. `Object(opts)`
+
 ### 2.0.0 (July 24, 2017)
@@ -4,0 +10,0 @@

index.js

@@ -9,3 +9,3 @@ // tooling
 	// client browser list
-	const clientBrowserList = browserslist(opts && opts.browsers, {
+	const clientBrowserList = browserslist(Object(opts).browsers, {
 		path: root.source && root.source.input && root.source.input.file
@@ -67,4 +67,4 @@ });
 
-						// whether that value matches the presumed direction
-						const isdir = opts && Object(opts).dir === value;
+						// whether :dir matches the presumed direction
+						const isdir = Object(opts).dir === value;
 
@@ -80,3 +80,3 @@ // [dir] attribute
 						const notDirAttr = selectorParser.pseudo({
-							value: ':not'
+							value: `${firstIsHtml || firstIsRoot ? '' : 'html'}:not`
 						});
@@ -83,0 +83,0 @@

package.json

 {
   "name": "postcss-dir-pseudo-class",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Use the :dir pseudo-class in CSS",
@@ -25,10 +25,10 @@ "author": "Jonathan Neal <[e-mail]>",
   "dependencies": {
-    "browserslist": "^2.2.2",
-    "postcss": "^6.0.8",
+    "browserslist": "^2.4.0",
+    "postcss": "^6.0.11",
     "postcss-selector-parser": "^2.2.3"
   },
   "devDependencies": {
-    "eslint": "^4.3.0",
+    "eslint": "^4.7.1",
     "eslint-config-dev": "2.0.0",
-    "postcss-tape": "2.0.1",
+    "postcss-tape": "2.1.0",
     "pre-commit": "^1.2.2"
@@ -35,0 +35,0 @@ },

README.md

@@ -1,16 +0,18 @@
-# PostCSS :dir() [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
+# PostCSS :dir() Pseudo [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
+[![CSS Standard Status][css-img]][css-url]
 [![NPM Version][npm-img]][npm-url]
-[![Linux Build Status][cli-img]][cli-url]
-[![Windows Build Status][win-img]][win-url]
+[![Build Status][cli-img]][cli-url]
+[![Licensing][lic-img]][lic-url]
 [![Gitter Chat][git-img]][git-url]
 
-[PostCSS :dir()] lets you use the `:dir` pseudo-class in CSS.
+[PostCSS :dir() Pseudo] lets you use the `:dir()` pseudo-class to style by
+directionality in CSS, following the [Selectors] specification.
 
 ```css
-.example:dir(rtl) {
+article h3:dir(rtl) {
   margin-right: 10px;
 }
 
-.example:dir(ltr) {
+article h3:dir(ltr) {
   margin-left: 10px;
@@ -21,7 +23,7 @@ }
 
-[dir="rtl"] .example {
+[dir="rtl"] article h3 {
   margin-right: 10px;
 }
 
-[dir="ltr"] .example {
+[dir="ltr"] article h3 {
   margin-left: 10px;
@@ -31,10 +33,14 @@ }
 
-If your [browserslist] already supports the `:dir` pseudo-class, this plugin
-will not change your CSS. You can learn more this by reading about the
-[`browsers` option](#browsers-option).
+### Future-proof your CSS
 
-[PostCSS :dir()] does not change selector weight, but does require at least one
-`[dir]` attribute in your HTML. If you don’t have _any_ `[dir]` attributes,
-consider using the following JavaScript:
+If your [browserslist] already supports the `:dir()` pseudo-class, this plugin
+will not change your CSS. Learn more about this feature in the
+[`browsers`](#browsers-option) section.
 
+### Maintain Specificity
+
+Using [PostCSS :dir() Pseudo] will not impact selector weight, but it will
+require having at least one `[dir]` attribute in your HTML. If you don’t have
+_any_ `[dir]` attributes, consider using the following JavaScript:
+
 ```js
@@ -45,10 +51,10 @@ // force at least one dir attribute (this can run at any time)
 
-If you absolutely cannot add a `[dir]` attribute in your HTML or force one via
-JavaScript, you can still get around this by presuming a direction in your CSS
-using the [`dir` option](#dir-option), but know that this will increase
-selector weight by one element (`html`).
+If you absolutely cannot add a `[dir]` attribute in your HTML or even force one
+via JavaScript, you can still work around this by presuming a direction in your
+CSS using the [`dir` option](#dir-option), but understand that this will
+sometimes increase selector weight by one element (`html`).
 
 ## Usage
 
-Add [PostCSS :dir()] to your build tool:
+Add [PostCSS :dir() Pseudo] to your build tool:
 
@@ -61,6 +67,6 @@ ```bash
 
-Use [PostCSS :dir()] to process your CSS:
+Use [PostCSS :dir() Pseudo] to process your CSS:
 
 ```js
-require('postcss-dir-pseudo-class').process(YOUR_CSS);
+require('postcss-dir-pseudo-class').process(YOUR_CSS /*, processConfig, options */);
 ```
@@ -76,7 +82,7 @@
 
-Use [PostCSS :dir()] as a plugin:
+Use [PostCSS :dir() Pseudo] as a plugin:
 
 ```js
 postcss([
-  require('postcss-dir-pseudo-class')()
+  require('postcss-dir-pseudo-class')(/* Options */)
 ]).process(YOUR_CSS);
@@ -93,3 +99,3 @@ ```
 
-Use [PostCSS :dir()] in your Gulpfile:
+Use [PostCSS :dir() Pseudo] in your Gulpfile:
 
@@ -102,3 +108,3 @@ ```js
     postcss([
-      require('postcss-dir-pseudo-class')()
+      require('postcss-dir-pseudo-class')(/* Options */)
     ])
@@ -119,3 +125,3 @@ ).pipe(
 
-Use [PostCSS :dir()] in your Gruntfile:
+Use [PostCSS :dir() Pseudo] in your Gruntfile:
 
@@ -129,3 +135,3 @@ ```js
       use: [
-        require('postcss-dir-pseudo-class')()
+        require('postcss-dir-pseudo-class')(/* Options */)
       ]
@@ -142,3 +148,3 @@ },
 
-## browsers option
+## Browsers Option
 
@@ -181,5 +187,5 @@ If your [browserslist] already supports the `:dir` pseudo-class, this plugin
 
-## dir option
+## Dir Option
 
-By default, this plugin requires you to specify a direction `[dir]` attribute
+By default, this plugin requires you to include a direction `[dir]` attribute
 in your HTML, preferably on the `html` element. If you prefer not to, you
@@ -208,3 +214,3 @@ can presume a direction in your CSS using the `dir` option.
 
-:not([dir="rtl"]) .example {
+html:not([dir="rtl"]) .example {
   margin-left: 10px;
@@ -218,18 +224,18 @@ }
 
-*Note: The `:root` pseudo-class is added here to preserve the weight of the
-original selector.*
-
-[npm-url]: https://www.npmjs.com/package/postcss-dir-pseudo-class
-[npm-img]: https://img.shields.io/npm/v/postcss-dir-pseudo-class.svg
 [cli-url]: https://travis-ci.org/jonathantneal/postcss-dir-pseudo-class
 [cli-img]: https://img.shields.io/travis/jonathantneal/postcss-dir-pseudo-class.svg
-[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-dir-pseudo-class
-[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-dir-pseudo-class.svg
+[css-img]: https://jonathantneal.github.io/css-db/badge/selectors-the-dir-pseudo.svg
+[css-url]: https://jonathantneal.github.io/css-db/#selectors-the-dir-pseudo
 [git-url]: https://gitter.im/postcss/postcss
 [git-img]: https://img.shields.io/badge/chat-gitter-blue.svg
+[lic-url]: LICENSE.md
+[lic-img]: https://img.shields.io/npm/l/postcss-dir-pseudo-class.svg
+[npm-url]: https://www.npmjs.com/package/postcss-dir-pseudo-class
+[npm-img]: https://img.shields.io/npm/v/postcss-dir-pseudo-class.svg
 
-[PostCSS :dir()]: https://github.com/jonathantneal/postcss-dir-pseudo-class
-[PostCSS]: https://github.com/postcss/postcss
+[browserslist]: https://github.com/ai/browserslist
 [Gulp PostCSS]: https://github.com/postcss/gulp-postcss
 [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
-[browserslist]: https://github.com/ai/browserslist
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS :dir() Pseudo]: https://github.com/jonathantneal/postcss-dir-pseudo-class
+[Selectors]: https://drafts.csswg.org/selectors-4/#the-dir-pseudo

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

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

17154

increased by3.69%

Number of lines in readme file

229

increased by2.69%

Dependency changes

• Updatedbrowserslist@^2.4.0

• Updatedpostcss@^6.0.11