├── .github └── workflows │ └── ci.yml ├── src ├── main.js └── helpCmd.js ├── package.json └── README.md /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | branches: [main] 8 | 9 | jobs: 10 | test: 11 | runs-on: ubuntu-latest 12 | strategy: 13 | matrix: 14 | node-version: 15 | - 12.x 16 | - 14.x 17 | - 16.x 18 | steps: 19 | - uses: actions/checkout@v2 20 | - name: Setup Node.js ${{ matrix.node-version }} 21 | uses: actions/setup-node@v2 22 | with: 23 | node-version: ${{ matrix.node-version }} 24 | - run: npm ci 25 | - run: npm run ci 26 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const { AutoLanguageClient } = require('atom-languageclient') 3 | const { registerHelpCommands } = require('./helpCmd') 4 | 5 | class CSSLanguageClient extends AutoLanguageClient { 6 | constructor() { 7 | super() 8 | registerHelpCommands() 9 | } 10 | getGrammarScopes () { 11 | return [ 12 | 'source.css', 13 | 'source.css.less', 14 | 'source.css.scss', 15 | ] 16 | } 17 | getLanguageName () { return 'CSS/LESS/SCSS' } 18 | getServerName () { return 'VSCODE-CSS-LANG-SERVER' } 19 | getConnectionType() { return 'stdio' } // ipc, socket, stdio 20 | 21 | startServerProcess () { 22 | return super.spawnChildNode([ 23 | path.resolve(path.join( 24 | __dirname, 25 | '../node_modules/vscode-css-languageserver-bin/cssServerMain' 26 | )), 27 | '--stdio', 28 | ]) // --node-ipc, stdio, socket={number} 29 | } 30 | 31 | preInitialization (connection) { 32 | connection.onCustom('$/partialResult', () => {}) // Suppress partialResult until the language server honours 'streaming' detection 33 | } 34 | } 35 | 36 | module.exports = new CSSLanguageClient() 37 | -------------------------------------------------------------------------------- /src/helpCmd.js: -------------------------------------------------------------------------------- 1 | 'use babel' 2 | 3 | import { shell } from 'electron' 4 | import packageJSON from '../package.json' 5 | 6 | const generateHelpMsg = () => { 7 | const { name, version, atomCommands: commands } = packageJSON 8 | return `## [${name}](https://atom.io/packages/${name}) \n\n${version}\n${ 9 | Object.keys(commands) 10 | .map(cmd => ` - \`${cmd}\` ${commands[cmd]}`) 11 | .join('\n') 12 | }` 13 | } 14 | 15 | const gerneateButtons = () => { 16 | const repoUrl = packageJSON.homepage.replace(/#.*/, '').replace(/\/$/, '') 17 | return [ 18 | { 19 | text: ' FAQ', 20 | onDidClick: () => { shell.openExternal(`${repoUrl}#faq`) }, 21 | className: 'btn btn-info btn-lg icon-link selected', 22 | }, 23 | { 24 | text: ' Send Issue', 25 | onDidClick: () => { shell.openExternal(`${repoUrl}/issues/new`) }, 26 | className: 'btn btn-info btn-lg icon-link', 27 | }, 28 | ] 29 | } 30 | 31 | export const registerHelpCommands = () => { 32 | atom.commands.add('atom-workspace', `${packageJSON.name}:help`, () => { 33 | atom.notifications.addInfo( 34 | generateHelpMsg(), 35 | { 36 | buttons: gerneateButtons(), 37 | dismissable: true, 38 | icon: 'mortar-board', 39 | } 40 | ) 41 | }) 42 | } 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ide-css", 3 | "version": "0.4.0", 4 | "description": "Atom-IDE for CSS, LESS and SCSS language", 5 | "main": "src/main.js", 6 | "scripts": { 7 | "lint": "eslint ./src", 8 | "ci": "npm run lint" 9 | }, 10 | "repository": "https://github.com/liuderchi/ide-css.git", 11 | "keywords": [ 12 | "atom-ide", 13 | "css", 14 | "less", 15 | "scss", 16 | "style-sheet", 17 | "ide", 18 | "language-server-protocol", 19 | "outline-view" 20 | ], 21 | "author": "Te-Chi Liu", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/liuderchi/ide-css/issues" 25 | }, 26 | "homepage": "https://github.com/liuderchi/ide-css#readme", 27 | "devDependencies": { 28 | "eslint": "^7.27.0" 29 | }, 30 | "dependencies": { 31 | "atom-languageclient": "^1.10.0", 32 | "vscode-css-languageserver-bin": "^1.4.0" 33 | }, 34 | "engines": { 35 | "atom": ">=1.21.0" 36 | }, 37 | "activationHooks": [ 38 | "source.css:root-scope-used", 39 | "source.css.less:root-scope-used", 40 | "source.css.scss:root-scope-used" 41 | ], 42 | "enhancedScopes": [ 43 | "source.css", 44 | "source.css.less", 45 | "source.css.scss" 46 | ], 47 | "consumedServices": { 48 | "linter-indie": { 49 | "versions": { 50 | "2.0.0": "consumeLinterV2" 51 | } 52 | }, 53 | "datatip": { 54 | "versions": { 55 | "0.1.0": "consumeDatatip" 56 | } 57 | } 58 | }, 59 | "providedServices": { 60 | "autocomplete.provider": { 61 | "versions": { 62 | "2.0.0": "provideAutocomplete" 63 | } 64 | }, 65 | "code-format.range": { 66 | "versions": { 67 | "0.1.0": "provideCodeFormat" 68 | } 69 | }, 70 | "definitions": { 71 | "versions": { 72 | "0.1.0": "provideDefinitions" 73 | } 74 | }, 75 | "find-references": { 76 | "versions": { 77 | "0.1.0": "provideFindReferences" 78 | } 79 | }, 80 | "outline-view": { 81 | "versions": { 82 | "0.1.0": "provideOutlines" 83 | } 84 | } 85 | }, 86 | "atomCommands": { 87 | "ide-css:help": "Provides help information and descriptions of commands." 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ide-css 2 | 3 | [![apm-download-count][apm-download-count]][apm-download-link] 4 | [![ci-status][ci-status]][ci-link] 5 | [![dependency-status][david-status]][david-project] 6 | 7 | Atom-IDE for CSS, LESS and SCSS language 8 | 9 | ![demo1][demo1] 10 | 11 | ![demo2][demo2] 12 | 13 | ## Features 14 | 15 | - CSS rules Outline in *Outline View* 16 | - Quick navigation by clicking 17 | - Quick CSS rule selection by double clicking 18 | - Searching by entering element name or class name in selector 19 | - Tooltips for 20 | - CSS selector 21 | - CSS property 22 | - Linter message 23 | - Support other CSS preprocessor grammars: LESS, SCSS 24 | 25 | 26 | ## Requirements 27 | 28 | you need to install following requirements before installing [`ide-css`][apm-download-link]: 29 | 30 | - Atom editor *1.21.0-beta0* or higher version 31 | - Atom package [`atom-ide-ui`][atom-ide-ui] 32 | 33 | 34 | ## FAQ 35 | 36 | > Why I could not download this Atom package? 37 | 38 | Please make sure you have installed all softwares in [*Requirements*](#requirements) section. 39 | 40 | --- 41 | 42 | > I've installed ide-css. Why there is still nothing shown in Outline View when css opened? 43 | 44 | Please check the file exists in the *Project Tree View* so that it can be handled by [`ide-css`][apm-download-link]. 45 | 46 | In addition, to show outline view, use Atom command `Outline View: Toggle`. 47 | 48 | --- 49 | 50 | > How can I customize this package? 51 | 52 | Please read [CONTRIBUTING.md][CONTRIBUTING.md] for more details. 53 | 54 | --- 55 | 56 | - :confused: Still feeling confused? Please [provide feedbacks via issues][create-issue] to make ide-css better. :pray: 57 | 58 | 59 | ## Notes and References 60 | - [`ide-css`][apm-download-link] acts as a *client* of language server basing on [`atom-languageclient`][atom-languageclient] 61 | - [`vscode-css-languageserver-bin`][vscode-css-languageserver-bin] acts as a *language server* and analyze your CSS in separate process 62 | - language servers and clients are talking with [Language Server Protocol (LSP)][lsp] 63 | 64 | 65 | ## License 66 | 67 | [MIT License][mit-license] 68 | 69 | 70 | [apm-download-count]: https://img.shields.io/apm/dm/ide-css.svg "apm-download-count" 71 | [apm-download-link]: https://atom.io/packages/ide-css "apm-download-link" 72 | [ci-status]: https://github.com/liuderchi/ide-css/actions/workflows/ci.yml/badge.svg "ci-status" 73 | [ci-link]: https://github.com/liuderchi/ide-css/actions "ci-link" 74 | [david-status]: https://david-dm.org/liuderchi/ide-css.svg "david-status" 75 | [david-project]: https://david-dm.org/liuderchi/ide-css "david-project" 76 | [demo1]: https://user-images.githubusercontent.com/4994705/30840126-2a71c32a-a23b-11e7-8dd4-9189723c438a.png "demo1" 77 | [demo2]: https://user-images.githubusercontent.com/4994705/30840198-864c7fb4-a23b-11e7-9db7-0c9239b83205.png "demo2" 78 | 79 | [atom-ide-ui]: https://atom.io/packages/atom-ide-ui "atom-ide-ui" 80 | [CONTRIBUTING.md]: https://github.com/liuderchi/ide-css/blob/main/CONTRIBUTING.md "CONTRIBUTING.md" 81 | [create-issue]: https://github.com/liuderchi/ide-css/issues/new "create-issue" 82 | 83 | [atom-languageclient]: https://github.com/atom/atom-languageclient "atom-languageclient" 84 | [vscode-css-languageserver-bin]: https://github.com/vscode-langservers/vscode-css-languageserver-bin "vscode-css-languageserver-bin" 85 | [lsp]: http://langserver.org/ "lsp" 86 | 87 | [mit-license]: https://liuderchi.mit-license.org/ "mit-license" 88 | --------------------------------------------------------------------------------