Unstable formatting of CSS comments

[karlhorky]

Hi @Sec-ant, hope you're well! 👋

One interesting behavior that I noticed lately is the unstable formatting of comments in CSS-in-JS, with the default configuration of prettier-plugin-embed (no extra css configuration set):

const companyPreviewStyles = css`
  /*
    Minimum column size of 0 required to prevent long
    words from increasing the column size
    https://css-tricks.com/preventing-a-grid-blowout/
  */
  grid-template-columns: 115px minmax(0, 1fr);
`;

After 1st format (see increased indentation inside comment):

const companyPreviewStyles = css`
  /*
      Minimum column size of 0 required to prevent long words from
      increasing the column size
      https://css-tricks.com/preventing-a-grid-blowout/
    */
  grid-template-columns: 115px minmax(0, 1fr);
`;

After 2nd format (see further increased indentation inside comment):

const companyPreviewStyles = css`
  /*
        Minimum column size of 0 required to prevent long words from
        increasing the column size
        https://css-tricks.com/preventing-a-grid-blowout/
      */
  grid-template-columns: 115px minmax(0, 1fr);
`;

Configuration:

import { postgresql } from 'sql-formatter';

/** @type {import('prettier').Config} */
const prettierConfig = {
  plugins: [
    'prettier-plugin-embed',
    'prettier-plugin-sql',
    'prettier-plugin-tailwindcss',
  ],
  // Avoid excessive diffs on changes to MDX files
  proseWrap: 'never',
  singleQuote: true,
  trailingComma: 'all',
};

/**
 * @type {import('prettier-plugin-embed')
 *   .PrettierPluginEmbedOptions}
 */
const prettierPluginEmbedConfig = {
  embeddedSqlIdentifiers: ['sql'],
};

/** @type {import('prettier-plugin-sql').SqlBaseOptions} */
const prettierPluginSqlConfig = {
  dialect: JSON.stringify(postgresql),
  keywordCase: 'upper',
  identifierCase: 'lower',
  dataTypeCase: 'lower',
  functionCase: 'lower',
  // - Wrap all parenthesized expressions to new lines (eg.
  //   `INSERT` columns)
  // - Do not wrap foreign keys (eg. `REFERENCES table_name
  //   (id)`)
  // - Do not wrap column type expressions (eg. `VARCHAR(255)`)
  // - Do not wrap longer field names when used alone (eg.
  //   `address_line_one`)
  // - Do not wrap shorter expressions in function calls (eg.
  //   `avg(ratings.rating)`)
  expressionWidth: 30,
};

const config = {
  ...prettierConfig,
  ...prettierPluginEmbedConfig,
  ...prettierPluginSqlConfig,
};

export default config;

[karlhorky]

Workaround 1

Disable the CSS-in-JS formatting by using embeddedNoopComments and/or embeddedNoopTags:

import { postgresql } from 'sql-formatter';

/** @type {import('prettier').Config} */
const prettierConfig = {
  plugins: [
    'prettier-plugin-embed',
    'prettier-plugin-sql',
    'prettier-plugin-tailwindcss',
  ],
  // Avoid excessive diffs on changes to MDX files
  proseWrap: 'never',
  singleQuote: true,
  trailingComma: 'all',
};

/**
 * @type {import('prettier-plugin-embed')
 *   .PrettierPluginEmbedOptions}
 */
const prettierPluginEmbedConfig = {
  embeddedSqlIdentifiers: ['sql'],
+  embeddedNoopComments: ['css'],
+  embeddedNoopTags: ['css'],
};

/** @type {import('prettier-plugin-sql').SqlBaseOptions} */
const prettierPluginSqlConfig = {
  dialect: JSON.stringify(postgresql),
  keywordCase: 'upper',
  identifierCase: 'lower',
  dataTypeCase: 'lower',
  functionCase: 'lower',
  // - Wrap all parenthesized expressions to new lines (eg.
  //   `INSERT` columns)
  // - Do not wrap foreign keys (eg. `REFERENCES table_name
  //   (id)`)
  // - Do not wrap column type expressions (eg. `VARCHAR(255)`)
  // - Do not wrap longer field names when used alone (eg.
  //   `address_line_one`)
  // - Do not wrap shorter expressions in function calls (eg.
  //   `avg(ratings.rating)`)
  expressionWidth: 30,
};

const config = {
  ...prettierConfig,
  ...prettierPluginEmbedConfig,
  ...prettierPluginSqlConfig,
};

export default config;

[Sec-ant]

Thanks for reporting the issue, indentation is hard :(

[karlhorky]

Workaround 2

Use a single-line CSS comment - these are stable:

const companyPreviewStyles = css`
  /* Minimum column size of 0 required to prevent long words from increasing the column size https://css-tricks.com/preventing-a-grid-blowout/ */
  grid-template-columns: 115px minmax(0, 1fr);
`;