DOM lib: CSS namespace breaks CSS Typed OM

[jods4]

TypeScript Version: 3.9.2

Search Terms: CSS level 1 types lib dom

PR #37616 changed the definition of CSS from an interface with a global var to a namespace.

// Before:
interface CSS {	
    escape(value: string): string;	
    supports(property: string, value?: string): boolean;	
}	
declare var CSS: CSS;

// After:
declare namespace CSS {
    function escape(ident: string): string;
    function supports(property: string, value: string): boolean;
    function supports(conditionText: string): boolean;
}

In isolation, this is all fine.

But it breaks additional definitions for newer standards.

I reference @types/w3c-css-typed-object-model-level-1 for typed CSS OM, which uses the same interface + global var approach as TS 3.8.

Before it was working fine.
After 3.9, code such as CSS.px(42) now errors with TS2339 'px' does not exist on type 'typeof CSS'

[AviVahl]

The actual change was in another repository: microsoft/TypeScript-DOM-lib-generator#716
TypeScript syncs its .d.ts files with it.

It appears that by moving CSSOM types to be a built-in part of TypeScript, the following spec was missed: https://www.w3.org/TR/css-typed-om-1/

It contains the IDLs for functions like CSS.px, previously available via @types/w3c-css-typed-object-model-level-1.

@saschanaz @sandersn

I tried adding the following source to idlSources.json:

    {
        "url": "https://www.w3.org/TR/css-typed-om-1/",
        "title": "CSS Typed OM Level 1"
    }

but the auto-generated namespace contained function in(...) (for CSS.in(123)), which is illegal, as in is a reserved word. Trying to use removedTypes.json to override the namespace was a bust, as the prune function assumes string-based array filtering (namespace has named objects).

Also, the URL for the Speech API is outdated and causes an un-handled promise rejection (in IDL fetching script). The new URL is: https://wicg.github.io/speech-api/

[saschanaz]

Typed OM so far hasn't get enough stable implementations, and thus doesn't meet the standard to be included in the lib.

That said, the namespace compatibility is a thing. I hope TS could merge namespace and interface seamlessly.

[AviVahl]

I understand. Makes sense.

The issue is therefore about the assumption regarding @types/w3c-css-typed-object-model-level-1 no longer being needed. That assumption has proven to be incorrect, as the new built-in types don't include everything that was defined there.

A possible solution is to "revive" @types/w3c-css-typed-object-model-level-1 (or whatever shorter name) with what's missing, probably with namespace usage this time around.

[saschanaz]

The issue is therefore about the assumption regarding @types/w3c-css-typed-object-model-level-1 no longer being needed.

True, DefinitelyTyped/DefinitelyTyped#43361 should be reverted.

[sandersn]

After the revert, a lot of the package will still need to be removed, right? Or, wait, if it only includes CSS Typed OM types, then a simple revert should be good enough.

[saschanaz]

A revert should use namespace CSS, otherwise a simple revert looks fine.

[sandersn]

PR is up at DefinitelyTyped/DefinitelyTyped#45076

[dpraul]

I encountered this updating our application from Angular 9 to 10, since 10 brings in TS 1.9. Our app scopes CSS to a class so it can be overridden in tests.

For any relative TS newbies like me who stumble on this, I was able to workaround by changing:

class A {
  CSS: CSS = (this.window as any).CSS;
}

to:

class A {
  CSS: typeof CSS = (this.window as any).CSS;
}