CSS minification - Strange behavior when @keyframes inside @media

maftieu commented 5 years ago

Installed product versions

Visual Studio: 2017 Enterprise (15.9.5)
This extension: 1.12.394

Description

When a @keyframe is inside a @media, the minification produces an odd result.

Media + keyframe totally removed

Steps to recreate

Using this source SASS

@media (max-width: 767px) {
    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
    .bar {
        margin-bottom: 0;
    }
}
.foobar { text-align: center; }

The minified CSS is

.bar{text-align:center;}

Current behavior

Minified css file does not contain @media query.

Expected behavior

The minified css should contain the @media query with its elements.

Closing brace of media is removed

Steps to recreate

With this SASS source :

@media (max-width: 767px) {
    .bar {
        margin-bottom: 0;
    }
    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
}
.foobar {
    text-align: center;
}

Produces this minified css

@media(max-width:767px){.bar{margin-bottom:0;}@keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}.foobar{text-align:center;}

Current behavior

The @media closing brace is missing, so the minified file is syntaxically incorrect.

Expected behavior

The @media closing brace should be present.

CompDr commented 5 years ago

Visual Studio Enterprise Version 15.9.11 Extension version: 1.12.394

I am also seeing this issue with scss. I am running the same version but in my case it is not wrapped in an @media query. In my case the scss:

@keyframes maskUp {
    from {
        transform: translate(0, 100%);
    }

    to {
        transform: translate(0, 0);
    }
}

generates the following minified css (missing "@keyframes" and including an extra semicolon before the end of what would be the keyframe block):

.transition-2ms{transition:all .2s ease-in-out;}maskUp{from{transform:translate(0,100%);}to {transform:translate(0,0);};}maskRight{from{transform:translate(-100%,0);}to {transform:translate(0,0);};}

fabionogueira commented 3 months ago

the same problem in 2024

madskristensen / WebCompiler