compiler prettier and

Compiler Notes

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
<EOF-token> 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 <link rel=stylesheet>.

[CSSOM] defines the environment encoding for <xml-stylesheet?>.

[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
<EOF-token> 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:
<ident-token>, <function-token>,
<at-keyword-token>, <hash-token>,
<string-token>, <bad-string-token>,
<url-token>, <bad-url-token>,
<delim-token>, <number-token>,
<percentage-token>, <dimension-token>,
<whitespace-token>, <CDO-token>,
<CDC-token>, <colon-token>,
<semicolon-token>, <comma-token>,
<[-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<void> main(List<String> 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(
 *   '<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


[] 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.