diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..e06d798 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_style = tab +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false + +[*.{json,md,yml}] +indent_size = 2 +indent_style = space diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..995098a --- /dev/null +++ b/.gitignore @@ -0,0 +1,10 @@ +node_modules +package-lock.json +.* +!.appveyor.yml +!.editorconfig +!.gitignore +!.tape.js +!.travis.yml +*.log* +*.result.css diff --git a/.tape.js b/.tape.js new file mode 100644 index 0000000..ee74b99 --- /dev/null +++ b/.tape.js @@ -0,0 +1,54 @@ +module.exports = { + 'postcss-extend-rule': { + 'basic': { + message: 'supports basic usage' + }, + 'advanced': { + message: 'supports advanced usage (with postcss-nesting)', + plugin: () => require('postcss')( + require('postcss-nesting'), + require('.') + ) + }, + 'errors': { + message: 'manages error-ridden usage' + }, + 'errors:ignore': { + message: 'manages error-ridden usage with { onFunctionalSelector: "ignore", onRecursiveExtend: "ignore", onUnusedExtend: "ignore" } options', + options: { + onFunctionalSelector: 'ignore', + onRecursiveExtend: 'ignore', + onUnusedExtend: 'ignore' + } + }, + 'errors:warn': { + message: 'manages error-ridden usage with { onFunctionalSelector: "warn", onRecursiveExtend: "warn", onUnusedExtend: "warn" } options', + options: { + onFunctionalSelector: 'warn', + onRecursiveExtend: 'warn', + onUnusedExtend: 'warn' + }, + warning: 6 + }, + 'errors:throw': { + message: 'manages error-ridden usage with { onFunctionalSelector: "throw", onRecursiveExtend: "throw", onUnusedExtend: "throw" } options', + options: { + onFunctionalSelector: 'throw', + onRecursiveExtend: 'throw', + onUnusedExtend: 'throw' + }, + error: { + reason: 'Unused extend at-rule "some-non-existent-selector"' + } + }, + 'errors:throw-on-functional-selectors': { + message: 'manages error-ridden usage with { onFunctionalSelector: "throw" } options', + options: { + onFunctionalSelector: 'throw' + }, + error: { + reason: 'Encountered functional selector "%test-placeholder"' + } + } + } +}; diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..c564664 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,9 @@ +# https://docs.travis-ci.com/user/travis-lint + +language: node_js + +node_js: + - 4 + +install: + - npm install --ignore-scripts diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..580916a --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,5 @@ +# Changes to PostCSS Extend Rule + +### 1.0.0 (September 15, 2017) + +- Initial version diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..00eda4b --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,65 @@ +# Contributing to PostCSS Extend Rule + +You want to help? You rock! Now, take a moment to be sure your contributions +make sense to everyone else. + +## Reporting Issues + +Found a problem? Want a new feature? + +- See if your issue or idea has [already been reported]. +- Provide a [reduced test case] or a [live example]. + +Remember, a bug is a _demonstrable problem_ caused by _our_ code. + +## Submitting Pull Requests + +Pull requests are the greatest contributions, so be sure they are focused in +scope and avoid unrelated commits. + +1. To begin; [fork this project], clone your fork, and add our upstream. + ```bash + # Clone your fork of the repo into the current directory + git clone git@github.com:YOUR_USER/postcss-extend-rule.git + + # Navigate to the newly cloned directory + cd postcss-extend-rule + + # Assign the original repo to a remote called "upstream" + git remote add upstream git@github.com:jonathantneal/postcss-extend-rule.git + + # Install the tools necessary for testing + npm install + ``` + +2. Create a branch for your feature or fix: + ```bash + # Move into a new branch for your feature + git checkout -b feature/thing + ``` + ```bash + # Move into a new branch for your fix + git checkout -b fix/something + ``` + +3. If your code follows our practices, then push your feature branch: + ```bash + # Test current code + npm test + ``` + ```bash + # Push the branch for your new feature + git push origin feature/thing + ``` + ```bash + # Or, push the branch for your update + git push origin update/something + ``` + +That’s it! Now [open a pull request] with a clear title and description. + +[already been reported]: issues +[fork this project]: fork +[live example]: https://codepen.io/pen +[open a pull request]: https://help.github.com/articles/using-pull-requests/ +[reduced test case]: https://css-tricks.com/reduced-test-cases/ diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..b5bc55c --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,106 @@ +# CC0 1.0 Universal + +## Statement of Purpose + +The laws of most jurisdictions throughout the world automatically confer +exclusive Copyright and Related Rights (defined below) upon the creator and +subsequent owner(s) (each and all, an “owner”) of an original work of +authorship and/or a database (each, a “Work”). + +Certain owners wish to permanently relinquish those rights to a Work for the +purpose of contributing to a commons of creative, cultural and scientific works +(“Commons”) that the public can reliably and without fear of later claims of +infringement build upon, modify, incorporate in other works, reuse and +redistribute as freely as possible in any form whatsoever and for any purposes, +including without limitation commercial purposes. These owners may contribute +to the Commons to promote the ideal of a free culture and the further +production of creative, cultural and scientific works, or to gain reputation or +greater distribution for their Work in part through the use and efforts of +others. + +For these and/or other purposes and motivations, and without any expectation of +additional consideration or compensation, the person associating CC0 with a +Work (the “Affirmer”), to the extent that he or she is an owner of Copyright +and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and +publicly distribute the Work under its terms, with knowledge of his or her +Copyright and Related Rights in the Work and the meaning and intended legal +effect of CC0 on those rights. + +1. Copyright and Related Rights. A Work made available under CC0 may be + protected by copyright and related or neighboring rights (“Copyright and + Related Rights”). Copyright and Related Rights include, but are not limited + to, the following: + 1. the right to reproduce, adapt, distribute, perform, display, + communicate, and translate a Work; + 2. moral rights retained by the original author(s) and/or performer(s); + 3. publicity and privacy rights pertaining to a person’s image or likeness + depicted in a Work; + 4. rights protecting against unfair competition in regards to a Work, + subject to the limitations in paragraph 4(i), below; + 5. rights protecting the extraction, dissemination, use and reuse of data + in a Work; + 6. database rights (such as those arising under Directive 96/9/EC of the + European Parliament and of the Council of 11 March 1996 on the legal + protection of databases, and under any national implementation thereof, + including any amended or successor version of such directive); and + 7. other similar, equivalent or corresponding rights throughout the world + based on applicable law or treaty, and any national implementations + thereof. + +2. Waiver. To the greatest extent permitted by, but not in contravention of, +applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and +unconditionally waives, abandons, and surrenders all of Affirmer’s Copyright +and Related Rights and associated claims and causes of action, whether now +known or unknown (including existing as well as future claims and causes of +action), in the Work (i) in all territories worldwide, (ii) for the maximum +duration provided by applicable law or treaty (including future time +extensions), (iii) in any current or future medium and for any number of +copies, and (iv) for any purpose whatsoever, including without limitation +commercial, advertising or promotional purposes (the “Waiver”). Affirmer makes +the Waiver for the benefit of each member of the public at large and to the +detriment of Affirmer’s heirs and successors, fully intending that such Waiver +shall not be subject to revocation, rescission, cancellation, termination, or +any other legal or equitable action to disrupt the quiet enjoyment of the Work +by the public as contemplated by Affirmer’s express Statement of Purpose. + +3. Public License Fallback. Should any part of the Waiver for any reason be +judged legally invalid or ineffective under applicable law, then the Waiver +shall be preserved to the maximum extent permitted taking into account +Affirmer’s express Statement of Purpose. In addition, to the extent the Waiver +is so judged Affirmer hereby grants to each affected person a royalty-free, non +transferable, non sublicensable, non exclusive, irrevocable and unconditional +license to exercise Affirmer’s Copyright and Related Rights in the Work (i) in +all territories worldwide, (ii) for the maximum duration provided by applicable +law or treaty (including future time extensions), (iii) in any current or +future medium and for any number of copies, and (iv) for any purpose +whatsoever, including without limitation commercial, advertising or promotional +purposes (the “License”). The License shall be deemed effective as of the date +CC0 was applied by Affirmer to the Work. Should any part of the License for any +reason be judged legally invalid or ineffective under applicable law, such +partial invalidity or ineffectiveness shall not invalidate the remainder of the +License, and in such case Affirmer hereby affirms that he or she will not (i) +exercise any of his or her remaining Copyright and Related Rights in the Work +or (ii) assert any associated claims and causes of action with respect to the +Work, in either case contrary to Affirmer’s express Statement of Purpose. + +4. Limitations and Disclaimers. + 1. No trademark or patent rights held by Affirmer are waived, abandoned, + surrendered, licensed or otherwise affected by this document. + 2. Affirmer offers the Work as-is and makes no representations or + warranties of any kind concerning the Work, express, implied, statutory + or otherwise, including without limitation warranties of title, + merchantability, fitness for a particular purpose, non infringement, or + the absence of latent or other defects, accuracy, or the present or + absence of errors, whether or not discoverable, all to the greatest + extent permissible under applicable law. + 3. Affirmer disclaims responsibility for clearing rights of other persons + that may apply to the Work or any use thereof, including without + limitation any person’s Copyright and Related Rights in the Work. + Further, Affirmer disclaims responsibility for obtaining any necessary + consents, permissions or other rights required for any use of the Work. + 4. Affirmer understands and acknowledges that Creative Commons is not a + party to this document and has no duty or obligation with respect to + this CC0 or use of the Work. + +For more information, please see +https://creativecommons.org/publicdomain/zero/1.0/. diff --git a/README.md b/README.md new file mode 100644 index 0000000..542a976 --- /dev/null +++ b/README.md @@ -0,0 +1,185 @@ +# PostCSS Extend Rule [PostCSS Logo][postcss] + +[![NPM Version][npm-img]][npm-url] +[![Build Status][cli-img]][cli-url] +[![Gitter Chat][git-img]][git-url] + +[PostCSS Extend Rule] lets you use the `@extend` at-rule and +[Functional Selectors] in CSS, following the speculative +[CSS Extend Rules Specification]. + +```css +%thick-border { + border: thick dotted red; +} + +.serious-modal { + font-style: normal; + font-weight: bold; + + @media (max-width: 240px) { + @extend .modal:hover; + } +} + +.modal { + @extend %thick-border; + + color: red; +} + +.modal:hover:not(:focus) { + outline: none; +} + +/* becomes */ + +.serious-modal { + font-style: normal; + font-weight: bold; +} + +@media (max-width: 240px) { + .serious-modal:not(:focus) { + outline: none; + } +} + +.modal { + border: thick dotted red; + color: red; +} + +.modal:hover:not(:focus) { + outline: none; +} +``` + +## Usage + +Add [PostCSS Extend Rule] to your build tool: + +```bash +npm install postcss-extend-rule --save-dev +``` + +#### Node + +Use [PostCSS Extend Rule] to process your CSS: + +```js +require('postcss-extend-rule').process(YOUR_CSS /*, PostCSS Options, Options */); +``` + +#### PostCSS + +Add [PostCSS] to your build tool: + +```bash +npm install postcss --save-dev +``` + +Use [PostCSS Extend Rule] as a plugin: + +```js +postcss([ + require('postcss-extend-rule')(/* Options */) +]).process(YOUR_CSS); +``` + +#### Gulp + +Add [Gulp PostCSS] to your build tool: + +```bash +npm install gulp-postcss --save-dev +``` + +Use [PostCSS Extend Rule] in your Gulpfile: + +```js +var postcss = require('gulp-postcss'); + +gulp.task('css', function () { + return gulp.src('./src/*.css').pipe( + postcss([ + require('postcss-extend-rule')(/* Options */) + ]) + ).pipe( + gulp.dest('.') + ); +}); +``` + +#### Grunt + +Add [Grunt PostCSS] to your build tool: + +```bash +npm install grunt-postcss --save-dev +``` + +Use [PostCSS Extend Rule] in your Gruntfile: + +```js +grunt.loadNpmTasks('grunt-postcss'); + +grunt.initConfig({ + postcss: { + options: { + use: [ + require('postcss-extend-rule')(/* Options */) + ] + }, + dist: { + src: '*.css' + } + } +}); +``` + +## Options + +### onFunctionalSelector + +The `onFunctionalSelector` option determines how functional selectors should be +handled. Its options are: + +- `remove` (default) removes any functional selector +- `ignore` ignores any functional selector and moves on +- `warn` warns the user whenever it encounters a functional selector +- `throw` throws an error if ever it encounters a functional selector + +### onRecursiveExtend + +The `onRecursiveExtend` option determines how recursive extend at-rules should +be handled. Its options are: + +- `remove` (default) removes any recursive extend at-rules +- `ignore` ignores any recursive extend at-rules and moves on +- `warn` warns the user whenever it encounters a recursive extend at-rules +- `throw` throws an error if ever it encounters a recursive extend at-rules + +### onUnusedExtend + +The `onUnusedExtend` option determines how an unused extend at-rule should be +handled. Its options are: + +- `remove` (default) removes any unused extend at-rule +- `ignore` ignores any unused extend at-rule and moves on +- `warn` warns the user whenever it encounters an unused extend at-rule +- `throw` throws an error if ever it encounters an unused extend at-rule + +[npm-url]: https://www.npmjs.com/package/postcss-extend-rule +[npm-img]: https://img.shields.io/npm/v/postcss-extend-rule.svg +[cli-url]: https://travis-ci.org/jonathantneal/postcss-extend-rule +[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-extend-rule.svg +[git-url]: https://gitter.im/postcss/postcss +[git-img]: https://img.shields.io/badge/chat-gitter-blue.svg + +[CSS Extend Rules Specification]: https://jonathantneal.github.io/specs/css-extend-rule/ +[Functional Selectors]: https://jonathantneal.github.io/specs/css-extend-rule/#functional-selector +[Gulp PostCSS]: https://github.com/postcss/gulp-postcss +[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss +[PostCSS]: https://github.com/postcss/postcss +[PostCSS Extend Rule]: https://github.com/jonathantneal/postcss-extend-rule diff --git a/index.js b/index.js new file mode 100644 index 0000000..cf600ea --- /dev/null +++ b/index.js @@ -0,0 +1,119 @@ +// external tooling +const postcss = require('postcss'); +const transformNestingAtRule = require('postcss-nesting/lib/transform-nesting-atrule'); + +// extend at-rule match +const extendMatch = /^(extend)$/i; + +// functional selector match +const functionalSelectorMatch = /(^|[^\w-])(%[_a-zA-Z]+[_a-zA-Z0-9-]*)([^\w-]|$)/i; + +// plugin +module.exports = postcss.plugin('postcss-extend-rule', (rawopts) => { + // options ( onFunctionalSelector, onRecursiveExtend, onUnusedExtend) + const opts = Object(rawopts); + + return (root, result) => { + // for each extend at-rule + root.walkAtRules(extendMatch, (extendAtRule) => { + // do not revisit visited extend at-rules + if (!extendAtRule.__extendAtRuleVisited) { + extendAtRule.__extendAtRuleVisited = true; + + // selector identifier + const selectorIdMatch = getSelectorIdMatch(extendAtRule.params); + + // extending rules + const extendingRules = getExtendingRules(selectorIdMatch, extendAtRule); + + // if there are extending rules + if (extendingRules.length) { + // replace the extend at-rule with the extending rules + extendAtRule.replaceWith(extendingRules); + + // transform these nesting at-rules + extendingRules.forEach(transformNestingAtRule); + } else { + // manage unused extend at-rules + const unusedExtendMessage = `Unused extend at-rule "${extendAtRule.params}"`; + + if (opts.onUnusedExtend === 'throw') { + throw extendAtRule.error(unusedExtendMessage, { word: extendAtRule.name }); + } else if (opts.onUnusedExtend === 'warn') { + extendAtRule.warn(result, unusedExtendMessage); + } else if (opts.onUnusedExtend !== 'ignore') { + extendAtRule.remove(); + } + } + } else { + // manage revisited extend at-rules + const revisitedExtendMessage = `Revisited extend at-rule "${extendAtRule.params}"`; + + if (opts.onRecursiveExtend === 'throw') { + throw extendAtRule.error(revisitedExtendMessage, { word: extendAtRule.name }); + } else if (opts.onRecursiveExtend === 'warn') { + extendAtRule.warn(result, revisitedExtendMessage); + } else if (opts.onRecursiveExtend !== 'ignore') { + extendAtRule.remove(); + } + } + }); + + root.walkRules(functionalSelectorMatch, (functionalRule) => { + // manage encountered functional selectors + const functionalSelectorMessage = `Encountered functional selector "${functionalRule.selector}"`; + + if (opts.onFunctionalSelector === 'throw') { + throw functionalRule.error(functionalSelectorMessage, { word: functionalRule.selector.match(functionalSelectorMatch)[1] }); + } else if (opts.onFunctionalSelector === 'warn') { + functionalRule.warn(result, functionalSelectorMessage); + } else if (opts.onFunctionalSelector !== 'ignore') { + functionalRule.remove(); + } + }); + }; +}); + +function getExtendingRules(selectorIdMatch, extendAtRule) { + // extending rules + const extendingRules = []; + + // for each rule found from root of the extend at-rule with a matching selector identifier + extendAtRule.root().walkRules(selectorIdMatch, (matchingRule) => { + // nesting selectors for the selectors matching the selector identifier + const nestingSelectors = matchingRule.selectors.filter( + (selector) => selectorIdMatch.test(selector) + ).map( + (selector) => selector.replace(selectorIdMatch, '$1&$3') + ).join(','); + + // matching rule’s cloned nodes + const nestingNodes = matchingRule.clone().nodes; + + // push the matching rule to the extending rules + extendingRules.push( + extendAtRule.clone({ + name: 'nest', + params: nestingSelectors, + nodes: nestingNodes, + // empty the extending rules, as they are likely non-comforming + raws: {} + }) + ); + }); + + // return the extending rules + return extendingRules; +} + +function getSelectorIdMatch(selectorIds) { + // escape the contents of the selector id to avoid being parsed as regex + const escapedSelectorIds = postcss.list.comma(selectorIds).map( + (selectorId) => selectorId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ).join('|'); + + // selector unattached to an existing selector + const selectorIdMatch = new RegExp(`(^|[^\\w-])(${escapedSelectorIds})([^\\w-]|$)`, ''); + + return selectorIdMatch; +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..41d5956 --- /dev/null +++ b/package.json @@ -0,0 +1,58 @@ +{ + "name": "postcss-extend-rule", + "version": "1.0.0", + "description": "Use the @extend at-rule and functional selectors in CSS", + "author": "Jonathan Neal ", + "license": "CC0-1.0", + "repository": "jonathantneal/postcss-extend-rule", + "homepage": "https://github.com/jonathantneal/postcss-extend-rule#readme", + "bugs": "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.0" + }, + "devDependencies": { + "eslint": "^4.7.0", + "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" + ] +} diff --git a/test/advanced.css b/test/advanced.css new file mode 100644 index 0000000..48b678d --- /dev/null +++ b/test/advanced.css @@ -0,0 +1,24 @@ +%thick-border { + border: thick dotted red; +} + +.serious-modal { + font-style: normal; + font-weight: bold; + + @media (max-width: 240px) { + @extend .modal:hover; + } +} + +.modal { + @extend %thick-border; + + color: red; + + &:hover { + &:not(:focus) { + outline: none; + } + } +} diff --git a/test/advanced.expect.css b/test/advanced.expect.css new file mode 100644 index 0000000..db86fca --- /dev/null +++ b/test/advanced.expect.css @@ -0,0 +1,20 @@ +.serious-modal { + font-style: normal; + font-weight: bold; +} + +@media (max-width: 240px) { + + .serious-modal:not(:focus) { + outline: none; + } +} + +.modal { + border: thick dotted red; + color: red; +} + +.modal:hover:not(:focus) { + outline: none; +} diff --git a/test/basic.css b/test/basic.css new file mode 100644 index 0000000..d533d1a --- /dev/null +++ b/test/basic.css @@ -0,0 +1,14 @@ +.modal { + border: thick dotted red; + color: red; +} + +.modal:hover { + outline: none; +} + +.serious-modal { + @extend .modal; + + font-weight: bold; +} diff --git a/test/basic.expect.css b/test/basic.expect.css new file mode 100644 index 0000000..f85069a --- /dev/null +++ b/test/basic.expect.css @@ -0,0 +1,21 @@ +.modal { + border: thick dotted red; + color: red; +} + +.modal:hover { + outline: none; +} + +.serious-modal { + border: thick dotted red; + color: red; +} + +.serious-modal:hover { + outline: none; +} + +.serious-modal { + font-weight: bold; +} diff --git a/test/errors.css b/test/errors.css new file mode 100644 index 0000000..5eb84e9 --- /dev/null +++ b/test/errors.css @@ -0,0 +1,19 @@ +test-does-not-extend-non-existent-selector { + @extend some-non-existent-selector; +} + +test-does-not-extend-itself { + @extend test-does-not-extend-itself; +} + +test-does-not-extend-itself-cleverly-1 { + @extend test-does-not-extend-itself-cleverly-2; +} + +test-does-not-extend-itself-cleverly-2 { + @extend test-does-not-extend-itself-cleverly-1; +} + +%test-placeholder { + @extend %test-placeholder; +} diff --git a/test/errors.expect.css b/test/errors.expect.css new file mode 100644 index 0000000..86b6157 --- /dev/null +++ b/test/errors.expect.css @@ -0,0 +1,11 @@ +test-does-not-extend-non-existent-selector { +} + +test-does-not-extend-itself { +} + +test-does-not-extend-itself-cleverly-1 { +} + +test-does-not-extend-itself-cleverly-2 { +} diff --git a/test/errors.ignore.expect.css b/test/errors.ignore.expect.css new file mode 100644 index 0000000..c137b53 --- /dev/null +++ b/test/errors.ignore.expect.css @@ -0,0 +1,23 @@ +test-does-not-extend-non-existent-selector { + @extend some-non-existent-selector; +} + +test-does-not-extend-itself { + + @extend test-does-not-extend-itself +} + +test-does-not-extend-itself-cleverly-1 { + + @extend test-does-not-extend-itself-cleverly-1 +} + +test-does-not-extend-itself-cleverly-2 { + + @extend test-does-not-extend-itself-cleverly-1 +} + +%test-placeholder { + + @extend %test-placeholder +} diff --git a/test/errors.warn.expect.css b/test/errors.warn.expect.css new file mode 100644 index 0000000..c137b53 --- /dev/null +++ b/test/errors.warn.expect.css @@ -0,0 +1,23 @@ +test-does-not-extend-non-existent-selector { + @extend some-non-existent-selector; +} + +test-does-not-extend-itself { + + @extend test-does-not-extend-itself +} + +test-does-not-extend-itself-cleverly-1 { + + @extend test-does-not-extend-itself-cleverly-1 +} + +test-does-not-extend-itself-cleverly-2 { + + @extend test-does-not-extend-itself-cleverly-1 +} + +%test-placeholder { + + @extend %test-placeholder +}