hugotiburtino / css-beautifier

Firefox extension that beautifies CSS files

CSS Beautifier

Firefox extension that beautifies CSS files

Get it on Firefox Browser ADD-ONS!

---

Automatically beautifies and colors a CSS file open in a separate tab on Firefox

Build with

• JS Beautifier 1.11.0 | MIT
• Highlight.js 10.0.3 | BSD 3
• Json Panel of the Firefox built-in Json Viewer | MLP 2.0 (Adapted)

Credits

Icon made by Smashicons available at flaticon

css-beautifier's Issues

Too much "<br>" at code

The text rendered has too much < br > at its html. That makes the code ugly and could be a problem for a potential 'copy'.

Possible insertion of scripts

The conditions to process the data are not enough to prevent a malicious site to insert an script at the head or at the < pre >.

Unwanted space before each selector

When you copy the whole text, there is one undesired space before each selector, like
_ a { // "_" means here one space before 'a'
// bla bla bla
}
When it was supposed to be
a {
// bla bla bla
}

Does not recognize url with a query param

Any file like '.../blacklivesmatter.css?id=1p2309' are not processed

Scrolling at raw panel doesn't work

The panel for raw data don't scroll if the text is too big, v.g. this one.

No auto recognition of CSS files

The CSS Beautifier does not recognize a CSS file that doesn't have the extension ".css"

Indeed, Highlight.js has an auto-detect function, but it does not always work, or at least not enough.

Performance: very large files take a lot of time to be rendered

If you try to open the following link

https://assets.gitlab-static.net/assets/application-5416f50fc68e79086efd7e80ad6a1cbaa4b10a764556868bac1d3889d230ffab.css

CSS Beautifier takes a lot of time

No background color when part of content is selected

In the current version (v. 1.3.1)when you select a part of the text to be copied, there is no background change, that tells you what you have selected

Modification of html of pages, that end with .css without being CSS code

Even though we resolved #4 the issue persists, namely, that html of pages that end with .css get modified
At the following page: https://github.com/hugotiburtino/markdown-viewer/commits/master/ext/menu.css , we can still find a code created by the extension that was supposed to be.

document.getElementsByTagName('code')[0].innerHTML
"<span class=\"hljs-selector-tag\">The</span> <span class=\"hljs-selector-tag\">current</span> <span class=\"hljs-selector-tag\">color</span> <span class=\"hljs-selector-tag\">is</span> <span class=\"hljs-selector-tag\">the</span> <span class=\"hljs-selector-tag\">same</span> <span class=\"hljs-selector-tag\">of</span> <span class=\"hljs-selector-tag\">button</span> <span class=\"hljs-selector-tag\">background</span> <span class=\"hljs-selector-tag\">color</span>, <span class=\"hljs-selector-tag\">what</span> <span class=\"hljs-selector-tag\">makes</span> <span class=\"hljs-selector-tag\">it</span> <span class=\"hljs-selector-tag\">unreadable</span>. <span class=\"hljs-selector-tag\">Resolves</span>: <span class=\"hljs-selector-tag\">KeithLRobertson</span><span class=\"hljs-selector-id\">#68</span>"

In that case it isn't a big deal, since we can't see a difference at the page, but it can become an issue at other pages.

Background color of CSS file history page at GitHub wrongly changed

The extension inteferes with the background color of sites that were not supposed to be used with the application. For example, if you open the history of a CSS file (whose URL ends of course with .css), you can see that the background color is not matching with the rest (a similar behavior to this one)
It will likely occur also at others pages that end with css that aren't (solely) css code