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

[All Components] Special comments in CSS should be stripped out #6930

Open
ZLevine opened this issue Feb 3, 2020 · 1 comment
Open

[All Components] Special comments in CSS should be stripped out #6930

ZLevine opened this issue Feb 3, 2020 · 1 comment

Comments

@ZLevine
Copy link

ZLevine commented Feb 3, 2020

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:

image

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).
@ZLevine ZLevine mentioned this issue Feb 3, 2020
Closed
@lubber-de

This comment was marked as spam.

Sign in to view
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ZLevine @lubber-de