├── .gitignore ├── _import.scss ├── .gitattributes ├── .travis.yml ├── keymaps └── scss-selector-preview.cson ├── .editorconfig ├── package.json ├── test.scss ├── readme.md ├── license └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /_import.scss: -------------------------------------------------------------------------------- 1 | $var: 10px; 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 'stable' 4 | -------------------------------------------------------------------------------- /keymaps/scss-selector-preview.cson: -------------------------------------------------------------------------------- 1 | '.workspace .editor': 2 | 'ctrl-shift-s': 'scss-preview-selector:run' 3 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | end_of_line = lf 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | 10 | [{package.json,*.yml}] 11 | indent_style = space 12 | indent_size = 2 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Scss-selector-preview", 3 | "version": "0.0.1", 4 | "description": "See full generated css selector in scss", 5 | "license": "MIT", 6 | "repository": "", 7 | "author": { 8 | "name": "Daniel Hallqvist", 9 | "email": "dhallqvist91@gmail.com", 10 | "url": "" 11 | }, 12 | "activationCommands": { 13 | "atom-workspace": "scss-preview-selector:run" 14 | }, 15 | "engines": { 16 | "atom": ">=1.0.0" 17 | }, 18 | "scripts": { 19 | "test": "xo" 20 | }, 21 | "keywords": [ 22 | "css", 23 | "scss", 24 | "preview", 25 | "selector" 26 | ], 27 | "dependencies": { 28 | "node-sass": "^3.4.2" 29 | }, 30 | "devDependencies": { 31 | "xo": "*" 32 | }, 33 | "xo": { 34 | "esnext": true, 35 | "globals": [ 36 | "atom" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /test.scss: -------------------------------------------------------------------------------- 1 | @import 'import'; 2 | $test = 12 / 2 * 4; 3 | @mixin foo($za, $bar) { 4 | #body { 5 | width: $body-width; 6 | p { 7 | color: red; 8 | } 9 | } 10 | } 11 | /*Test*/ 12 | .wrapper { 13 | /*!test2*/ 14 | div { 15 | position: absolute; 16 | @extend .foo-bar; 17 | 18 | &:hover { 19 | @include test(); 20 | @include foobar(); 21 | width: 20px; 22 | 23 | a .class + test { 24 | display: flex; 25 | color: red; 26 | height: $var; 27 | 28 | h2.super { 29 | font-size: 4em; 30 | } 31 | } 32 | } 33 | p { 34 | width: 200px; 35 | @media (max-width: $ml-viewport) { 36 | height: 29px; 37 | } 38 | 39 | /*Test 40 | sadasd as asd as 41 | as das asd ad sa d*/ 42 | &:focus { 43 | width: 399px; 44 | @media (max-width: $ml-viewport) { 45 | span { 46 | height: 10px; 47 | } 48 | } 49 | } 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Scss-preview-selector (Not ready) 2 | 3 | > Atom package to preview the full css selector generated from a scss selector. Your friend in the nesting-hell-abyss of all too many scss files. 4 | 5 | 6 | ## Install 7 | 8 | ``` 9 | $ apm install scss-preview-selector 10 | ``` 11 | 12 | Or, Settings → Install → Search for `scss-preview-selector` 13 | 14 | 15 | ## Usage 16 | - While having the marker on a selector in a scss file, open the Command Palette and type `scss preview selector` or use the default keybinding `ctrl+shift+s`. 17 | 18 | ![](https://cloud.githubusercontent.com/assets/1615161/14589998/e8c17932-04ef-11e6-9b74-f8c449a393a1.gif) 19 | 20 | 21 | ## Current limitations 22 | - Media queries will not be included in the resulting selector 23 | - You have to have the marker on the selector. Having it on a property will not be able to show the property's selector. 24 | - Selectors containing variables from other files wont work. 25 | - If the file is being imported in another file and the import statement is wrapped in a selector, it wont be recognized. 26 | 27 | 28 | ## License 29 | 30 | MIT 31 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Daniel Hallqvist 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** @babel */ 2 | import path from 'path'; 3 | import sass from 'node-sass'; 4 | 5 | /* cmd+shift+s */ 6 | function run() { 7 | const editor = atom.workspace.getActiveTextEditor(); 8 | let buffer = editor.getBuffer(); 9 | let currentSelectorLocator = '/*scss-preview-current*/'; 10 | 11 | if (!editor) { 12 | return; 13 | } 14 | 15 | let isScssFile = (/\.scss$/i).test(buffer.file.path); 16 | if (!isScssFile) { 17 | return; 18 | } 19 | 20 | let markerPos = editor.getCursorBufferPosition(); 21 | let characterIndex = buffer.characterIndexForPosition(markerPos); 22 | 23 | //Remove properties, only keep selectors 24 | let input = buffer.cachedText; 25 | let nextCurlyPos = input.indexOf('{', characterIndex); 26 | let nextSemiColonPos = input.indexOf(';', characterIndex); 27 | //Cursor is at a property, not supported atm 28 | if (nextCurlyPos > nextSemiColonPos) return; 29 | 30 | //Insert our custom comment that will keep this selector in the output 31 | let modifiedInput = input.splice(nextCurlyPos + 1, 0, currentSelectorLocator); 32 | 33 | //Remove potential compile breakers 34 | modifiedInput = modifiedInput.replace(/@include .*;/g, ''); 35 | modifiedInput = modifiedInput.replace(/@import .*;/g, ''); 36 | 37 | //Remove variable declarations 38 | modifiedInput = modifiedInput.replace(/\$.+=.+;/g, ''); 39 | 40 | //Remove variables 41 | modifiedInput = modifiedInput.replace(/\$[^ |;|)]+/g, ''); 42 | 43 | //Remove properties 44 | modifiedInput = modifiedInput.replace(/[^{|\s]+:[^{|}]+;/ig, ''); 45 | 46 | sass.render({ 47 | data: modifiedInput, 48 | outputStyle: 'expanded' 49 | }, (err, result) => { 50 | if (err) { 51 | atom.notifications.addError('Could not get full css selector.'); 52 | } else if (result) { 53 | let resultString = result.css.toString('utf-8'); 54 | //Remove media queries for now 55 | resultString = resultString.replace(/@media.*{/g, ''); 56 | let selector = resultString.match(/[^}]*\/\*scss-preview-current\*/); 57 | //Remove everything but the actual string containing the selector 58 | selector = selector[0].replace(/{[\s\S]*\/\*scss-preview-current\*/gmi, ''); 59 | atom.notifications.addInfo(selector); 60 | } 61 | }); 62 | }; 63 | 64 | export const activate = () => { 65 | atom.commands.add('atom-workspace', 'scss-preview-selector:run', run); 66 | }; 67 | 68 | String.prototype.splice = function(idx, rem, str) { 69 | return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem)); 70 | }; 71 | --------------------------------------------------------------------------------