Using csslint I'm getting error

Expected RBRACE at line 17, col 5.
    @font-face {

when using this:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
        font-family: 'fs_l';
        src: url('fonts/fs_l.svg') format('svg');
    }
}

that is a valid css3 sintaxsys.

@supports is now supported by Chrome and Firefox but gets flagged as unknown @ rule.

(copied from CSSLint/csslint#212)

I've implemented some custom rules that make use of the col of the property name and value, however when parsing properties featuring hex values and !important the col of the property value appears to be reported incorrectly. Example:

.foo {
    color: #fff !important;
}

When listening to the property event, I'd expect property.parts[0].col to equal 12. Instead I get 16 (the space after #fff). The values of event.property and event.value are:

event.property:  { col: 5, line: 2, text: 'color', type: 4, hack: null }
event.value:  { col: undefined,
  line: undefined,
  text: '#fff',
  type: 5,
  parts: 
   [ { col: 16,
       line: 2,
       text: '#fff',
       type: 'color',
       red: 255,
       green: 255,
       blue: 255 } ] }

This issue does not occur in the following cases (col 12 is reported):

.bar {
    color: red !important;
}

.baz {
    color: #f00;
}

Sample failing test for tests/css/Parser.js

testMSViewportInsideMediaQuery: function(){
    var parser = new Parser({ strict: true});
    var result = parser.parse("@media screen and (max-width: 400px) { @-ms-viewport { width: 320px; }}");
    Assert.isTrue(true);
},

Related to #85

See CSSLint/csslint#283 (comment)

overflow-wrap is a alias for word-wrap in the CSS3 Text specification (1), so overflow-wrap should be added as a recognized property.

Currently giving me a few exceptions when using CSSLint, which relies on this library.

(1): http://www.w3.org/TR/css3-text/#overflow-wrap

a b c{} -> Parse error: Expected LBRACE at line 1, character 5.

a b{} works.

Copy of gamtiq's issue in csslint: CSSLint/csslint#450

The following code causes the warning about unexpected property value:
Expected (none | <ident>) but found 'a-move_vert'

.move {
   animation-name: a-move_vert;
}

From what I can tell reading about CSS3 syntax, underscores are valid in identifiers.

Although they perform badly and shouldn't really be used, IE7< supports CSS expressions http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx.
This should probably be tied to a CSSLint warning if added.

Inherit is a valid property for border-bottom-color but using it causes the ''Require use of known properties' test to fail.

Sorry this is a duplicate issue, please ignore this one.

Transparent is a valid keyword for color

Expected ( | inherit) but found 'Transparent'.
a {background-color:Transparent}

Looks like CSS Lint can’t parse media queries of the form @media (max-width: 30em) {} yet. Note that it does in fact handle the more verbose @media all and (max-width: 30em) {} correctly.

sass is turning my hex color into 'lightgrey', which is causing a warning in css lint. I think lightgrey should be legal so I filed this css lint issue:
CSSLint/csslint#407

I was told the actual fix would be in this repos so filing this here.

here's a spec, I think it applies
http://www.w3.org/TR/css3-color/#svg-color

Hi
CSSLint is reporting a number of parsing errors on the some of the calls to the CSS3PIE pie.htc behavior in my stylesheet, but not all. The right brace is present at the end of each one call but CSSLint reports "Expected RBRACE at line 534, col 14" which would seem to be asking for a right brace in the middle of the line of code.

I saw in the list of issues that a similar problem had been identified with calc() - is this a similar issue? I find it interesting that this is only happening on a few of the calls to the behaviour.

Thanks

Full CSS Code (please note that the CSS is in development):

/*
Theme Name: KAMMCE
Theme URI: http://www.kammce.co.uk/
Description: WordPress theme designed for KAMM Civil Engineering based on the Murtaugh HTML5 Reset WordPress Theme
Author: Rowena Padel - Sylvaticus Ltd
Author URI: http://www.sylvaticus.com/
Version: 1
*/

/* =============================================================================
HTML5 display definitions
========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
Base
========================================================================== */

/*

• 1. Correct text resizing oddly in lt-ie7/7 when body font-size is set using em units
• 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
     */

html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

html, button, input, select, textarea { font-family: sans-serif; color: #222; }

body { font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
font-size: 90%; line-height: 1.5; margin: 0; line-height: 1.5em; color: #787878; }

/*

• Remove text-shadow in selection highlight: h5bp.com/i
• These selection declarations have to be separate
• Also: hot pink! (or customize the background color to match your design)
  */

::-moz-selection { background: #7eb56c; color: #fff; text-shadow: none; }
::selection { background: #7eb56c; color: #fff; text-shadow: none; }

/* =============================================================================
Links
========================================================================== */

a { color: #23401c; cursor: pointer; text-decoration: none;
background-color: #e6e6e6; border-bottom: 1px solid #d5d5d5; padding: 0 3px;
/rounded corners/
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px; }
a:link {color: #23401c; font-weight: bold; text-decoration: none;}
a:visited {color: #888888; font-weight: bold; text-decoration: none;}
a:hover, a:focus { color: #67212a; background-color: #f3e6e6; font-weight: bold; text-decoration: none; border-bottom: 1px solid #c79fa4;}
a:active {color: #23401c; background-color: #7eb56c; font-weight: bold; text-decoration: none;}

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }

.link-image {
background-color: transparent;
border-bottom: none;

}

/* =============================================================================
Typography
========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote {
margin: 1em 80px 1em 20px;
float: right;
width: 350px;
padding: 20px;
background: #efefef url(images/quote.jpg) no-repeat 0 0;
border: 1px solid #e6e6e6;
border-left: 3px solid #a2a2a2;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

blockquote p {
margin: 0;
padding: 0;
font-size: 1.1em;
display: inline;
color: #525252;
}

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* =============================================================================
Lists
========================================================================== /
/ Because most lists are used for navigation and require no bullets, this defaults to no bullet
so for genuine bullet lists, list-style will need to be set */
ul, ol { margin: 1em 0; padding: 0; list-style: none; -webkit-padding-start: 0px;}
dd { margin: 0; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

/* =============================================================================
Embedded content
========================================================================== */

/*

• 1. Improve image quality when scaled in IE7: h5bp.com/d
• 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
     */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; max-width: 100%; }

/*

• Correct overflow not hidden in IE9
  */

svg:not(:root) { overflow: hidden; }

/* =============================================================================
Figures
========================================================================== */

figure { margin: 0; }

/* =============================================================================
Forms
========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*

• 1. Correct color not inheriting in IE6/7/8/9
• 2. Correct alignment displayed oddly in IE6/7
     */

legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }

/*

• 1. Correct font-size not inheriting in all browsers
• 2. Remove margins in FF3/4 S5 Chrome
• 3. Define consistent vertical alignment display in all browsers
     */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*

• 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
     */

button, input { line-height: normal; }

/*

• 1. Display hand cursor for clickable form elements
• 2. Allow styling of clickable form elements in iOS
• 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
     */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }

/*

• Re-set default cursor for disabled elements
  */

button[disabled], input[disabled] { cursor: default; }

/*

• Consistent box sizing and appearance
  */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/*

• Remove inner padding and border in FF3/4: h5bp.com/l
  */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/*

• 1. Remove default vertical scrollbar in IE6/7/8/9
• 2. Allow only vertical resizing
     */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }

/* =============================================================================
Tables
========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

/* =============================================================================
Chrome Frame Prompt
========================================================================== */

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

/* ==|== primary styles =====================================================
Author: Rowena Padel - Sylvaticus Ltd http://www.sylvaticus.com/
========================================================================== */

html {
height: 100%;
}

body {
background: url(images/background.jpg) 0 0;
}

div#heading {

}

h1 {
font-size: 3em;
font-weight: 700;
color: #fff;
text-shadow: 1px 1px 0 #aaa;
height: 100px;
background: url(images/head-background.jpg) 0 0;
margin: 0;
-moz-border-radius: 18px 18px 0 0;
-webkit-border-radius: 18px 18px 0 0;
border-radius: 18px 18px 0 0;
behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);
padding: 20px 60px 10px 50px;
}

h1 img {
margin-left: -10px;

}

h1 a {
background-color: transparent !important;
border-bottom: 0 !important;

}

h1 span {
display: none;
}

h2 {
background-color: #efefef;
border-bottom: 1px solid #d5d5d5;
padding: 5px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 40px 60px 30px 50px;
text-shadow: 1px 1px #FFFFFF;
behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);
}

h3 {
font-size: 130%;
font-weight: bold;
margin: 0 60px;

}

div.widget h3 {
font-size: 150%;
padding-top: 4px;
margin: 0;
text-align: right;
text-shadow: 1px 1px #fff;
text-transform: uppercase;

}

h4 {
font-size: 120%;
font-weight: bold;
margin: 1em 60px 0 50px;
padding: 3px 10px;
background-color: #efefef;
border-bottom: 1px solid #d5d5d5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);
text-shadow: 1px 1px #FFFFFF;

}

div#innercontentwrapper.red h4 {
border-bottom: 1px solid #eedddd;
width: 35%;
}

h5 {
font-size: 80%;
font-weight: bold;
margin: 0 60px;

}

p {
margin: 0 60px;
padding-top: .5em;
}

header {
height: 30px;
width: 900px;
margin: 30px auto 0 auto;
padding: 0;
}

outercontentwrapper {

position: relative;
width: 950px;
margin: 0 auto 10px auto;
padding: 0;
/*drop shadow outside container*/
-moz-box-shadow: 0px 7px 10px rgba(170,170,170,0.7);
-webkit-box-shadow: 0px 7px 10px rgba(170,170,170,0.7);
box-shadow: 0px 7px 10px rgba(170,170,170,0.7);
/*rounded corners*/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);
zoom: 1;

}

innercontentwrapper {

position: relative;
background-color: #fff;
min-height: 550px;
margin: 0;
padding: 0 0 10px;
border: 5px  solid #787878;
/*rounded corners*/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;


/*drop shadow inside container */
-moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);

}

innercontentwrapper.red {

border: 5px solid #7b222d;

}

innercontentwrapper.green {

border: 5px solid #3b5c32;

}

aside {
margin-left: 30px;
}

aside p {
font-size: 80%;
color: #a6a6a6;
margin-right: 0px;
}
aside span {
color: #525252;
font-size: 75%;
}

content-foot {

height: 50px;
margin-top: 30px;
clear: both;

}

footer {
width: 900px;
margin: 0 auto;
height: 56px;
clear: both;
font-size: 75%;
}

footer p {
display: inline;
float: left;
width: 600px;
margin: 0;
padding: 0;
}
footer p span {
float: right;
width: 400px;
text-align: right;
}

/******** top menu ***********/
div#navtop {
width: 900px;

height: 30px;   
padding: 0;

}

div#navtop ul {
list-style: none outside none;
color: #525252;
width: 900px;
height: 30px;
margin: 0;
}

div#navtop ul li {
display: block;
float: left;
text-align: center;
width: 400px;
margin: 0 23px;
padding: 4px 0 0 0;
height: 30px;
/drop shadow outside container/
-moz-box-shadow: 0 0 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.5);
box-shadow: 0 0 2px rgba(0,0,0,0.5);
behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);
}
html.ie6 div#navtop ul li, .ie7 div#navtop ul li, .ie8 div#navtop ul li {
margin: 0 30px;
border: 0;
padding-top: 6px;
}
div#navtop ul li a {
display: block;
color: #fff; text-decoration: none;
background-color: transparent;
border: none;
text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
font-weight: bold;
font-size: 90%;
letter-spacing: .05em;
}
div#navtop ul li a:link {color: #fff; text-decoration: none;} /* unvisited link /
div#navtop ul li a:visited {color: #fff; text-decoration: none;} / visited link /
div#navtop ul li a:hover, a:focus {color: #fff; text-decoration: none;} / mouse over link /
div#navtop ul li a:active {color: #fff; text-decoration: none;} / selected link */
div#navtop ul li:hover, li:focus {
}

/_~~~~~~~~~~~~~~~~~ START GREEN TABS ~~~~~~~~~~~~~~~~~~~~~_/
div#navtop ul li.green {
border: 1px solid #3b5c32;
border-bottom-width: 0px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;

        /* Gradient */
        /* SVG fallback(Opera 11.10-, IE9) */
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDE1MSwyMTIsMTM1LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoNTQsODQsNDcsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, rgba(151,212,135,1), rgba(54,84,47,1));
        /* Firefox 3.6+ */
        background-image: -moz-linear-gradient(top, rgba(151,212,135,1), rgba(54,84,47,1));
        /* Chrome 7+ & Safari 5.03+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(151,212,135,1)), color-stop(1, rgba(54,84,47,1)));
        /* IE5.5 - IE7 */
        filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#97D487,EndColorStr=#36542F);
        /* IE8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF97D487,EndColorStr=#FF36542F)"
    /* end gradient */
    behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);

}
html.ie6 div#navtop ul li.green, .ie7 div#navtop ul li.green,.ie8 div#navtop ul li.green {
width: 406px;
background: url(images/navtop-green.jpg) no-repeat 0 0;
border: 0;
margin: 0 20px;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false) !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" !important;

}
html.ie9 div#navtop ul li.green,.ie9 div#navtop ul li.green:active,.ie9 div#navtop ul li.green:hover,.ie9 div#navtop ul li.green:focus {
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false) !important;
}

div#navtop ul li.green:hover, green:active, green:focus {
border: 1px solid #3b5c32;
border-bottom-width: 0px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;

        /* Gradient */
        /* SVG fallback(Opera 11.10-, IE9) */
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDE3NCwyNDUsMTU3LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoOTEsMTQzLDc3LDEpOyIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgLz48L3N2Zz4=);
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, rgba(174,245,157,1), rgba(91,143,77,1));
        /* Firefox 3.6+ */
        background: -moz-linear-gradient(top, rgba(174,245,157,1), rgba(91,143,77,1));
        /* Chrome 7+ & Safari 5.03+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(174,245,157,1)), color-stop(1, rgba(91,143,77,1)));
        /* IE5.5 - IE7 */
        filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFAEF59D,EndColorStr=#FF5B8F4D);
        /* IE8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFAEF59D,EndColorStr=#FF5B8F4D)"
    /* end gradient */
    behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);

}
html.ie6 div#navtop ul li.green:hover, green:active, green:focus, .ie7 div#navtop ul li.green:hover, green:active, green:focus,.ie8 div#navtop ul li.green:hover, green:active, green:focus {
width: 406px;
border-bottom-width: 0px;
background: url(images/navtop-green-over.jpg) no-repeat 0 0 !important;
border: 0;
margin: 0 20px;
}

/_~~~~~~~~~~~~~~~~~ END GREEN TABS ~~~~~~~~~~~~~~~~~~~~~_/

/_~~~~~~~~~~~~~~~~~ START RED TABS ~~~~~~~~~~~~~~~~~~~~~_/
div#navtop ul li.red {
border: 1px solid #7b222d;
border-bottom-width: 0px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;

        /* Gradient */
        /* SVG fallback(Opera 11.10-, IE9) */
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDIxNCwxMzUsMTQ1LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMTIzLDM0LDQ1LDEpOyIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgLz48L3N2Zz4=);
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, rgba(214,135,145,1), rgba(123,34,45,1));
        /* Firefox 3.6+ */
        background: -moz-linear-gradient(top, rgba(214,135,145,1), rgba(123,34,45,1));
        /* Chrome 7+ & Safari 5.03+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(214,135,145,1)), color-stop(1, rgba(123,34,45,1)));
        /* IE5.5 - IE7 */
        filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFD68791,EndColorStr=#FF7B222D);
        /* IE8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFD68791,EndColorStr=#FF7B222D)"
        /* end gradient */
        behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);

}
.ie6 div#navtop ul li.red, .ie7 div#navtop ul li.red,.ie8 div#navtop ul li.red {
width: 406px;
background: url(images/navtop-red.jpg) no-repeat 0 0;
border: 0;
margin: 0 20px;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false) !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" !important;

}
.ie9 div#navtop ul li.red,.ie9 div#navtop ul li.red:active,.ie9 div#navtop ul li.red:hover,.ie9 div#navtop ul li.red:focus {
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false) !important;
}

div#navtop ul li.red:hover, red:active, red:focus {
border: 1px solid #7b222d;
border-bottom-width: 0px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;

        /* Gradient */
        /* SVG fallback(Opera 11.10-, IE9) */
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDI0NSwxNTYsMTY4LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMTk0LDQ4LDY4LDEpOyIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgLz48L3N2Zz4=);
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, rgba(245,156,168,1), rgba(194,48,68,1));
        /* Firefox 3.6+ */
        background: -moz-linear-gradient(top, rgba(245,156,168,1), rgba(194,48,68,1));
        /* Chrome 7+ & Safari 5.03+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(245,156,168,1)), color-stop(1, rgba(194,48,68,1)));
        /* IE5.5 - IE7 */
        filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFF59CA8,EndColorStr=#FFC23044);
        /* IE8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFF59CA8,EndColorStr=#FFC23044)"
        /* end gradient*/
        behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);

}
html.ie6 div#navtop ul li.red:hover, red:active, red:focus, .ie7 div#navtop ul li.red:hover, red:active, red:focus,.ie8 div#navtop ul li.red:hover, red:active, red:focus {
width: 406px;
border-bottom-width: 0px;
background: url(images/navtop-red-over.jpg) no-repeat 0 0 !important;
border: 0;
margin: 0 20px;
}

/_~~~~~~~~~~~~~~~~~ END RED TABS ~~~~~~~~~~~~~~~~~~~~~_/

/_~~~~~~~~~~~~~~~~~ START GREY TABS ~~~~~~~~~~~~~~~~~~~~~_/
div#navtop ul li.grey {
border: 1px solid #787878;
border-bottom-width: 0px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;

            /* Gradient */
            /* SVG fallback(Opera 11.10-, IE9) */
            background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDE2MSwxNjEsMTYyLDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoOTQsOTQsOTUsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);
            /* Opera 11.10+ */
            background: -o-linear-gradient(top, rgba(161,161,162,1), rgba(94,94,95,1));
            /* Firefox 3.6+ */
            background: -moz-linear-gradient(top, rgba(161,161,162,1), rgba(94,94,95,1));
            /* Chrome 7+ & Safari 5.03+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(161,161,162,1)), color-stop(1, rgba(94,94,95,1)));
            /* IE5.5 - IE7 */
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFA1A1A2,EndColorStr=#FF5E5E5F);
            /* IE8 */
            -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFA1A1A2,EndColorStr=#FF5E5E5F)"
            /* end gradient */
            behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);

}

.ie6 div#navtop ul li.grey, .ie7 div#navtop ul li.grey,.ie8 div#navtop ul li.grey {
width: 406px;
background: url(images/navtop-grey.jpg) no-repeat 0 0;
border: 0;
margin: 0 15px;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false) !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" !important;

}
.ie9 div#navtop ul li.grey,.ie9 div#navtop ul li.grey:active,.ie9 div#navtop ul li.grey:hover,.ie9 div#navtop ul li.grey:focus {
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false) !important;
}
div#navtop ul li.grey:hover, grey:active, grey:focus {
border: 1px solid #787878;
border-bottom-width: 0px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;

        /* Gradient */
        /* SVG fallback(Opera 11.10-, IE9) */
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDE5MywxOTMsMTk0LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMTY3LDE2NywxNjgsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, rgba(193,193,194,1), rgba(167,167,168,1));
        /* Firefox 3.6+ */
        background: -moz-linear-gradient(top, rgba(193,193,194,1), rgba(167,167,168,1));
        /* Chrome 7+ & Safari 5.03+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(193,193,194,1)), color-stop(1, rgba(167,167,168,1)));
        /* IE5.5 - IE7 */
        filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFC1C1C2,EndColorStr=#FFA7A7A8);
        /* IE8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFC1C1C2,EndColorStr=#FFA7A7A8)"/* end gradient */

        behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);

}
html.ie6 div#navtop ul li.grey:hover, grey:active, grey:focus, .ie7 div#navtop ul li.grey:hover, grey:active, grey:focus,.ie8 div#navtop ul li.grey:hover, grey:active, grey:focus {
width: 406px;
border-bottom-width: 0px;
background: url(images/navtop-grey-over.jpg) no-repeat 0 0 !important;
border: 0;
margin: 0 15px;
}
div#navtop ul li.grey a,div#navtop ul li.grey a:visited {
color: #d5d5d5;
text-shadow: none;
}

/_~~~~~~~~~~~~~~~~~ END GREY TABS ~~~~~~~~~~~~~~~~~~~~~_/

/******** end top menu ***********/

/******** main menu ***************/

nav {
margin: 0 0 20px 0;
height: 29px;
border-top: 1px solid #787878;
width: 100%;
/* Gradient background /
/ SVG fallback(Opera 11.10-, IE9) */
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDE2NywxNjcsMTY4LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMTQyLDE0MiwxNDMsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);

    /* Opera 11.10+ */
    background: -o-linear-gradient(top, rgba(167,167,168,1), rgba(142,142,143,1));

    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, rgba(167,167,168,1), rgba(142,142,143,1));

    /* Chrome 7+ & Safari 5.03+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(167,167,168,1)), color-stop(1, rgba(142,142,143,1)));

    /* IE5.5 - IE7 */
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFA7A7A8,EndColorStr=#FF8E8E8F);

    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFA7A7A8,EndColorStr=#FF8E8E8F)"

behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);
}

.ie6 nav, .lt-ie8 nav {

height: 29px;
border-top: 1px solid #787878;
width: 100%;
background: url(images/nav-back.jpg) repeat-x 0 0; 

}

nav#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
nav#menu li {
float:left;
width:130px;
margin:0;
padding: 0;
text-align:center;
height: 29px;

}
nav#menu a {
height: 29px;
width: 130px;
line-height: 29px;
vertical-align: middle;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
border-right: 1px solid #e6e6e6;
background-color: #787878;
font-size: 90%;
font-weight: bold;
behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);
}

nav#menu ul li a.red {
background: url(images/redgreybg.jpg) repeat -20px 35px;
color: #fff;
border-right: 1px solid #a2a2a2;
border-bottom: none;
}

nav#menu ul li a.green {
background: url(images/greengreybg.jpg) repeat -20px 35px;
color: #fff;
border-right: 1px solid #a2a2a2;
border-bottom: none;
}

nav#menu ul li a.grey {
background: url(images/greygreybg.jpg) repeat -20px 35px;
color: #fff;
border-right: 1px solid #a2a2a2;
border-bottom: none;
}

nav#menu ul li a:hover.grey {
color:#000;
}

nav#menu a.selected {
outline: 0;
}

/******** end main menu ***********/

/***** Social Networking Icons *****/

ul#social-links {
list-style: none;
margin: 0;
padding: 0;
text-align: right;
margin-right: 60px;
}

ul#social-links li {
float: right;
height: 30px;
z-index: 1000;
padding: 5px;
}

ul#social-links li img {
/drop shadow outside container/
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 5px rgba(0,0,0,0.5);
border: 5px solid #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);
}

/*********** IMAGES ***************/

img.align-left {
float: left;
margin: 10px 10px 10px 0;
padding: 3px;
}
div.img_with_shadow {
-moz-box-shadow:0px 10px 5px #ccc;
-webkit-box-shadow:0px 10px 5px #ccc;
box-shadow:0px 10px 5px #ccc;
position:relative;
display: table;
float: left;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 60px;
border: 1px solid #f0f0f0;
border-bottom-width: 0;
width: 250px;
behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);
}
div.img_with_shadow img {
border:10px solid #fff;
}
div.img_with_shadow span {
width:100%;
height:15px;
position:absolute;
bottom:-30px; /* ~equal to the height + shadow y offset + shadow blur radius /
right:0px;
box-shadow:0px -10px 5px #fff;
-moz-box-shadow:0px -10px 5px #fff;
-webkit-box-shadow:0px -10px 5px #fff;
border-radius: 50% / 7px;
-moz-border-radius:50% / 7px;
-webkit-border-radius: 400px 20px; / webkit browsers apparently can't use a % for ellipse border radius /
behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);
}
/********************************************
div.wp-caption {
-moz-box-shadow:0px 10px 5px #ccc;
-webkit-box-shadow:0px 10px 5px #ccc;
box-shadow:0px 10px 5px #ccc;
position:relative;
display: table;
float: left;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 60px;
border-top: 1px solid #eee;
width: 250px;
}
div.wp-caption img {
border:10px solid #fff;
}
div.wp-caption span {
width:100%;
height:15px;
position:absolute;
bottom:-30px;
right:0px;
box-shadow:0px -10px 5px #fff;
-moz-box-shadow:0px -10px 5px #fff;
-webkit-box-shadow:0px -10px 5px #fff;
border-radius: 50% / 7px;
-moz-border-radius:50% / 7px;
-webkit-border-radius: 400px 20px;
}

div.wp-caption p.wp-caption-text {
background:#7eb56c;
opacity: 40%;
position: absolute;
left: 0;
bottom: 0;
height: 25%;
}

***********************************/

.ie6 div.img_with_shadow {
display: inline;
margin: 0 5px 0 40px;
padding: 5px ;
border: 1px solid #eeeeee;
float: none;

}

/* Lightbox gallery overrides */

div.gallery {
margin: 10px 40px !important;
}

a.cboxElement { /* widens the a: a bit so that it gives a nice little tab effect behind the thumbnails in the gallery */
padding: 0 5px;
}

/* Google maps */

div.entry iframe {
border: 1px solid #e6e6e6 !important;
float: right !important;
margin: 10px 40px 10px 10px !important;
padding: 3px !important;
}

/* ==========================================================================
WordPress specific styling
========================================================================== /
.edit-post-link {
clear: both;
}
.page-post { / main loop container for pages */
min-height: 400px;
}

.post {
margin-top: 20px;
}

article.post {
margin-right: 200px;
margin: 15px 230px 30px 0px;

padding-top: 10px;

}

article.post h3 {
font-family: "Trebuchet MS";
font-variant: small-caps;
font-size: 150%;
font-weight: bold;
margin: 0 60px;
color: #7b222d;
border-left: 20px solid #3b5c32;
border-radius: 2px;
behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);

}

.more-link {
font-size: 85%;
font-weight: normal;
}
.entry {}
.entry ul {
list-style: square;
margin: 1.5em 80px;
}
.entry a:hover {}

a.post-edit-link {
margin: 20px 60px;
}

footer.meta {
margin: 0 60px;
clear: left;
height: auto;
}

.postmetadata {}

div#sidebar {
float: right;
width: 180px;
margin: 20px 40px 20px 30px;
}

.ie6 div#sidebar, .ie6 div#sidebar {
background: url(images/sidebarback.jpg) repeat 0 0;
border: 1px solid #f0f0f0;
}

html.ie8 div#sidebar {
float: right;
width: 180px;
margin: 20px 40px 20px 30px;
}

div#sidebarinner {
background: url(images/sidebarback.jpg) repeat 0 0;
border: 1px solid #f0f0f0;
border-bottom-width: 0;
position: relative;
border-top: 1px solid #eee;
-moz-box-shadow:0px 10px 5px #ccc;
-webkit-box-shadow:0px 10px 5px #ccc;
box-shadow:0px 10px 5px #ccc;
display: table;
margin-right: 0;
margin-bottom: 15px;
width: 180px;
behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);
}

div#sidebarinner ul {
text-align: right;
padding-left: 10px;
}

div#sidebar ul li a, a:link {color: #23401c; font-weight: bold; text-decoration: none; font-size: 80%;}
div#sidebar ul li a:visited {color: #888888; font-weight: bold; text-decoration: none;}
div#sidebar ul li a:hover, a:focus { color: #67212a; background-color: #f3e6e6; font-weight: bold; text-decoration: none; border-bottom: 1px solid #c79fa4;}
div#sidebar ul li a:active {color: #23401c; background-color: #7eb56c; font-weight: bold; text-decoration: none;}

div.widget_recent_entries {
padding: 10px;

}

div#sidebarinner span {
width:100%;
height:15px;
position:absolute;
bottom:-30px; /* ~equal to the height + shadow y offset + shadow blur radius /
right:0px;
box-shadow:0px -10px 5px #fff;
-moz-box-shadow:0px -10px 5px #fff;
-webkit-box-shadow:0px -10px 5px #fff;
border-radius: 50% / 7px;
-moz-border-radius:50% / 7px;
-webkit-border-radius: 400px 20px; / webkit browsers apparently can't use a % for ellipse border radius */

}

div.widget_recent_entries ul li {
line-height: 1em;
padding: 10px 6px;
border: 1px solid #e6e6e6;
margin-top: 10px;
margin-bottom: 10px;
background-color: #eee;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-raius: 2px;
behavior: url(http://www.kammce.co.uk/_wp/wp-content/themes/kamm/PIE.htc);
}

html.ie7 div.widget_recent_entries ul li {
border: 0;
background-color: transparent;
}

.navgation {}
.next-posts {}
.prev-posts {}

searchform {}

s {}

searchsubmt {}

/* ==|== media queries ======================================================
EXAMPLE Media Query for Responsive Design.
This example overrides the primary ('mobile first') styles
Modify as content requires.
========================================================================== */

@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}

/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

The parser needs to support the @Viewport rule in CSS.

Ported from: CSSLint/csslint#22

E.g.: width:6ch.

http://www.w3.org/TR/css3-values/#relative0

1c7eb7b removed the multi-value ability of this property, but I believe it is still valid according to https://developer.mozilla.org/en-US/docs/CSS/background-repeat.

Was the removal intentional?

The lexer from parser-lib converts "99blahpx' string to LENGTH token and "22resume" to ANGLE token which is obviously incorrect.

I would propose to replace this code in src/css/TokenStream.js:

if (/em|ex|px|gd|rem|vw|vh|vm|ch|cm|mm|in|pt|pc/i.test(ident)){
    tt = Tokens.LENGTH;
} else if (/deg|rad|grad/i.test(ident)){
    tt = Tokens.ANGLE;
} else if (/ms|s/i.test(ident)){
    tt = Tokens.TIME;
} else if (/hz|khz/i.test(ident)){
    tt = Tokens.FREQ;
} else if (/dpi|dpcm/i.test(ident)){

with this:

if (/^em$|^ex$|^px$|^gd$|^rem$|^vw$|^vh$|^vm$|^ch$|^cm$|^mm$|^in$|^pt$|^pc$/i.test(ident)){
    tt = Tokens.LENGTH;
} else if (/^deg$|^rad$|^grad$/i.test(ident)){
    tt = Tokens.ANGLE;
} else if (/^ms$|^s$/i.test(ident)){
    tt = Tokens.TIME;
} else if (/^hz$|^khz$/i.test(ident)){
    tt = Tokens.FREQ;
} else if (/^dpi$|^dpcm$/i.test(ident)){

I am wondering why these lines of code in parserlib.js at line 4247 need to use the eval function.

else if (/^["'][^"']*["']/.test(text)){    //string
    this.type   = "string";
    this.value  = eval(text);
}

It doesn't seem like it is a good idea to use this function here. I would think it could be accomplished just by setting this.value = text;. I just haven't heard any good things about using the eval function in any code.

This doesn't even touch the fact that it is evil.

An RGB value such as rgb(100%, 50%, 75%) results in values of 255, 127.5, and 191.25, respectively. Browsers do rounding in this case. Need to figure out how they do it and mimic.

May as well leverage https://github.com/nzakas/parser-lib/releases

Per README:
strict - set to true to disable error recovery and stop on the first syntax error. Default is false.

I have concerns about the "any @ rules that isn't recognized is automatically skipped, meaning the entire block after it is not parsed" part though. Does this really qualify as a syntax error ?

For instance, in my opinion, errors should fail csslint, but if you want to introduce new @rules that parser-lib doesn't know about, these would emit errors in strict mode, even though I have no intention of correcting them. Instead I would have to ignore all OTHER errors as well. Now we could of course say that csslint should handle each type of error individually, but there is no type flag, just individual messages, which are probably not really a good idea to use as identifiers in themselves.

Anyone got ideas to improve upon this ?

Currently they get flagged as an unknown @ directive
https://developer.mozilla.org/en-US/docs/CSS/@-moz-document?redirect=no
https://developer.mozilla.org/en-US/docs/CSS/@document

Hey Nicholas, I was wondering if there was anything else you wanted to land before cutting a new release? I'd like to do new CSSLint release soon, so any new release here would be appreciated 😉

I get errors when I use vendor prefixes in property values. The parser seems to only permit vendor prefixes in property names.

One example is display: -moz-box throws an error even though it's a perfectly valid property value.

Found "-webkit-box" and "-moz-box", but no "box". The same to "inline-box".

Not sure if it should be added as an or here https://github.com/nzakas/parser-lib/blob/master/src/css/Properties.js#L155

In the startkeyframes event, expose any vendor prefix being used for @keyframes.

"Vendor prefixed properties should also have the standard."

This should only be required for vendor fixed properties that developed into a stable spec. Otherwise, it defeats the entire point of vendor prefixes.

For example, it does not make sense to include user-focus when using -moz-user-focus, even though a W3C Working Draft exists. On the other hand, it does make sense to include transform as well as its vendor prefixed variants, despite the spec still in the Working Draft stage.

Links:
http://www.w3.org/TR/2000/WD-css3-userint-20000216
https://developer.mozilla.org/en/CSS/-moz-user-focus
http://www.w3.org/TR/css3-2d-transforms/
https://developer.mozilla.org/en/css/-moz-transform

instanceof is soo 2,000-n-late. I noticed in some places you use typeof this._listeners[type] == "undefined" and other places this._listeners[event.type] instanceof Array. Will this._listeners[event.type] ever be anything other than falsely or an array? If not then why not just if (this._listeners[event.type]) {.

Also IE opens itself up to memory leaks with instanceof if you are checking something that could potentially be the window or a DOM element. http://ajaxian.com/archives/working-aroung-the-instanceof-memory-leak

Lastly ({}).toString.call(blah) === '[object Array]' is the hawtness.

The following should afaik be parsed as not containing any unknown properties:

.mw-example {
    unicode-bidi: -moz-isolate;
    unicode-bidi: -webkit-isolate;
    unicode-bidi: isolate;
}

Right now in e.g. csslint, it results in:

• Expected (normal | embed | bidi-override | inherit) but found '-moz-isolate'.
• Expected (normal | embed | bidi-override | inherit) but found '-webkit-isolate'.
• Expected (normal | embed | bidi-override | inherit) but found 'isolate'.

See also:

• CSS/unicode-bidi on MDN
• Issue CSSLint/csslint#436

a {background-position:right;}

Expected () but found 'right'.

Valid keywords are defined as top, center, bottom, left, right

Current npm version is missing a readme file:
https://npmjs.org/package/parserlib

parser does not support @-ms-viewport

Although it has been depreciated values like InfoText are still valid CSS2

Old WebKit-style gradients aren't supported:

.foo { background: -webkit-gradient(linear, left top, left bottom, color-stop(,#1e5799), color-stop(,#2989d8), color-stop(,#207cca), color-stop(10,#7db9e8)); }

Neither are color stops within new-style gradients:

background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */

The parser barfs on both.

http://dev.w3.org/csswg/css-fonts/#propdef-font-feature-settings

Still in working draft but quite likely to make it to recommended soon.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,800);

With the above stylesheet, the 'uri' property of the import event is url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,800) rather than the expected https://fonts.googleapis.com/css?family=Open+Sans:400,600,800.

Validating the CSS files of my project with csslint gives me the following error:

Unknown property 'animation-fill-mode'.
  animation-fill-mode: both;

Since animation-fill-mode is obviously in the CSS3 standard, this error does not make sense. After some googling I found Issue #17 which addressed this error. The pull request had already been merged two years ago but I'm still getting the error.

Out of curiosity I tried to follow the changes from the solution of #17 up the current master. Since there has been some major refactoring I quickly abandoned my undertaking 😄

Could you tell me why I'm still getting this error although #17 should have fixed it?

I'm using csslint 0.10.0 with parser-lib 0.2.4.

Not a mistake per se, but it makes using the API a bit odd.

E.g. take a look at this little function which calculates a selector's specificity:

calculateSpecificity = function (selector) {
    var p, plen, part,
        m, mlen, modifier,
        SelectorPart = parserlib.css.SelectorPart,
        specificity = 0,
        // the specificity is stored as a 3 digit base32 number
        LOW  =    1, // 2^0
        MID  =   32, // 2^5
        HIGH = 1024; // 2^10

    for (p = 0, plen = selector.parts.length; p < plen; p++) {
        part = selector.parts[p];
        if (part instanceof SelectorPart) {
            if (part.elementName && part.elementName !== '*') {
                specificity += LOW;
            }
            for (m = 0, mlen = part.modifiers.length; m < mlen; m++) {
                modifier = part.modifiers[m];
                switch (modifier.type) {
                case 'id':
                    specificity += HIGH;
                    break;
                case 'attribute':
                case 'class':
                    specificity += MID;
                    break;
                case 'pseudo':
                    specificity += LOW;
                    break;
                default:
                    console.error('dunno: ' + modifier.type);
                }
            }
        }
    }
    return specificity;
};

For completeness' sake here is the function which makes that number human-readable:

formatSpecificity = function (a) {
    var r = a.toString(32).toUpperCase();
    return '000'.slice(r.length) + r;
};

If you want to toy around with it here is some array with selectors and their specificity (taken from the specs):

[
    ['*{}',              '000'],
    ['li{}',             '001'],
    ['li:first-line{}',  '002'],
    ['ul li{}',          '002'],
    ['ul ol+li{}',       '003'],
    ['h1 + *[rel=up]{}', '011'],
    ['ul ol li.red{}',   '013'],
    ['li.red.level{}',   '021'],
    ['#x34y{}',          '100']
]

Now, back to the thing I didn't like... checking explicitly if this thing which looks like the name of an element is indeed the name of an element (part.elementName !== '*') feels sorta wrong.

Try this with the CSS Parser Demo.

ul ol+li{} is broken. (Unit #5 Combinator: undefined)

ul ol+ li{} (space after plus) also broken. (Unit #5 Combinator: undefined)

ul ol +li{} (space before plus) and ul ol + li{} (space before and after plus) do work fine, however.

Are there any plans to support parsing (and validating) properties like transition and transform? I need this for a project, so I'm just wondering if there is a specific reason it is not supported. If not, I'm happy to contribute.

Same goes for the content of calc-function etc. These are fully specced, and the different functions expect specific arguments, so I guess it would be logical to support this.

Ported from CSSLint/csslint#12

@media print {
  img { max-width: 100% ; }
  @page { margin: 0.5cm; }

}

is the repro

The following is not parsed correctly:

url( foo.png );

Note the spaces before and after the filename.

This library does not recognize the latest version of the Flexbox specification (http://www.w3.org/TR/2012/CR-css3-flexbox-20120918). Any plans to support it?

I was about to submit a PR with the new properties, but I didn't know how to deal with the vendor-prefixes (e.g. for display: -webkit-flex;) in your code.

Ported from: CSSLint/csslint#17

Example:
@-webkit-keyframes slideInUp { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0); } }