sjova / vscode-sass-format Goto Github PK

This might be a question for how to set up Vscode more so than this extension, but I've had an annoying thing where the sass formatter interrupts my workflow while I'm typing. I'd love to only have it run on save instead of keyup. How to do this?

Issue Type: Bug

Frequently gettig this popup error while using VS Code

Extension version: 1.1.7
VS Code version: Code 1.62.3 (ccbaa2d27e38e5afa3e5c21c1c7bef4657064247, 2021-11-17T08:11:14.551Z)
OS version: Windows_NT x64 10.0.19044
Restricted Mode: No

vsliv368cf:30146710
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
pythontb:30283811
pythonptprofiler:30281270
vshan820:30294714
vstes263:30335439
vscorecescf:30384386
pythondataviewer:30285071
vscod805:30301674
pythonvspyt200:30340761
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
pythonrunftest32:30373476
pythonf5test824:30373475
javagetstartedt:30391933
pythonvspyt187:30373474
vsaa593cf:30376535
vscexrecpromptt2:30404948
vscop804:30404766
vs360:30404995

Just asking... :)

According to SassDoc/sass-convert#10 (comment) it seems that sass-convert is deprecated and should be replaced.

The description of this tool says "Beautify sass, scss and css files." but when I try to format a CSS file I get the wrong format:

Take a look to this gif:
https://cl.ly/3s3s2H1K152o

I've seen #18, and there hasn't seem to be advancement since then (I still get the sass-convert not found error)

What would it take to move to node-sass, which is more likely to be installed alongside a JavaScript editor like VSCode?

I'm willing to put out a PR if it isn't too huge of an endeavour ;)

Issue Type: Bug

For some reason, whenever I correct something that is less than 1, it gets corrected to the final digit rather than the original decimal without the zero.

Examples:

| Before   | After | Should be |
| -------- | ----- | --------- |
| 0.125rem | .5rem | .125rem   |
| 0.33rem  | .3rem | .33rem    |
| .66rem   | .6rem | .66rem    |
| 0.8em    | .8em  | .8em      |
| 1.4px    | 1.4px | 1.4px     |

My information:

• OS: macOS Mojave 10.14 (Darwin x64 18.0.0)
• VS Code version: 1.28.2 (7f3ce96ff4729c91352ae6def877e59c561f4850, 2018-10-17T00:18:43.347Z)
• Sass Formatter version: 1.1.6
• sass-convert version: Sass 3.6.0
• Console errors: none

$ which sass-convert
/usr/local/bin/sass-convert

$ sass-convert --version
Sass 3.4.23 (Selective Steve)

console of developer tools error:

[Extension Host] Error: Command failed: which sass-convert
/usr/local/bin/sass-convert
/bin/sh: sass-convert: command not found

at checkExecSyncError (child_process.js:502:13)
at Object.execSync (child_process.js:542:13)
at Object.childProcess.(anonymous function) [as execSync] (ELECTRON_ASAR.js:685:22)
at checkDependencies (/Users/sldobri/.vscode/extensions/sasa.vscode-sass-format-1.0.0/out/src/extension.js:17:25)
at registerSassFormat (/Users/sldobri/.vscode/extensions/sasa.vscode-sass-format-1.0.0/out/src/extension.js:11:5)
at activate (/Users/sldobri/.vscode/extensions/sasa.vscode-sass-format-1.0.0/out/src/extension.js:7:32)
at Function.t._callActivateOptional (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:373080)
at Function.t._callActivate (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:372865)
at /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:372640
at Object.m [as _notify] (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:62432)

I'm trying to do:

// sass-lint:disable-all
:root {
    --background-image: url("nonrelevanturl");
}
// sass-lint:enable-all

But linter still warning and stopping the formatting
Error is: Invalid CSS after "...kground-image: ": expected "}", was "url("..."

HI,

I get this error when I save, and I'm using the sass syntax. Am I missing something? Do I need to configure the plugin?

Thanks,
Chris

If I set "editor.formatOnSave": true in VS Code, when I save my .sass file after modify, vscode-sass-format plugin will reset my file before excute sass-format.

When saving a file Sass Maps turn into one line, which is not good for readability. The following is a short example, but it gets messier when an extensive, nested map (map-deep-get) is parsed:

Before:

$colors: (
    one: #113751,
    two: #f5c71f,
    three: #0085ba,
    light: #E5E5E5,
    medium: #475058,
    dark: #23282d
);

After:

$colors: (one: #113751, two: #f5c71f, three: #0085ba, light: #E5E5E5, medium: #475058, dark: #23282d);

Nested Map:

$heading: (color: ("h1": color("dark"), "h2": color("dark"), "h3": color("dark"), "h4": color("dark"), "h5": color("dark"), "h6": color("dark")), desktop: ("h1": 48px, "h2": 40px, "h3": 28px, "h4": 28px, "h5": 24px, "h6": 20px), tablet: ("h1": 35px, "h2": 30px, "h3": 26px, "h4": 26px, "h5": 22px, "h6": 20px), mobile: ("h1": 30px, "h2": 26px, "h3": 23px, "h4": 23px, "h5": 20px, "h6": 20px), font-family: font("heading"), font-weight: ("h1": 400, "h2": 400, "h3": 400, "h4": 400, "h5": 400, "h6": 400), line-height: 1.1, letter-spacing: 0, margin-bottom: ("h1": 15px, "h2": 15px, "h3": 15px, "h4": 15px, "h5": 15px, "h6": 15px), text-transform: ("h1": none, "h2": none, "h3": none, "h4": none, "h5": none, "h6": none)) !default;

Is there any way we can ignore maps all together from being parsed? This would be a major win for me.

It's a little frustrating when the output windows opens automatically when typing an error, or even when a bracket is not closed while still editing.

Can i turn that off?

Usually the trailing 0 in CSS/SCSS is deprecated, it would be nice if users can turn it off with a workspace setting such as "sassFormat.trailingZero": false, for example with the current stylelint set I have the trailing 0 is an error and the sass formatter will keep adding it

Hi,

I think this extension is great and I'm really appreciative for the effort you have put in!

I have some suggestions which could make this extension better:

Add a sass-lint integration, this would be really useful when auto-formating your code, it would read the .sass-lint.yml file in the root of your project and would use settings from there.

I would recommend adding an option to remove the '0' in decimal values that are below the integer of 1. For example,

instead of

transform: scale(0.6);

it would be

transform: scale(.6);

These are just my suggestions anyway, really liking this extension, thanks!

The installation instructions link say you must run npm install -g sass but that doesn't install sass-convert.

When I create resets and the like, I normally will not put each selector on a new line to conserve space like so:

html, body,
h1, h2, h3, h4,h5, h6,
a, p, span, em, small, strong, (and so on) 
{
	display: block;
}

Is there a way to create an exception for the auto line-return formatting in these cases?

useSingleQuotes rule will format double quote from commented text . We are using KSS documentation in which we have defined our markup in scss files and this rule replace all double quote from commented markup. e.g.
before running formatter:
/* <ex-input-form labelText= "this doesn't format" */

after running formatter:
/* <ex-input-form labelText= 'this doesn't format'> */
which leads error while rendering KSS documentaion.
please help on this.

There seems to be an issue when using single quotes and inserting a URL, it leave the first single quote alone but changes the last to a double quote, results in errors.

e.g.
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

gets changed to
@import url('https://fonts.googleapis.com/css?family=Open+Sans");

macOS 10.14
VSCode 1.27.2
Sass Formatter 1.1.6

Other extensions I have installed for sass are SCSS IntelliSense and stylelint. I have tried disabling these, but it is only when I disable the Sass Formatter plugin that it stops doing this.

Thanks in advance.

For Example:

Current

$break-xtraLarge: "screen and (max-width : 1200px)";
$break-large: "screen and (max-width : 992px)";
$break-medium: "screen and (max-width : 768px)";
$break-small: "screen and (max-width : 576px)";

Expected: Option to format like this.

$break-xtraLarge: "screen and (max-width : 1200px)";
$break-large    : "screen and (max-width : 992px)";
$break-medium   : "screen and (max-width : 768px)";
$break-small    : "screen and (max-width : 576px)";

@mixin button($color) {
  background-color: $color;
  border-color    : $color;

  &:hover {
    background-color: $color;
    border-color    : $color;
  }

  &:focus {
    box-shadow: none;
  }
}

before

Shift+Alt+F

after

The SCSS:

code,
kbd,
samp {
  font-family: $sys-font-stack-mono; // 1
  font-size: 1em; // 2
}

After formatting:

code,
kbd,
samp {
    font-family: $sys-font-stack-mono;

    // 1
    font-size: 1em;

    // 2
}

Line comments shouldn't do this.

Versions: Windows 10, VS Code 1.17.1, Sass Formatter 1.1.1
ruby 2.4.2p198 (2017-09-14 revision 59899) [x64-mingw32]
gem --version: 2.6.13
Sass 3.5.2 (Bleeding Edge)

this is scss:

grid-container {
  grid-template-areas: 
    //  1   2          3            4            5       6       7
    'area-a area-img   area-img     area-img'
    'area-a area-text  area-text    area-text'  
    'area-a area-img2  area-img2    area-img2'  
    'area-a area-b     area-boom    area-boom';
}

after formatting:

  grid-template-areas: 'area-a ar-img  ar-img  ar-img' 'area-a ar-text  ar-text  ar-text'  'area-a ar-img  ar-img  ar-img' 'area-a ar-b  ar-boom  ar-boom';

and the comment is deleted!

it would be nice to do NOT format this style of text or even better, format it into columns which every column would keep the same width for better visual recognition.

When I try to format my scss file on my MacBook with cmd+k cmd+d, I get this error:
/bin/sh: sass-convert: command not found

debug info:

marty@MettBook:~$ ruby --version
ruby 2.3.3p222 (2016-11-21 revision 56859) [universal.x86_64-darwin17]
marty@MettBook:~$ which ruby
/usr/bin/ruby
marty@MettBook:~$ gem --version
2.5.2
marty@MettBook:~$ which gem
/usr/bin/gem
marty@MettBook:~$ sass-convert
-bash: sass-convert: command not found
marty@MettBook:~$ sass-convert --version
-bash: sass-convert: command not found
marty@MettBook:~$ which sass-convert
marty@MettBook:~$ sass --version
1.1.1 compiled with dart2js 2.0.0-dev.36.0
marty@MettBook:~$ which sass
/Users/marty/node_module_collections/default/bin/sass
marty@MettBook:~$ echo $SHELL
/bin/bash
marty@MettBook:~$ echo $PATH
/Users/marty/node_module_collections/default/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/Users/marty/library/android/sdk/tools:/Users/marty/library/android/sdk/platform-tools:/usr/local/bin/ant:/Users/marty/.composer/vendor/bin
marty@MettBook:~$ echo $GEM_PATH

marty@MettBook:~$ cat ~/.bash_profile
# colorful terminal
export PS1="\[\033[36m\]\u\[\033[m\]@\[\033[32m\]\h:\[\033[33;1m\]\w\[\033[m\]\$ "
export CLICOLOR=1
export LSCOLORS=ExFxBxDxCxegedabagacad
alias ls='ls -GFh'

# hat env preq
export JAVA_HOME=$(/usr/libexec/java_home)
export ANDROID_HOME="/Users/marty/library/android/sdk"
export ANT_HOME="/usr/local/Cellar/ant/1.9.6/libexec/"
export KAPSEL_HOME="/Users/marty/SAP/MobileSDK3/KapselSDK"
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:/usr/local/bin/ant

# alias to love
alias love="/Applications/love.app/Contents/MacOS/love"
export KAPSEL_HOME=/Users/marty/SAP/MobileSDK3/KapselSDK

# path to composer bins
export PATH=$PATH:$HOME/.composer/vendor/bin

# paths to node_modules from module_collections selection
export PATH=/Users/marty/node_module_collections/default/bin:$PATH

marty@MettBook:~$ cat ~/.bash_login
cat: /Users/marty/.bash_login: No such file or directory
marty@MettBook:~$ cat ~/.profile
cat: /Users/marty/.profile: No such file or directory

I tried to install the sass command line tools with brew install and with sudo npm install -g. In both cases, the sass command can be found, though.

Please consider adding support for respecting the brace-style setting in sass-lint (I am specifically having issues with the placement of the else clause when auto-formatting).

Current behavior:

@mixin should-hover($excluded-selector: "") {
	@if $excluded-selector != "" {
		@at-root body.should-hover &:hover:not(#{$excluded-selector}),
		&:focus {
			@content;
		}
	}
	@else {
		@at-root body.should-hover &:hover,
		&:focus {
			@content;
		}
	}
}

Expected behaviour:

@mixin should-hover($excluded-selector: "") {
	@if $excluded-selector != "" {
		@at-root body.should-hover &:hover:not(#{$excluded-selector}),
		&:focus {
			@content;
		}
	} @else {
		@at-root body.should-hover &:hover,
		&:focus {
			@content;
		}
	}
}

Something like:

span {
      background: no-repeat left center / 17px auto url('./img/icon-gps.png');
}

will be converted to:

span {
      background: no-repeat left (center / 17px) auto url('./img/icon-gps.png');
}

In such shorthand, / in left center / 17px auto is meant to separate background-position and background-size in order to aviod ambiguity.

I hope this plugin can recognize it and do not wrap it in parentheses.

it's set to 4, but only seems to indent 2 no matter what number is there.