SyntaxError: Syntax error in selector when using (:not) and (:has)

Question

The error message:

SyntaxError: Syntax error in selector ":not(TSTypeAliasDeclaration:has(> Identifier[name=Nullable])):has(> TSUnionType:has(> TSNullKeyword):not(:has(> TSUndefinedKeyword)))" at position 32: Expected " ", "!", "#", "*", ".", ":", ":first-child", ":has(", ":last-child", ":matches(", ":not(", ":nth-child(", ":nth-last-child(", "[", or [^ [\],():#!=><~+.] but ">" found.

package.json (reduced):

{
    "devDependencies": {
        "eslint": "^9.26.0",
        "typescript": "^5.5.4",
        "typescript-eslint": "^8.33.1",
    },
}

.eslintrc:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "no-restricted-syntax": [
      "error",
      {
        "selector": ":not(TSTypeAliasDeclaration:has(> Identifier[name=Nullable])):has(> TSUnionType:has( > TSNullKeyword):not(:has(> TSUndefinedKeyword)))",
        "message": "Use `Nullable<T>` utility type instead of `| null`."
      },
      {
        "selector": ":not(TSTypeAliasDeclaration:has(> Identifier[name=Undefinable])):has(> TSUnionType:has( > TSUndefinedKeyword):not(:has(> TSNullKeyword)))",
        "message": "Use `Undefinable<T>` utility type instead of `| undefined`."
      },
      {
        "selector": "TSUnionType:has(> TSNullKeyword):has(> TSUndefinedKeyword)",
        "message": "Use `Nilable<T>` utility type instead of `| null | undefined`."
      }
    ]
  }
}

tsconfig.json:

{
    "include": ["src"]
}

test.ts:

type Nullable<T> = T | null;
type Undefinable<T> = T | undefined;
type Nilable<T> = Nullable<Undefinable<T>>;

type x1 = number | null;
type x2 = number | undefined;
type x3 = number | null | undefined;

type x4 = null | number;
type x5 = undefined | number;
type x6 = null | number | undefined;

My goal is to have strict rule to use:

Nullable instead of | null
Undefinable instead of | undefined
Nilable instead of | null | undefined

I can achieve it in playground but not in my project

The selector property value needs to be an AST selector, not a CSS selector. — Quentin
– Quentin, Commented Jun 2 at 15:24
@Quentin I made my example as close as possible to playground version but error still exists. Am I using wrong selectors? Because I got selectors from the link which you provided EXCEPT :has( selector I got it from esquery and also saw this selector in error message itself — EzioMercer
– EzioMercer, Commented Jun 3 at 8:42

Salketer · Accepted Answer · 2025-06-03 10:00:27Z

1

Looking at the message, it seems the parser does not like selectors starting with > inside the pseudo element :has . While this should be fine as per specification, we can work around it. Also, the workaround i'm suggesting removes nested :has which is not allowed by specifications.

https://drafts.csswg.org/selectors-4/#has-pseudo

The :has() pseudo-class cannot be nested; :has() is not valid within :has().

{
  "rules": {
        "no-restricted-syntax": [
          "error",

          {
            "selector": ":not(TSTypeAliasDeclaration:has(Identifier[name=Nullable])) > TSUnionType:has(TSNullKeyword):not(:has(TSUndefinedKeyword))",
            "message": "Use `Nullable<T>` utility type instead of `| null`."
          },
          {
            "selector": ":not(TSTypeAliasDeclaration:has(Identifier[name=Undefinable])) > TSUnionType:has(TSUndefinedKeyword):not(:has(TSNullKeyword))",
            "message": "Use `Undefinable<T>` utility type instead of `| undefined`."
          },
          {
            "selector": "TSUnionType:has( TSNullKeyword):has( TSUndefinedKeyword)",
            "message": "Use `Nilable<T>` utility type instead of `| null | undefined`."
          }
        ]
  }
}

Please note that this will not target TypeAliasDeclaration anymore, but the UnionType instead. From my point of view, this is not so bad as it is the UnionType that is wrong, not the full declaration, but that may not be what you'd like. I tried to find changes so that the whole declaration would be targeted but I couldn't find the right pattern to use.

answered Jun 3 at 10:00

Salketer

15.8k2 gold badges32 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

EzioMercer Jun 3 at 10:35

Thank you very much! UnionType that is wrong, not the full declaration that was the my initial idea but I couldn't come up with correct selector so I targeted whole declaration. While this should be fine as per specification - is it bug? Should we report it somewhere?

Salketer Jun 3 at 12:43

Well, no one here could reproduce it so I really do not know why you are getting this.

Collectives™ on Stack Overflow

SyntaxError: Syntax error in selector when using (:not) and (:has)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related