vkadam / grunt-jsbeautifier

Beautify js, css, html and json files using Grunt and https://github.com/einars/js-beautify

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Config file

0x3333 opened this issue · comments

Hi!

I have a .jsbeautifyrc file with the following content:

{
    "js": {
        "indentSize": 2,
        "indentChar": " ",
        "preserveNewlines": true,
        "maxPreserveNewlines": 2
    },
    "css": {
        "indentSize": 2,
        "indentChar": " ",
        "preserveNewlines": true,
        "maxPreserveNewlines": 1
    },
    "html": {
        "indentSize": 2,
        "indentChar": " ",
        "preserveNewlines": true,
        "maxPreserveNewlines": 1
    }
}

Target:

    jsbeautifier: {
      options: {
        config: '.jsbeautifyrc'
      },
      files: [
        '<%= config.srcPath %>/css/app.scss'
      ]
    },

app.scss:

@import 'const';

/* Main */

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: $google-maps-background-color;
}

When I run the target above I get my css scrambled. Output:

@import 'const'; /* Main */ html { height: 100%; } body { height: 100%; margin: 0px; padding: 0px; background-color: $background-color; }

With -v option I see the output:

Beautify config before converting camelcase to underscore: {"js":{"js":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":2},"css":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":1},"html":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":1},"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":2,"fileTypes":[".js",".json"]},"css":{"js":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":2},"css":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":1},"html":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":1},"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":1,"fileTypes":[".css"]},"html":{"js":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":2},"css":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":1},"html":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":1},"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":1,"fileTypes":[".html"]}}

Using beautify config: {"js":{"js":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":2},"css":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":1},"html":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":1},"fileTypes":[".js",".json"],"indent_size":2,"indent_char":" ","preserve_newlines":true,"max_preserve_newlines":2},"css":{"js":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":2},"css":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":1},"html":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":1},"fileTypes":[".css"],"indent_size":2,"indent_char":" ","preserve_newlines":true,"max_preserve_newlines":1},"html":{"js":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":2},"css":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":1},"html":{"indentSize":2,"indentChar":" ","preserveNewlines":true,"maxPreserveNewlines":1},"fileTypes":[".html"],"indent_size":2,"indent_char":" ","preserve_newlines":true,"max_preserve_newlines":1}}

The properties in the final config doesn't get merged, they are multiplied(Just the output above formatted):

{
    "js": {
        "js": {
            "indentSize": 2,
            "indentChar": " ",
            "preserveNewlines": true,
            "maxPreserveNewlines": 2
        },
        "css": {
            "indentSize": 2,
            "indentChar": " ",
            "preserveNewlines": true,
            "maxPreserveNewlines": 1
        },
        "html": {
            "indentSize": 2,
            "indentChar": " ",
            "preserveNewlines": true,
            "maxPreserveNewlines": 1
        },
        "indentSize": 2,
        "indentChar": " ",
        "preserveNewlines": true,
        "maxPreserveNewlines": 2,
        "fileTypes": [".js", ".json"]
    },
    "css": {
        "js": {
            "indentSize": 2,
            "indentChar": " ",
            "preserveNewlines": true,
            "maxPreserveNewlines": 2
        },
        "css": {
            "indentSize": 2,
            "indentChar": " ",
            "preserveNewlines": true,
            "maxPreserveNewlines": 1
        },
        "html": {
            "indentSize": 2,
            "indentChar": " ",
            "preserveNewlines": true,
            "maxPreserveNewlines": 1
        },
        "indentSize": 2,
        "indentChar": " ",
        "preserveNewlines": true,
        "maxPreserveNewlines": 1,
        "fileTypes": [".css"]
    },
    "html": {
        "js": {
            "indentSize": 2,
            "indentChar": " ",
            "preserveNewlines": true,
            "maxPreserveNewlines": 2
        },
        "css": {
            "indentSize": 2,
            "indentChar": " ",
            "preserveNewlines": true,
            "maxPreserveNewlines": 1
        },
        "html": {
            "indentSize": 2,
            "indentChar": " ",
            "preserveNewlines": true,
            "maxPreserveNewlines": 1
        },
        "indentSize": 2,
        "indentChar": " ",
        "preserveNewlines": true,
        "maxPreserveNewlines": 1,
        "fileTypes": [".html"]
    }
}

I see what you are saying, but it shouldn't affect as its adding expected config as well. If you see attribute maxPreserveNewlines in js, css & html you will notice the difference.

I will update the code to remove unwanted properties after merge.

Regarding .scss file, please check if its supported by https://github.com/beautify-web/js-beautify

If .scss files are supported by js-beautify, then you will need to specify using, https://github.com/vkadam/grunt-jsbeautifier#3-beautify-files-other-than-js-json-es6-css--html

Unwanted config is removed in 480e22d, will be published in next version

Released 0.2.12