javascript - 为 jison 生成的 css präprozessor 语言定义导入语句的语法

Question

我正在尝试生成一个带有一些额外功能的样式表解析器来尝试 jison。如何实现 import 指令将其他文件加载到主文件中？我有点困惑。有没有办法在语法文件中使用词法分析器？我可以读取该文件然后对其进行标记吗？

grammar.jison

%{
  var nodes = require('./nodes')
%}

%%

// Parsing starts here.
stylesheet:
  statements EOF                   { return new nodes.StyleSheet($1) }          
;

statements:
  /* empty */                      { $$ = [] }
| statementGroup                   { $$ = $1 }
| statements ';' statementGroup    { $$ = $1.concat($3) }
| statements ';'                   { $$ = $1 }
;

statementGroup:
  statement                        { $$ = [ $1 ] }
| rules
| rules statement                  { $$ = $1.concat($2) }
;

statement:
  variableDeclaration
;


rules:
  rule                             { $$ = [ $1 ] }
| rules rule                       { $$ = $1.concat($2) }
;

rule:
  selector '{' declarations '}'    { $$ = new nodes.Rule($1, $3) }
;

selector:
  IDENTIFIER
| SELECTOR
;

declarations:
  /* empty */                       { $$ = [] }
| declarationGroup                  { $$ = $1 }
| declarations ';' declarationGroup { $$ = $1.concat($3) }
| declarations ';'                  { $$ = $1 }
;

declarationGroup:
  declaration                       { $$ = [ $1 ] }
| rules
| rules declaration                 { $$ = $1.concat($2) }
;

declaration:
  property
| variableDeclaration
;

property:
  IDENTIFIER ':' values            { $$ = new nodes.Property($1, $3) }
;

variableDeclaration:
  VARIABLE ':' values              { $$ = new nodes.Assign($1, $3) }
;

values:
  value                            { $$ = [ $1 ] }
| values value                     { $$ = $1.concat($2) }
;

value:
  IDENTIFIER                       { $$ = new nodes.Literal($1) }
| COLOR                            { $$ = new nodes.Literal($1) }
| NUMBER                           { $$ = new nodes.Literal($1) }
| DIMENSION                        { $$ = new nodes.Literal($1) }
| VARIABLE                         { $$ = new nodes.Variable($1) }
;

tokens.jisonlex

// Order is important. Rules are matches from top to bottom.

//// Macros
DIGIT                 [0-9]
NUMBER                {DIGIT}+(\.{DIGIT}+)? // matches: 10 and 3.14
NAME                  [a-zA-Z][\w\-]*       // matches: body, background-color and myClassName
SELECTOR              (\.|\#|\:\:|\:){NAME} // matches: #id, .class, :hover and ::before
PATH                  (.+)/([^/]+)          // matches ./bla/bla/nested.sss

%%

//// Rules
\s+                   // ignore spaces, line breaks

// Numbers
{NUMBER}(px|em|\%)    return 'DIMENSION' // 10px, 1em, 50%
{NUMBER}              return 'NUMBER' // 0
\#[0-9A-Fa-f]{3,6}    return 'COLOR' // #fff, #f0f0f0

// Selectors
{SELECTOR}            return 'SELECTOR' // .class, #id
{NAME}{SELECTOR}      return 'SELECTOR' // div.class, body#id

\@{NAME}              return 'VARIABLE' // @variable


{NAME}                return 'IDENTIFIER' // body, font-size

.                     return yytext // {, }, +, :, ;

<<EOF>>               return 'EOF'

nodes.js

var Context = require('./context').Context

var compressed

function StyleSheet(rules, ss) {
  this.rules = rules
  this.ss = ss ? ss : []
}
exports.StyleSheet = StyleSheet

StyleSheet.prototype.toCSS = function(output) {
  compressed = output || false

  var context = new Context()

  var ret = this.rules.map(function (rule) { 
return rule.toCSS(context) }).filter(function (value) { return typeof value !== 'undefined' }).join('\n')

  return compressed ? ret.replace(/\s+/g, '') : ret
}

function Rule(selector, declarations) {
  this.selector = selector
  this.declarations = declarations
}
exports.Rule = Rule

Rule.prototype.toCSS = function(parentContext) {
  var propertiesCSS = [],
      nestedRulesCSS = [],
      context = new Context(this, parentContext)

  this.declarations.forEach(function(declaration) {
    var css = declaration.toCSS(context)

    if (declaration instanceof Property) {
      propertiesCSS.push(css)
    } else if (declaration instanceof Rule) {
      nestedRulesCSS.push(css)
    }
  })

  return [ context.selector() + ' { ' + propertiesCSS.join(' ') +  ' }' ].
         concat(nestedRulesCSS).
         join('\n')
}


function Property(name, values) {
  this.name = name
  this.values = values
}
exports.Property = Property

Property.prototype.toCSS = function(context) {
  var valuesCSS = this.values.map(function(value) { return value.toCSS(context) })
  return this.name + ': ' + valuesCSS.join(' ') + ';'
}


function Literal(value) {
  this.value = value
}
exports.Literal = Literal


Literal.prototype.toCSS = function() {
  return this.value
}


function Variable(name) {
  this.name = name
}
exports.Variable = Variable

Variable.prototype.toCSS = function(context) {
  return context.get(this.name)
}


function Assign(name, values) {
  this.name = name
  this.values = values
}
exports.Assign = Assign

Assign.prototype.toCSS = function(context) {
  var valuesCSS = this.values.map(function(value) { return value.toCSS(context) })
  context.set(this.name, valuesCSS.join(' '))
}

Answer 1

据我所知，基本的 jison 词法分析器不允许增量输入；您需要给它一个它标记的字符串。

但是，您可以使用自己的自定义词法分析器(包括调用 jison 词法分析器)来进行增量词法分析。因此，您的自定义词法分析器需要实现输入堆栈来实现包含命令。尽管我手头没有例子，但这应该不是特别困难。