Skip to content

Instantly share code, notes, and snippets.

@Kielan

Kielan/Compiler Notes

Last active May 2, 2022 04:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Kielan/9c0eee634b98d5db70163975ee57cffd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Kielan/9c0eee634b98d5db70163975ee57cffd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Kielan revised this gist May 2, 2022. 1 changed file with 16 additions and 14 deletions.
    30 changes: 16 additions & 14 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -107,16 +107,6 @@ Sass repo has a spec folder detailing entities
    Libsass repo is deprecated for
    https://github.com/sass/dart-sass

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

    https://github.com/sass/dart-sass/blob/main/bin/sass.dart
    - the sass packaged command executable.
    The main executable process is:
    @@ -210,7 +200,7 @@ static Sass_Compiler* sass_prepare_context (Sass_Context* c_ctx, Context* cpp_ct
    return 0;

    }

    ---------
    Tailwindcss is a Postcss plugin
    Tailwindcss main export is a Postcss
    plugin function accepts single argument:
    @@ -219,9 +209,9 @@ The main export has 2 methods
    setupTrackingContext
    processTailwindFeatures

    src/index.js TailwindCSS repo:
    TailwindCSS repo src/index.js
    ```js
    import setupTrackingContext from './lib/setupTrackingContext'
    import setupTrackingContext from './lib/setupTrackingContext'
    import processTailwindFeatures from './processTailwindFeatures'
    import { env } from './lib/sharedState'

    @@ -419,4 +409,16 @@ class Input {
    if (this.map) this.map.file = this.from
    }

    https://github.com/sveltejs/prettier-plugin-svelte/blob/master/src/index.ts
    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.
  2. Kielan revised this gist May 2, 2022. No changes.
  3. Kielan revised this gist May 2, 2022. 1 changed file with 42 additions and 26 deletions.
    68 changes: 42 additions & 26 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -215,38 +215,54 @@ 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 3 methods
    resolveConfigPath
    registerConfigAsDependency
    getConfigFunction
    The main export has 2 methods
    setupTrackingContext
    processTailwindFeatures

    src/index.js TailwindCSS repo:

    ```js
    const plugin = postcss.plugin('tailwind', config => {
    const plugins = []
    const resolvedConfigPath = resolveConfigPath(config)
    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 (!_.isUndefined(resolvedConfigPath)) {
    plugins.push(registerConfigAsDependency(resolvedConfigPath))
    }
    if (root.type === 'document') {
    let roots = root.nodes.filter((node) => node.type === 'root')

    return postcss([
    ...plugins,
    processTailwindFeatures(getConfigFunction(resolvedConfigPath || config)),
    perfectionist({
    cascade: true,
    colorShorthand: true,
    indentSize: 2,
    maxSelectorLength: 1,
    maxValueLength: false,
    trimLeadingZero: true,
    trimTrailingZeros: true,
    zeroLengthNoUnit: false,
    }),
    ])
    })
    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
  4. Kielan revised this gist May 2, 2022. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -215,6 +215,12 @@ 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 3 methods
    resolveConfigPath
    registerConfigAsDependency
    getConfigFunction
    processTailwindFeatures

    src/index.js TailwindCSS repo:

    ```js
  5. Kielan revised this gist May 2, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -217,7 +217,7 @@ plugin function accepts single argument:
    (optional) path to a Tailwindcss config file.
    src/index.js TailwindCSS repo:

    ```
    ```js
    const plugin = postcss.plugin('tailwind', config => {
    const plugins = []
    const resolvedConfigPath = resolveConfigPath(config)
  6. Kielan revised this gist May 2, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -216,6 +216,7 @@ Tailwindcss main export is a Postcss
    plugin function accepts single argument:
    (optional) path to a Tailwindcss config file.
    src/index.js TailwindCSS repo:

    ```
    const plugin = postcss.plugin('tailwind', config => {
    const plugins = []
  7. Kielan revised this gist May 2, 2022. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -211,12 +211,12 @@ static Sass_Compiler* sass_prepare_context (Sass_Context* c_ctx, Context* cpp_ct

    }

    Implementing Tailwind
    The main export of Tailwind is a PostCSS
    plugin function that takes a single argument:
    the (optional) path to a Tailwind config file.
    in the src/index.js file within the TailwindCSS repo:
    '''
    Tailwindcss is a Postcss plugin
    Tailwindcss main export is a Postcss
    plugin function accepts single argument:
    (optional) path to a Tailwindcss config file.
    src/index.js TailwindCSS repo:
    ```
    const plugin = postcss.plugin('tailwind', config => {
    const plugins = []
    const resolvedConfigPath = resolveConfigPath(config)
    @@ -240,7 +240,7 @@ in the src/index.js file within the TailwindCSS repo:
    }),
    ])
    })
    '''
    ```

    https://github.com/sass/dart-sass
    https://dart.dev/articles/libraries/dart-io
  8. Kielan revised this gist May 2, 2022. 1 changed file with 24 additions and 0 deletions.
    24 changes: 24 additions & 0 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -216,7 +216,31 @@ The main export of Tailwind is a PostCSS
    plugin function that takes a single argument:
    the (optional) path to a Tailwind config file.
    in the src/index.js file within the TailwindCSS repo:
    '''
    const plugin = postcss.plugin('tailwind', config => {
    const plugins = []
    const resolvedConfigPath = resolveConfigPath(config)

    if (!_.isUndefined(resolvedConfigPath)) {
    plugins.push(registerConfigAsDependency(resolvedConfigPath))
    }

    return postcss([
    ...plugins,
    processTailwindFeatures(getConfigFunction(resolvedConfigPath || config)),
    perfectionist({
    cascade: true,
    colorShorthand: true,
    indentSize: 2,
    maxSelectorLength: 1,
    maxValueLength: false,
    trimLeadingZero: true,
    trimTrailingZeros: true,
    zeroLengthNoUnit: false,
    }),
    ])
    })
    '''

    https://github.com/sass/dart-sass
    https://dart.dev/articles/libraries/dart-io
  9. Kielan revised this gist May 2, 2022. 1 changed file with 7 additions and 6 deletions.
    13 changes: 7 additions & 6 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -94,7 +94,6 @@ 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).
    @@ -138,18 +137,13 @@ 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)
    @@ -217,6 +211,13 @@ static Sass_Compiler* sass_prepare_context (Sass_Context* c_ctx, Context* cpp_ct

    }

    Implementing Tailwind
    The main export of Tailwind is a PostCSS
    plugin function that takes a single argument:
    the (optional) path to a Tailwind config file.
    in the src/index.js file within the TailwindCSS repo:


    https://github.com/sass/dart-sass
    https://dart.dev/articles/libraries/dart-io
    Sass dart has an io module. Marshmallowcss will likely have
  10. Kielan revised this gist May 1, 2022. 1 changed file with 3 additions and 8 deletions.
    11 changes: 3 additions & 8 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -1,25 +1,20 @@
    https://drafts.csswg.org/css-syntax-3/#input-byte-stream

    CSS parsing
    The process consists of
    A stream of Unicode code points,
    which is passed through a tokenization stage
    followed by a parsing or tree construction stage.
    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
    @@ -48,7 +43,7 @@ A code point’s value is its underlying number.

    U+0000 Null
    U+10FFFF Undedined
    U+1F914
    U+1F914 🙂

    To determine the fallback encoding of a
    stylesheet:
  11. Kielan revised this gist May 1, 2022. 1 changed file with 21 additions and 0 deletions.
    21 changes: 21 additions & 0 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -20,6 +20,27 @@ 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.
  12. Kielan revised this gist May 1, 2022. 1 changed file with 9 additions and 4 deletions.
    13 changes: 9 additions & 4 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -4,17 +4,22 @@ CSS parsing
    The process consists of
    A stream of Unicode code points,
    which is passed through a tokenization stage
    followed by a tree construction stage.
    followed by a parsing or tree construction stage.
    The output is a CSSStyleSheet object.

    User agent recieves a stream of bytes
    1. User agent recieves a stream of bytes
    (typically coming over the network or
    from the local file system).

    To receive the stream of bytes you must
    decode a stylesheet’s stream of bytes
    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.

    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.
  13. Kielan revised this gist May 1, 2022. 1 changed file with 72 additions and 0 deletions.
    72 changes: 72 additions & 0 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,77 @@
    https://drafts.csswg.org/css-syntax-3/#input-byte-stream

    CSS parsing
    The process consists of
    A stream of Unicode code points,
    which is passed through a tokenization stage
    followed by a tree construction stage.
    The output is a CSSStyleSheet object.

    User agent recieves a stream of bytes
    (typically coming over the network or
    from the local file system).

    To receive the stream of bytes you must
    decode a stylesheet’s stream of bytes
    into a stream of code points:

    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?
  14. Kielan revised this gist May 1, 2022. 1 changed file with 25 additions and 0 deletions.
    25 changes: 25 additions & 0 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,7 @@
    https://drafts.csswg.org/css-syntax-3/#input-byte-stream



    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).
    @@ -26,6 +30,27 @@ https://github.com/sass/dart-sass/blob/main/bin/sass.dart
    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
  15. Kielan revised this gist May 1, 2022. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -26,7 +26,10 @@ https://github.com/sass/dart-sass/blob/main/bin/sass.dart
    The main executable process is:
    Future<void> main(List<String> args) async {...}

    main() has
    main() has steps:
    ...error handle
    ExecutableOptions? options



    https://github.com/sass/libsass/blob/master/src/sass_context.cpp
  16. Kielan revised this gist May 1, 2022. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -23,6 +23,11 @@ Answer: dart:isolate is only in native platform and can be removed/ignored.

    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 {...}

    main() has


    https://github.com/sass/libsass/blob/master/src/sass_context.cpp
    line 245
  17. Kielan revised this gist May 1, 2022. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -21,6 +21,9 @@ To use this library in your code:
    import 'dart:isolate';
    Answer: dart:isolate is only in native platform and can be removed/ignored.

    https://github.com/sass/dart-sass/blob/main/bin/sass.dart
    - the sass packaged command executable.

    https://github.com/sass/libsass/blob/master/src/sass_context.cpp
    line 245
    // generic compilation function (not exported, use file/data compile instead)
  18. Kielan revised this gist May 1, 2022. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -12,6 +12,14 @@ Libsass repo is deprecated for
    https://github.com/sass/dart-sass

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

    https://github.com/sass/libsass/blob/master/src/sass_context.cpp
    line 245
  19. Kielan revised this gist May 1, 2022. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,10 @@ 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
    Libsass repo is deprecated for
    https://github.com/sass/dart-sass

    [] Change tailwind's stubs folder to seeds.

    https://github.com/sass/libsass/blob/master/src/sass_context.cpp
    line 245
  20. Kielan revised this gist May 1, 2022. 1 changed file with 94 additions and 0 deletions.
    94 changes: 94 additions & 0 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,100 @@ CST(Concrete Syntax Tree) is a tree representation of the Grammar(Rules of how t
    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

    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;

    }

    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);
  21. Kielan revised this gist Apr 26, 2022. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,9 @@
    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);
  22. Kielan revised this gist Apr 26, 2022. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -129,4 +129,6 @@ class Input {
    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
  23. Kielan revised this gist Apr 26, 2022. 1 changed file with 103 additions and 1 deletion.
    104 changes: 103 additions & 1 deletion Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -27,4 +27,106 @@ Container.registerRule = 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
    }
  24. Kielan created this gist Apr 25, 2022.
    30 changes: 30 additions & 0 deletions Compiler Notes
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    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
    }