When importing Semantic UI CSS, special comments exist; these are ignored by most minifiers and require separate processing in order to strip them out.
This is an issue because it increases CSS or page size, especially when importing all components. Additionally, with frameworks like Gatsby, there's a trend towards inlining CSS in <head>—meaning that every page becomes larger as a result of these special comments. See this screenshot as an example of the issue:
We should convert these to normal comments instead of special comments so that minifiers can strip out the CSS comment and its linebreaks, making the CSS smaller. For example:
/*!
* # Semantic UI - Loader
* http://github.com/semantic-org/semantic-ui/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
Would become:
/*
* # Semantic UI - Loader
* http://github.com/semantic-org/semantic-ui/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
The result would be the above special CSS comment being removed when code is minified.
Steps
Import Semantic UI's CSS
Expected Result
When minifying CSS, all CSS comments should be removed.
Actual Result
When minifying CSS, CSS comments are preserved due to the ! character designating the CSS as a "CSS special comment".
Version
All
Testcase
Here is an example site that exemplifies the issue (view source).
When importing Semantic UI CSS, special comments exist; these are ignored by most minifiers and require separate processing in order to strip them out.
This is an issue because it increases CSS or page size, especially when importing all components. Additionally, with frameworks like Gatsby, there's a trend towards inlining CSS in
<head>
—meaning that every page becomes larger as a result of these special comments. See this screenshot as an example of the issue:We should convert these to normal comments instead of special comments so that minifiers can strip out the CSS comment and its linebreaks, making the CSS smaller. For example:
Would become:
The result would be the above special CSS comment being removed when code is minified.
Steps
Import Semantic UI's CSS
Expected Result
When minifying CSS, all CSS comments should be removed.
Actual Result
When minifying CSS, CSS comments are preserved due to the
!
character designating the CSS as a "CSS special comment".Version
All
Testcase
Here is an example site that exemplifies the issue (view source).