Msotype NPM | npm.io

MSOType

TypeScript definitions for MSO (Microsoft Office), including definitions for the mso- CSS vendor prefix. Autocompletion and type checking for all known MSO properties and values are provided.

Install with yarn:

yarn add msotype

Or install with npm:

npm install msotype

Properties

All properties are categorized in different uses and come in two technical variations—JavaScript case (camel) and CSS kebab (case)—to provide typings that suits different needs.

Variations:

Default - Property names in JavaScript (camel) case
Hyphen - Property names in CSS (kebab) case

Alternative & Standard Types

All of the following interfaces accept an optional, generic argument, to define the <length> value. It defaults to string | 0. You can specify this when using libraries that accepts any numeric value as length which is common in CSS-in-JS libraries like EmotionJS.

	Default	Hyphen
All	`Properties`	`PropertiesHyphen`
Alternative	`AlternativeProperties`	`AlternativePropertiesHyphen`
Standard	`StandardProperties`	`StandardPropertiesHyphen`

Categories:

All - Includes Alternative and Standard
Alternative - Properties that end with an -alt postfix that are direct alternatives to a standard CSS property
Standard - Properties that correspond to a Microsoft Office feature. While these do not have a CSS equivalent, they may or may not have an effect on Microsoft Outlook

Font Types

Interfaces with descriptors for different MSO font types.

	Default	Hyphen
All	`FontProperties`	`FontPropertiesHyphen`
`Ansi`	`AnsiProperties`	`AnsiPropertiesHyphen`
`Ascii`	`AsciiProperties`	`AsciiropertiesHyphen`
`Bidi`	`BidiProperties`	`BidiPropertiesHyphen`
`Fareast`	`FareastProperties`	`FareastPropertiesHyphen`
`Panose`	`PanoseProperties`	`PanosePropertiesHyphen`

Categories:

All - Includes Ansi, Ascii, Bidi, Fareast, and Panose
Ansi - Ansi specific font properties
Ascii - Ascii specific font properties
Bidi - Bidi specific font properties
Fareast - Fareast specific font properties
Panose - Panose specific font properties

Using Default Variation

JavaScript cased (camel) properties are provided in Mso.Properties and Mso.FontProperties.

import * as Mso from 'msotype';

const styles: Mso.Properties = {
  msoFontAlt: 'Helvetica',
  msoLineHeightRule: 'exactly',
};

Using Hyphen Variation

Hyphen cased (kebab) properties are provided in Mso.PropertiesHyphen. These not not included by default in Mso.Properties. To allow both of them, you can simply extend with Mso.PropertiesHyphen.

import * as Mso from 'msotype';

interface Style extends Mso.Properties, Mso.PropertiesHyphen {}

const style: Style = {
  'mso-margin-alt': 0,
  msoPaddingAlt: 0,
};

This also works with Mso.FontPropertiesHyphen, which can be used to extend Mso.FontProperties.

import * as Mso from 'msotype';

interface Style extends Mso.FontProperties, Mso.FontPropertiesHyphen {}

const style: Style = {
  'mso-ansi-font-size': 'large',
  msoBidiFlag: 'on',
};

Overriding `<length>`

Length defaults to string | 0. But it's possible to override it using generics.

import * as Mso from 'msotype';

const style: Mso.Properties<string | number> = {
  msoMarginAlt: '0px',
  msoPaddingAlt: 0,
};

Type Check All CSS Properties

By default, only mso- CSS vendor prefixes are provided. If you want to type check all CSS properties, you can use msotype together with csstype. To do this, you can simply extend any csstype type with any msotype type.

import * as Css from 'csstype';
import * as Mso from 'msotype';

interface Styles extends Css.Properties, Mso.Properties {}

const styles: Styles = {
  msoFontAlt: 'Helvetica',
  msoLineHeightRule: 'exactly',
  lineHeight: 1.4,
};