Skip to content

Please don't run prettier on our changelogs #1452

@bennypowers

Description

@bennypowers

Affected Packages

write

Problem

Changesets runs prettier on our changesets.

This breaks our formatting, producing not just unpleasant results but actually incorrect results:

Given this input

---
"@rhds/tokens": minor
---
Added theme tokens for responsive colours. Read these in a themable container
such as `<rh-card>` to style themable content that responds to the color palette

```html
<rh-surface color-palette="lighter">
  <p>Use <a href="#">theme tokens</a> for best results.<p>
  <rh-card color-palette="darkest">
    <p>That way, colours respond to their parents' <code>color-palette</code>
       Without requiring <a href="#">custom CSS</a></p>
  </rh-card>
</rh-surface>
```

```css
rh-surface {
  & a {
    color: var(--rh-color-interactive-primary-default);
    &:hover { color: var(--rh-color-interactive-primary-hover); }
    &:focus-within { color: var(--rh-color-interactive-primary-focus); }
    &:active { color: var(--rh-color-interactive-primary-active); }
    &:visited {
      color: var(--rh-color-interactive-primary-visited);
      &:hover { color: var(--rh-color-interactive-primary-visited-hover); }
      &:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
      &:active { color: var(--rh-color-interactive-primary-visited-active); }
    }
  }
}
```

For more information, please see our [theming docs](https://ux.redhat.com/themeing).

I got this output, with interjected <p> elements which were not there in the original. And what's with the closing >?

- 9d914cc: Added theme tokens for responsive colours. Read these in a themable container
  such as `<rh-card>` to style themable content that responds to the color palette

  ```html
  <rh-surface color-palette="lighter">
    <p>Use <a href="#">theme tokens</a> for best results.</p>
    <p>
      <rh-card color-palette="darkest">
        <p>
          That way, colours respond to their parents'
          <code>color-palette</code> Without requiring
          <a href="#">custom CSS</a>
        </p>
      </rh-card>
    </p></rh-surface
  >
  ```

  ```css
  rh-surface {
    & a {
      color: var(--rh-color-interactive-primary-default);
      &:hover {
        color: var(--rh-color-interactive-primary-hover);
      }
      &:focus-within {
        color: var(--rh-color-interactive-primary-focus);
      }
      &:active {
        color: var(--rh-color-interactive-primary-active);
      }
      &:visited {
        color: var(--rh-color-interactive-primary-visited);
        &:hover {
          color: var(--rh-color-interactive-primary-visited-hover);
        }
        &:focus-within {
          color: var(--rh-color-interactive-primary-visited-focus);
        }
        &:active {
          color: var(--rh-color-interactive-primary-visited-active);
        }
      }
    }
  }
  ```

  For more information, please see our [theming docs](https://ux.redhat.com/themeing).

Proposed solution

Don't run prettier on changesets. At the very least, please make it opt out.

See also #1283

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions