nullishCoalescingOperator and optionalChaining missing parser plugin

[dimitropoulos]

The Nullish Coalescing Operator was recently added to JavaScript and TypeScript. Upon updating my project, stylelint returned an error:

This experimental syntax requires enabling the parser plugin: 'nullishCoalescingOperator'

the input file, in this case, was:

// The nullish coalescing operator is an alternative to ||
// which returns the right-side expression if the left-side
// is null or undefined.

// In contrast, || uses falsy checks, meaning an empty
// string or the number 0 would be considered false.

// A good example for this feature is dealing with partial
// objects which have defaults when a key isn't passed in.

interface AppConfiguration {
  // Default: "(no name)"; empty string IS valid
  name:  string;

  // Default: -1; 0 is valid
  items:  number;

  // Default: true
  active: boolean;
}

function updateApp(config: Partial<AppConfiguration>) {
  // With null-coalescing operator
  config.name = config.name ?? "(no name)";
  config.items = config.items ?? -1;
  config.active = config.active ?? true;

  // Current solution
  config.name = typeof config.name === "string" ? config.name : "(no name)";
  config.items = typeof config.items === "number" ? config.items : -1;
  config.active = typeof config.active === "boolean" ? config.active : true;

  // Using || operator which could give bad data
  config.name = config.name || "(no name)"; // does not allow for "" input
  config.items = config.items || -1; // does not allow for 0 input
  config.active = config.active || true; // really bad, always true
}

// You can read more about nullish coalescing in the 3.7 blog post:
//
// https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/

and the stylelint config was:

{
  "processors": ["stylelint-processor-styled-components"],
  "rules": {
    "no-empty-source": null
  }
}

After quite a long time debugging, I was able to determine that this is actually an issue with stylelint-processor-styled-components:

styled-components/stylelint-processor-styled-components#252
styled-components/stylelint-processor-styled-components#289

The resolution, if you are hitting this problem with stylelint-processor-styled-components or any other processor, is to add a processor option for parserPlugins as such:

{
  "processors": [
    ["stylelint-processor-styled-components", { "parserPlugins": ["nullishCoalescingOperator"] }]
  ],
  "rules": {
    "no-empty-source": null
  }
}

Ideally, stylelint-processor-styled-components will add it themselves soon (since, it's definitely a part of the language going forward and thus not experimental).

I wanted to add this issue so someone searching this repo for what's returned in this error will have some steps of resolution.

If you, the maintainers and contributors to this project have nothing more to add please feel free to close this issue.

[dimitropoulos]

I've just noticed that optionalChaining falls into the same camp, so updating to include that. If you are having an issue with optionalChaining then you can resolve temporarily by using:

  "processors": [
    [
      "stylelint-processor-styled-components",
      {
        "parserPlugins": [
          "nullishCoalescingOperator",
          "optionalChaining"
        ]
      }
    ]
  ]

[alexander-akait]

Do not use stylelint-processor-styled-components it is deprecated, stylelint support css-in-js out of box

/cc @stylelint/core any ideas about that, we other have issues about it

[dimitropoulos]

I see. That's news to me. Thanks! - I'll give that a try

[ACollectionOfAtoms]

Do these docs need to be updated then? https://www.styled-components.com/docs/tooling#stylelint

[alexander-akait]

@ACollectionOfAtoms yes

[hudochenkov]

Closing this, as it's not related to stylelint itself.

[jmjpro]

I think that this issue should be reopened.

Stylelint documentation at https://stylelint.io/user-guide/processors says

stylelint now has built-in support for many common non-stylesheet files. You may no longer need to use the following processors:

When I remove stylelint-processor-styled-components it causes a new lot of new problems. When I try the solution from dimitropoulos, it also causes a lot of new problems.

/* stylelint-disable-next-line */ also didn't fix the problem for me.

I'm using styled-components with react and typescript (tsx files), latest versions of all.

[beckerei]

I'm running into the same problems as @jmjpro
Optional chaining works fine for use, but using nullish coalescing throws these errors.
Suddenly stylelint throws errors whereever we use fragments from react.

[pbaggett]

Upgrading to "stylelint-processor-styled-components": "^1.10.0" fixed this for us.

Same situation as others: adding the plugins caused more errors, upgrading stylelint and removing the styled-components processor caused more errors, disable comments didn't work. Everything seems fine now.

Other relevant versions are:

"stylelint": "^9.6.0",
"stylelint-config-standard": "^18.2.0",
"stylelint-config-styled-components": "^0.1.1",