'How to remove unwanted @charset "UTF-8" from CSS (shows up after compiling SASS files)

A quick summary of our problem:

  • We've got a @charset declaration prepended to our compiled CSS files
  • Our SCSS files do not have this declaration so it gets added during compilation
  • One of my co-workers says our site breaks in Safari if we have that declaration

SASS docs say:

Output Encoding

In general, Sass will try to encode the output stylesheet using the same encoding as the input stylesheet. In order for it to do this, though, the input stylesheet must have a @charset declaration; otherwise, Sass will default to encoding the output stylesheet as UTF-8. In addition, it will add a @charset declaration to the output if it’s not plain ASCII.

When other stylesheets with @charset declarations are @imported, Sass will convert them to the same encoding as the main stylesheet.

Source: http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Does anyone know a way to prevent SASS from adding it?
Does anyone know how we can check the "if it’s not plain ASCII" hypothesis on all our SCSS files?
Any other ideas?

encodingcharacter-encodingcompilationsass


Solution 1:[1]

To add to this, I experienced this issue recently. We use gulp-sass to compile our CSS. From what I understand gulp-sass (which uses node-sass) have not provided any way to stop @charset "UTF-8"; if there are non-ascii characters on your CSS. It was a problem for us because we wanted to use same CSS for our AMP pages. @charet is not allowed on AMP pages. Refer to this issue.

https://github.com/sass/sass/issues/2288

Our Solution

What I did was to add a simple gulp task to remove the encoding attribute from the compiled CSS.

gulp.task('amp-sass-clean-up', ['amp-sass' /*Add gulp-sass task that compiles CSS*/], function() {
    return gulp
        .src(['/public/amp.min.css' /*This is the full path and file name to where your final css is*/], {cwd: '/public' /*This is the full path to where final css file is*/)
        .pipe(replace('@charset "UTF-8";', ''))
        .pipe(gulp.dest('/public' /*This is the full path to where final css file is*/);
});

Solution 2:[2]

As far as i know the @charset is very well support for all browsers, see also: https://developer.mozilla.org/en-US/docs/Web/CSS/@charset. Only "old" issues can be found, which only happen when @charset is not declared at the start of your CSS file. See also: https://github.com/Compass/compass/issues/211.

When your are using grunt to compile your SASS files you can run an additional task after the compile task which removes the @charset declaration. https://github.com/erickrdch/grunt-string-replace can do the replacement for you.

Solution 3:[3]

Ran into the same issue. I'm using prepros to generate email CSS that is transformed/inlined by the python Premailer library.

Below is a solution when using the Python premailer library, just subclass Premailer and change one function.

    import premailer
    # We need to patch a function to fix a CSS issue.
    class PatchedPremailer(premailer.Premailer):
        # Prepros automatically inserts this at the start of a CSS file,
        # but if we're using it inline in an email, it breaks things.
        re_charset = re.compile(r'\s*@charset "UTF-8";')
        def _parse_css_string(self, css_body, validate=True):
            if css_body:
                css_body = self.re_charset.sub(" ", css_body)
            return super(PatchedPremailer, self)._parse_css_string(
                css_body=css_body, validate=validate)
     # Run the patched premailer.
     print(PatchedPremailer(html).transform())

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Bass Jobsen
Solution 3 speedplane

Related Questions