Typed CSS utils

This library provides a set of utilities extending the csstype package to help you write typed CSS in TypeScript.

Currently, there's basic support for the following W3C standards:

• CSS Conditionals Level 3 (css-conditional-3): Editor's Draft, CRS
• CSS Media Queries Level 5 (mediaqueries-5): Editor's Draft, WD

Install

npm install @neoncitylights/typed-css-utils

Usage

Using TypeScript, you can receive type intelliSense, which provides autocomplete suggestions for:

• CSS property names and values (through csstype)
• Media feature names (e.g prefers-color-scheme, aspect-ratio)

import { matchMediaFeature, cssSupports } from '@neoncitylights/typed-css-utils';

// equivalent to window.matchMedia('(prefers-color-scheme: dark)');
const userPrefersDark: MediaQueryList = matchMediaFeature('prefers-color-scheme', 'dark');

// TypeScript support, which provides strongly typed CSS property
// names and values using the `csstype` package
const supportsGrid: boolean = cssSupports('display', 'grid');
const supportsFlex: boolean = cssSupports('display', 'flex');

License

This library is licensed under the MIT License.