neoncitylights / typed-css-utils

Improved TypeScript support for CSS and relevant APIs, currently including CSS Conditionals L3 and CSS Media Queries L5.

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.