postcss-dir-pseudo-class
Advanced tools
Comparing version 4.0.0 to 5.0.0
# Changes to PostCSS Dir Pseudo Class | ||
### 5.0.0 (September 17, 2018) | ||
- Updated: Support for PostCSS v7+ | ||
- Updated: Support for Node v6+ | ||
- Updated: `postcss-selector-parser` to v5.0.0-rc.3+ (major) | ||
### 4.0.0 (May 8, 2018) | ||
@@ -4,0 +10,0 @@ |
157
index.cjs.js
@@ -8,99 +8,92 @@ 'use strict'; | ||
var index = postcss.plugin('postcss-dir-pseudo-class', function (opts) { | ||
var dir = Object(opts).dir; | ||
var preserve = Boolean(Object(opts).preserve); | ||
var index = postcss.plugin('postcss-dir-pseudo-class', opts => { | ||
const dir = Object(opts).dir; | ||
const preserve = Boolean(Object(opts).preserve); | ||
return root => { | ||
// walk rules using the :dir pseudo-class | ||
root.walkRules(/:dir\([^\)]*\)/, rule => { | ||
let currentRule = rule; // conditionally preserve the original rule | ||
return function (root) { | ||
// walk rules using the :dir pseudo-class | ||
root.walkRules(/:dir\([^\)]*\)/, function (rule) { | ||
var currentRule = rule; | ||
if (preserve) { | ||
currentRule = rule.cloneBefore(); | ||
} // update the rule selector | ||
// conditionally preserve the original rule | ||
if (preserve) { | ||
currentRule = rule.cloneBefore(); | ||
} | ||
// update the rule selector | ||
currentRule.selector = selectorParser(function (selectors) { | ||
// for each (comma separated) selector | ||
selectors.nodes.forEach(function (selector) { | ||
// walk all selector nodes that are :dir pseudo-classes | ||
selector.walk(function (node) { | ||
if ('pseudo' === node.type && ':dir' === node.value) { | ||
// previous and next selector nodes | ||
var prev = node.prev(); | ||
var next = node.next(); | ||
currentRule.selector = selectorParser(selectors => { | ||
// for each (comma separated) selector | ||
selectors.nodes.forEach(selector => { | ||
// walk all selector nodes that are :dir pseudo-classes | ||
selector.walk(node => { | ||
if ('pseudo' === node.type && ':dir' === node.value) { | ||
// previous and next selector nodes | ||
const prev = node.prev(); | ||
const next = node.next(); | ||
const prevIsSpaceCombinator = prev && prev.type && 'combinator' === prev.type && ' ' === prev.value; | ||
const nextIsSpaceCombinator = next && next.type && 'combinator' === next.type && ' ' === next.value; // preserve the selector tree | ||
var prevIsSpaceCombinator = prev && prev.type && 'combinator' === prev.type && ' ' === prev.value; | ||
var nextIsSpaceCombinator = next && next.type && 'combinator' === next.type && ' ' === next.value; | ||
if (prevIsSpaceCombinator && (nextIsSpaceCombinator || !next)) { | ||
node.replaceWith(selectorParser.universal()); | ||
} else { | ||
node.remove(); | ||
} // conditionally prepend a combinator before inserting the [dir] attribute | ||
// preserve the selector tree | ||
if (prevIsSpaceCombinator && (nextIsSpaceCombinator || !next)) { | ||
node.replaceWith(selectorParser.universal()); | ||
} else { | ||
node.remove(); | ||
} | ||
// conditionally prepend a combinator before inserting the [dir] attribute | ||
var first = selector.nodes[0]; | ||
var firstIsSpaceCombinator = first && 'combinator' === first.type && ' ' === first.value; | ||
var firstIsHtml = first && 'tag' === first.type && 'html' === first.value; | ||
var firstIsRoot = first && 'pseudo' === first.type && ':root' === first.value; | ||
const first = selector.nodes[0]; | ||
const firstIsSpaceCombinator = first && 'combinator' === first.type && ' ' === first.value; | ||
const firstIsHtml = first && 'tag' === first.type && 'html' === first.value; | ||
const firstIsRoot = first && 'pseudo' === first.type && ':root' === first.value; | ||
if (first && !firstIsHtml && !firstIsRoot && !firstIsSpaceCombinator) { | ||
selector.prepend(selectorParser.combinator({ | ||
value: ' ' | ||
})); | ||
} | ||
if (first && !firstIsHtml && !firstIsRoot && !firstIsSpaceCombinator) { | ||
selector.prepend(selectorParser.combinator({ | ||
value: ' ' | ||
})); | ||
} // value of the :dir pseudo-class | ||
// value of the :dir pseudo-class | ||
var value = node.nodes.toString(); | ||
// whether :dir matches the presumed direction | ||
var isdir = dir === value; | ||
const value = node.nodes.toString(); // whether :dir matches the presumed direction | ||
// [dir] attribute | ||
var dirAttr = selectorParser.attribute({ | ||
attribute: 'dir', | ||
operator: '=', | ||
quoteMark: '"', | ||
value: `"${value}"` | ||
}); | ||
const isdir = dir === value; // [dir] attribute | ||
// not[dir] attribute | ||
var notDirAttr = selectorParser.pseudo({ | ||
value: `${firstIsHtml || firstIsRoot ? '' : 'html'}:not` | ||
}); | ||
const dirAttr = selectorParser.attribute({ | ||
attribute: 'dir', | ||
operator: '=', | ||
quoteMark: '"', | ||
value: `"${value}"` | ||
}); // not[dir] attribute | ||
notDirAttr.append(selectorParser.attribute({ | ||
attribute: 'dir', | ||
operator: '=', | ||
quoteMark: '"', | ||
value: `"${'ltr' === value ? 'rtl' : 'ltr'}"` | ||
})); | ||
const notDirAttr = selectorParser.pseudo({ | ||
value: `${firstIsHtml || firstIsRoot ? '' : 'html'}:not` | ||
}); | ||
notDirAttr.append(selectorParser.attribute({ | ||
attribute: 'dir', | ||
operator: '=', | ||
quoteMark: '"', | ||
value: `"${'ltr' === value ? 'rtl' : 'ltr'}"` | ||
})); | ||
if (isdir) { | ||
// if the direction is presumed | ||
if (firstIsHtml) { | ||
// insert :root after html tag | ||
selector.insertAfter(first, notDirAttr); | ||
} else { | ||
// prepend :root | ||
selector.prepend(notDirAttr); | ||
} | ||
} else if (firstIsHtml) { | ||
// otherwise, insert dir attribute after html tag | ||
selector.insertAfter(first, dirAttr); | ||
} else { | ||
// otherwise, prepend the dir attribute | ||
selector.prepend(dirAttr); | ||
} | ||
} | ||
}); | ||
}); | ||
}).processSync(currentRule.selector); | ||
}); | ||
}; | ||
if (isdir) { | ||
// if the direction is presumed | ||
if (firstIsHtml) { | ||
// insert :root after html tag | ||
selector.insertAfter(first, notDirAttr); | ||
} else { | ||
// prepend :root | ||
selector.prepend(notDirAttr); | ||
} | ||
} else if (firstIsHtml) { | ||
// otherwise, insert dir attribute after html tag | ||
selector.insertAfter(first, dirAttr); | ||
} else { | ||
// otherwise, prepend the dir attribute | ||
selector.prepend(dirAttr); | ||
} | ||
} | ||
}); | ||
}); | ||
}).processSync(currentRule.selector); | ||
}); | ||
}; | ||
}); | ||
module.exports = index; | ||
//# sourceMappingURL=index.cjs.js.map |
{ | ||
"name": "postcss-dir-pseudo-class", | ||
"version": "4.0.0", | ||
"version": "5.0.0", | ||
"description": "Use the :dir pseudo-class in CSS", | ||
@@ -11,6 +11,8 @@ "author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
"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" | ||
], | ||
@@ -29,15 +31,15 @@ "scripts": { | ||
"dependencies": { | ||
"postcss": "^6.0.22", | ||
"postcss-selector-parser": "^4.0.0" | ||
"postcss": "^7.0.2", | ||
"postcss-selector-parser": "^5.0.0-rc.3" | ||
}, | ||
"devDependencies": { | ||
"babel-core": "^6.26.3", | ||
"babel-eslint": "^8.2.3", | ||
"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.58.2", | ||
"rollup-plugin-babel": "^3.0.4" | ||
"rollup": "^0.66.0", | ||
"rollup-plugin-babel": "^4.0.1" | ||
}, | ||
@@ -44,0 +46,0 @@ "eslintConfig": { |
116
README.md
@@ -6,3 +6,2 @@ # PostCSS Dir Pseudo Class [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss] | ||
[![Build Status][cli-img]][cli-url] | ||
[![Windows Build Status][win-img]][win-url] | ||
[![Support Chat][git-img]][git-url] | ||
@@ -51,3 +50,3 @@ | ||
Add [PostCSS Dir Pseudo Class] to your build tool: | ||
Add [PostCSS Dir Pseudo Class] to your project: | ||
@@ -58,117 +57,26 @@ ```bash | ||
#### Node | ||
Use [PostCSS Dir Pseudo Class] to process your CSS: | ||
```js | ||
import postcssDirPseudoClass from 'postcss-dir-pseudo-class'; | ||
const postcssDirPseudoClass = require('postcss-dir-pseudo-class'); | ||
postcssDirPseudoClass.process(YOUR_CSS, /* processOptions */, /* pluginOptions */); | ||
postcssDirPseudoClass.process(YOUR_CSS /*, processOptions, pluginOptions */); | ||
``` | ||
#### PostCSS | ||
Or use it as a [PostCSS] plugin: | ||
Add [PostCSS] to your build tool: | ||
```bash | ||
npm install postcss --save-dev | ||
``` | ||
Use [PostCSS Dir Pseudo Class] as a plugin: | ||
```js | ||
import postcss from 'gulp-postcss'; | ||
import postcssDirPseudoClass from 'postcss-dir-pseudo-class'; | ||
const postcss = require('postcss'); | ||
const postcssDirPseudoClass = require('postcss-dir-pseudo-class'); | ||
postcss([ | ||
postcssDirPseudoClass(/* pluginOptions */) | ||
]).process(YOUR_CSS); | ||
]).process(YOUR_CSS /*, processOptions */); | ||
``` | ||
#### Webpack | ||
[PostCSS Dir Pseudo Class] runs in all Node environments, with special instructions for: | ||
Add [PostCSS Loader] to your build tool: | ||
| [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) | | ||
| --- | --- | --- | --- | --- | --- | | ||
```bash | ||
npm install postcss-loader --save-dev | ||
``` | ||
Use [PostCSS Dir Pseudo Class] in your Webpack configuration: | ||
```js | ||
import postcssDirPseudoClass from 'postcss-dir-pseudo-class'; | ||
module.exports = { | ||
module: { | ||
rules: [ | ||
{ | ||
test: /\.css$/, | ||
use: [ | ||
'style-loader', | ||
{ loader: 'css-loader', options: { importLoaders: 1 } }, | ||
{ loader: 'postcss-loader', options: { | ||
ident: 'postcss', | ||
plugins: () => [ | ||
postcssDirPseudoClass(/* pluginOptions */) | ||
] | ||
} } | ||
] | ||
} | ||
] | ||
} | ||
} | ||
``` | ||
#### Gulp | ||
Add [Gulp PostCSS] to your build tool: | ||
```bash | ||
npm install gulp-postcss --save-dev | ||
``` | ||
Use [PostCSS Dir Pseudo Class] in your Gulpfile: | ||
```js | ||
import postcss from 'gulp-postcss'; | ||
import postcssDirPseudoClass from 'postcss-dir-pseudo-class'; | ||
gulp.task('css', () => gulp.src('./src/*.css').pipe( | ||
postcss([ | ||
postcssDirPseudoClass(/* pluginOptions */) | ||
]) | ||
).pipe( | ||
gulp.dest('.') | ||
)); | ||
``` | ||
#### Grunt | ||
Add [Grunt PostCSS] to your build tool: | ||
```bash | ||
npm install grunt-postcss --save-dev | ||
``` | ||
Use [PostCSS Dir Pseudo Class] in your Gruntfile: | ||
```js | ||
import postcssDirPseudoClass from 'postcss-dir-pseudo-class'; | ||
grunt.loadNpmTasks('grunt-postcss'); | ||
grunt.initConfig({ | ||
postcss: { | ||
options: { | ||
use: [ | ||
postcssDirPseudoClass(/* pluginOptions */) | ||
] | ||
}, | ||
dist: { | ||
src: '*.css' | ||
} | ||
} | ||
}); | ||
``` | ||
## Options | ||
@@ -248,4 +156,4 @@ | ||
[cli-url]: https://travis-ci.org/jonathantneal/postcss-dir-pseudo-class | ||
[css-img]: https://jonathantneal.github.io/cssdb/badge/dir-pseudo-class.svg | ||
[css-url]: https://jonathantneal.github.io/cssdb/#dir-pseudo-class | ||
[css-img]: https://cssdb.org/badge/dir-pseudo-class.svg | ||
[css-url]: https://cssdb.org/#dir-pseudo-class | ||
[git-img]: https://img.shields.io/badge/support-chat-blue.svg | ||
@@ -252,0 +160,0 @@ [git-url]: https://gitter.im/postcss/postcss |
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
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
35646
8
160
168
1
+ Addedcssesc@2.0.0(transitive)
+ Addedpicocolors@0.2.1(transitive)
+ Addedpostcss@7.0.39(transitive)
+ Addedpostcss-selector-parser@5.0.0(transitive)
- Removedansi-styles@3.2.1(transitive)
- Removedchalk@2.4.2(transitive)
- Removedcolor-convert@1.9.3(transitive)
- Removedcolor-name@1.1.3(transitive)
- Removedcssesc@1.0.1(transitive)
- Removedescape-string-regexp@1.0.5(transitive)
- Removedhas-flag@3.0.0(transitive)
- Removedpostcss@6.0.23(transitive)
- Removedpostcss-selector-parser@4.0.0(transitive)
- Removedsupports-color@5.5.0(transitive)
Updatedpostcss@^7.0.2