liberty-prettydiff/test/samples_correct/beautification_css2.txt

Language aware code comparison tool for several web based languages. It also beautifies, minifies, and a few other things.

//Pretty Diff does not correct for the space between property name and colon
@page :left {
    background: black;
}

//Parsed as a variable property instead of a variable property and a value separated by a space
@charset "UTF-8";

//Parsed as a single token instead of a variable property and a value
@import "test.css"

//Parsed as a single selector.  Should be three comments and a selector
/* near */
/* filter */
/* a */
@-moz-document url("example.com/{") {}

//comment "end" gets dropped
/* a { color: black } */
/**/
/* */
div {
    /* end */
    /* between */
    border-radius: 3px / 7px;
    /* inside */
    color        : black;
}
/* b */
a {
    color: black;
    /* c */
}

//Extra quotes if url is padded with spaces
a {
    background-image: url("./image (1).jpg");
    background-image: url("./image (1).jpg");
}

//Butchering IE filter
a {
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);
}

//Problems with !important when separated by a space
p {
    color  : red important;
    margin : 10px !important;
    prop   : important;
    z-index: 1 "" !important;
}

//investigate comment token at parse time
a {
    *color     : black;
    _background: white;
    /**/
    font-size  : big;
    $(var)-size: 100%;
}

//trouble with the quotes
a::before {
    content: ";'@ /**/\"";
    content: "\'\"\\";
}

//remove excess semicolons
a {
    color: black;
}
a {
    background: url("a).png");
    background: url("a;a");
    background: url("a/*");
    background: \;a;
}

:not([foo=")"]) {}
:not(div/*)*/) {}
:not(:nth-child(2n of [foo=")"])) {}
[foo=\"] {}
[foo=\{] {}
[foo=\(] {}
[foo=yes\:\(it\'s\ work\)] {}

\@noat {}

h1\\ {
    color: \\;
}

.example {
    @include media($desktop-min) {
        padding: 1em;
        @include span-columns(4);
    }
}

@var1: "/images/image1.jpg";
.a {
    background: url(@var1) no-repeat 0 0 scroll transparent;
}

.foo {
    color: green;
}

@media all and (min-width: 12em) {
    .foo {
        color: red;
    }
}

@media all and (min-width: 48em) {
    .foo {
        color: blue;
    }
}

//scss map
$grid: (
    'columns'  : 12,
    'gutter'   : (.5 * $u),
    'max-width': (40 * $u)
);