css-types

neoncitylights/css-types

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/css-types

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/css-types';

// 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.

Contribution

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the MIT license, shall be licensed as above, without any additional terms or conditions.