🐛 BUG: src/components/atoms/Input.astro: Error: Unhandled node type "Script"!

[jasikpark]

Describe the Bug

When formatting with prettier-plugin-astro@0.0.11 I run into this error:

src/components/atoms/Input.astro: Error: Unhandled node type "Script"!

Steps to Reproduce

❯ npx prettier --parser astro src/components/atoms/Input.astro
src/components/atoms/Input.astro[error] src/components/atoms/Input.astro: Error: Unhandled node type "Script"!
[error]     at Object.print (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier-plugin-astro/dist/index.js:706:19)
[error]     at callPluginPrintFunction (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8447:26)
[error]     at mainPrintInternal (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8396:22)
[error]     at mainPrint (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8383:18)
[error]     at AstPath.call (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8205:24)
[error]     at printTopLevelParts (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier-plugin-astro/dist/index.js:445:39)
[error]     at Object.print (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier-plugin-astro/dist/index.js:498:16)
[error]     at callPluginPrintFunction (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8447:26)
[error]     at mainPrintInternal (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8396:22)
[error]     at mainPrint (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8383:18)

over Input.astro:

---
const {label, name, class, ...htmlProps} = Astro.props;
---

<style lang="scss">
  .label-text {
    font-size: 14px;
    margin-bottom: 8px;
  };

  input {
    display: block;
    box-sizing: border-box;
    height: 48px;
    border: none;
    outline: none;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--theme-input-border);
    background-color: transparent;
    padding: 16px;
    font-weight: 600;
    font-size: 16px;
    color: var(--color-input-text);
    margin-bottom: 24px;

    &:focus {
      /* Visible in Windows high-contrast themes */
      outline-color: transparent;
      outline-width: 2px;
      outline-style: dotted;
      box-shadow: inset 0 0 0 2px var(--theme-accent);
    }
    &::placeholder {
      color: var(--theme-text-disabled);
      font-weight: 500;
    }

    &:disabled {
      background-color: var(--theme-button-dim);
      color: var(--theme-text-disabled);

      &::placeholder {
        color: var(--theme-text-disabled);
      }
    }

    /*
    * HACK: color-scheme dark wreaks havoc, so we have to try to override the styles
    */
    &:-webkit-autofill {
      box-shadow: 0 0 0 100px var(--theme-bg) inset;
      border: 2px solid var(--theme-input-border);
      padding: 14px; /* Since we are changing from inset box-shadow to border, change padding to prevent layout shifts */
      -webkit-text-fill-color: var(--theme-text) !important;

      &:focus {
        box-shadow: 0 0 0 100px var(--theme-bg) inset;
        border: 2px solid var(--theme-accent);
        padding: 14px;
      }
    }
  }

  
</style>

<label>
  <div class='label-text'>{label}</div>
  <input class="width-100" name={name} {...htmlProps}/>
</label>

[antonyfaris]

I think it's because class is a reserved word. See

[jasikpark]

Interesting -- It might be nice to have some clearer erroring there.. where exactly did that blow up? In the typescript parser/printer?

[jasikpark]

I'll close this and open an issue detailing that request instead