├── .npmrc ├── fixtures ├── .vscode │ └── .gitkeep ├── test.less ├── test.sss ├── test.scss └── test.css ├── icon.png ├── .travis.yml ├── .github ├── FUNDING.yml ├── PULL_REQUEST_TEMPLATE.md └── ISSUE_TEMPLATE.md ├── .gitignore ├── .vscodeignore ├── typings ├── postcss-scss.d.ts ├── sugarss.d.ts └── stylefmt.d.ts ├── .editorconfig ├── .vscode └── launch.json ├── src ├── utils │ └── index.ts ├── types │ └── index.ts ├── stylefmt │ ├── settings-manager.ts │ ├── index.ts │ ├── settings-manager.spec.ts │ └── index.spec.ts └── extension.ts ├── tsconfig.json ├── tslint.json ├── LICENSE ├── CONTRIBUTING.md ├── README.md ├── package.json └── CODE-OF-CONDUCT.md /.npmrc: -------------------------------------------------------------------------------- 1 | save-exact=true 2 | -------------------------------------------------------------------------------- /fixtures/.vscode/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fixtures/test.less: -------------------------------------------------------------------------------- 1 | .qwe { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrmlnc/vscode-stylefmt/HEAD/icon.png -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - 'node' 5 | 6 | script: 7 | - npm run build 8 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | ko_fi: mrmlnc 2 | custom: 3 | - https://www.buymeacoffee.com/mrmlnc 4 | - https://www.paypal.me/mrmlnc 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs/ 3 | *.log 4 | npm-debug.log* 5 | 6 | # Dependency directory 7 | node_modules/ 8 | 9 | # Build directory 10 | out/ 11 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### What is the purpose of this pull request? 2 | 3 | ... 4 | 5 | ### What changes did you make? (Give an overview) 6 | 7 | ... 8 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | typings/** 3 | test/** 4 | scripts/** 5 | src/** 6 | .editorconfig 7 | .gitignore 8 | .travis.yml 9 | tsconfig.json 10 | tslint.json 11 | -------------------------------------------------------------------------------- /typings/postcss-scss.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'postcss-scss' { 2 | 3 | import postcss = require('postcss'); 4 | 5 | const postcssScss: postcss.ProcessOptions; 6 | 7 | export = postcssScss; 8 | } 9 | -------------------------------------------------------------------------------- /typings/sugarss.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'sugarss' { 2 | 3 | import postcss = require('postcss'); 4 | 5 | const postcssSugarss: postcss.ProcessOptions; 6 | 7 | export = postcssSugarss; 8 | 9 | } 10 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Environment 2 | 3 | * VSCode Version: ... 4 | * OS Version: ... 5 | 6 | ### Actual behavior 7 | 8 | ... 9 | 10 | ### Expected behavior 11 | 12 | ... 13 | 14 | ### Steps to reproduce 15 | 16 | ... 17 | -------------------------------------------------------------------------------- /fixtures/test.sss: -------------------------------------------------------------------------------- 1 | a 2 | 3 | 4 | color: blue 5 | 6 | .multiline, 7 | .selector 8 | box-shadow: 1px 0 9px rgba(0, 0, 0, .4), 9 | 1px 0 3px rgba(0, 0, 0, .6) 10 | 11 | // Mobile 12 | @media (max-width: 400px) 13 | .body 14 | padding: 0 10px 15 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_style = tab 8 | indent_size = 4 9 | trim_trailing_whitespace = true 10 | 11 | [{.travis.yml,appveyor.yml,npm-shrinkwrap.json,package.json}] 12 | indent_style = space 13 | indent_size = 2 14 | -------------------------------------------------------------------------------- /typings/stylefmt.d.ts: -------------------------------------------------------------------------------- 1 | declare module "stylefmt" { 2 | 3 | import postcss = require('postcss'); 4 | 5 | interface IOptions { 6 | rules?: Object; 7 | } 8 | 9 | interface IStylefmt { 10 | (options?: IOptions): postcss.AcceptedPlugin; 11 | } 12 | 13 | const stylefmt: IStylefmt; 14 | export = stylefmt; 15 | 16 | } 17 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "configurations": [ 4 | { 5 | "name": "Launch Extension", 6 | "type": "extensionHost", 7 | "request": "launch", 8 | "runtimeExecutable": "${execPath}", 9 | "args": [ 10 | "--extensionDevelopmentPath=${workspaceRoot}" 11 | ], 12 | "stopOnEntry": false, 13 | "outFiles": [ 14 | "${workspaceRoot}/out" 15 | ] 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/utils/index.ts: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import * as vscode from 'vscode'; 4 | 5 | export function output(channel: vscode.OutputChannel, message: string, autoShowOutput = true): void { 6 | if (!channel) { 7 | channel = vscode.window.createOutputChannel('Stylefmt'); 8 | } 9 | 10 | channel.clear(); 11 | channel.appendLine('[Stylefmt]'); 12 | channel.append(message.toString()); 13 | 14 | if (autoShowOutput) { 15 | channel.show(); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /fixtures/test.scss: -------------------------------------------------------------------------------- 1 | // mixin for clearfix 2 | 3 | 4 | 5 | @mixin clearfix () { &:before, 6 | &:after { 7 | content:" "; 8 | display : table; } 9 | 10 | &:after {clear: both;} 11 | }.class 12 | { 13 | padding:10px;@include clearfix();} 14 | .base { color: #aaaccc; } // placeholder 15 | 16 | %base 17 | { 18 | 19 | 20 | padding: 12px 21 | } 22 | 23 | .foo{ 24 | @extend .base;} 25 | 26 | .bar 27 | { @extend %base; 28 | 29 | } 30 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2015", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | 7 | "rootDir": "src", 8 | "outDir": "out", 9 | 10 | "alwaysStrict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "noImplicitAny": true, 13 | "noImplicitReturns": true, 14 | "noImplicitThis": true, 15 | "noUnusedLocals": true, 16 | "noUnusedParameters": true, 17 | 18 | "emitDecoratorMetadata": true, 19 | "experimentalDecorators": true, 20 | "declaration": true, 21 | "importHelpers": true, 22 | 23 | "pretty": true 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/types/index.ts: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import * as vscode from 'vscode'; 4 | 5 | export interface IStylefmtOptions { 6 | rules: object; 7 | configBasedir: string; 8 | configFile: string; 9 | } 10 | 11 | export interface IStylefmtSettings { 12 | configBasedir?: string; 13 | config?: string | object; 14 | useStylelintConfigOverrides?: boolean; 15 | showErrorMessages?: boolean; 16 | } 17 | 18 | export interface IStylelintSettings { 19 | configOverrides?: any; 20 | } 21 | 22 | export interface IVSCodeSettings { 23 | formatOnSave?: boolean; 24 | } 25 | 26 | export type ISettings = IStylelintSettings & IStylefmtSettings & IVSCodeSettings; 27 | 28 | export interface IResult { 29 | css: string; 30 | range: vscode.Range; 31 | } 32 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "tslint-config-xo/esnext" 4 | ], 5 | "rules": { 6 | "object-curly-spacing": false, 7 | "ter-arrow-parens": true, 8 | 9 | "adjacent-overload-signatures": true, 10 | "member-access": true, 11 | "member-ordering": [ 12 | true, 13 | { 14 | "order": [ 15 | "static-field", 16 | "instance-field", 17 | "constructor", 18 | "public-instance-method", 19 | "protected-instance-method", 20 | "private-instance-method" 21 | ] 22 | } 23 | ], 24 | "no-empty-interface": "true", 25 | "no-reference": true, 26 | "no-var-requires": true, 27 | "typedef-whitespace": [ 28 | true, 29 | { 30 | "call-signature": "nospace", 31 | "index-signature": "nospace", 32 | "parameter": "nospace", 33 | "property-declaration": "nospace", 34 | "variable-declaration": "nospace" 35 | } 36 | ], 37 | "unified-signatures": true, 38 | "variable-name": [ 39 | true, 40 | "check-format", 41 | "allow-leading-underscore" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /fixtures/test.css: -------------------------------------------------------------------------------- 1 | /* custom properties */ 2 | :root{--fontSize: 1rem; 3 | --mainColor :#12345678; 4 | --highlightColor:hwb(190, 35%, 20%); 5 | } 6 | /* custom media queries */ 7 | @custom-media 8 | 9 | --viewport-medium(width<=50rem); 10 | 11 | /* some var() & calc() */ 12 | body{color:var(--mainColor); 13 | font-size:var(--fontSize); 14 | line-height: calc(var(--fontSize) * 1.5); 15 | padding: calc((var(--fontSize) / 2) + 1px)} 16 | 17 | /* custom media query usage */ 18 | @media (--viewport-medium) { 19 | body {font-size: calc(var(--fontSize) * 1.2); } 20 | } 21 | /* custom selectors */ 22 | @custom-selector :--heading h1,h2,h3, h4,h5,h6; 23 | :--heading { margin-top:0 } 24 | 25 | /* colors stuff */ 26 | a{ 27 | color:var(--highlightColor); 28 | transition:color 1s; 29 | } 30 | a:hover{color :gray(255,50%) } 31 | a:active{color : rebeccapurple } 32 | a:any-link { color:color(var(--highlightColor) blackness(+20%)) } 33 | 34 | /* font stuff */ 35 | h2 {font-variant-caps:small-caps; 36 | }table{font-variant-numeric: lining-nums; 37 | } 38 | /* filters */ 39 | .blur{filter:blur(4px)}.sepia{ 40 | filter: sepia(.8);} 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Denis Malinochkin 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 all 13 | 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 THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/stylefmt/settings-manager.ts: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import * as path from 'path'; 4 | import * as os from 'os'; 5 | 6 | import * as extend from 'extend'; 7 | 8 | import * as Types from '../types'; 9 | 10 | export function prepare(rootDirectory: string, settings: Types.ISettings): Types.IStylefmtOptions { 11 | let config: Types.IStylefmtOptions = {}; 12 | 13 | if (settings.config) { 14 | if (typeof settings.config !== 'string') { 15 | config = settings.config; 16 | } else { 17 | const configPath: string = (settings.config); 18 | let filepath = configPath; 19 | 20 | // Expand HOME directory within filepath 21 | if (configPath.startsWith('~')) { 22 | const home = os.homedir(); 23 | filepath = configPath.replace(/^~($|\/|\\)/, `${home}$1`); 24 | } 25 | 26 | // Expand relative path within filepath 27 | if (rootDirectory && (configPath.startsWith('./') || configPath.startsWith('../'))) { 28 | filepath = path.resolve(rootDirectory, configPath); 29 | } 30 | 31 | config.configFile = filepath; 32 | } 33 | } 34 | 35 | if (settings.configBasedir) { 36 | config.configBasedir = settings.configBasedir; 37 | } 38 | 39 | // Override stylfmt rules by stylelint rules 40 | if (settings.useStylelintConfigOverrides && settings.configOverrides) { 41 | config.rules = extend(true, {}, config.rules, settings.configOverrides); 42 | } 43 | 44 | return config; 45 | } 46 | -------------------------------------------------------------------------------- /src/stylefmt/index.ts: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import * as vscode from 'vscode'; 4 | 5 | import * as postcss from 'postcss'; 6 | import * as scssSyntax from 'postcss-scss'; 7 | import * as sugarss from 'sugarss'; 8 | import * as stylefmt from 'stylefmt'; 9 | 10 | import * as settingsManager from './settings-manager'; 11 | 12 | import * as Types from '../types'; 13 | 14 | export function use(settings: Types.ISettings, document: vscode.TextDocument, range: vscode.Range): Promise { 15 | const rootDirectory = vscode.workspace.getWorkspaceFolder(document.uri).uri.fsPath; 16 | const stylefmtConfig = settingsManager.prepare(rootDirectory, settings); 17 | 18 | let text; 19 | if (!range) { 20 | const lastLine = document.lineAt(document.lineCount - 1); 21 | const start = new vscode.Position(0, 0); 22 | const end = new vscode.Position(document.lineCount - 1, lastLine.text.length); 23 | 24 | range = new vscode.Range(start, end); 25 | text = document.getText(); 26 | } else { 27 | text = document.getText(range); 28 | } 29 | 30 | const isSugarss = document.languageId === 'sugarss'; 31 | 32 | const postcssConfig: postcss.ProcessOptions = { 33 | from: document.uri.fsPath || rootDirectory || '', 34 | syntax: isSugarss ? sugarss : scssSyntax 35 | }; 36 | 37 | const postcssPlugins: postcss.AcceptedPlugin[] = [ 38 | stylefmt(stylefmtConfig) 39 | ]; 40 | 41 | return postcss(postcssPlugins) 42 | .process(text, postcssConfig) 43 | .then((result) => ({ 44 | css: result.css, 45 | range 46 | })); 47 | } 48 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to my package 2 | 3 | Welcome, and thank you for your interest in contributing to **vscode-stylefmt**! 4 | 5 | Please note that this project is released with a [Contributor Code of Conduct](CODE-OF-CONDUCT.md). By participating in this project you agree to abide by its terms. 6 | 7 | ## Contribution Guidelines 8 | 9 | There are a couple of ways you can contribute to this repo: 10 | 11 | * **Ideas, feature requests and bugs**: We are open to all ideas and we want to get rid of bugs! Use the [Issues section](https://github.com/mrmlnc/vscode-stylefmt/issues) to either report a new issue, provide your ideas or contribute to existing threads. 12 | * **Documentation**: Found a typo or strangely worded sentences? Submit a PR! 13 | * **Code**: Contribute bug fixes, features or design changes. 14 | 15 | ### Creating an Issue 16 | 17 | Before you create a new Issue: 18 | 19 | * Check the [Issues](https://github.com/mrmlnc/vscode-stylefmt/issues) on Github to ensure one doesn't already exist. 20 | * Clearly describe the issue, including the steps to reproduce the issue. 21 | 22 | ### Making Changes 23 | 24 | #### Getting Started 25 | 26 | * Install [Node.js](https://nodejs.org/en/). 27 | * Fork the project and clone the fork repo. ([how to create fork?](https://help.github.com/articles/fork-a-repo/#fork-an-example-repository)). 28 | * Create a topic branch from the master branch. 29 | * Run `yarn` or `npm install` to install the application dependencies. 30 | 31 | #### Setup 32 | 33 | 1. Start watching: 34 | 35 | ``` 36 | $ npm run watch 37 | ``` 38 | 39 | 2. Make changes: 40 | 41 | ``` 42 | $ code . 43 | ``` 44 | 45 | 3. Run tests: 46 | 47 | ``` 48 | $ npm t 49 | ``` 50 | 51 | 4. Test your version of the extension: 52 | 53 | Press F5 in the editor and then test extension commands and functions. 54 | 55 | #### Commit 56 | 57 | Keep git commit messages clear and appropriate. You can use [Angular guide](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines). 58 | -------------------------------------------------------------------------------- /src/stylefmt/settings-manager.spec.ts: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import * as assert from 'assert'; 4 | 5 | import * as settingsManager from './settings-manager'; 6 | 7 | describe('Settings Manager', () => { 8 | it('should return config', () => { 9 | const expected = {}; 10 | 11 | const actual = settingsManager.prepare('rootPath', {}); 12 | 13 | assert.deepEqual(actual, expected); 14 | }); 15 | 16 | it('should return config with `configBasedir` option', () => { 17 | const expected = { configBasedir: 'something' }; 18 | 19 | const actual = settingsManager.prepare('rootPath', { configBasedir: 'something' }); 20 | 21 | assert.deepEqual(actual, expected); 22 | }); 23 | 24 | it('should return config with `config` option as string', () => { 25 | const actual = settingsManager.prepare('rootPath', { config: './something' }); 26 | 27 | assert.ok(actual.configFile.endsWith('something')); 28 | }); 29 | 30 | it('should return config with `config` option as object', () => { 31 | const expected = { rules: 'something' }; 32 | 33 | const actual = settingsManager.prepare('rootPath', { config: { rules: 'something' } }); 34 | 35 | assert.deepEqual(actual, expected); 36 | }); 37 | 38 | it('should return config with overrided rules', () => { 39 | const expected = { 40 | rules: { rule: { state: 'upper' } } 41 | }; 42 | 43 | const actual = settingsManager.prepare('rootPath', { 44 | config: { 45 | rules: { rule: { state: 'lower' } } 46 | }, 47 | useStylelintConfigOverrides: true, 48 | configOverrides: { rule: { state: 'upper' } } 49 | }); 50 | 51 | assert.deepEqual(actual, expected); 52 | }); 53 | 54 | it('should return config with non-overrided rules', () => { 55 | const expected = { 56 | rules: { rule: { state: 'lower' } } 57 | }; 58 | 59 | const actual = settingsManager.prepare('rootPath', { 60 | config: { 61 | rules: { rule: { state: 'lower' } } 62 | }, 63 | useStylelintConfigOverrides: false, 64 | configOverrides: { rule: { state: 'upper' } } 65 | }); 66 | 67 | assert.deepEqual(actual, expected); 68 | }); 69 | }); 70 | -------------------------------------------------------------------------------- /src/extension.ts: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import * as vscode from 'vscode'; 4 | 5 | import * as stylefmt from './stylefmt'; 6 | import * as utils from './utils'; 7 | 8 | import * as Types from './types'; 9 | 10 | function getSettings(document: vscode.TextDocument): Types.ISettings { 11 | const workspaceFolder = vscode.workspace.getWorkspaceFolder(document.uri); 12 | 13 | return Object.assign( 14 | {}, 15 | vscode.workspace.getConfiguration('stylefmt', workspaceFolder.uri), 16 | vscode.workspace.getConfiguration('stylelint', workspaceFolder.uri), 17 | vscode.workspace.getConfiguration('editor', workspaceFolder.uri).get('formatOnSave') 18 | ); 19 | } 20 | 21 | function needShowErrorMessages(settings: Types.ISettings): boolean { 22 | return settings.formatOnSave ? false : settings.showErrorMessages; 23 | } 24 | 25 | export function activate(context: vscode.ExtensionContext) { 26 | const outputChannel: vscode.OutputChannel = null; 27 | 28 | // Supported languages 29 | const supportedDocuments: vscode.DocumentSelector = [ 30 | { language: 'css', scheme: 'file' }, 31 | { language: 'postcss', scheme: 'file' }, 32 | { language: 'less', scheme: 'file' }, 33 | { language: 'scss', scheme: 'file' }, 34 | { language: 'sugarss', scheme: 'file' } 35 | ]; 36 | 37 | // For plugin command: "stylefmt.execute" 38 | const command = vscode.commands.registerTextEditorCommand('stylefmt.execute', (textEditor) => { 39 | const document = textEditor.document; 40 | const settings = getSettings(document); 41 | const needShowErrors = needShowErrorMessages(settings); 42 | 43 | stylefmt 44 | .use(settings, document, null) 45 | .then((result) => { 46 | textEditor.edit((editBuilder) => { 47 | editBuilder.replace(result.range, result.css); 48 | }); 49 | }) 50 | .catch((err) => utils.output(outputChannel, err, needShowErrors)); 51 | }); 52 | 53 | // For commands: "Format Document" and "Format Selection" 54 | const format = vscode.languages.registerDocumentRangeFormattingEditProvider(supportedDocuments, { 55 | provideDocumentRangeFormattingEdits(document, range) { 56 | const settings = getSettings(document); 57 | const needShowErrors = needShowErrorMessages(settings); 58 | 59 | return stylefmt 60 | .use(settings, document, range) 61 | .then((result) => [vscode.TextEdit.replace(range, result.css)]) 62 | .catch((err) => utils.output(outputChannel, err, needShowErrors)); 63 | } 64 | }); 65 | 66 | // Subscriptions 67 | context.subscriptions.push(command); 68 | context.subscriptions.push(format); 69 | } 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vscode-stylefmt 2 | 3 | > [stylefmt](https://github.com/morishitter/stylefmt) is a tool that automatically formats your stylesheets. 4 | 5 | ## :warning: This plugin is archived 6 | 7 | The main package ([`stylefmt`](https://github.com/morishitter/stylefmt)) does not develop. 8 | 9 | Alternatively you can use: 10 | 11 | * [vscode-stylefmt](https://github.com/ronilaukkarinen/vscode-stylefmt) plugin with `stylefmt` [fork](https://github.com/ronilaukkarinen/stylefmt). 12 | * [`postcss`](https://github.com/postcss/postcss) with similar plugins. 13 | * [`stylelint`](https://github.com/stylelint/stylelint) 14 | 15 | ## Donation 16 | 17 | Do you like this project? Support it by donating, creating an issue or pull request. 18 | 19 | [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/mrmlnc) 20 | 21 | ## Install 22 | 23 | * Press F1 and `select Extensions: Install Extensions`. 24 | * Search for and select `stylefmt`. 25 | 26 | See the [extension installation guide](https://code.visualstudio.com/docs/editor/extension-gallery) for details. 27 | 28 | ## Usage 29 | 30 | * You can use global keyboard shortcut ALT+SHIFT+F or right-click context menu `Format code`. 31 | * Or press F1 and run the command named `stylefmt: Format CSS`. 32 | 33 | ## Supported languages 34 | 35 | * CSS 36 | * PostCSS 37 | * Less 38 | * SCSS 39 | * SugarSS 40 | 41 | ## Supported settings 42 | 43 | **configBasedir** 44 | 45 | * Type: `string` 46 | * Default: `null` 47 | 48 | Base working directory; useful for stylelint `extends` parameter. 49 | 50 | **config** 51 | 52 | * Type: `object || string` 53 | * Default: `null` 54 | 55 | Config object for stylelint or path to a stylelint config file. 56 | 57 | *Will automatically look for `.stylelintrc` and `stylelint.config.js` in workspace root, or a `stylelint` param in the `package.json`, if config is omitted.* 58 | 59 | > **Warning!** 60 | > 61 | > If you want to specify a file in the current directory, the path must begin with a `./` or `../` if relative to the current directory. Also you can use HOME directory as `~` symbol. 62 | 63 | **useStylelintConfigOverrides** 64 | 65 | * Type: `boolean` 66 | * Default: `false` 67 | 68 | Overrides rules using Stylelint plugin settings. 69 | 70 | **showErrorMessages** 71 | 72 | * Type: `boolean` 73 | * Default: `true` 74 | 75 | Show error messages or not. Will be automatically set to false if `editor.formatOnSave` is enabled. 76 | 77 | ## Keyboard shortcuts 78 | 79 | For changes keyboard shortcuts, create a new rule in `File -> Preferences -> Keyboard Shortcuts`: 80 | 81 | ```json 82 | { 83 | "key": "ctrl+shift+c", 84 | "command": "stylefmt.execute" 85 | } 86 | ``` 87 | 88 | ## Custom configuration 89 | 90 | Read about the [stylelint rules](https://github.com/morishitter/stylefmt#stylelint-rules-that-stylefmt-can-handle) and [default rules](https://github.com/morishitter/stylefmt#default-formatting-rules-without-stylelint-config-file) in stylefmt repository. 91 | 92 | ## Changelog 93 | 94 | See the [Releases section of our GitHub project](https://github.com/mrmlnc/vscode-stylefmt/releases) for changelogs for each release version. 95 | 96 | ## License 97 | 98 | This software is released under the terms of the MIT license. 99 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vscode-stylefmt", 3 | "displayName": "stylefmt", 4 | "description": "Modern CSS Formatter", 5 | "version": "2.6.2", 6 | "publisher": "mrmlnc", 7 | "license": "MIT", 8 | "engines": { 9 | "vscode": "^1.16.0" 10 | }, 11 | "icon": "icon.png", 12 | "homepage": "https://github.com/mrmlnc/vscode-stylefmt/blob/master/README.md", 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/mrmlnc/vscode-stylefmt" 16 | }, 17 | "keywords": [ 18 | "css", 19 | "SCSS", 20 | "format", 21 | "style", 22 | "stylefmt" 23 | ], 24 | "categories": [ 25 | "Formatters" 26 | ], 27 | "activationEvents": [ 28 | "onCommand:stylefmt.execute", 29 | "onLanguage:css", 30 | "onLanguage:postcss", 31 | "onLanguage:less", 32 | "onLanguage:scss", 33 | "onLanguage:sugarss" 34 | ], 35 | "main": "./out/extension", 36 | "contributes": { 37 | "commands": [ 38 | { 39 | "command": "stylefmt.execute", 40 | "title": "stylefmt: Format CSS" 41 | } 42 | ], 43 | "configuration": { 44 | "type": "object", 45 | "title": "stylefmt configuration", 46 | "properties": { 47 | "stylefmt.configBasedir": { 48 | "type": "string", 49 | "default": "", 50 | "description": "Base working directory; useful for stylelint extends parameter." 51 | }, 52 | "stylefmt.config": { 53 | "type": [ 54 | "string", 55 | "object" 56 | ], 57 | "default": "", 58 | "description": "Config object for stylelint or path to a stylelint config file." 59 | }, 60 | "stylefmt.useStylelintConfigOverrides": { 61 | "type": "boolean", 62 | "default": false, 63 | "description": "Overrides rules using stylelint plugin setting 'stylelint.configOverrides'." 64 | }, 65 | "stylefmt.showErrorMessages": { 66 | "type": "boolean", 67 | "default": true, 68 | "description": "Show error messages or not. Will be automatically set to false if 'editor.formatOnSave' is enabled." 69 | } 70 | } 71 | }, 72 | "jsonValidation": [ 73 | { 74 | "fileMatch": "**/.stylelintrc*", 75 | "url": "http://json.schemastore.org/stylelintrc.json" 76 | } 77 | ] 78 | }, 79 | "devDependencies": { 80 | "@types/extend": "3.0.1", 81 | "@types/mocha": "7.0.2", 82 | "@types/node": "8.0.17", 83 | "@types/proxyquire": "1.3.28", 84 | "@types/rimraf": "3.0.0", 85 | "@types/vscode": "1.16.0", 86 | "mocha": "7.1.2", 87 | "proxyquire": "2.1.3", 88 | "rimraf": "3.0.2", 89 | "tslint": "5.5.0", 90 | "tslint-config-xo": "1.3.0", 91 | "typescript": "2.4.2" 92 | }, 93 | "dependencies": { 94 | "extend": "3.0.1", 95 | "postcss": "6.0.8", 96 | "postcss-scss": "1.0.2", 97 | "stylefmt": "6.0.3", 98 | "sugarss": "2.0.0" 99 | }, 100 | "scripts": { 101 | "clean": "rimraf out", 102 | "lint": "tslint src/**/*.ts", 103 | "compile": "tsc", 104 | "test": "mocha out/**/*.spec.js -s 0", 105 | "build": "npm run clean && npm run lint && npm run compile && npm t", 106 | "watch": "npm run clean && npm run lint && npm run compile -- --sourceMap --watch" 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /CODE-OF-CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at dmalinochkin@rambler.ru. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | -------------------------------------------------------------------------------- /src/stylefmt/index.spec.ts: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import * as assert from 'assert'; 4 | import * as fs from 'fs'; 5 | 6 | import * as rimraf from 'rimraf'; 7 | import * as vscode from 'vscode'; 8 | import * as proxyquire from 'proxyquire'; 9 | 10 | import * as Types from '../types'; 11 | 12 | const text = fs.readFileSync('./fixtures/test.scss').toString(); 13 | 14 | export function fileExist(filepath: string): Promise { 15 | return new Promise((resolve) => { 16 | fs.access(filepath, (err) => resolve(!err)); 17 | }); 18 | } 19 | 20 | export function removeFile(filepath: string): Promise { 21 | return fileExist(filepath).then((exists) => { 22 | if (!exists) { 23 | return false; 24 | } 25 | 26 | return new Promise((resolve, reject) => { 27 | fs.unlink(filepath, (err) => err ? reject(err) : resolve()); 28 | }); 29 | }); 30 | } 31 | 32 | export function writeFile(filepath: string, data: string) { 33 | return new Promise((resolve, reject) => { 34 | fs.writeFile(filepath, data, (err) => err ? reject(err) : resolve()); 35 | }); 36 | } 37 | 38 | function mockupDocument(): vscode.TextDocument { 39 | return { 40 | uri: { fsPath: '.tmp/test.scss' }, 41 | lineCount: text.split('\n').length, 42 | lineAt: (line: number) => ({ 43 | lineNumber: line, 44 | text: text.split('\n')[line] 45 | }), 46 | getText: () => text 47 | }; 48 | } 49 | 50 | class Position { 51 | constructor(public line: number, public character: number) { } 52 | } 53 | 54 | class Range { 55 | constructor(public start: Position, public end: Position) { } 56 | } 57 | 58 | const stylefmt = proxyquire('./index', { 59 | vscode: { 60 | Position, 61 | Range, 62 | workspace: { 63 | getWorkspaceFolder: () => ({ uri: { fsPath: '.tmp' } }) 64 | }, 65 | '@noCallThru': true 66 | } 67 | }); 68 | 69 | describe('Stylefmt API', () => { 70 | before(() => { 71 | rimraf.sync('./.tmp'); 72 | fs.mkdirSync('./.tmp'); 73 | fs.writeFileSync('./.tmp/test.scss', text); 74 | }); 75 | 76 | afterEach(() => { 77 | rimraf.sync('./.tmp/!(test.scss)*'); 78 | }); 79 | 80 | after(() => { 81 | rimraf.sync('./.tmp'); 82 | }); 83 | 84 | it('should work without configuration', async () => { 85 | const document = mockupDocument(); 86 | const settings: Types.ISettings = {}; 87 | 88 | const result = await stylefmt.use(settings, document, null); 89 | 90 | assert.ok(result.css.search('@mixin clearfix()') !== -1); 91 | }); 92 | 93 | it('should work with stylelint config as js file', async () => { 94 | const configTpl = 'module.exports={rules:{\'color-hex-case\':\'upper\'}}'; 95 | 96 | const document = mockupDocument(); 97 | const settings: Types.ISettings = {}; 98 | 99 | await writeFile('./.tmp/stylelint.config.js', configTpl); 100 | 101 | const result = await stylefmt.use(settings, document, null); 102 | 103 | assert.ok(result.css.search('#AAACCC') !== -1); 104 | }); 105 | 106 | it('should work with stylelint config as field in package.json', async () => { 107 | const configTpl = '{"stylelint":{"rules":{"color-hex-case":"upper"}}}'; 108 | 109 | const document = mockupDocument(); 110 | const settings: Types.ISettings = {}; 111 | 112 | await writeFile('./.tmp/package.json', configTpl); 113 | 114 | const result = await stylefmt.use(settings, document, null); 115 | 116 | assert.ok(result.css.search('#AAACCC') !== -1); 117 | }); 118 | 119 | it('should work with stylelint config as .stylelintrc file with JSON syntax', async () => { 120 | const configTpl = '{rules:{"color-hex-case":"upper"}}'; 121 | 122 | const document = mockupDocument(); 123 | const settings: Types.ISettings = {}; 124 | 125 | await writeFile('./.tmp/.stylelintrc', configTpl); 126 | 127 | const result = await stylefmt.use(settings, document, null); 128 | 129 | assert.ok(result.css.search('#AAACCC') !== -1); 130 | }); 131 | 132 | it('should work with stylelint config as .stylelintrc file with YAML syntax', async () => { 133 | const configTpl = 'rules:\n color-hex-case: upper'; 134 | 135 | const document = mockupDocument(); 136 | const settings: Types.ISettings = {}; 137 | 138 | await writeFile('./.tmp/.stylelintrc', configTpl); 139 | 140 | const result = await stylefmt.use(settings, document, null); 141 | 142 | assert.ok(result.css.search('#AAACCC') !== -1); 143 | }); 144 | 145 | it('should work with config string from settings', async () => { 146 | const configTpl = '{rules:{"color-hex-case":"upper"}}'; 147 | 148 | const document = mockupDocument(); 149 | const settings: Types.ISettings = { 150 | config: './.my-stylelint-config.json' 151 | }; 152 | 153 | await writeFile('./.tmp/.my-stylelint-config.json', configTpl); 154 | 155 | const result = await stylefmt.use(settings, document, null); 156 | 157 | assert.ok(result.css.search('#AAACCC') !== -1); 158 | }); 159 | }); 160 | --------------------------------------------------------------------------------