How an SCSS plugin broke TypeScript formatting

1. A failure before SCSS sorting

The site loads prettier-grundy-scss-order in .prettierrc without specifying grundyScssSorterGroupsOrder. Prettier normalizes plugin options even when the target file is TypeScript or JSON. An invalid default can therefore stop a command before the SCSS sorting code runs. Running without the configuration helped isolate the source, but also disabled the project's settings: it was a diagnostic workaround, not a fix.

{ "plugins": ["prettier-grundy-scss-order"] }

2. Configuration values and option definitions are different

The old plugin declared a string array option and used a bare array of group names as its default. In the Prettier plugin option schema, an array default needs the value wrapper. The ordinary array in a user's configuration was not the problem. Changing TypeScript syntax or installing Sass would not repair this validation error.

grundyScssSorterGroupsOrder: {
  type: "string",
  array: true,
  default: ["@use", "@extend", "--variable", "$variable", "@if",
    "decl", "@include", "@mixin", "rule"]
}

3. Fix the schema and preserve the fallback

The fix uses default: [{ value: [] }]. The parser then treats an empty array as a request to use the preset order, or the built-in order when no preset is selected. Checking only for null or undefined is insufficient: an empty array would otherwise override the fallback. A non-empty user-supplied order still takes precedence. The wrapper belongs in plugin source, not in .prettierrc.

grundyScssSorterGroupsOrder: {
  type: "string",
  array: true,
  default: [{ value: [] }]
}

// Resolve the actual order inside the parser:
const order = grundyScssSorterGroupsOrder?.length
  ? grundyScssSorterGroupsOrder
  : (preset?.order ?? defaultPreset.order);

4. Test the public CLI entry point

A sorting unit test alone does not cover loading and normalizing options through the CLI. The added regression test starts the local Prettier executable against package.json with the repository configuration and no explicit group order. It checks that formatting verification succeeds. The plugin suite contains 30 tests; the regression specifically protects non-SCSS formatting.

const { stdout } = await execFileAsync(process.execPath,
  [prettierCli, "--check", "package.json"],
  { cwd: rootDirectory });
assert.match(stdout, /All matched files use Prettier code style/);

5. Apply the fix in the consuming project

Update the package and lockfile, then run the normal configured command on a real source file or directory. Replace src below with your source directory. On this site, Prettier successfully checks TypeScript with the plugin enabled and no explicit group order. Remaining style warnings are a separate issue: they indicate formatting differences, not the original option-validation failure.

npm install prettier-grundy-scss-order@^0.2.3
npm ls prettier prettier-grundy-scss-order
npx prettier --check "src/**/*.{ts,tsx}"

6. What this fix does not promise

This case concerns the array option default, not every CSS formatting problem. Version 0.2.3 also changes the default for root-level sorting and contains other sorter changes, so review stylesheet diffs when upgrading. Parser selection, ignored files and the effect of reordered declarations on the cascade still need separate checks. Keep both algorithm tests and a CLI regression: they exercise different boundaries.