diff --git a/.travis.yml b/.travis.yml index e1f11a5..2ec3eb5 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,7 +3,8 @@ language: node_js node_js: - - 6 + - stable + - "10" install: - npm install --ignore-scripts diff --git a/README.md b/README.md index 9102d52..88037cd 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ From the [proposal]: Add [PostCSS Enter Pseudo Class] to your project: ```bash -npm install postcss-pseudo-class-enter --save-dev +npm install postcss postcss-pseudo-class-enter --save-dev ``` Use [PostCSS Enter Pseudo Class] to process your CSS: diff --git a/package.json b/package.json index 53980c4..9ed2e2d 100644 --- a/package.json +++ b/package.json @@ -23,11 +23,10 @@ "test:tape": "postcss-tape" }, "engines": { - "node": ">=6.0.0" + "node": ">=10" }, "dependencies": { - "postcss": "^7.0.14", - "postcss-selector-parser": "^5.0.0" + "postcss-selector-parser": "^6.0.4" }, "devDependencies": { "@babel/core": "^7.2.2", @@ -35,11 +34,15 @@ "babel-eslint": "^10.0.1", "eslint": "^5.12.1", "eslint-config-dev": "^2.0.0", - "postcss-tape": "^4.0.0", + "postcss": "^8.1.2", + "postcss-tape": "^6.0.0", "pre-commit": "^1.2.2", "rollup": "^1.1.2", "rollup-plugin-babel": "^4.3.2" }, + "peerDependencies": { + "postcss": "^8.1.2" + }, "eslintConfig": { "extends": "dev", "parser": "babel-eslint" diff --git a/src/index.js b/src/index.js index 6ca10f0..0229b95 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,6 @@ -import postcss from 'postcss'; import parser from 'postcss-selector-parser'; -export default postcss.plugin('postcss-pseudo-class-enter', opts => { +const plugin = opts => { // add conditional prefix const pseudoClass = `:${Object(opts).prefix ? `-${opts.prefix}-` : ''}enter`; const pseudoClassRegExp = new RegExp(pseudoClass, 'i'); @@ -9,33 +8,39 @@ export default postcss.plugin('postcss-pseudo-class-enter', opts => { // add outline declaration const shouldUseOutline = Object(opts).outline !== null && Object(opts).outline !== undefined; - return root => { - // transform :enter selectors to :focus and :hover - root.walkRules(pseudoClassRegExp, rule => { - const originalSelector = rule.selector; + return { + postcssPlugin: 'postcss-pseudo-class-enter', + Once: root => { + // transform :enter selectors to :focus and :hover + root.walkRules(pseudoClassRegExp, rule => { + const originalSelector = rule.selector; - const modifiedSelector = parser(selectors => { - transform(selectors, pseudoClass); - }).processSync(originalSelector); + const modifiedSelector = parser(selectors => { + transform(selectors, pseudoClass); + }).processSync(originalSelector); - if (originalSelector !== modifiedSelector) { - rule.selector = modifiedSelector; - } + if (originalSelector !== modifiedSelector) { + rule.selector = modifiedSelector; + } - if (shouldUseOutline) { - // check for an existing outline declaration - const hasOutline = rule.nodes.some(decl => decl.prop === 'outline'); + if (shouldUseOutline) { + // check for an existing outline declaration + const hasOutline = rule.nodes.some(decl => decl.prop === 'outline'); - // if an outline declaration does not exist, prepend it - if (!hasOutline) { - const outlineValue = !opts.outline || opts.outline === true ? 0 : opts.outline; + // if an outline declaration does not exist, prepend it + if (!hasOutline) { + const outlineValue = !opts.outline || opts.outline === true ? 0 : opts.outline; - rule.prepend({ prop: 'outline', value: outlineValue }); + rule.prepend({ prop: 'outline', value: outlineValue }); + } } - } - }); + }); + } }; -}); +} +plugin.postcss = true; + +export default plugin; function transform(selectors, pseudoClass) { selectors.walk(selector => {