syntax.txt

The CSS Preprocessor basic syntax follows the normal CSS lexer at its
core. The extensions that we support actually appear in grammar.txt.

Source: http://www.w3.org/TR/css-syntax-3/


##################### CSS Preprocessor Expressions






##################### CSS 3 Grammar

# A stylesheet is what appears in a <style> tag hence the support for
# CDO and CDC tokens
stylesheet: <empty>
          | stylesheet-list

stylesheet-list: CDO-TOKEN
               | CDC-TOKEN
               | WHITESPACE-TOKEN
               | qualified-rule
               | at-rule
               | stylesheet-list stylesheet-list

rule-list: <empty>
         | rule
         | rule rule-list

rule: WHITESPACE-TOKEN
    | qualified-rule
    | at-rule

at-rule: AT-KEYWORD-TOKEN component-value-list {}-block
       | AT-KEYWORD-TOKEN component-value-list ';'

qualified-rule: component-value-list block

declaration-list: WHITESPACE-TOKEN
                | WHITESPACE-TOKEN declaration ';' declaration-list
                | WHITESPACE-TOKEN at-rule declaration-list

declaration: IDENT-TOKEN WHITESPACE-TOKEN ':' component-value-list
           | IDENT-TOKEN WHITESPACE-TOKEN ':' component-value-list !important

!important: '!' WHITESPACE-TOKEN IDENT-TOKEN(=="important") WHITESPACE-TOKEN

component-value-list: <empty>
                    | component-value
                    | component-value component-value-list

component-value: preserved-token
               | {}-block
               | ()-block
               | []-block
               | function-block

preserved-token: ANY-TOKEN except '{', '(', '[', FUNCTION-TOKEN

{}-block: '{' component-value-list '}'

()-block: '(' component-value-list ')'

[]-block: '[' component-value-list ']'

function-block: FUNCTION-TOKEN component-value-list ')'

// TODO: determine where these are allowed (probably "declaration" identifiers)
//       unless all tokens can be qualified
qualified-name: IDENT-TOKEN
              | IDENT-TOKEN '|' IDENT-TOKEN

// Since component values include all tokens as is, we do not need to
// extend anything to support the SASS syntax. CSS 3 already accepts
// entries such as:
//
//   a { width: 33px; b { height: 43px; } }
//





##################### CSS 2.2 Grammar

    http://dev.w3.org/csswg/css2/grammar.html

stylesheet
  : [ CHARSET_SYM STRING ';' ]?
    [S|CDO|CDC]* [ import [ CDO S* | CDC S* ]* ]*
    [ [ ruleset | media | page ] [ CDO S* | CDC S* ]* ]*
  ;
import
  : IMPORT_SYM S*
    [STRING|URI] S* media_list? ';' S*
  ;
media
  : MEDIA_SYM S* media_list '{' S* ruleset* '}' S*
  ;
media_list
  : medium [ COMMA S* medium]*
  ;
medium
  : IDENT S*
  ;
page
  : PAGE_SYM S* pseudo_page?
    '{' S* declaration? [ ';' S* declaration? ]* '}' S*
  ;
pseudo_page
  : ':' IDENT S*
  ;
operator
  : '/' S* | ',' S*
  ;
combinator
  : '+' S*
  | '>' S*
  ;
property
  : IDENT S*
  ;
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration? [ ';' S* declaration? ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator? selector ]? ]?
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ]? ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*]? ')' ]
  ;
declaration
  : property ':' S* expr prio?
  ;
prio
  : IMPORTANT_SYM S*
  ;
expr
  : term [ operator? term ]*
  ;
term
  : [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
      TIME S* | FREQ S* ]
  | STRING S* | IDENT S* | URI S* | hexcolor | function
  ;
function
  : FUNCTION S* expr ')' S*
  ;
/*
 * There is a constraint on the color that it must
 * have either 3 or 6 hex-digits (i.e., [0-9a-fA-F])
 * after the "#"; e.g., "#000" is OK, but "#abcd" is not.
 */
hexcolor
  : HASH S*
  ;



# Local Variables:
# indent-tabs-mode: nil
# tab-width: 4
# End:

# vim: ts=4 sw=4 et