matype / scssfmt Goto Github PK

View Code? Open in Web Editor NEW

57.0 1.0 4.0 1.55 MB

Standard SCSS code formatter

License: Other

JavaScript 100.00%

css formatter beautifier sass scss

scssfmt's Introduction

Standard SCSS code formatter

Installation

$ npm install scssfmt

Install to global (If you install scssfmt global, you can use it easily in CLI):

$ npm install -g scssfmt

Usage

in Command Line

Simple usage:

$ scssfmt input.css output.css

`--watch`

Watch one file:

$ scssfmt --watch input.css

Watch multiple files by glob:

$ scssfmt --watch 'app/assets/stylesheets/**/*.scss'

with --ignore option:

$ scssfmt --watch 'app/assets/stylesheets/**/*.scss' --ignore app/assets/stylesheets/ignore.css

also can use specify multiple files by glob:

$ scssfmt --watch 'app/assets/stylesheets/**/*.scss' --ignore 'app/assets/stylesheets/ignore/**/*'

`--recursive`

Format multiple files by glob:

$ scssfmt --recursive 'app/assets/stylesheets/**/*.scss'

`--diff`

Show diff (don't change code):

$ scssfmt input.css --diff

`--help`

CLI help:

$ scssfmt --help

Usage: scssfmt [options] input-name [output-name]

Options:

  -w, --watch            Watch directories or files
  -d, --diff             Output diff against original file
  -r, --recursive        Format list of space seperated files(globs) in place
  -v, --version          Output the version number
  -h, --help             Output usage information
  --stdin-filename       A filename to assign stdin input.

Use stdin as inputs

scssfmt can also read a file from stdin if there are no input-file as argument in CLI.

$ cat input.css | scssfmt --stdin-filename input.css

Node.js

const fs = require('fs')
const scssfmt = require('scssfmt')

const css = fs.readFileSync('example.css', 'utf-8')
const formatted = scssfmt(css)

PostCSS plugin

const fs = require('fs')
const scssfmt = require('scssfmt')

const css = fs.readFileSync('example.css', 'utf-8')
postcss([scssfmt.plugin()])
  .process(css, {syntax: scss})
  .then(result => {
    const formatted = result.css
  })

Rules for formatting

2 spaces indentation
require 1 space between a simple selector and combinator
require new line between selectors
require 1 space between selectors and {
require new line after {
disallow any spaces between property and :
require 1 space between : and values
require a new line after declarations at least
require ; in last declaration
require 1 space between values and !important
Do not format any spaces between rules
Do not format any spaces between a rule and a comment
require 1 space between a value and !important
require 1 space between @mixin and mixin name
require 1 space between mixin name and (
require 1 space between @extend and base rules
require 1 space between @include and mixin name
disallow any spaces between $variable and :
require 1 space between : and name of variable
Do not format any spaces before @else

Examples

See tests.

License

The MIT License (MIT)

scssfmt's People

Contributors

Stargazers

Watchers

Forkers

jiroor nowinskp

scssfmt's Issues

Remove trailing newlines

I noticed that leading newlines are removed, but not trailing newlines. This would be a nice improvement.

Is it ok to use it for a files which has no scss specific syntax, only css?

Hi! I know that the current vogue is to only indent with spaces, but I find that two spaces is not nearly wide enough for me to see a hierarchy well. I have hacked in support for tab indentation (well, "hacked" is not the word, in changes two lines). Would you be willing to add a command-line flag to use tabs instead of two spaces for indentation?

(I used tabs instead of four spaces because people can set tab-stops to be whatever they find the best -- four spaces is what I would use, but some may want three or six, etc.)

Thanks,
Ricky

Can it be used with lint-staged and Husky to autoformat on pre-commit?

https://github.com/okonet/lint-staged
https://github.com/typicode/husky

How to change from spaces to tabs?

Passing --recursive flag with --diff always results in non-zero exit code

Issue #11 actually didn't fix in the way I was expecting:

$ scssfmt --version
1.0.4
$ echo "foo { width: 50px; }" > /tmp/foo.scss             
$ scssfmt --recursive "/tmp/*.scss" --diff
/tmp/foo.scss
There is no difference with the original file.
$ echo $?
1

Expected: scssfmt returns zero when there are no diffs, non-zero when there are diffs
Actual: scssfmt always returns non-zero when user passes --recursive and --diff flags

Feature request: Return non-zero exit code when --diff identifies a diff

I'm using scssfmt in my build script to make sure my Sass files are always formatted correctly.

One thing that would be nice is if it sets its exit code to non-zero when run with the --diff flag and it finds a diff in any file. This makes behavior consistent with the built-in diff utility and makes it easy for people to use it in build scripts.

Otherwise, I think the client has to parse the stdout to make sure --diff producted no actual diffs.

--diff has inconsistent exit code depending on if --recursive is present

This is related to #8.

I've confirmed that the exit code is set to non-zero for a single file:

$ ./node_modules/.bin/scssfmt --version
1.0.3
$ echo "foo {width:50px; }" > /tmp/foo.scss
$ ./node_modules/.bin/scssfmt /tmp/foo.css --diff
/tmp/foo.css
-foo {width:50px; }
+foo { width: 50px; }
$ echo $?
1

But if the user uses the --recursive flag, the exit code is not set:

$ ./node_modules/.bin/scssfmt --version
1.0.3
$ echo "foo {width:50px; }" > /tmp/foo.scss
$ echo "bar {width:50px; }" > /tmp/bar.scss    
$ ./node_modules/.bin/scssfmt --recursive "/tmp/*.scss" --diff
/tmp/bar.scss
-bar {width:50px; }
+bar { width: 50px; }

/tmp/foo.scss
-foo {width:50px; }
+foo { width: 50px; }
$ echo $?
0

Expected: With the --recursive flag, the exit code is non-zero if there were diffs in any files.
Actual: Passing the --recursive flag seems to always make the return code zero.

nth-child not support

.class { &:nth-child(3n + 1) { } }

After scssfmt :

.class { false { } }

noDiffsWords is not defined

This change caused our scripts to fail with:

./node_modules/scssfmt/cli.js src/app/frontend/_theming.scss --diff
/home/floreks/Projects/go/src/github.com/kubernetes/dashboard/node_modules/scssfmt/cli.js:162
    diff = noDiffsWords
    ^

ReferenceError: noDiffsWords is not defined
    at handleDiff (/home/floreks/Projects/go/src/github.com/kubernetes/dashboard/node_modules/scssfmt/cli.js:162:5)
    at Object.<anonymous> (/home/floreks/Projects/go/src/github.com/kubernetes/dashboard/node_modules/scssfmt/cli.js:91:17)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)
    at executeUserCode (internal/bootstrap/node.js:342:17)
    at startExecution (internal/bootstrap/node.js:276:5)

The reason is that this variable is forward referenced in here. Moving noDiffsWords definition to the top fixes the issue.