Typed CSS utilities

Important

This package still exists, but has moved to the neoncitylights/types monorepo.

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

Documentation

Auto-generated API documentation is available.

API reference

Note: The public API below is an excerpt and shows the main symbols that a developer is likely to use.

• fn: # cssSupports(property, value): boolean • source, docs
• fn: # matchMediaFeature(mediaFeature, value): MediaQueryList • source, docs
• T: # cssSupports.CSSProperty • source, docs
• T: # cssSupports.CSSPropertyValue • source, docs
• T: # matchMedia.MqFeature • source, docs
• T: # matchMedia.MqFeatureValue • source, docs
• I: # matchMedia.MediaQueries • source, docs

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.