### Property Syntax Examples

Source: https://github.com/frenic/csstype/blob/master/_autodocs/at-rules.md

Illustrates various syntax examples for CSS custom properties, showing accepted value types.

```plaintext
Syntax | Accepts
|--------|--------|
| `<color>` | Color values |
| `<length>` | Length values |
| `<number>` | Numeric values |
| `<color> | <length>` | Color or length |
| `<length>+` | One or more lengths |

```

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

### Install csstype

Source: https://github.com/frenic/csstype/blob/master/_autodocs/INDEX.md

Install the csstype library using npm. This is the first step before using the library in your project.

```bash
npm install csstype
```

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

### NamedColor Examples

Source: https://github.com/frenic/csstype/blob/master/_autodocs/data-types.md

Provides examples of CSS color keywords by name.

```plaintext
Examples: "aliceblue", "red", "green", "blue", "white", "black", etc.
```

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

### Install CSSType

Source: https://github.com/frenic/csstype/blob/master/README.md

Command to install the csstype package using npm.

```sh
$ npm install csstype
```

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

### Example CSS CounterStyle Rule

Source: https://github.com/frenic/csstype/blob/master/_autodocs/at-rules.md

An example of how to define a custom counter style using the CounterStyle interface. This example sets a symbolic system with custom symbols and a suffix.

```typescript
const counterStyle: CSS.AtRule.CounterStyle = {
  system: 'symbolic',
  symbols: '●◯◯',
  suffix: ' ',
};
```

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

### FontFamily Example

Source: https://github.com/frenic/csstype/blob/master/_autodocs/property-namespace.md

Example of how to set the fontFamily CSS property.

```typescript
const style: CSS.Properties = {
  fontFamily: '"Helvetica Neue", Arial, sans-serif',
};
```

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

### Border Radius Example

Source: https://github.com/frenic/csstype/blob/master/_autodocs/property-namespace.md

Demonstrates setting the `border-radius` property for all corners.

```typescript
const style: CSS.Properties = {
  borderRadius: '4px',  // All corners
};
```

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

### HTML Meta Viewport Tag Example

Source: https://github.com/frenic/csstype/blob/master/_autodocs/at-rules.md

Provides an example of the HTML meta viewport tag, which is preferred over the CSS @viewport rule.

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">

```

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

### ViewTransition Example Usage

Source: https://github.com/frenic/csstype/blob/master/_autodocs/at-rules.md

Demonstrates how to use the ViewTransition interface to define a CSS @view-transition rule with navigation and types.

```typescript
const transition: CSS.AtRule.ViewTransition = {
  navigation: 'auto',
  types: 'slide, fade',
};

```

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

### Border Shorthand Example

Source: https://github.com/frenic/csstype/blob/master/_autodocs/property-namespace.md

Demonstrates the usage of the `border` shorthand property in CSS.

```typescript
const style: CSS.Properties = {
  border: '1px solid black',
};
```

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

### Example Usage of PropertiesHyphen

Source: https://github.com/frenic/csstype/blob/master/_autodocs/types.md

Demonstrates how to use the `PropertiesHyphen` interface to define styles with kebab-cased property names.

```typescript
const style: CSS.PropertiesHyphen = {
  'background-color': 'white',
  'flex-direction': 'row',
  'justify-content': 'center',
};
```

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

### Example Usage of FontFace

Source: https://github.com/frenic/csstype/blob/master/_autodocs/at-rules.md

Demonstrates how to create a FontFace object with common descriptors like fontFamily, src, fontWeight, fontStyle, and fontDisplay.

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

const fontFace: CSS.AtRule.FontFace = {
  fontFamily: 'MyFont',
  src: "url('font.woff2') format('woff2'), url('font.woff') format('woff')",
  fontWeight: '400',
  fontStyle: 'normal',
  fontDisplay: 'swap',
};
```

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

### Web Platform Properties Usage

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

Example of using the default web platform type for CSS properties.

```typescript
const web: CSS.Properties = { width: '100px' };
```

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

### Example: @counter-style At-Rule

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Define a @counter-style at-rule with properties such as system, symbols, and suffix.

```typescript
// @counter-style
const counter: CSS.AtRule.CounterStyle = {
  system: 'cyclic',
  symbols: '●◯',
  suffix: ' ',
};
```

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

### Basic CSS Properties Setup with Flow

Source: https://github.com/frenic/csstype/blob/master/_autodocs/usage-guide.md

Define basic CSS properties using CSSType within a Flow-typed environment.

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

const style: CSS.Properties<> = {
  width: '100px',
  height: '100px',
  backgroundColor: 'blue',
};

```

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

### Example CSS Page Rule

Source: https://github.com/frenic/csstype/blob/master/_autodocs/at-rules.md

An example of defining a @page rule for print stylesheets. This sets the page size to A4, adds bleed and marks, and specifies portrait orientation.

```typescript
const pageRule: CSS.AtRule.Page = {
  size: 'A4',
  bleed: '5mm',
  marks: 'crop cross',
  pageOrientation: 'portrait',
};
```

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

### Property Example Usage

Source: https://github.com/frenic/csstype/blob/master/_autodocs/at-rules.md

Demonstrates how to use the Property interface to define a CSS @property rule with syntax, initial value, and inheritance.

```typescript
const customProp: CSS.AtRule.Property = {
  syntax: '<color>',
  initialValue: '#000000',
  inherits: 'false',
};

```

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

### Example: @font-face At-Rule

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Define a @font-face at-rule with properties like fontFamily, src, fontWeight, and fontDisplay.

```typescript
// @font-face
const font: CSS.AtRule.FontFace = {
  fontFamily: 'Name',
  src: "url('file.woff2')",
  fontWeight: '700',
  fontDisplay: 'swap',
};
```

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

### Custom Platform Properties Usage

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

Example of using a custom type parameter for a custom platform with custom units.

```typescript
const custom: CSS.Properties<CustomLength> = { width: custom('100', 'em') };
```

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

### Flow Property Type Example

Source: https://github.com/frenic/csstype/blob/master/README.md

In version 3.0, all property types are exposed with a namespace. Use `Property$AlignContent` for Flow.

```flow
Property$AlignContent
```

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

### Example: @page At-Rule

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Define a @page at-rule with properties like size, bleed, and marks.

```typescript
// @page
const page: CSS.AtRule.Page = {
  size: 'A4',
  bleed: '5mm',
  marks: 'crop',
};
```

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

### Example Usage of PropertiesHyphenFallback

Source: https://github.com/frenic/csstype/blob/master/_autodocs/types.md

Illustrates using `PropertiesHyphenFallback` for styles that require both kebab-cased property names and array fallbacks.

```typescript
const style: CSS.PropertiesHyphenFallback = {
  'display': ['-webkit-flex', 'flex'],
  'flex-direction': 'row',
};
```

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

### TypeScript Property Type Example

Source: https://github.com/frenic/csstype/blob/master/README.md

In version 3.0, all property types are exposed with a namespace. Use `Property.AlignContent` for TypeScript.

```typescript
Property.AlignContent
```

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

### Flow CSS Properties

Source: https://github.com/frenic/csstype/blob/master/README.md

Example of using CSS.Properties in Flow, demonstrating type errors for invalid properties and values.

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

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

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

### FontPaletteValues Example Usage

Source: https://github.com/frenic/csstype/blob/master/_autodocs/at-rules.md

Demonstrates how to use the FontPaletteValues interface to define a CSS @font-palette-values rule.

```typescript
const palette: CSS.AtRule.FontPaletteValues = {
  fontFamily: 'MyColorFont',
  basePalette: 'light',
  overrideColors: '0 red, 1 blue, 2 green',
};

```

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

### TypeScript At-Rule Type Example

Source: https://github.com/frenic/csstype/blob/master/README.md

In version 3.0, all at-rules are exposed with a namespace. Use `AtRule.FontFace` for TypeScript.

```typescript
AtRule.FontFace
```

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

### Example Usage of CSS Display Property

Source: https://github.com/frenic/csstype/blob/master/_autodocs/property-namespace.md

Demonstrates how to set the CSS 'display' property using the 'flex' value within a CSS.Properties object.

```typescript
const style: CSS.Properties = {
  display: 'flex',
};
```

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

### Flow At-Rule Type Example

Source: https://github.com/frenic/csstype/blob/master/README.md

In version 3.0, all at-rules are exposed with a namespace. Use `AtRule$FontFace` for Flow.

```flow
AtRule$FontFace
```

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

### Usage in JavaScript Objects

Source: https://github.com/frenic/csstype/blob/master/_autodocs/at-rules.md

Example of using @font-face at-rule within a JavaScript object for styles.

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

const styles = {
  '@font-face': {
    fontFamily: 'CustomFont',
    src: "url('font.woff2')",
    fontDisplay: 'swap',
  } as CSS.AtRule.FontFace,
};
```

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

### Usage with TypeScript Interfaces

Source: https://github.com/frenic/csstype/blob/master/_autodocs/at-rules.md

Example of defining TypeScript interfaces to type at-rules like @font-face and @page.

```typescript
interface MyStyles {
  '@font-face': CSS.AtRule.FontFace;
  '@page': CSS.AtRule.Page;
}
```

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

### Union Types for Property Values Example

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

Illustrates how property values are defined as union types, combining specific keywords, generic parameters, and custom string support.

```typescript
type Color = Globals | DataType.Color | undefined
type Display = Globals | DisplayOutside | DisplayInside | DisplayLegacy | (string & {})
type Width<TLength> = Globals | TLength | "auto" | "fit-content" | (string & {})
```

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

### TypeScript CSS Properties

Source: https://github.com/frenic/csstype/blob/master/README.md

Example of using CSS.Properties in TypeScript, highlighting type errors for invalid properties and values.

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

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

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

### Example Usage of CSS Margin Property for Centering

Source: https://github.com/frenic/csstype/blob/master/_autodocs/property-namespace.md

Demonstrates using the 'margin' property with the 'auto' value to horizontally center an element.

```typescript
const style: CSS.Properties = {
  margin: 'auto',  // Centers horizontally
};
```

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

### TypeScript Style Object

Source: https://github.com/frenic/csstype/blob/master/_autodocs/README.md

Example of defining a style object with basic CSS properties using csstype's Properties interface.

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

const style: CSS.Properties = {
  width: '100px',
  backgroundColor: 'blue',
};
```

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

### React Native Properties Usage

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

Example of using a custom type parameter for React Native, allowing numeric values for width.

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

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

### Example CSS Page Rule with Hyphenated Properties

Source: https://github.com/frenic/csstype/blob/master/_autodocs/at-rules.md

Demonstrates using hyphenated property names for CSS @page rules, often used in specific contexts or older syntaxes. This sets landscape orientation and letter size.

```typescript
const pageStyle: CSS.AtRule.PageHyphen = {
  'page-orientation': 'landscape',
  'size': 'letter',
};
```

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

### Example Usage of CSS Width Property with Numeric Length

Source: https://github.com/frenic/csstype/blob/master/_autodocs/property-namespace.md

Shows how to set the CSS 'width' property using a numeric value, by overriding the default TLength generic parameter in CSS.Properties.

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

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

### Npm Package Overrides for Version Conflicts

Source: https://github.com/frenic/csstype/blob/master/README.md

Configure `package.json` with `overrides` to enforce a specific version of `csstype` and resolve potential conflicts when multiple versions are installed.

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

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

### Watch Command

Source: https://github.com/frenic/csstype/blob/master/README.md

Runs the build process on each file save. Useful for continuous development.

```bash
npm run watch
```

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

### Responsive Design Pattern

Source: https://github.com/frenic/csstype/blob/master/_autodocs/usage-guide.md

Implement responsive styles for different screen sizes using media queries.

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

interface ResponsiveValue<T> {
  mobile: T;
  tablet: T;
  desktop: T;
}

function getResponsiveStyle<T extends CSS.Properties>(
  values: ResponsiveValue<Partial<CSS.Properties>>
): Record<string, Partial<CSS.Properties>> {
  return {
    '@media (max-width: 768px)': values.mobile,
    '@media (min-width: 769px) and (max-width: 1024px)': values.tablet,
    '@media (min-width: 1025px)': values.desktop,
  };
}

// Usage
const styles = getResponsiveStyle({
  mobile: { fontSize: '14px', padding: '8px' },
  tablet: { fontSize: '16px', padding: '12px' },
  desktop: { fontSize: '18px', padding: '16px' },
});
```

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

### Build Command

Source: https://github.com/frenic/csstype/blob/master/README.md

Generates typings and type checks them. Run this command to ensure code integrity.

```bash
npm run build
```

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

### React Component with Styles

Source: https://github.com/frenic/csstype/blob/master/_autodocs/README.md

Demonstrates how to use CSS.Properties for styling a React functional component.

```typescript
const Button: React.FC<{ style?: CSS.Properties }> = (props) => (
  <button style={props.style}>Click</button>
);
```

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

### Basic Properties Typing

Source: https://github.com/frenic/csstype/blob/master/_autodocs/api-reference-overview.md

Demonstrates how to use the `CSS.Properties` interface for basic CSS property typing. Ensure you import the `csstype` library.

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

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

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

### Pseudo-Selectors: All and Simple

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Access CSS.Pseudos for all pseudo-classes and pseudo-elements, and CSS.SimplePseudos for single-value selectors like :hover or :before.

```typescript
// All pseudo-classes and pseudo-elements
CSS.Pseudos

// Single-value pseudo-selectors
CSS.SimplePseudos
// Examples: :hover, :active, :focus, :before, :after;
```

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

### Background Position Type

Source: https://github.com/frenic/csstype/blob/master/_autodocs/property-namespace.md

Defines the type for the CSS `background-position` property, specifying the starting position of a background image.

```typescript
type BackgroundPosition<TLength = string | 0> = 
  | Globals
  | DataType.BgPosition<TLength>
  | (string & {})
```

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

### Create a Typed CSS Spacing System

Source: https://github.com/frenic/csstype/blob/master/_autodocs/usage-guide.md

Implement a strongly typed spacing system using CSSType for consistent padding and margin values.

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

interface Spacing {
  xs: CSS.Property.Padding<string>;
  sm: CSS.Property.Padding<string>;
  md: CSS.Property.Padding<string>;
  lg: CSS.Property.Padding<string>;
  xl: CSS.Property.Padding<string>;
}

const spacing: Spacing = {
  xs: '4px',
  sm: '8px',
  md: '16px',
  lg: '24px',
  xl: '32px',
};

const cardStyle: CSS.Properties = {
  padding: spacing.md,
  margin: spacing.sm,
};

```

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

### Custom Length Type in TypeScript

Source: https://github.com/frenic/csstype/blob/master/README.md

Example of specifying a custom type for length in CSS.Properties, allowing string or number values.

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

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

### Creating Shadow System

Source: https://github.com/frenic/csstype/blob/master/_autodocs/usage-guide.md

Define and use type-safe shadow properties for consistent styling.

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

interface Shadow {
  small: CSS.Property.BoxShadow;
  medium: CSS.Property.BoxShadow;
  large: CSS.Property.BoxShadow;
}

const shadows: Shadow = {
  small: '0 1px 3px rgba(0,0,0,0.1)',
  medium: '0 4px 6px rgba(0,0,0,0.1)',
  large: '0 10px 25px rgba(0,0,0,0.1)',
};

const elevatedStyle: CSS.Properties = {
  boxShadow: shadows.large,
};
```

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

### Styled Components with Styles

Source: https://github.com/frenic/csstype/blob/master/_autodocs/README.md

Shows how to apply styles defined by CSS.Properties to a styled-component in React.

```typescript
const StyledDiv = styled.div<{ style?: CSS.Properties }>`
  ${(props) => props.style}
`;
```

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

### Type Responsive Styles

Source: https://github.com/frenic/csstype/blob/master/_autodocs/usage-guide.md

Define an interface for responsive styles with base, tablet, and desktop variations using CSS.Properties.

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

interface ResponsiveStyle {
  base: CSS.Properties;
  tablet: CSS.Properties;
  desktop: CSS.Properties;
}

const responsiveStyle: ResponsiveStyle = {
  base: {
    fontSize: '14px',
    width: '100%',
  },
  tablet: {
    fontSize: '16px',
    width: '80%',
  },
  desktop: {
    fontSize: '18px',
    width: '60%',
  },
};
```

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

### Custom Time Type in TypeScript

Source: https://github.com/frenic/csstype/blob/master/README.md

Example of specifying custom types for length and time in CSS.Properties, allowing numeric values for time.

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

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

### Test Command

Source: https://github.com/frenic/csstype/blob/master/README.md

Executes the test suite. Ensure all tests pass before committing changes.

```bash
npm run test
```

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

### Import csstype Namespace (Flow)

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Import the entire csstype namespace in Flow for type checking CSS properties.

```flow
// Flow - import the entire namespace  
import * as CSS from 'csstype';
```

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

### Basic CSS Properties

Source: https://github.com/frenic/csstype/blob/master/README.md

Use `CSS.Properties` for standard CSS properties. Ensure correct type imports.

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

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

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

### SelfPosition Type Definition

Source: https://github.com/frenic/csstype/blob/master/_autodocs/data-types.md

Defines self-alignment for flex or grid items, including various start, end, and center positions. Used by Property.AlignSelf and Property.JustifySelf.

```typescript
type SelfPosition =
  | "center"
  | "end"
  | "flex-end"
  | "flex-start"
  | "self-end"
  | "self-start"
  | "start"
```

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

### Parameterized Properties for Platform Support

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

Demonstrates how generic type parameters allow customization of length and time types for different platforms like web, React Native, or custom environments.

```typescript
Properties<
  TLength = (string & {}) | 0,  // Default: string | 0
  TTime = string & {}             // Default: string
>
```

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

### Accessing CSS Global Keywords

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Lists the predefined CSS-wide keywords like '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', and 'unset'.

```typescript
// CSS-wide keywords
CSS.Globals
// Result: "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset"
```

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

### ContentPosition Type Definition

Source: https://github.com/frenic/csstype/blob/master/_autodocs/data-types.md

Defines alignment for content within a container, using keywords like 'center', 'start', 'end', 'flex-start', and 'flex-end'. Used by Property.AlignContent and Property.JustifyContent.

```typescript
type ContentPosition =
  | "center"
  | "end"
  | "flex-end"
  | "flex-start"
  | "start"
```

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

### Vendor Properties with CamelCase Naming

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

Shows how vendor-prefixed properties are exposed using camelCase naming conventions.

```typescript
const style: CSS.VendorProperties = {
  WebkitTransform: 'rotate(45deg)',  // -webkit-transform
  MozUserSelect: 'none',              // -moz-user-select
};
```

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

### csstype Generic Parameters

Source: https://github.com/frenic/csstype/blob/master/_autodocs/INDEX.md

Explains the generic parameters `TLength` and `TTime` for `CSS.Properties`, showing how to customize length and time value types. Default values for these generics are also provided.

```typescript
// Default - web standard
CSS.Properties

// Custom length (for React Native, etc.)
CSS.Properties<string | number>

// Custom time (for millisecond-based animations)
CSS.Properties<string, string | number>

// Both custom
CSS.Properties<CustomLength, CustomTime>

**Default values**:
- `TLength` = `(string & {}) | 0` - Strings with units or zero
- `TTime` = `string & {}` - Time values as strings

```

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

### Type Narrowing for CSS Properties

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Demonstrates how to check if a value matches a specific property type (e.g., CSS.Property.Display) or to find properties that accept a certain type (e.g., color).

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

// Check if a value matches a property type
type MyDisplayValue = CSS.Property.Display;
// This will show what values are valid for display

// Check what properties take a color
type PropertiesWithColor = {
  [K in keyof CSS.Properties]: CSS.Properties[K] extends CSS.Property.Color | undefined
    ? K
    : never;
}[keyof CSS.Properties];
```

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

### Type All CSS Properties

Source: https://github.com/frenic/csstype/blob/master/_autodocs/INDEX.md

Use `CSS.Properties` to type all standard CSS properties. This is useful for general styling of HTML elements.

```typescript
CSS.Properties
```

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

### Basic CSS Properties

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Defines basic CSS properties like width, height, background color, and text color.

```typescript
const style: CSS.Properties = {
  width: '100px',
  height: '100px',
  backgroundColor: 'blue',
  color: 'white',
};
```

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

### ViewTransition Navigation Values

Source: https://github.com/frenic/csstype/blob/master/_autodocs/at-rules.md

Explains the possible values for the 'navigation' descriptor in the CSS @view-transition rule.

```plaintext
Value | Behavior
|--------|----------|
| `"auto"` | Enable for all navigations |
| `"none"` | Disable transitions |

```

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

### Applying Styles to HTMLElement

Source: https://github.com/frenic/csstype/blob/master/README.md

Demonstrates how to assign typed CSS properties to an `HTMLElement`'s style object 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);
```

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

### Type Utilities: CSS-wide Keywords

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Access the CSS.Globals type which includes all CSS-wide keywords like 'inherit', 'initial', 'unset', 'revert', and 'revert-layer'.

```typescript
// CSS-wide keywords
CSS.Globals  // "inherit" | "initial" | "unset" | "revert" | "revert-layer";
```

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

### csstype Pseudo-Selectors

Source: https://github.com/frenic/csstype/blob/master/_autodocs/INDEX.md

Shows the different types of pseudo-selectors available in csstype, categorized into simple, advanced, and a combined type.

```typescript
CSS.SimplePseudos           // :hover, :focus, :before, etc.
CSS.AdvancedPseudos         // :not(), :is(), :has(), etc.
CSS.Pseudos                 // Both simple and advanced

```

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

### Create Flexbox and Absolute Centering Utilities

Source: https://github.com/frenic/csstype/blob/master/_autodocs/usage-guide.md

Define reusable functions to generate CSS properties for centering elements. These functions return objects conforming to CSS.Properties.

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

function flexCenter(): CSS.Properties {
  return {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  };
}

function absoluteCenter(): CSS.Properties {
  return {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  };
}

// Usage
const style1: CSS.Properties = flexCenter();
const style2: CSS.Properties = absoluteCenter();
```

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

### Styling Pseudo-Selectors

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Applies styles to pseudo-selectors like ':hover' and ':focus'. The keys are of type CSS.SimplePseudos.

```typescript
const pseudos: { [P in CSS.SimplePseudos]?: CSS.Properties } = {
  ':hover': { backgroundColor: 'blue' },
  ':focus': { outlineColor: 'red' },
};
```

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

### Namespace: DataType

Source: https://github.com/frenic/csstype/blob/master/_autodocs/api-reference-overview.md

Contains type definitions for various CSS value types, which are referenced by the `Property.*` types to ensure correct value assignments.

```APIDOC
## Namespace: DataType

### Description
Type definitions for CSS value types.

### Common DataTypes
- `DataType.Color`: Color values.
- `DataType.ContentDistribution`: Content distribution values.
- `DataType.BlendMode`: Blend mode values.
- `DataType.FontWeightAbsolute`: Font weight values.
- `DataType.PageSize`: Page size values.
```

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

### Namespace: AtRule

Source: https://github.com/frenic/csstype/blob/master/_autodocs/api-reference-overview.md

Defines interfaces for CSS at-rule descriptors, covering common at-rules like `@font-face`, `@counter-style`, and `@page`, with variations for different property casing and fallback support.

```APIDOC
## Namespace: AtRule

### Description
Interfaces for CSS at-rule descriptors.

### Interfaces
- `AtRule.FontFace<TLength, TTime>`: Descriptor properties for `@font-face`.
- `AtRule.CounterStyle<TLength, TTime>`: Descriptor properties for `@counter-style`.
- `AtRule.Page<TLength, TTime>`: Descriptor properties for `@page`.
- `AtRule.ViewTransition<TLength, TTime>`: Descriptor properties for `@view-transition`.
- `AtRule.FontPaletteValues<TLength, TTime>`: Descriptor properties for `@font-palette-values`.
```

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

### AtRule.CounterStyle

Source: https://github.com/frenic/csstype/blob/master/_autodocs/types.md

Descriptors for @counter-style rules, defining custom counter styles with options for symbols, range, and speaking behavior.

```APIDOC
## AtRule.CounterStyle

### Description
Descriptors for `@counter-style` rules. Defines custom counter styles.

### Interface
```typescript
export type CounterStyle<TLength = (string & {}) | 0, TTime = string & {}> = {
  additiveSymbols?: string | undefined;
  fallback?: string | undefined;
  negative?: string | undefined;
  pad?: string | undefined;
  prefix?: string | undefined;
  range?: Range | undefined;
  speakAs?: SpeakAs | undefined;
  suffix?: string | undefined;
  symbols?: string | undefined;
  system?: System | undefined;
};
```

### Descriptors
#### Path Parameters
- **system** ("cyclic" | "numeric" | "alphabetic" | "symbolic" | "additive" | "fixed") - Optional - Counter system
- **symbols** (string) - Optional - Symbols used in counter
- **additiveSymbols** (string) - Optional - Additional symbols
- **negative** (string) - Optional - Negative representation
- **prefix** (string) - Optional - Prefix before counter
- **suffix** (string) - Optional - Suffix after counter
- **range** ("auto" | string) - Optional - Valid range for counter
- **pad** (string) - Optional - Padding specification
- **fallback** (string) - Optional - Fallback counter style
- **speakAs** ("auto" | "bullets" | "numbers" | "words" | "spell-out") - Optional - How to speak counter
```

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

### Properties Typing with Custom Length Type

Source: https://github.com/frenic/csstype/blob/master/_autodocs/api-reference-overview.md

Shows how to use `CSS.Properties` with a custom type for length values, allowing numeric inputs without units. Import the `csstype` library.

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

const style: CSS.Properties<string | number> = {
  width: 100,  // numeric without unit
  padding: '10px',
};
```

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

### Global Values

Source: https://github.com/frenic/csstype/blob/master/_autodocs/api-reference-overview.md

Defines the standard global CSS keyword values that can be applied to properties.

```APIDOC
## Global Values

### Description
Standard global CSS keyword values.

### Values
- `Globals`: `"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset"`.
```

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

### CSS Properties with Kebab-Cased Properties

Source: https://github.com/frenic/csstype/blob/master/_autodocs/api-reference-overview.md

Extend `CSS.Properties` with `CSS.PropertiesHyphen` to use kebab-cased property names in your style objects.

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

interface MyStyle extends CSS.Properties, CSS.PropertiesHyphen {}

const style: MyStyle = {
  'flex-grow': 1,
  'flex-shrink': 0,
  backgroundColor: 'white',
};
```

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

### Type Simple CSS Objects

Source: https://github.com/frenic/csstype/blob/master/_autodocs/usage-guide.md

Define a style object with basic CSS properties using CSS.Properties.

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

const style: CSS.Properties = {
  width: '100px',
  height: '100px',
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px',
};
```

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

### CSS Properties with Numeric Lengths

Source: https://github.com/frenic/csstype/blob/master/_autodocs/INDEX.md

Shows how to use `CSS.Properties` with a generic parameter to allow numeric values for lengths, often used in environments like React Native. Custom time values can also be specified.

```typescript
// Numeric lengths (for React Native, etc.)
const style: CSS.Properties<string | number> = {
  width: 100,
  padding: '10px',
};

// Custom time values
const animation: CSS.Properties<string, string | number> = {
  transitionDuration: 300,
};
```

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

### Vendor Properties with Hyphen Variants

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

Demonstrates the use of hyphenated variants for vendor-prefixed properties.

```typescript
const style: CSS.VendorPropertiesHyphen = {
  '-webkit-transform': 'rotate(45deg)',
  '-moz-user-select': 'none',
};
```

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

### CSS Type Generation Pipeline

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

Outlines the steps involved in generating the TypeScript and Flow type definitions from MDN CSS data, including parsing, type resolution, and formatting.

```text
MDN CSS Data
    ↓
  Parse → Extract properties, values, compatibility
    ↓
  Type → Build type hierarchy, resolve generics
    ↓
  Generate → Output TypeScript (.d.ts) + Flow (.js.flow)
    ↓
  Format → Prettier formatting
    ↓
  Test → Verify type correctness
```

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

### CSS At-Rule Names

Source: https://github.com/frenic/csstype/blob/master/_autodocs/types.md

A string literal union of all valid CSS at-rule names. Includes common rules like @charset, @import, @media, and @viewport.

```typescript
export type AtRules = 
  | "@charset"
  | "@counter-style"
  | "@document"
  | "@font-face"
  | "@font-feature-values"
  | "@import"
  | "@keyframes"
  | "@layer"
  | "@media"
  | "@namespace"
  | "@page"
  | "@supports"
  | "@viewport"
  | (string & {})
```

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

### Grid Auto-Flow Algorithm

Source: https://github.com/frenic/csstype/blob/master/_autodocs/data-types.md

Defines the possible values for the CSS Grid auto-placement algorithm.

```typescript
type GridAutoFlow = "column" | "dense" | "row" | (string & {})
```

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

### Type Pseudo-Selector Objects

Source: https://github.com/frenic/csstype/blob/master/_autodocs/usage-guide.md

Define an interface for pseudo-selector styles using CSS.SimplePseudos and CSS.Properties.

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

interface PseudoStyles {
  [P in CSS.SimplePseudos]?: CSS.Properties;
}

const pseudos: PseudoStyles = {
  ':hover': {
    backgroundColor: 'blue',
  },
  ':active': {
    opacity: 0.8,
  },
  ':focus': {
    outlineColor: 'red',
  },
};
```

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

### Optional Properties in CSS Interfaces

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

Demonstrates that all properties in CSS interfaces are optional (`?`), mirroring CSS semantics where only necessary properties are explicitly set.

```typescript
interface Properties {
  width?: ...;
  color?: ...;
  // ...
}

// Type-safe - empty object is valid
const style: CSS.Properties = {};

// Valid - only set what you need
const style: CSS.Properties = { color: 'red' };
```

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

### Constants

Source: https://github.com/frenic/csstype/blob/master/_autodocs/api-reference-overview.md

A constant providing a string literal union of all valid CSS at-rule names.

```APIDOC
## Constants

### Description
Constants related to CSS syntax.

### Constant
- `AtRules`: String literal union of all valid CSS at-rule names.
```

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

### MDN Compatibility Comments in JSDoc

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

Shows how MDN compatibility data, including syntax, initial value, and browser support, is embedded within JSDoc comments for CSS properties.

```typescript
/**
 * **Syntax**: `none | <filter-value-list>`
 *
 * **Initial value**: `none`
 *
 * | Chrome | Firefox | Safari | Edge | IE |
 * | :----: | :-----: | :----: | :--: | :- |
 * | **76** | **103** | **18** | **79** | No |
 *
 * @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/backdrop-filter
 */
backdropFilter?: Property.BackdropFilter | undefined;
```

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

### Namespace: Property

Source: https://github.com/frenic/csstype/blob/master/_autodocs/api-reference-overview.md

Provides type aliases for individual CSS properties, offering a union of valid values for each specific property.

```APIDOC
## Namespace: Property

### Description
Type aliases for individual CSS properties.

### Example Properties
- `Property.Color`: Type for color values.
- `Property.Width<TLength>`: Type for the width property.
- `Property.Display`: Type for the display property.
```

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

### Import csstype Namespace (TypeScript)

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Import the entire csstype namespace in TypeScript for type checking CSS properties.

```typescript
// TypeScript - import the entire namespace
import type * as CSS from 'csstype';
```

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

### Pseudo-Selector Types

Source: https://github.com/frenic/csstype/blob/master/_autodocs/api-reference-overview.md

Provides types for pseudo-classes and pseudo-elements, distinguishing between simple selectors like `:hover` and advanced selectors such as `:not()` and `:is()`.

```APIDOC
## Pseudo-Selector Types

### Description
Types for CSS pseudo-selectors.

### Types
- `Pseudos`: Union of all pseudo-class and pseudo-element selectors.
- `SimplePseudos`: String literal union for single-value pseudos (e.g., `:hover`).
- `AdvancedPseudos`: String literal union for function-like pseudos (e.g., `:not(selector)`).
```

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

### Common Background Property Types

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Use types for background properties including background-color, background-image, background-size, and background-position.

```typescript
CSS.Property.BackgroundColor
CSS.Property.BackgroundImage
CSS.Property.BackgroundSize<TLength>
CSS.Property.BackgroundPosition<TLength>;
```

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

### Common Display & Layout Property Types

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Access types for display and layout properties such as display, position, flex-direction, justify-content, and align-items.

```typescript
CSS.Property.Display            // flex, grid, block, etc.
CSS.Property.Position           // absolute, fixed, relative, etc.
CSS.Property.FlexDirection      // row, column, etc.
CSS.Property.JustifyContent     // space-between, center, etc.
CSS.Property.AlignItems         // center, stretch, etc.;
```

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

### Type CSS Pseudo-styles

Source: https://github.com/frenic/csstype/blob/master/_autodocs/INDEX.md

Define styles for pseudo-classes or pseudo-elements using `CSS.SimplePseudos`. This allows typing selectors like `:hover` or `::before`.

```typescript
{ [P in CSS.SimplePseudos]?: CSS.Properties }
```

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

### Generic Parameter Defaults in Properties Interface

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

Illustrates the use of default generic parameters in the Properties interface, defaulting to string | 0 for TLength and string for TTime, reflecting CSS standards.

```typescript
interface Properties<
  TLength = (string & {}) | 0,
  TTime = string & {}
> { ... }
```

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

### Pseudo Selectors and Elements

Source: https://github.com/frenic/csstype/blob/master/README.md

Supports string literals for pseudo selectors and elements, allowing typed styling for states like ':hover'.

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

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

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

### Lazy Command

Source: https://github.com/frenic/csstype/blob/master/README.md

Type checks, lints, and formats all code. This command ensures code quality and consistency.

```bash
npm run lazy
```

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

### TransitionDelay Type Definition

Source: https://github.com/frenic/csstype/blob/master/_autodocs/property-namespace.md

Defines the possible values for the TransitionDelay CSS property.

```typescript
type TransitionDelay<TTime = string> = Globals | TTime | (string & {})
```

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

### Fallback Arrays for CSS-in-JS

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

Illustrates how arrays can be used for fallback values in CSS-in-JS libraries, allowing for progressive enhancement.

```typescript
const style: CSS.PropertiesFallback = {
  display: ['-webkit-flex', 'flex'],          // Try webkit first, then standard
  backgroundColor: ['rgba(0,0,255,0.5)', 'blue'],  // Fallback for older browsers
};
```

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

### Accessing All CSS At-Rule Names

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Provides the type definition for all valid CSS at-rule names, such as '@charset', '@font-face', etc.

```typescript
// All CSS at-rule names
CSS.AtRules
```

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

### Pseudo-Selectors: Function-like

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Use CSS.AdvancedPseudos for function-like pseudo-selectors such as :not(), :is(), :has(), and :nth-child().

```typescript
// Function-like pseudo-selectors
CSS.AdvancedPseudos
// Examples: :not(), :is(), :has(), :nth-child();
```

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

### Generic Parameters for Properties

Source: https://github.com/frenic/csstype/blob/master/_autodocs/api-reference-overview.md

Defines the generic parameters `TLength` and `TTime` used by the Properties interfaces, specifying their default types and usage for length and time values.

```APIDOC
## Generic Parameters

### Description
Configures the types for length and time values within CSS properties.

### Parameters
- `TLength`: Type for length values. Default is `(string & {}) | 0`. Use `string | number` for platforms accepting numeric lengths.
- `TTime`: Type for time values. Default is `string & {}`. Use `string | number` for platforms accepting numeric time.
```

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

### VendorProperties Interface

Source: https://github.com/frenic/csstype/blob/master/_autodocs/types.md

Defines vendor-prefixed CSS properties. It extends VendorLonghandProperties and VendorShorthandProperties. Use PropertiesHyphen for kebab-cased names.

```typescript
export interface VendorProperties<TLength = (string & {}) | 0, TTime = string & {}> extends
  VendorLonghandProperties<TLength, TTime>,
  VendorShorthandProperties<TLength, TTime> {}
```

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

### Transition Type Definition

Source: https://github.com/frenic/csstype/blob/master/_autodocs/property-namespace.md

Defines the possible values for the Transition CSS property.

```typescript
type Transition<TTime = string> =
  | Globals
  | DataType.TransitionProperty
  | TTime
  | DataType.TimingFunction
  | (string & {})
```

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

### Typing Pseudo-Selector Styles

Source: https://github.com/frenic/csstype/blob/master/_autodocs/api-reference-overview.md

Define styles for pseudo-selectors like `:hover` and `:active` using a mapped type with `CSS.SimplePseudos`.

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

const pseudos: { [P in CSS.SimplePseudos]?: CSS.Properties } = {
  ':hover': {
    backgroundColor: 'blue',
  },
  ':active': {
    opacity: 0.8,
  },
};
```

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

### AtRule.ViewTransition

Source: https://github.com/frenic/csstype/blob/master/_autodocs/at-rules.md

Defines the CSS @view-transition rule, used for creating view transition animations. It allows controlling navigation transitions and specifying transition types.

```APIDOC
## ViewTransition

CSS `@view-transition` rule for view transition animations.

### AtRule.ViewTransition<TLength, TTime>

```typescript
export interface ViewTransition<TLength = (string & {}) | 0, TTime = string & {}> {
  navigation?: Navigation | undefined;
  types?: Types | undefined;
}
```

### Descriptors

| Descriptor | Type | Required | Description |
|-----------|------|----------|-------------|
| `navigation` | `"auto" \| "none"` | No | Enable view transitions for navigation |
| `types` | `"none" \| string` | No | Transition type classes |

### Navigation values

| Value | Behavior |
|-------|----------|
| `"auto"` | Enable for all navigations |
| `"none"` | Disable transitions |

### Example usage

```typescript
const transition: CSS.AtRule.ViewTransition = {
  navigation: 'auto',
  types: 'slide, fade',
};
```

### Variants
- Hyphen variant: `AtRule.ViewTransitionHyphen`
- Fallback variants: `AtRule.ViewTransitionFallback`, `AtRule.ViewTransitionHyphenFallback`
```

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

### AtRule.Page

Source: https://github.com/frenic/csstype/blob/master/_autodocs/types.md

Descriptors for @page rules, controlling page layout aspects like size, bleed, and orientation.

```APIDOC
## AtRule.Page

### Description
Descriptors for `@page` rules. Controls page layout aspects.

### Interface
```typescript
export interface Page<TLength = (string & {}) | 0, TTime = string & {}> {
  bleed?: Bleed<TLength> | undefined;
  marks?: Marks | undefined;
  pageOrientation?: PageOrientation | undefined;
  size?: Size<TLength> | undefined;
}
```

### Descriptors
#### Path Parameters
- **size** (DataType.PageSize | TLength | "auto" | "landscape" | "portrait") - Optional - Page size
- **bleed** (TLength | "auto") - Optional - Bleed area size
- **marks** ("crop" | "cross" | "none") - Optional - Crop/cross marks
- **pageOrientation** ("upright" | "rotate-left" | "rotate-right") - Optional - Page orientation
```

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

### Typed StyleSheet Object for React Components

Source: https://github.com/frenic/csstype/blob/master/_autodocs/usage-guide.md

Create a typed stylesheet object using CSSType for React components, defining styles for various elements.

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

interface StyleSheet {
  container: CSS.Properties;
  button: CSS.Properties;
  input: CSS.Properties;
  [key: string]: CSS.Properties;
}

const styles: StyleSheet = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    gap: '16px',
  },
  button: {
    backgroundColor: '#007bff',
    color: 'white',
    padding: '8px 16px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
  },
  input: {
    padding: '8px',
    border: '1px solid #ccc',
    borderRadius: '4px',
  },
};

const Form: React.FC = () => (
  <div style={styles.container}>
    <input type="text" style={styles.input} />
    <button style={styles.button}>Submit</button>
  </div>
);

```

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

### csstype Package Exports

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

This JSON snippet shows the package exports for csstype, highlighting that it only provides TypeScript definitions ('types') and has no JavaScript runtime code ('main': '').

```json
{
  "types": "index.d.ts",       // TypeScript definitions
  "main": "",                   // No JavaScript
  "exports": { "types": ... }  // No runtime exports
}
```

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

### csstype Namespaces

Source: https://github.com/frenic/csstype/blob/master/_autodocs/INDEX.md

Details the namespaces provided by csstype for accessing individual property type aliases, @-rule descriptors, and CSS value types.

```typescript
CSS.Property.*              // Individual property type aliases (300+)
CSS.AtRule.*                // @-rule descriptor interfaces
CSS.DataType.*              // CSS value types

```

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

### csstype Module Exports

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Exports include property interfaces, type utilities for property values and fallbacks, and type unions for pseudos, at-rules, attributes, and globals. Namespaces for properties, at-rules, and data types are also exported.

```typescript
// Property interfaces (4 variants each)
export interface Properties { ... }
export interface StandardProperties { ... }
export interface VendorProperties { ... }
export interface ObsoleteProperties { ... }
export interface SvgProperties { ... }

// Type utilities
export type PropertyValue<T> = ...
export type Fallback<T> = ...

// Value type unions
export type Pseudos = ...
export type SimplePseudos = ...
export type AdvancedPseudos = ...
export type AtRules = ...
export type HtmlAttributes = ...
export type SvgAttributes = ...
export type Globals = ...

// Namespaces
export namespace Property { ... }  // 300+ property type aliases
export namespace AtRule { ... }    // @-rule descriptor interfaces
export namespace DataType { ... }  // CSS value types
```

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

### Union for Combining Value Alternatives

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

Explains the use of type unions to represent alternative valid values for a single CSS property, such as different types of `Display` values.

```typescript
type Display = DisplayOutside | DisplayInside | DisplayLegacy | ...
```

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

### Type Styles for Emotion

Source: https://github.com/frenic/csstype/blob/master/_autodocs/usage-guide.md

Use CSS.Properties to define styles for Emotion's css function.

```typescript
import { css } from '@emotion/react';
import type * as CSS from 'csstype';

const buttonStyles: CSS.Properties = {
  backgroundColor: '#007bff',
  color: 'white',
  padding: '8px 16px',
  border: 'none',
  borderRadius: '4px',
};

const button = css(buttonStyles);
```

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

### Viewport At-Rule Descriptors

Source: https://github.com/frenic/csstype/blob/master/_autodocs/types.md

Defines the descriptors for the @viewport at-rule, largely superseded by meta viewport.

```typescript
export interface Viewport<TLength = (string & {}) | 0, TTime = string & {}> {
  height?: TLength | "device-height" | undefined;
  maxHeight?: TLength | "device-height" | undefined;
  maxWidth?: TLength | "device-width" | undefined;
  maxZoom?: number | "auto" | undefined;
  minHeight?: TLength | "device-height" | undefined;
  minWidth?: TLength | "device-width" | undefined;
  minZoom?: number | "auto" | undefined;
  orientation?: "auto" | "landscape" | "portrait" | undefined;
  userZoom?: "fixed" | "zoom" | undefined;
  width?: TLength | "device-width" | undefined;
  zoom?: number | "auto" | undefined;
}
```

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

### At-Rule Descriptors Interfaces

Source: https://github.com/frenic/csstype/blob/master/_autodocs/architecture-and-concepts.md

Shows how distinct interfaces are defined for the descriptors of CSS at-rules like @font-face and @counter-style, isolating their specific properties.

```typescript
interface FontFace {
  fontFamily?: string;
  src?: string;
  fontWeight?: DataType.FontWeightAbsolute;
  ...
}

interface CounterStyle {
  system?: System;
  symbols?: string;
  ...
}
```

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

### Augment CSS Properties with Custom Properties

Source: https://github.com/frenic/csstype/blob/master/_autodocs/README.md

This snippet demonstrates how to augment the CSS properties interface to include custom properties like '--my-color'. It's useful for extending the library's type definitions.

```typescript
declare module 'csstype' {
  interface Properties {
    '--my-color'?: CSS.Property.Color;
  }
}
```

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

### Main Property Types

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Access different categories of CSS properties including standard, vendor-prefixed, obsolete, and SVG properties.

```typescript
// All properties (standard + vendor + obsolete + svg)
CSS.Properties<TLength?, TTime?>

// Standard properties only
CSS.StandardProperties<TLength?, TTime?>

// Vendor-prefixed properties
CSS.VendorProperties<TLength?, TTime?>

// Deprecated/removed properties
CSS.ObsoleteProperties<TLength?, TTime?>

// SVG properties
CSS.SvgProperties<TLength?, TTime?>;
```

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

### csstype Module Exports - Type Utilities and Property Interfaces

Source: https://github.com/frenic/csstype/blob/master/_autodocs/INDEX.md

Lists top-level exports from csstype related to type utilities like `PropertyValue` and `Fallback`, and the various property interface variants including `Properties`, `StandardProperties`, and their hyphen/fallback counterparts.

```typescript
// Type utilities
export type PropertyValue<T>      // Unpack literal unions
export type Fallback<T>           // Allow array fallbacks

// Property interfaces (4 variants each for all categories)
export interface Properties
export interface StandardProperties
export interface VendorProperties
export interface ObsoleteProperties
export interface SvgProperties
// ... and all Hyphen, Fallback, HyphenFallback variants

```

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

### AtRule.Page Interface

Source: https://github.com/frenic/csstype/blob/master/_autodocs/types.md

Defines the descriptors for the CSS `@page` at-rule. Use this interface to control page size, bleed, marks, and orientation for print stylesheets.

```typescript
export interface Page<TLength = (string & {}) | 0, TTime = string & {}> {
  bleed?: Bleed<TLength> | undefined;
  marks?: Marks | undefined;
  pageOrientation?: PageOrientation | undefined;
  size?: Size<TLength> | undefined;
}
```

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

### Background Shorthand Type

Source: https://github.com/frenic/csstype/blob/master/_autodocs/property-namespace.md

Defines the type for the CSS `background` shorthand property.

```typescript
type Background<TLength = string | 0> = 
  | Globals
  | TLength
  | DataType.BgLayer<TLength>
  | (string & {})
```

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

### Common Transforms & Transitions Property Types

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Access types for transform and transition properties like transform, transform-origin, transition, transition-duration, and transition-delay.

```typescript
CSS.Property.Transform<TLength>
CSS.Property.TransformOrigin<TLength>
CSS.Property.Transition<TTime>
CSS.Property.TransitionDuration<TTime>
CSS.Property.TransitionDelay<TTime>;
```

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

### Type Utilities: Allow Array Fallback Values

Source: https://github.com/frenic/csstype/blob/master/_autodocs/quick-reference.md

Use CSS.Fallback to enable the use of array fallback values for CSS properties.

```typescript
// Allow array fallback values
CSS.Fallback<T>;
```