custom-css-grammar-definition.css

/* defining something like this */
@--custom-grammar (at-rule: --demo) {
  selectors: :--custom();

  @--custom-grammar (selector: :--custom()) {
    properties: --direction, --depth;

    @--custom-grammar (property: --direction) {
      value: north | east | south | west;
    }

    @--custom-grammar (property: --depth) {
      value: <dimension>;
    }
  }
}

/* to let your editor be able to validate/lint a custom CSS construct you have defined to support yourself */
@--demo {
  :--custom() {
    --direction: west;
    --depth: 100in;
  }
}