https://drafts.csswg.org/css-syntax-3/#input-byte-stream CSS parsing The process consists of bytes->stream codepoints->stream tokens->parse css syntax output The output is a CSSStyleSheet object. 1. User agent recieves a stream of bytes (typically coming over the network or from the local file system). 2. Decode stylesheet’s stream of bytes into a stream of code points: 3. Tokenize a stream of code points into a stream of CSS tokens input, repeatedly consume a token from input until an is reached, pushing each of the returned tokens into a stream. 4. Input to the parsing stage is a stream or list of tokens from the tokenization stage. The output depends on how the parser is invoked, as defined by the entry points listed later in this section. The parser output can consist of at-rules, qualified rules, and/or declarations. The parser’s output is constructed according to the fundamental syntax of CSS, without regards for the validity of any specific item. Implementations may check the validity of items as they are returned by the various parser algorithms and treat the algorithm as returning nothing if the item was invalid according to the implementation’s own grammar knowledge, or may construct a full tree as specified and "clean up" afterwards by removing any invalid items. Unicode code point is represented as "U+" followed by four-to-six ASCII upper hex digits, in the range U+0000 to U+10FFFF, inclusive. A code point’s value is its underlying number. U+0000 Null U+10FFFF Undedined U+1F914 🙂 To determine the fallback encoding of a stylesheet: If HTTP or equivalent protocol provides an encoding label (e.g. via the charset parameter of the Content-Type header) for the stylesheet, get an encoding from encoding label. If that does not return failure, return it. The line in the HTTP header typically looks like this: Content-Type: text/html; charset=utf-8 [representation header]; [charset]=[] [media content type]; [character encoding standard]=[] [HTML] defines the environment encoding for . [CSSOM] defines the environment encoding for . [CSS-CASCADE-3] defines the environment encoding for @import. To tokenize a stream of code points into a stream of CSS tokens input, repeatedly consume a token from input until an is reached, pushing each of the returned tokens into a stream. Each call to the consume a token algorithm returns a single token, so it can also be used "on-demand" to tokenize a stream of code points during parsing, if so desired. Parsing means The output of tokenization step is a stream of zero or more of the following tokens: , , , , , , , , , , , , , , , , , , <[-token>, <]-token>, <(-token>, <)-token>, <{-token>, and <}-token>. 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. Sass compiler docs pros - https://github.com/sass/sass/tree/main/js-api-doc Sass repo has a spec folder detailing entities - https://github.com/sass/libsass Libsass repo is deprecated for https://github.com/sass/dart-sass https://github.com/sass/dart-sass/blob/main/bin/sass.dart - the sass packaged command executable. The main executable process is: Future main(List args) async {...} The main file bin/sass.dart imports with Prefixes import... dart: package:async: package:path: package:path: package:stack_trace: package:term_glyph: package:sass: dart-sass/lib/ contains sass.dart which contains /// We strongly recommend importing this library with the prefix `sass`. library sass; import 'package:sass/src/executable/options.dart'; - ExecutableOptions main() has steps: ...error handle ExecutableOptions? options https://github.com/sass/libsass/blob/master/src/sass_context.cpp line 245 // generic compilation function (not exported, use file/data compile instead) static Sass_Compiler* sass_prepare_context (Sass_Context* c_ctx, Context* cpp_ctx) throw() { try { // register our custom functions if (c_ctx->c_functions) { auto this_func_data = c_ctx->c_functions; while (this_func_data && *this_func_data) { cpp_ctx->add_c_function(*this_func_data); ++this_func_data; } } // register our custom headers if (c_ctx->c_headers) { auto this_head_data = c_ctx->c_headers; while (this_head_data && *this_head_data) { cpp_ctx->add_c_header(*this_head_data); ++this_head_data; } } // register our custom importers if (c_ctx->c_importers) { auto this_imp_data = c_ctx->c_importers; while (this_imp_data && *this_imp_data) { cpp_ctx->add_c_importer(*this_imp_data); ++this_imp_data; } } // reset error status c_ctx->error_json = 0; c_ctx->error_text = 0; c_ctx->error_message = 0; c_ctx->error_status = 0; // reset error position c_ctx->error_file = 0; c_ctx->error_src = 0; c_ctx->error_line = sass::string::npos; c_ctx->error_column = sass::string::npos; // allocate a new compiler instance void* ctxmem = calloc(1, sizeof(struct Sass_Compiler)); if (ctxmem == 0) { std::cerr << "Error allocating memory for context" << std::endl; return 0; } Sass_Compiler* compiler = (struct Sass_Compiler*) ctxmem; compiler->state = SASS_COMPILER_CREATED; // store in sass compiler compiler->c_ctx = c_ctx; compiler->cpp_ctx = cpp_ctx; cpp_ctx->c_compiler = compiler; // use to parse block return compiler; } // pass errors to generic error handler catch (...) { handle_errors(c_ctx); } // error return 0; } --------- Tailwindcss is a Postcss plugin Tailwindcss main export is a Postcss plugin function accepts single argument: (optional) path to a Tailwindcss config file. The main export has 2 methods setupTrackingContext processTailwindFeatures TailwindCSS repo src/index.js ```js import setupTrackingContext from './lib/setupTrackingContext' import processTailwindFeatures from './processTailwindFeatures' import { env } from './lib/sharedState' module.exports = function tailwindcss(configOrPath) { return { postcssPlugin: 'tailwindcss', plugins: [ env.DEBUG && function (root) { console.log('\n') console.time('JIT TOTAL') return root }, function (root, result) { let context = setupTrackingContext(configOrPath) if (root.type === 'document') { let roots = root.nodes.filter((node) => node.type === 'root') for (const root of roots) { if (root.type === 'root') { processTailwindFeatures(context)(root, result) } } return } processTailwindFeatures(context)(root, result) }, env.DEBUG && function (root) { console.timeEnd('JIT TOTAL') console.log('\n') return root }, ].filter(Boolean), } } module.exports.postcss = true ``` https://github.com/sass/dart-sass https://dart.dev/articles/libraries/dart-io Sass dart has an io module. Marshmallowcss will likely have A similar process module marshmallowcss:io Or marshmellowcss-cli:io for Process import 'dart:io'; void main() async { final output = File('output.txt').openWrite(); Process process = await Process.start('ls', ['-l']); // Wait for the process to finish; get the exit code. final exitCode = (await Future.wait([ process.stdout.pipe(output), // Send stdout to file. process.stderr.drain(), // Discard stderr. process.exitCode ]))[2]; print('exit code: $exitCode'); } 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( * '' * ) * document.type //=> 'document' * document.nodes.length //=> 2 * ``` */ export default class Document extends Container { 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`
` }], theme: { colors: { red: 'red', }, }, } return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css``) }) }) ... if (!this.file) { this.id = '' } if (this.map) this.map.file = this.from } https://github.com/sveltejs/prettier-plugin-svelte/blob/master/src/index.ts [] Move env.DEBUG && out of plugins[] [] Change tailwind's stubs folder to seeds. [x] ensure dart:isolate library can be removed https://github.com/sass/dart-sass/blob/main/bin/sass.dart https://api.dart.dev/stable/2.16.2/dart-isolate/dart-isolate-library.html - Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. NOTE: The dart:isolate library is currently only supported by the Dart Native platform. To use this library in your code: import 'dart:isolate'; Answer: dart:isolate is only in native platform and can be removed/ignored.