postcss-dir-pseudo-class
Advanced tools
Comparing version 2.0.0 to 2.1.0
# 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 @@ |
@@ -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 @@ |
{ | ||
"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 <jonathantneal@hotmail.com>", | ||
"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 @@ }, |
@@ -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 |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
17154
229
Updatedbrowserslist@^2.4.0
Updatedpostcss@^6.0.11