In this article, you will learn how CSSType can be used to type check your CSS properties and values.

I found csstype type dependency in Inferno’s package.json.

"dependencies": {
    "csstype": "^3.1.3",
    "inferno-vnode-flags": "9.0.3",
    "opencollective-postinstall": "^2.0.3"
}

I searched for this package on npm and found this CSSType package.

CSSType

TypeScript and Flow definitions for CSS, generated by data from MDN. It provides autocompletion and type checking for CSS properties and values.

TypeScript example

import type * as CSS from 'csstype';
 
const style: CSS.Properties = {
  colour: 'white', // Type error on property
  textAlign: 'middle', // Type error on value
};

mdn/data

mdn/data is a repository that contains general data for Web technologies.

Below is a note picked from https://github.com/mdn/data README.md

Note: We are in the process of deprecating the mdn/data package in favor of w3c/webref. If you depend on this project, let us know in our community GitHub discussions. Thank you.

CSSType usage in Inferno.js codebase

I searched for csstype in inferno codebase and found the below search results.

CSSType is found only in 3 places.

1. package.json

2. core/types.ts

3. tests/styles.spec.tsx

I am interested in learning more how csstype is used in core/types.ts.

Below is imported in core/types.ts at L9:

import type { PropertiesHyphen } from 'csstype';

and this PropertiesHyphen is used as a type in an interface called HTMLAttributes as shown below:

interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
  ...
  style?: PropertiesHyphen | string | null | undefined | CssVariables;
}

I found the below information from the CSSType about the PropertiesHyphen:

Hyphen cased (kebab cased) properties are provided in CSS.PropertiesHyphen and CSS.PropertiesHyphenFallback. It's not not added by default in CSS.Properties. To allow both of them, you can simply extend with CSS.PropertiesHyphen or/and CSS.PropertiesHyphenFallback.

import type * as CSS from 'csstype';
 
interface Style extends CSS.Properties, CSS.PropertiesHyphen {}
 
const style: Style = {
  'flex-grow': 1,
  'flex-shrink': 0,
  'font-weight': 'normal',
  backgroundColor: 'white',
};

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

Configure features such as Changesets, Supabase authentication in your Next.js project using Think Throo CLI.

Email — ramu@thinkthroo.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My YouTube channel — https://www.youtube.com/@ramu-narasinga

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

References

1. https://www.npmjs.com/package/csstype

2. https://github.com/infernojs/inferno/blob/master/packages/inferno/package.json#L77

3. https://github.com/mdn/data