CSS in JS indentation of interpolated string incorrect when first line in CSS in JS region

[stevemolitor]

This does not indent correctly:

const displayFlex = 'display: flex';

const myCss = css`
${displayFlex}
  flex-direction: row;
`;

Note that ${displayFlex} is not indented. If I move that down a line it is indented correctly:

const myCss = css`
  flex-direction: row;
  ${displayFlex}
`;

This is an artificial example, but my projects use a design system library where it's comment to import and insert interpolated constants for typography styles and such - ie ${Typography.importantBig} that might sent font size, weight, etc.

[orzechowskid]

tree-sitter-debug-mode for your first case gives me this:

stylesheet:
  rule_set:
    selectors:
      tag_name:
    ERROR:
      ERROR:
    block:
      ERROR:
        pseudo_class_selector:
          descendant_selector:
            tag_name:
            ERROR:
            tag_name:
          class_name:

setting tsi-debug to t and attempting to indent gives me this:

begin indentation
parent: ERROR line 1, current: ERROR line 2
child indentation: nil parent indentation: nil
op: 0
ops: (0)
indenting to column 0

for the second case, I get:

stylesheet:
  rule_set:
    selectors:
      tag_name:
    block:
      declaration:
        property_name:
        plain_value:
      ERROR:
        ERROR:
        ERROR:
  ERROR:

and:

parent: block line 1, current: ERROR line 3
child indentation: nil parent indentation: 2
op: 2
ops: (2)
indenting to column 2

so tree-sitter can't determine that a CSS block statement is present in the first case, but can in the second for some reason. I'll need to think about this a little.

[orzechowskid]

I've applied a band-aid to indentation for this particular case (a string interpolation as the contents of the first line of a CSS-in-JS templated string). it's not perfect but it should behave a little better now.

[orzechowskid]

the next branch should contain the fix for this.