Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Beautify script/style tags but ignore their inner JS/CSS content #906

Closed
callmevlad opened this issue Mar 23, 2016 · 5 comments · Fixed by #1080
Closed

Beautify script/style tags but ignore their inner JS/CSS content #906

callmevlad opened this issue Mar 23, 2016 · 5 comments · Fixed by #1080
Labels
language: html type: enhancement
Milestone
v1.6.7

Comments

@callmevlad
Copy link

Given the following HTML input:

<body><h1>Heading</h1><script>var formatMe = function() { return false; };</script><style>.format-disabled { display: none; } </style></body>

Running a stock html_beautify results in (as expected):

<body>
    <h1>Heading</h1>
    <script>
        var formatMe = function() {
            return false;
        };
    </script>
    <style>
        .format-disabled {
            display: none;
        }
    </style>
</body>

However, I want to disable js-beautify from touching anything inside <script> and <style> tags, so I set the following options:

{
  unformatted: [ 'script', 'style' ]
}

But this results in the <script> and <style> tags not having newlines before them, and the closing </body> isn't formatted properly on its own line (edit: looks like this is #900):

<body>
    <h1>Heading</h1><script>var formatMe = function() { return false; };</script><style>.format-disabled { display: none; } </style></body>

I can use the extra_liners option to sort of force the closing body tag to wrap, but it adds two newlines instead of one:

{
  unformatted: [ 'script', 'style' ],
  extra_liners: [ '/body' ]
}

<body>
    <h1>Heading</h1><script>var formatMe = function() { return false; };</script><style>.format-disabled { display: none; } </style>

</body>

And it seems like extra_liners doesn't work for <script> and <style> tags at all:

{
  unformatted: [ 'script', 'style' ],
  extra_liners: [ 'script', 'style', '/body' ]
}

<body>
    <h1>Heading</h1><script>var formatMe = function() { return false; };</script><style>.format-disabled { display: none; } </style>

</body>

What I really want is this output:

<body>
    <h1>Heading</h1>
    <script>var formatMe = function() { return false; };</script>
    <style>.format-disabled { display: none; } </style>
</body>

But it doesn't seem possible given the current config options. Is there any way to force these outer <script> and <style> tags to format properly, but skip formatting everything inside of them?
@bitwiseman
Copy link
Member

There isn't a setting for what you want to do at this time, sorry.

Until we add that behavior, it wouldn't be hard to modify the code to achieve your goal here.

@bitwiseman bitwiseman modified the milestones: v2.0.0, v1.6.3 Mar 24, 2016
@callmevlad
Copy link
Author

Thanks for letting me know.

@bitwiseman Is it correct that this was added to the v1.6.3 milestone?

@bitwiseman
Copy link
Member

I added it to the list of issues I'm looking to address in 1.6.3 (not published yet), but it may get pushed out a bit further.

@callmevlad callmevlad changed the title Is it possible to beautify script/style tags but ignore their inner JS/CSS content? Beautify script/style tags but ignore their inner JS/CSS content Apr 19, 2016
@callmevlad
Copy link
Author

If anyone else is interested in this issue, I just posted a $300 bounty on Bountysource: https://www.bountysource.com/issues/32197949-beautify-script-style-tags-but-ignore-their-inner-js-css-content

@bitwiseman bitwiseman modified the milestones: v1.6.3, v1.6.4 Jun 3, 2016
@bitwiseman bitwiseman modified the milestones: v1.6.4, v1.6.5 Aug 28, 2016
@bitwiseman bitwiseman modified the milestones: v1.6.5, v1.7.x Dec 19, 2016
arai-a added a commit to arai-a/js-beautify that referenced this issue Dec 25, 2016
@arai-a
Add content_unformatted config to avoid formatting content of an elem…
c36213a 
…ent (fix beautifier#906)
@arai-a arai-a mentioned this issue Dec 25, 2016
Merged
@mykytak mykytak mentioned this issue Dec 25, 2016
Closed
@bitwiseman
Copy link
Member

@callmevlad - your bounty got some action on this, from two different people. Not sure whether you can split bounties. #1080 is the simpler change, but #1081 has more complete tests.

Please review and provide feedback to the submitters.

@bitwiseman bitwiseman mentioned this issue Dec 26, 2016
Closed
arai-a added a commit to arai-a/js-beautify that referenced this issue Dec 26, 2016
@arai-a
Add content_unformatted config to avoid formatting content of an elem…
b3798f1 
…ent (fix beautifier#906)
arai-a added a commit to arai-a/js-beautify that referenced this issue Dec 27, 2016
@arai-a
Add content_unformatted config to avoid formatting content of an elem…
32c8e6e 
…ent (fix beautifier#906)
bitwiseman pushed a commit that referenced this issue Dec 28, 2016
@arai-a @bitwiseman
Add content_unformatted config to avoid formatting content of an elem…
fb13bcb 
…ent (fix #906) (#1080)
@bitwiseman bitwiseman modified the milestones: v1.7.x, v1.6.7 Dec 28, 2016
@pyup-bot pyup-bot mentioned this issue Mar 5, 2017
Merged
0-wiz-0 pushed a commit to NetBSD/pkgsrc-wip that referenced this issue Apr 14, 2017
@iamleot
py-jsbeautifier: Update wip/py-jsbeautifier to 1.6.12
99e2edb 
pkgsrc changes:
 - Use ALTERNATIVES in order to permit multi-pkgs to coexists and adjust
   PLIST and introduce Makefile post-install target accordingly

Changes:
* CSS: Preserve Newlines ([#537](beautifier/js-beautify#537))

Reverted #1117 - Preserve newlines broken

* On beautify, new line before next CSS selector ([#1142](beautifier/js-beautify#1142))

Added `preserver_newlines` to css beautifier

* Fixed html formatting issue with attribute wrap (Thanks, @HookyQR!)
* Fixed python package publishing

* Wrong HTML beautification starting with v1.6.5 ([#1115](beautifier/js-beautify#1115))
* Ignore linebreak when meet handlebar ([#1104](beautifier/js-beautify#1104))
* Lines are not un-indented correctly when attributes are wrapped ([#1103](beautifier/js-beautify#1103))
* force-aligned is not aligned when indenting with tabs ([#1102](beautifier/js-beautify#1102))
* Python package fails to publish  ([#1101](beautifier/js-beautify#1101))
* Explaination of 'operator_position' is absent from README.md ([#1047](beautifier/js-beautify#1047))

* Fixed a batch of comment and semicolon-less code bugs

* Incorrect indentation after loop with comment ([#1090](beautifier/js-beautify#1090))
* Extra newline is inserted after beautifying code with anonymous function ([#1085](beautifier/js-beautify#1085))
* end brace with next comment line make bad indent ([#1043](beautifier/js-beautify#1043))
* Javascript comment in last line doesn't beautify well ([#964](beautifier/js-beautify#964))
* indent doesn't work with comment (jsdoc) ([#913](beautifier/js-beautify#913))
* Wrong indentation, when new line between chained methods ([#892](beautifier/js-beautify#892))
* Comments in a non-semicolon style have extra indent ([#815](beautifier/js-beautify#815))
* [bug] Incorrect indentation due to commented line(s) following a function call with a function argument. ([#713](beautifier/js-beautify#713))
* Wrong indent formatting ([#569](beautifier/js-beautify#569))

Added `content_unformatted` option (Thanks @arai-a)

* HTML pre code indentation ([#928](beautifier/js-beautify#928))
* Beautify script/style tags but ignore their inner JS/CSS content ([#906](beautifier/js-beautify#906))

* Added support for editorconfig from stdin
* Added js-beautify to cdnjs
* Fixed CRLF to LF for HTML and CSS on windows
* Added inheritance/overriding to config format (Thanks @DaniGuardiola and @HookyQR)
* Added `force-align` to `wrap-attributes` (Thanks @LukinoS)
* Added `force-expand-multiline` to `wrap-attributes` (Thanks @tobias-zucali)
* Added `preserve-inline` as independent brace setting (Thanks @Coburn37)
* Fixed handlebars with angle-braces (Thanks @mmsqe)

* Wrong indentation for comment after nested unbraced control constructs ([#1079](beautifier/js-beautify#1079))
* Should prefer breaking the line after operator ? instead of before operator < ([#1073](beautifier/js-beautify#1073))
* New option "force-expand-multiline" for "wrap_attributes" ([#1070](beautifier/js-beautify#1070))
* Breaks if html file starts with comment ([#1068](beautifier/js-beautify#1068))
* collapse-preserve-inline restricts users to collapse brace_style ([#1057](beautifier/js-beautify#1057))
* Parsing failure on numbers with "e" ([#1054](beautifier/js-beautify#1054))
* Issue with Browser Instructions ([#1053](beautifier/js-beautify#1053))
* Add preserve inline function for expand style braces ([#1052](beautifier/js-beautify#1052))
* Update years in LICENSE ([#1038](beautifier/js-beautify#1038))
* JS. Switch with template literals. Unexpected indentation. ([#1030](beautifier/js-beautify#1030))
* The object with spread object formatted not correctly ([#1023](beautifier/js-beautify#1023))
* Bad output generator function in class ([#1013](beautifier/js-beautify#1013))
* Support editorconfig for stdin ([#1012](beautifier/js-beautify#1012))
* Publish to cdnjs ([#992](beautifier/js-beautify#992))
* breaks if handlebars comments contain handlebars tags ([#930](beautifier/js-beautify#930))
* Using jsbeautifyrc is broken ([#929](beautifier/js-beautify#929))
* Option to put HTML attributes on their own lines, aligned ([#916](beautifier/js-beautify#916))
* Erroneously changes CRLF to LF on Windows in HTML and CSS ([#899](beautifier/js-beautify#899))
* Weird space in {get } vs { normal } ([#888](beautifier/js-beautify#888))
* Bad for-of formatting with constant Array ([#875](beautifier/js-beautify#875))
* Problems with filter property in css and scss ([#755](beautifier/js-beautify#755))
* Add "collapse-one-line" option for non-collapse brace styles  ([#487](beautifier/js-beautify#487))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
language: html type: enhancement
Projects
None yet
Milestone
v1.6.7
2 participants
@callmevlad @bitwiseman