Last active
May 2, 2022 04:02
-
-
Save Kielan/9c0eee634b98d5db70163975ee57cffd to your computer and use it in GitHub Desktop.
compiler prettier and
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| What is concrete syntax tree in compiler design? | |
| Image result for concrete syntax tree | |
| CST(Concrete Syntax Tree) is a tree representation of the Grammar(Rules of how the program should be written). | |
| Depending on compiler architecture, it can be used by the Parser to produce an AST. | |
| AST(Abstract Syntax Tree)is a tree representation of Parsed source, produced by the Parser part of the compiler. | |
| prettier.format("lodash ( )", { | |
| parser(text, { babel }) { | |
| const ast = babel(text); | |
| ast.program.body[0].expression.callee.name = "_"; | |
| return ast; | |
| }, | |
| }); | |
| // -> "_();\n" | |
| nodes = [new Declaration(nodes)] | |
| } else if (nodes.selector) { | |
| nodes = [new Rule(nodes)] | |
| } else if (nodes.name) { | |
| nodes = [new AtRule(nodes)] | |
| } else if (nodes.text) { | |
| nodes = [new Comment(nodes)] | |
| } else { | |
| throw new Error('Unknown node type in node creation') | |
| } | |
| Container.registerParse = dependant => { | |
| parse = dependant | |
| } | |
| Container.registerRule = dependant => { | |
| Rule = dependant | |
| } | |
| Container.registerAtRule = dependant => { | |
| AtRule = dependant | |
| } | |
| lib/tokenize.js | |
| tokenizer(input, options = {}) { | |
| let css = input.css.valueOf() | |
| } | |
| postcss | |
| lib/document.d.ts | |
| /** | |
| * Represents a file and contains all its parsed nodes. | |
| * | |
| * **Experimental:** some aspects of this node could change within minor | |
| * or patch version releases. | |
| * | |
| * ```js | |
| * const document = htmlParser( | |
| * '<html><style>a{color:black}</style><style>b{z-index:2}</style>' | |
| * ) | |
| * document.type //=> 'document' | |
| * document.nodes.length //=> 2 | |
| * ``` | |
| */ | |
| export default class Document extends Container<Root> { | |
| type: 'document' | |
| parent: undefined | |
| constructor(defaults?: DocumentProps) | |
| /** | |
| * Returns a `Result` instance representing the document’s CSS roots. | |
| * | |
| * ```js | |
| * const root1 = postcss.parse(css1, { from: 'a.css' }) | |
| * const root2 = postcss.parse(css2, { from: 'b.css' }) | |
| * const document = postcss.document() | |
| * document.append(root1) | |
| * document.append(root2) | |
| * const result = document.toResult({ to: 'all.css', map: true }) | |
| * ``` | |
| * | |
| * @param opts Options. | |
| * @return Result with current document’s CSS. | |
| */ | |
| toResult(options?: ProcessOptions): Result | |
| } | |
| postcss | |
| lib/postcss.d.ts | |
| export interface JSONHydrator { | |
| (data: object[]): Node[] | |
| (data: object): Node | |
| } | |
| postcss/lib/input.js | |
| let { nanoid } = require('nanoid/non-secure') | |
| class Input { | |
| constructor(css, opts = {}) { | |
| } | |
| this.css = css.toString() | |
| if (this.css[0] === '\uFEFF' || this.css[0] === '\uFFFE') { | |
| this.hasBOM = true | |
| this.css = this.css.slice(1) | |
| } else { | |
| this.hasBOM = false | |
| } | |
| if (opts.from) { | |
| if ( | |
| !pathAvailable || | |
| /^\w+:\/\//.test(opts.from) || | |
| isAbsolute(opts.from) | |
| ) { | |
| this.file = opts.from | |
| } else { | |
| this.file = resolve(opts.from) | |
| } | |
| } | |
| if (pathAvailable && sourceMapAvailable) { | |
| let map = new PreviousMap(this.css, opts) | |
| if (map.text) { | |
| this.map = map | |
| let file = map.consumer().file | |
| if (!this.file && file) this.file = this.mapResolve(file) | |
| } | |
| } | |
| test('a color', () => { | |
| let config = { | |
| content: [{ raw: html`<div class="-bg-red"></div>` }], | |
| theme: { | |
| colors: { | |
| red: 'red', | |
| }, | |
| }, | |
| } | |
| return run('@tailwind utilities', config).then((result) => { | |
| return expect(result.css).toMatchCss(css``) | |
| }) | |
| }) | |
| ... | |
| if (!this.file) { | |
| this.id = '<input css ' + nanoid(6) + '>' | |
| } | |
| if (this.map) this.map.file = this.from | |
| } | |
| https://github.com/sveltejs/prettier-plugin-svelte/blob/master/src/index.ts |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment