使用Antlr4的node api解析css3

• 编译官方的Css3.g4文件为node api

$ antlr4 -no-listener -visitor -Dlanguage=JavaScript css3.g4

• 编写index.js文件调用api

import antlr4 from 'antlr4'

import MyCssLexer from './CssLexer'

import MyCssParser from './CssParser'

import MyCssVisitor from './CssVisitor'

const chars = new antlr4.InputStream("@import 'xxx.css';")
const lexer = new MyCssLexer(chars)
const tokens = new antlr4.CommonTokenStream(lexer)
const parser = new MyCssParser(tokens)
parser.buildParseTrees = true
const tree = parser.stylesheet()
class Visitor extends MyCssVisitor {
  visitGoodImport(ctx) {
    console.log(ctx.String_().getText())
    return this.visitChildren(ctx);
  }
}

tree.accept(new Visitor())

• 创建rollup.config.js文件

import commonjs from 'rollup-plugin-commonjs'
import { nodeResolve } from '@rollup/plugin-node-resolve';
import nodePolyfills from 'rollup-plugin-node-polyfills';

export default {
  input: 'index.js',
  output: {
    file: 'bundle.js',
    format: 'es'
  },
  plugins:[
    commonjs(),
    nodePolyfills(),
    nodeResolve({ preferBuiltins: false })
  ]
};

• 打包，并运行

$ rollup --config rollup.config.js

$ node bundle.js

遇到的问题：

• Antlr4打包出来的CssParser.js可能会有一些语法错误，我们可以自行修改一下。

赞助我