vue run build not packaging CSS correctly

[AyushG3112]

Version

3.0.0-beta.6 ( tested both using vue create and vue init )

Reproduction link

https://github.com/AyushG3112/vue-build-css-parsing-error-repro

Steps to reproduce

1. Clone and run npm install
2. Run npm run serve, click the Show Loader button and notice the rotating snipper in the bottom right.
3. Run npm run build, click the Show Loader button and run the production output from dist folder. Notice the missing Spinner

What is expected?

Spinner should appear in both the cases

What is actually happening?

Spinner appears in the npm run serve and NOT in npm run build

---

From initial debugging, it seems like the plugin contains some CSS like

    @-webkit-keyframes fill-unfill-rotate {
        12.5% {
            transform: rotate(135deg);
        }

        25% {
            transform: rotate(270deg);
        }

        37.5% {
            transform: rotate(405deg);
        }

        50% {
            transform: rotate(540deg);
        }

        62.5% {
            transform: rotate(675deg);
        }

        75% {
            transform: rotate(810deg);
        }

        87.5% {
            transform: rotate(945deg);
        }

        to {
            transform: rotate(1080deg);
        }

    ;
    }

    @-webkit-keyframes blue-fade-in-out {
        from {
            opacity: 1;
        }

        25% {
            opacity: 1;
        }

        26% {
            opacity: 0;
        }

        89% {
            opacity: 0;
        }

        90% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }

    ;
    }

    @-webkit-keyframes red-fade-in-out {
        from {
            opacity: 0;
        }

        15% {
            opacity: 0;
        }

        25% {
            opacity: 1;
        }

        50% {
            opacity: 1;
        }

        51% {
            opacity: 0;
        }

    ;
    }

    @-webkit-keyframes yellow-fade-in-out {
        from {
            opacity: 0;
        }

        40% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        75% {
            opacity: 1;
        }

        76% {
            opacity: 0;
        }

    ;
    }

    @-webkit-keyframes green-fade-in-out {
        from {
            opacity: 0;
        }

        65% {
            opacity: 0;
        }

        75% {
            opacity: 1;
        }

        90% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }

    ;
    }

which is not being packaged in the build css generated

[yyx990803]

This is a problem of vue-full-loading itself. It contains only the prefixed version of the keyframes, which will be removed as part of the CSS optimization process because these prefixes are no longer necessary. The lib should at least include the non-prefixed version of these CSS rules.

[AyushG3112]

@yyx990803 thanks for the reply! Opened up a PR to fix this in vue-full-loading. Cheers!