{"_id":"postcss-extend-rule","_rev":"322371","name":"postcss-extend-rule","description":"Use the @extend at-rule and functional selectors in CSS","dist-tags":{"latest":"3.0.0"},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"time":{"modified":"2021-06-04T01:28:40.000Z","created":"2017-09-19T15:14:20.085Z","3.0.0":"2019-07-29T13:09:50.483Z","2.0.0":"2018-05-31T04:02:20.360Z","1.1.0":"2017-09-19T15:14:20.085Z"},"users":{},"author":{"name":"Jonathan Neal","email":"jonathantneal@hotmail.com"},"repository":{"type":"git","url":"git+https://github.com/csstools/postcss-extend-rule.git"},"versions":{"3.0.0":{"name":"postcss-extend-rule","version":"3.0.0","description":"Use the @extend at-rule and functional selectors in CSS","author":{"name":"Jonathan Neal","email":"jonathantneal@hotmail.com"},"license":"CC0-1.0","repository":{"type":"git","url":"git+https://github.com/csstools/postcss-extend-rule.git"},"homepage":"https://github.com/csstools/postcss-extend-rule#readme","bugs":{"url":"https://github.com/csstools/postcss-extend-rule/issues"},"main":"index.js","module":"index.mjs","scripts":{"build":"rollup --config .rollup.js --silent","prepublishOnly":"npm test","pretest:tape":"npm run build","test":"npm run test:js && npm run test:tape","test:js":"eslint src/{*,**/*}.js --cache --ignore-path .gitignore --quiet","test:tape":"postcss-tape"},"engines":{"node":">=8.0.0"},"dependencies":{"postcss":"^7.0.17","postcss-nesting":"^7.0.1","postcss-tape":"^5.0.2"},"devDependencies":{"@babel/core":"^7.5.5","@babel/preset-env":"^7.5.5","babel-eslint":"^10.0.2","eslint":"^6.1.0","pre-commit":"^1.2.2","rollup":"^1.17.0","rollup-plugin-babel":"^4.3.3"},"eslintConfig":{"env":{"browser":true,"es6":true,"node":true},"extends":"eslint:recommended","parser":"babel-eslint","parserOptions":{"ecmaVersion":2018,"impliedStrict":true,"sourceType":"module"},"root":true},"keywords":["postcss","css","postcss-plugin","extend","matched","matches","match","selectors","subclassing","subclasses","subclass","styling","styles","style","placeholder","placehold","selectors","selector","chaining"],"gitHead":"2a77465106b4976c888ceeb1df740032f82d41f1","_id":"postcss-extend-rule@3.0.0","_nodeVersion":"12.6.0","_npmVersion":"6.9.0","dist":{"shasum":"d6ee2fb24ab2b3d9b50acce1d055c1c137ab5f44","size":9338,"noattachment":false,"key":"/postcss-extend-rule/-/postcss-extend-rule-3.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/postcss-extend-rule/download/postcss-extend-rule-3.0.0.tgz"},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"_npmUser":{"name":"jonathantneal","email":"jonathantneal@hotmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-extend-rule_3.0.0_1564405790175_0.8500785884657256"},"_hasShrinkwrap":false,"publish_time":1564405790483,"_cnpm_publish_time":1564405790483},"2.0.0":{"name":"postcss-extend-rule","version":"2.0.0","description":"Use the @extend at-rule and functional selectors in CSS","author":{"name":"Jonathan Neal","email":"jonathantneal@hotmail.com"},"license":"CC0-1.0","repository":{"type":"git","url":"git+https://github.com/jonathantneal/postcss-extend-rule.git"},"homepage":"https://github.com/jonathantneal/postcss-extend-rule#readme","bugs":{"url":"https://github.com/jonathantneal/postcss-extend-rule/issues"},"main":"index.cjs.js","module":"index.es.js","files":["index.cjs.js","index.es.js"],"scripts":{"prepublishOnly":"npm test","pretest":"rollup -c .rollup.js --silent","test":"echo 'Running tests...'; npm run test:js && npm run test:tape","test:js":"eslint *.js --cache --ignore-path .gitignore --quiet","test:tape":"postcss-tape"},"engines":{"node":">=4.0.0"},"dependencies":{"postcss":"^6.0.22","postcss-nesting":"^5.0.0"},"devDependencies":{"babel-core":"^6.26.3","babel-eslint":"^8.2.3","babel-preset-env":"^1.7.0","eslint":"^4.19.1","eslint-config-dev":"^2.0.0","postcss-tape":"^2.2.0","pre-commit":"^1.2.2","rollup":"^0.59.4","rollup-plugin-babel":"^3.0.4"},"eslintConfig":{"extends":"dev","parser":"babel-eslint"},"keywords":["postcss","css","postcss-plugin","extend","matched","matches","match","selectors","subclassing","subclasses","subclass","styling","styles","style","placeholder","placehold","selectors","selector","chaining"],"gitHead":"96d2382426c4c7f83da773dc34a32e8da8cd29ad","_id":"postcss-extend-rule@2.0.0","_npmVersion":"6.1.0","_nodeVersion":"10.1.0","_npmUser":{"name":"jonathantneal","email":"jonathantneal@hotmail.com"},"dist":{"shasum":"031fe6f608cf6efd20cb58b11f343b164c18d370","size":6727,"noattachment":false,"key":"/postcss-extend-rule/-/postcss-extend-rule-2.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/postcss-extend-rule/download/postcss-extend-rule-2.0.0.tgz"},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-extend-rule_2.0.0_1527739340265_0.24020858149439772"},"_hasShrinkwrap":false,"publish_time":1527739340360,"_cnpm_publish_time":1527739340360},"1.1.0":{"name":"postcss-extend-rule","version":"1.1.0","description":"Use the @extend at-rule and functional selectors in CSS","author":{"name":"Jonathan Neal","email":"jonathantneal@hotmail.com"},"license":"CC0-1.0","repository":{"type":"git","url":"git+https://github.com/jonathantneal/postcss-extend-rule.git"},"homepage":"https://github.com/jonathantneal/postcss-extend-rule#readme","bugs":{"url":"https://github.com/jonathantneal/postcss-extend-rule/issues"},"main":"index.js","files":["index.js"],"scripts":{"clean":"git clean -X -d -f","prepublish":"npm test","test":"echo 'Running tests...'; npm run test:js && npm run test:tape","test:js":"eslint *.js --cache --ignore-pattern .gitignore","test:tape":"postcss-tape"},"engines":{"node":">=4.0.0"},"dependencies":{"postcss":"^6.0.11","postcss-nesting":"^4.2.1"},"devDependencies":{"eslint":"^4.7.1","eslint-config-dev":"2.0.0","postcss-tape":"2.1.0","pre-commit":"^1.2.2"},"eslintConfig":{"extends":"dev"},"keywords":["postcss","css","postcss-plugin","extend","matched","matches","match","selectors","subclassing","subclasses","subclass","styling","styles","style","placeholder","placehold","selectors","selector","chaining"],"gitHead":"7c3f6b6d640bc4c1be4c17a9707828fbc7627d5f","_id":"postcss-extend-rule@1.1.0","_npmVersion":"5.4.2","_nodeVersion":"8.5.0","_npmUser":{"name":"jonathantneal","email":"jonathantneal@hotmail.com"},"dist":{"shasum":"11e4d590ffe4253b853ef1fc03be7167da607d38","size":5929,"noattachment":false,"key":"/postcss-extend-rule/-/postcss-extend-rule-1.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/postcss-extend-rule/download/postcss-extend-rule-1.1.0.tgz"},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-extend-rule-1.1.0.tgz_1505834059010_0.7325346062425524"},"directories":{},"publish_time":1505834060085,"_hasShrinkwrap":false,"_cnpm_publish_time":1505834060085}},"readme":"# PostCSS Extend Rule [<img src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS\" width=\"90\" height=\"90\" align=\"right\">][postcss]\n\n[![NPM Version][npm-img]][npm-url]\n[![Build Status][cli-img]][cli-url]\n[![Support Chat][git-img]][git-url]\n\n[PostCSS Extend Rule] lets you use the `@extend` at-rule and\n[Functional Selectors] in CSS, following the speculative\n[CSS Extend Rules Specification].\n\n```pcss\n%thick-border {\n  border: thick dotted red;\n}\n\n.serious-modal {\n  font-style: normal;\n  font-weight: bold;\n\n  @media (max-width: 240px) {\n    @extend .modal:hover;\n  }\n}\n\n.modal {\n  @extend %thick-border;\n\n  color: red;\n}\n\n.modal:hover:not(:focus) {\n  outline: none;\n}\n\n/* becomes */\n\n.serious-modal {\n  font-style: normal;\n  font-weight: bold;\n}\n\n@media (max-width: 240px) {\n  .serious-modal:not(:focus) {\n    outline: none;\n  }\n}\n\n.modal {\n  border: thick dotted red;\n  color: red;\n}\n\n.modal:hover:not(:focus) {\n  outline: none;\n}\n```\n\n## Usage\n\nAdd [PostCSS Extend Rule] to your project:\n\n```bash\nnpm install postcss-extend-rule --save-dev\n```\n\nUse **PostCSS Extend Rule** to process your CSS:\n\n```js\nconst postcssExtendRule = require('postcss-extend-rule');\n\npostcssExtendRule.process(YOUR_CSS /*, processOptions, pluginOptions */);\n```\n\nOr use it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssExtendRule = require('postcss-extend-rule');\n\npostcss([\n  postcssExtendRule(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n**PostCSS Extend Rule** runs in all Node environments, with special instructions for:\n\n| [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) |\n| --- | --- | --- | --- | --- | --- |\n\n## Options\n\n### name\n\nThe `name` option determines the at-rule name being used to extend selectors.\nBy default, this name is `extend`, meaning `@extend` rules are parsed.\n\n```js\npostcssExtend({ name: 'postcss-extend' })\n```\n\nIf the `name` option were changed to, say, `postcss-extend`, then only\n`@postcss-extend` at-rules would be parsed.\n\n```pcss\nmain {\n  @postcss-extend .some-rule;\n}\n```\n\n### onFunctionalSelector\n\nThe `onFunctionalSelector` option determines how functional selectors should be\nhandled. Its options are:\n\n- `remove` (default) removes any functional selector\n- `ignore` ignores any functional selector and moves on\n- `warn` warns the user whenever it encounters a functional selector\n- `throw` throws an error if ever it encounters a functional selector\n\n```js\npostcssExtend({ onFunctionalSelector: 'remove' /* default */ })\n```\n\n```pcss\n%this-will-be-removed {}\n```\n\n### onRecursiveExtend\n\nThe `onRecursiveExtend` option determines how recursive extend at-rules should\nbe handled. Its options are:\n\n- `remove` (default) removes any recursive extend at-rules\n- `ignore` ignores any recursive extend at-rules and moves on\n- `warn` warns the user whenever it encounters a recursive extend at-rules\n- `throw` throws an error if ever it encounters a recursive extend at-rules\n\n```js\npostcssExtend({ onRecursiveExtend: 'remove' /* default */ })\n```\n\n```pcss\n.this-will-not-extend-itself {\n  @extend .this-will-not-extend-itself;\n}\n```\n\n### onUnusedExtend\n\nThe `onUnusedExtend` option determines how an unused extend at-rule should be\nhandled. Its options are:\n\n- `remove` (default) removes any unused extend at-rule\n- `ignore` ignores any unused extend at-rule and moves on\n- `warn` warns the user whenever it encounters an unused extend at-rule\n- `throw` throws an error if ever it encounters an unused extend at-rule\n\n```js\npostcssExtend({ onUnusedExtend: 'remove' /* default */ })\n```\n\n```pcss\nmain {\n  @extend .this-selector-does-not-exist-and-will-be-removed;\n}\n```\n\n[cli-img]: https://img.shields.io/travis/csstools/postcss-extend-rule/master.svg\n[cli-url]: https://travis-ci.org/csstools/postcss-extend-rule\n[git-img]: https://img.shields.io/badge/support-chat-blue.svg\n[git-url]: https://gitter.im/postcss/postcss\n[npm-img]: https://img.shields.io/npm/v/postcss-extend-rule.svg\n[npm-url]: https://www.npmjs.com/package/postcss-extend-rule\n\n[CSS Extend Rules Specification]: https://jonathantneal.github.io/specs/css-extend-rule/\n[Functional Selectors]: https://jonathantneal.github.io/specs/css-extend-rule/#functional-selector\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Extend Rule]: https://github.com/csstools/postcss-extend-rule\n","_attachments":{},"homepage":"https://github.com/csstools/postcss-extend-rule#readme","bugs":{"url":"https://github.com/csstools/postcss-extend-rule/issues"},"license":"CC0-1.0"}