CSSType

https://www.npmjs.com/package/csstype
Admin
TypeScript and Flow definitions for CSS generated from MDN data, providing autocompletion and type...
Tokens:6,140
Snippets:100
Trust Score:9.6
Update:6 months ago
Show doc for...
Tokens:
Raw
### Installation

Source: https://www.npmjs.com/package/csstype?activeTab=code

Instructions on how to install the csstype package using npm.

```APIDOC
## Installation

### Description
Install the `csstype` package using npm.

### Command
```bash
$ npm install csstype
```
```

--------------------------------

### Install CSSType

Source: https://www.npmjs.com/package/csstype?activeTab=readme

Install the package via npm.

```bash
$ npm install csstype
```

--------------------------------

### TypeScript Usage Example

Source: https://www.npmjs.com/package/csstype?activeTab=code

Demonstrates how to import and use CSS type definitions in TypeScript.

```APIDOC
## TypeScript Usage Example

### Description
This example shows how to import the `csstype` package and use its type definitions for CSS properties in a TypeScript project.

### Code
```typescript
import type * as CSS from 'csstype';

const style: CSS.Properties = {
  colour: 'white', // Type error on property
  textAlign: 'middle', // Type error on value
};
```
```

--------------------------------

### Flow Usage Example

Source: https://www.npmjs.com/package/csstype?activeTab=code

Demonstrates how to import and use CSS type definitions in Flow.

```APIDOC
## Flow Usage Example

### Description
This example shows how to import the `csstype` package and use its type definitions for CSS properties in a Flow project.

### Code
```flow
// @flow strict
import * as CSS from 'csstype';

const style: CSS.Properties<> = {
  colour: 'white', // Type error on property
  textAlign: 'middle', // Type error on value
};
```
```

--------------------------------

### Basic CSS Properties in TypeScript

Source: https://www.npmjs.com/package/csstype?activeTab=versions

Demonstrates how to use CSS.Properties for type checking CSS properties in TypeScript. Note the type errors for 'colour' and 'textAlign' as shown in the example.

```typescript
import type * as CSS from 'csstype';

const style: CSS.Properties = {
  colour: 'white', // Type error on property
  textAlign: 'middle', // Type error on value
};
```

--------------------------------

### Customizing Length Type in TypeScript

Source: https://www.npmjs.com/package/csstype?activeTab=versions

Example of customizing the generic type for length units in CSS.Properties. This allows accepting any numeric value for lengths, such as '100'.

```typescript
const style: CSS.Properties<string | number> = {
  width: 100,
};
```

--------------------------------

### Development Commands

Source: https://www.npmjs.com/package/csstype?activeTab=versions

Standard npm scripts for building, watching, testing, and linting the project.

```bash
npm run build
```

```bash
npm run watch
```

```bash
npm run test
```

```bash
npm run lazy
```

--------------------------------

### Generics for Length and Time

Source: https://www.npmjs.com/package/csstype?activeTab=code

Explains the use of generic arguments for length and time types.

```APIDOC
## Generics

### Description
All interfaces accept two optional generic arguments to define length and time types: `CSS.Properties<TLength = string | 0, TTime = string>`.

### Length Generic
- The first generic parameter, `TLength`, defaults to `string | 0`. `0` is used because its unit identifier is optional.
- You can specify a different type, e.g., `string | number`, for platforms that accept numeric values with specific units.

### Length Example
```typescript
const style: CSS.Properties<string | number> = {
  width: 100, // Assuming '100' is interpreted as a valid length
};
```

### Time Generic
- The second generic parameter, `TTime`, defaults to `string`.
- You can specify a different type, e.g., `string | number`, for platforms that accept numeric values with specific units.

### Time Example
```typescript
const style: CSS.Properties<string | number, number> = {
  transitionDuration: 1000, // Assuming '1000' is interpreted as a valid time in milliseconds
};
```
```

--------------------------------

### Style Types

Source: https://www.npmjs.com/package/csstype?activeTab=code

Overview of different style type categories and variations available in csstype.

```APIDOC
## Style Types

### Description
Properties are categorized in different uses and technical variations to provide suitable typings.

### Categories
- **All**: Includes `Standard`, `Vendor`, `Obsolete`, and `Svg`.
- **`Standard`**: Current properties, extends `StandardLonghand` and `StandardShorthand`.
- **`Vendor`**: Vendor prefixed properties, extends `VendorLonghand` and `VendorShorthand`.
- **`Obsolete`**: Removed or deprecated properties.
- **`Svg`**: SVG-specific properties.

### Variations
- **Default**: JavaScript (camel) cased property names.
- **`Hyphen`**: CSS (kebab) cased property names.
- **`Fallback`**: Accepts an array of values (e.g., `string | string[]`).

### Type Table
| Default | `Hyphen` | `Fallback` | `HyphenFallback` |
|---|---|---|---|
| **All** | `Properties` | `PropertiesHyphen` | `PropertiesFallback` | `PropertiesHyphenFallback` |
| **`Standard`**| `StandardProperties` | `StandardPropertiesHyphen` | `StandardPropertiesFallback` | `StandardPropertiesHyphenFallback` |
| **`Vendor`**| `VendorProperties` | `VendorPropertiesHyphen` | `VendorPropertiesFallback` | `VendorPropertiesHyphenFallback` |
| **`Obsolete`**| `ObsoleteProperties` | `ObsoletePropertiesHyphen` | `ObsoletePropertiesFallback` | `ObsoletePropertiesHyphenFallback` |
| **`Svg`**| `SvgProperties` | `SvgPropertiesHyphen` | `SvgPropertiesFallback` | `SvgPropertiesHyphenFallback` |
```

--------------------------------

### Basic CSS Properties in Flow

Source: https://www.npmjs.com/package/csstype?activeTab=versions

Shows the equivalent usage of CSS.Properties for type checking in Flow. Similar to TypeScript, 'colour' and 'textAlign' will result in type errors.

```flow
// @flow strict
import * as CSS from 'csstype';

const style: CSS.Properties<> = {
  colour: 'white', // Type error on property
  textAlign: 'middle', // Type error on value
};
```

--------------------------------

### Configure Git for Merge Conflicts

Source: https://www.npmjs.com/package/csstype?activeTab=versions

Run this command after cloning the repository to prevent merge conflicts in automatically generated files.

```bash
git config merge.ours.driver true
```

--------------------------------

### Define Pseudo-selectors

Source: https://www.npmjs.com/package/csstype?activeTab=readme

Use CSS.SimplePseudos for type-safe pseudo-selector definitions.

```typescript
import type * as CSS from 'csstype';

const pseudos: { [P in CSS.SimplePseudos]?: CSS.Properties } = {
  ':hover': {
    display: 'flex',
  },
};
```

--------------------------------

### Pseudo Types

Source: https://www.npmjs.com/package/csstype?activeTab=code

Information about pseudo class and pseudo element type definitions.

```APIDOC
## Pseudo Types

### Description
Provides string literal types for pseudo classes and pseudo elements.

### Types
- **`Pseudos`**: Includes `AdvancedPseudos` and `SimplePseudos`.
  - **`AdvancedPseudos`**: For function-like pseudos (e.g., `:not(:first-child)`). The string literal contains the value excluding the parenthesis (e.g., `:not`).
  - **`SimplePseudos`**: For plain pseudos (e.g., `:hover`) that have only one variation.
```

--------------------------------

### Define CSS Properties

Source: https://www.npmjs.com/package/csstype?activeTab=readme

Basic usage of CSS.Properties to define style objects.

```typescript
import type * as CSS from 'csstype';

const style: CSS.Properties = {
  width: '10px',
  margin: '1em',
};
```

--------------------------------

### Configure CSS generics

Source: https://www.npmjs.com/package/csstype?activeTab=readme

Customize length and time types using generic arguments for CSS.Properties.

```typescript
const style: CSS.Properties<string | number> = {
  width: 100,
};
```

```typescript
const style: CSS.Properties<string | number, number> = {
  transitionDuration: 1000,
};
```

--------------------------------

### Force Resolution in package.json

Source: https://www.npmjs.com/package/csstype?activeTab=readme

Override dependency versions in package.json to resolve conflicts.

```json
{
  "overrides": {
    "csstype": "^3.2.0"
  }
}
```

--------------------------------

### At-rule Types

Source: https://www.npmjs.com/package/csstype?activeTab=code

Details on at-rule interfaces and their corresponding type definitions.

```APIDOC
## At-rule Types

### Description
At-rule interfaces provide typings for CSS at-rules and their descriptors.

### TypeScript
At-rule types are found in the `AtRule` namespace (e.g., `AtRule.Viewport`).

### Flow
At-rule types are prefixed with `AtRule$` (e.g., `AtRule$Viewport`).

### Type Table
| Default | `Hyphen` | `Fallback` | `HyphenFallback` |
|---|---|---|---|
| **`@counter-style`**| `CounterStyle` | `CounterStyleHyphen` | `CounterStyleFallback` | `CounterStyleHyphenFallback` |
| **`@font-face`**| `FontFace` | `FontFaceHyphen` | `FontFaceFallback` | `FontFaceHyphenFallback` |
| **`@viewport`**| `Viewport` | `ViewportHyphen` | `ViewportFallback` | `ViewportHyphenFallback` |
```

--------------------------------

### Define Hyphenated Properties

Source: https://www.npmjs.com/package/csstype?activeTab=readme

Extend CSS.PropertiesHyphen to support kebab-cased property names.

```typescript
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',
};
```

--------------------------------

### Customizing Time Type in TypeScript

Source: https://www.npmjs.com/package/csstype?activeTab=versions

Demonstrates customizing the generic type for time units in CSS.Properties. This enables the use of numeric values for time properties like 'transitionDuration'.

```typescript
const style: CSS.Properties<string | number, number> = {
  transitionDuration: 1000,
};
```

--------------------------------

### Define CSS Properties with Fallbacks

Source: https://www.npmjs.com/package/csstype?activeTab=readme

Use CSS.PropertiesFallback to allow array values for CSS fallbacks.

```typescript
import type * as CSS from 'csstype';

const style: CSS.PropertiesFallback = {
  display: ['-webkit-flex', 'flex'],
  color: 'white',
};
```

--------------------------------

### Apply Styles to HTMLElement

Source: https://www.npmjs.com/package/csstype?activeTab=readme

Apply a typed style object to a DOM element using Object.assign.

```typescript
import type * as CSS from 'csstype';

const style: CSS.Properties = {
  color: 'red',
  margin: '1em',
};

let button = document.createElement('button');

Object.assign(button.style, style);
```

--------------------------------

### Define CSS properties with type checking

Source: https://www.npmjs.com/package/csstype?activeTab=readme

Use CSS.Properties to enforce type safety on CSS objects. Invalid properties or values will trigger type errors.

```typescript
import type * as CSS from 'csstype';

const style: CSS.Properties = {
  colour: 'white', // Type error on property
  textAlign: 'middle', // Type error on value
};
```

```flow
// @flow strict
import * as CSS from 'csstype';

const style: CSS.Properties<> = {
  colour: 'white', // Type error on property
  textAlign: 'middle', // Type error on value
};
```

--------------------------------

### Augment CSS Types

Source: https://www.npmjs.com/package/csstype?activeTab=readme

Use module augmentation to add missing properties or custom CSS variables.

```typescript
// My css.d.ts file
import type * as CSS from 'csstype';

declare module 'csstype' {
  interface Properties {
    // Add a missing property
    WebkitRocketLauncher?: string;

    // Add a CSS Custom Property
    '--theme-color'?: 'black' | 'white';

    // Allow namespaced CSS Custom Properties
    [index: `--theme-${string}`]: any;

    // Allow any CSS Custom Properties
    [index: `--${string}`]: any;

    // ...or allow any other property
    [index: string]: any;
  }
}
```

--------------------------------

### Flow Type Assertion

Source: https://www.npmjs.com/package/csstype?activeTab=readme

Use type assertion in Flow to handle missing or custom properties.

```flow
const style: $Exact<CSS.Properties<*>> = {
  // Add a missing property
  [('WebkitRocketLauncher': any)]: 'launching',

  // Add a CSS Custom Property
  [('--theme-color': any)]: 'black',
};
```

--------------------------------

### Type Assertion for Missing Properties

Source: https://www.npmjs.com/package/csstype?activeTab=readme

Use type assertion to bypass strict type checking for specific properties.

```typescript
const style: CSS.Properties = {
  // Add a missing property
  ['WebkitRocketLauncher' as any]: 'launching',

  // Add a CSS Custom Property
  ['--theme-color' as any]: 'black',
};
```
Tokens:
Raw