@uifabric/merge-styles/dist/merge-styles.d.ts

Style loading utilities.

/**
 * Helper function whose role is supposed to express that regardless if T is a style object or style function,
 * it will always map to a style function.
 */
declare type __MapToFunctionType<T> = Extract<T, Function> extends never ? (...args: any[]) => Partial<T> : Extract<T, Function>;

/**
 * Combine a set of styles together (but does not register css classes).
 * @param styleSet - The first style set to be concatenated.
 */
export declare function concatStyleSets<TStyleSet>(styleSet: TStyleSet | false | null | undefined): IConcatenatedStyleSet<ObjectOnly<TStyleSet>>;

/**
 * Combine a set of styles together (but does not register css classes).
 * @param styleSet1 - The first style set to be concatenated.
 * @param styleSet2 - The second style set to be concatenated.
 */
export declare function concatStyleSets<TStyleSet1, TStyleSet2>(styleSet1: TStyleSet1 | false | null | undefined, styleSet2: TStyleSet2 | false | null | undefined): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2>>;

/**
 * Combine a set of styles together (but does not register css classes).
 * @param styleSet1 - The first style set to be concatenated.
 * @param styleSet2 - The second style set to be concatenated.
 * @param styleSet3 - The third style set to be concatenated.
 */
export declare function concatStyleSets<TStyleSet1, TStyleSet2, TStyleSet3>(styleSet1: TStyleSet1 | false | null | undefined, styleSet2: TStyleSet2 | false | null | undefined, styleSet3: TStyleSet3 | false | null | undefined): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3>>;

/**
 * Combine a set of styles together (but does not register css classes).
 * @param styleSet1 - The first style set to be concatenated.
 * @param styleSet2 - The second style set to be concatenated.
 * @param styleSet3 - The third style set to be concatenated.
 * @param styleSet4 - The fourth style set to be concatenated.
 */
export declare function concatStyleSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4>(styleSet1: TStyleSet1 | false | null | undefined, styleSet2: TStyleSet2 | false | null | undefined, styleSet3: TStyleSet3 | false | null | undefined, styleSet4: TStyleSet4 | false | null | undefined): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4>>;

/**
 * Combine a set of styles together (but does not register css classes).
 * @param styleSet1 - The first style set to be concatenated.
 * @param styleSet2 - The second style set to be concatenated.
 * @param styleSet3 - The third style set to be concatenated.
 * @param styleSet4 - The fourth style set to be concatenated.
 * @param styleSet5 - The fifth set to be concatenated.
 */
export declare function concatStyleSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4, TStyleSet5>(styleSet1: TStyleSet1 | false | null | undefined, styleSet2: TStyleSet2 | false | null | undefined, styleSet3: TStyleSet3 | false | null | undefined, styleSet4: TStyleSet4 | false | null | undefined, styleSet5: TStyleSet5 | false | null | undefined): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4> & ObjectOnly<TStyleSet5>>;

/**
 * Combine a set of styles together (but does not register css classes).
 * @param styleSet1 - The first style set to be concatenated.
 * @param styleSet2 - The second style set to be concatenated.
 * @param styleSet3 - The third style set to be concatenated.
 * @param styleSet4 - The fourth style set to be concatenated.
 * @param styleSet5 - The fifth set to be concatenated.
 * @param styleSet6 - The sixth set to be concatenated.
 */
export declare function concatStyleSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4, TStyleSet5, TStyleSet6>(styleSet1: TStyleSet1 | false | null | undefined, styleSet2: TStyleSet2 | false | null | undefined, styleSet3: TStyleSet3 | false | null | undefined, styleSet4: TStyleSet4 | false | null | undefined, styleSet5: TStyleSet5 | false | null | undefined, styleSet6: TStyleSet6 | false | null | undefined): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4> & ObjectOnly<TStyleSet5> & ObjectOnly<TStyleSet6>>;

/**
 * Combine a set of styles together (but does not register css classes).
 * @param styleSets - One or more stylesets to be merged (each param can also be falsy).
 */
export declare function concatStyleSets(...styleSets: (IStyleSet | false | null | undefined)[]): IConcatenatedStyleSet<any>;

/**
 * Concatenates style sets into one, but resolves functional sets using the given props.
 * @param styleProps - Props used to resolve functional sets.
 * @param allStyles - Style sets, which can be functions or objects.
 */
export declare function concatStyleSetsWithProps<TStyleProps, TStyleSet extends IStyleSet<TStyleSet>>(styleProps: TStyleProps, ...allStyles: (IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined)[]): DeepPartial<TStyleSet>;

/**
 * TypeScript type to return a deep partial object (each property can be undefined, recursively.)
 */
export declare type DeepPartial<T> = {
    [P in keyof T]?: T[P] extends (infer U)[] ? DeepPartial<U>[] : T[P] extends object ? DeepPartial<T[P]> : T[P];
};

declare type Diff<T extends keyof any, U extends keyof any> = ({
    [P in T]: P;
} & {
    [P in U]: never;
} & {
    [x: string]: never;
})[T];

/**
 * Registers a font face.
 * @public
 */
export declare function fontFace(font: IFontFace): void;

/**
 * A concatenated style set differs from `IStyleSet` in that subComponentStyles will always be a style function.
 */
export declare type IConcatenatedStyleSet<TStyleSet extends IStyleSet<TStyleSet>> = {
    [P in keyof Omit<TStyleSet, 'subComponentStyles'>]: IStyle;
} & {
    subComponentStyles?: {
        [P in keyof TStyleSet['subComponentStyles']]: IStyleFunction<any, any>;
    };
};

/**
 * CSP settings for the stylesheet
 */
export declare interface ICSPSettings {
    /**
     * Nonce to inject into script tag
     */
    nonce?: string;
}

declare type ICSSBaselinePositionRule = 'baseline' | 'last baseline' | 'first baseline';

declare type ICSSDisplayRule = 'block' | 'inline' | 'run-in' | 'flow' | 'flow-root' | 'table' | 'flex' | 'grid' | 'ruby' | 'block flow' | 'inline table' | 'flex run-in' | 'list-item' | 'list-item block' | 'list-item inline' | 'list-item flow' | 'list-item flow-root' | 'list-item block flow' | 'list-item block flow-root' | 'flow list-item block' | 'table-row-group' | 'table-header-group' | 'table-footer-group' | 'table-row' | 'table-cell' | 'table-column-group' | 'table-column' | 'table-caption' | 'ruby-base' | 'ruby-text' | 'ruby-base-container' | 'ruby-text-container' | 'contents' | 'none' | 'inline-block' | 'inline-table' | 'inline-flex' | 'inline-grid';

declare type ICSSOverflowAndSelfPositionRule = 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'flex-start' | 'flex-end' | 'safe center' | 'safe start' | 'safe end' | 'safe self-start' | 'safe self-end' | 'safe flex-start' | 'safe flex-end' | 'unsafe center' | 'unsafe start' | 'unsafe end' | 'unsafe self-start' | 'unsafe self-end' | 'unsafe flex-start' | 'unsafe flex-end';

declare type ICSSPercentageRule = string;

declare type ICSSPixelUnitRule = string | number;

export declare type ICSSRule = 'initial' | 'inherit' | 'unset';

/**
 * Font face definition.
 *
 * @public
 * {@docCategory IFontFace}
 */
export declare interface IFontFace extends IRawFontStyle {
    /**
     * Specifies the src of the font.
     */
    src?: string;
    /**
     * unicode-range allows you to set a specific range of characters to be downloaded
     * from a font (embedded using \@font-face) and made available for use on the current
     * page.
     */
    unicodeRange?: ICSSRule | string;
    /**
     * Determines how a font face is displayed based on whether and when it is downloaded
     * and ready to use.
     */
    fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
    /**
     * Feature settings for the font.
     */
    fontFeatureSettings?: string;
}

export declare type IFontWeight = ICSSRule | 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | 100 | '200' | 200 | '300' | 300 | '400' | 400 | '500' | 500 | '600' | 600 | '700' | 700 | '800' | 800 | '900' | 900;

/**
 * Keyframe definition.
 */
export declare type IKeyframes = Record<string, IRawStyle>;

declare type IMixBlendModes = ICSSRule | 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';

export declare const InjectionMode: {
    /**
     * Avoids style injection, use getRules() to read the styles.
     */
    none: 0;
    /**
     * Inserts rules using the insertRule api.
     */
    insertNode: 1;
    /**
     * Appends rules using appendChild.
     */
    appendChild: 2;
};

export declare type InjectionMode = typeof InjectionMode[keyof typeof InjectionMode];

/**
 * A processed style set is one which the set of styles associated with each area has been converted
 * into a class name. Additionally, all subComponentStyles are style functions.
 */
export declare type IProcessedStyleSet<TStyleSet extends IStyleSet<TStyleSet>> = {
    [P in keyof Omit<TStyleSet, 'subComponentStyles'>]: string;
} & {
    subComponentStyles: {
        [P in keyof TStyleSet['subComponentStyles']]: __MapToFunctionType<TStyleSet['subComponentStyles'] extends infer J ? (P extends keyof J ? J[P] : never) : never>;
    };
};

/**
 * The base font style.
 * {@docCategory IRawFontStyle}
 */
export declare interface IRawFontStyle {
    /**
     * The font property is shorthand that allows you to do one of two things: you can
     * either set up six of the most mature font properties in one line, or you can set
     *  one of a choice of keywords to adopt a system font setting.
     */
    font?: ICSSRule | string;
    /**
     * The font-family property allows one or more font family names and/or generic family
     * names to be specified for usage on the selected element(s)' text. The browser then
     * goes through the list; for each character in the selection it applies the first
     * font family that has an available glyph for that character.
     */
    fontFamily?: ICSSRule | string;
    /**
     * The font-kerning property allows contextual adjustment of inter-glyph spacing, i.e.
     * the spaces between the characters in text. This property controls <bold>metric
     * kerning</bold> - that utilizes adjustment data contained in the font. Optical
     * Kerning is not supported as yet.
     */
    fontKerning?: ICSSRule | string;
    /**
     * Specifies the size of the font. Used to compute em and ex units.
     * See CSS 3 font-size property https://www.w3.org/TR/css-fonts-3/#propdef-font-size
     */
    fontSize?: ICSSRule | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'larger' | 'smaller' | ICSSPixelUnitRule | ICSSPercentageRule;
    /**
     * The font-size-adjust property adjusts the font-size of the fallback fonts defined
     * with font-family, so that the x-height is the same no matter what font is used.
     * This preserves the readability of the text when fallback happens.
     * See CSS 3 font-size-adjust property
     * https://www.w3.org/TR/css-fonts-3/#propdef-font-size-adjust
     */
    fontSizeAdjust?: ICSSRule | 'none' | number | string;
    /**
     * Allows you to expand or condense the widths for a normal, condensed, or expanded
     * font face.
     * See CSS 3 font-stretch property
     * https://drafts.csswg.org/css-fonts-3/#propdef-font-stretch
     */
    fontStretch?: ICSSRule | 'normal' | 'ultra-condensed' | 'extra-condensed' | 'condensed' | 'semi-condensed' | 'semi-expanded' | 'expanded' | 'extra-expanded' | 'ultra-expanded' | string;
    /**
     * The font-style property allows normal, italic, or oblique faces to be selected.
     * Italic forms are generally cursive in nature while oblique faces are typically
     * sloped versions of the regular face. Oblique faces can be simulated by artificially
     * sloping the glyphs of the regular face.
     * See CSS 3 font-style property https://www.w3.org/TR/css-fonts-3/#propdef-font-style
     */
    fontStyle?: ICSSRule | 'normal' | 'italic' | 'oblique' | string;
    /**
     * This value specifies whether the user agent is allowed to synthesize bold or
     *  oblique font faces when a font family lacks bold or italic faces.
     */
    fontSynthesis?: ICSSRule | string;
    /**
     * The font-variant property enables you to select the small-caps font within a font
     * family.
     */
    fontVariant?: ICSSRule | string;
    /**
     * Fonts can provide alternate glyphs in addition to default glyph for a character.
     * This property provides control over the selection of these alternate glyphs.
     */
    fontVariantAlternates?: ICSSRule | string;
    /**
     * Specifies the weight or boldness of the font.
     * See CSS 3 'font-weight' property https://www.w3.org/TR/css-fonts-3/#propdef-font-weight
     */
    fontWeight?: IFontWeight | string;
}

/**
 * IRawStyle extends a raw style object, but allows selectors to be defined
 * under the selectors node.
 * @public
 * {@docCategory IRawStyle}
 */
export declare interface IRawStyle extends IRawStyleBase {
    /**
     * Allow css variables, strings, objects. While we should have more strict typing
     * here, partners are broken in many unpredictable cases where typescript can't infer
     * the right typing. Loosening the typing to both allow for css variables and other things.
     */
    [key: string]: any;
    /**
     * Display name for the style.
     */
    displayName?: string;
    /**
     * @deprecated - The selectors wrapper is no longer required. You may add selectors as siblings to other
     * style properties, like most css-in-js libraries support.
     */
    selectors?: {
        [key: string]: IStyle;
    };
}

/**
 * All raw style properties.
 *
 * @public
 * {@docCategory IRawStyleBase}
 */
export declare interface IRawStyleBase extends IRawFontStyle {
    /**
     * (Ms specific) constrast adjust rule.
     */
    MsHighContrastAdjust?: ICSSRule | string;
    /**
     * (Ms specific) scrollbar behavior adjust rule.
     */
    MsOverflowStyle?: 'auto' | 'none' | 'scrollbar' | '-ms-autohiding-scrollbar' | string;
    /**
     * (Moz specific) font smoothing directive.
     */
    MozOsxFontSmoothing?: 'none' | 'antialiased' | 'grayscale' | 'subpixel-antialiased' | string;
    /**
     * (Webkit specific) font smoothing directive.
     */
    WebkitFontSmoothing?: 'none' | 'antialiased' | 'grayscale' | 'subpixel-antialiased' | string;
    /**
     * (Webkit specific) momentum scrolling on iOS devices
     */
    WebkitOverflowScrolling?: 'auto' | 'touch' | string;
    /**
     * (Webkit specific) color of the highlight that appears overa  link while it's being tapped
     */
    WebkitTapHighlightColor?: string;
    /**
     * (Webkit specific) controls the text inflation algorithm used on some smartphones and tablets.
     * Other browsers will ignore this property.
     */
    WebkitTextSizeAdjust?: 'none' | 'auto' | ICSSPercentageRule | ICSSRule | string;
    /**
     * Aligns a flex container's lines within the flex container when there is extra space
     * in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
     */
    alignContent?: ICSSRule | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch' | string;
    /**
     * Sets the default alignment in the cross axis for all of the flex container's items,
     * including anonymous flex items, similarly to how justify-content aligns items along the main axis.
     */
    alignItems?: ICSSRule | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' | string;
    /**
     * Aligns the box (as the alignment subject) within its containing block (as the alignment container)
     * along the block/column/cross axis of the alignment container.
     *
     * See CSS align-self property
     * https://www.w3.org/TR/css-align-3/#propdef-align-self
     */
    alignSelf?: ICSSRule | 'auto' | 'normal' | 'stretch' | ICSSBaselinePositionRule | ICSSOverflowAndSelfPositionRule | string;
    /**
     * This property allows precise alignment of elements, such as graphics, that do not
     * have a baseline-table or lack the desired baseline in their baseline-table. With the
     * alignment-adjust property, the position of the baseline identified by the
     * alignment-baseline can be explicitly determined. It also determines precisely
     * the alignment point for each glyph within a textual element.
     */
    alignmentAdjust?: ICSSRule | string;
    /**
     * Specifies how an object is aligned with respect to its parent. This property specifies
     * which baseline of this element is to be aligned with the corresponding baseline of the
     * parent. For example, this allows alphabetic baselines in Roman text to stay aligned
     * across font size changes. It defaults to the baseline with the same name as the computed
     * value of the alignment-baseline property.
     */
    alignmentBaseline?: ICSSRule | string;
    /**
     * The animation CSS property is a shorthand property for the various animation properties:
     * `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`,
     * `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and
     * `animation-play-state`.
     */
    animation?: ICSSRule | string;
    /**
     * Defines a length of time to elapse before an animation starts, allowing an animation to begin execution
     * some time after it is applied.
     */
    animationDelay?: ICSSRule | string;
    /**
     * Defines whether an animation should run in reverse on some or all cycles.
     */
    animationDirection?: ICSSRule | string;
    /**
     * Specifies the length an animation takes to finish. Default value is 0, meaning
     * there will be no animation.
     */
    animationDuration?: ICSSRule | string;
    /**
     * The animation-fill-mode CSS property specifies how a CSS animation should apply
     * styles to its target before and after its execution.
     */
    animationFillMode?: ICSSRule | 'none' | 'forwards' | 'backwards' | 'both' | string;
    /**
     * Specifies how many times an animation cycle should play.
     */
    animationIterationCount?: ICSSRule | string;
    /**
     * Defines the list of animations that apply to the element.
     */
    animationName?: ICSSRule | string;
    /**
     * Defines whether an animation is running or paused.
     */
    animationPlayState?: ICSSRule | string;
    /**
     * The animation-timing-function specifies the speed curve of an animation.
     */
    animationTimingFunction?: ICSSRule | string;
    /**
     * Allows changing the style of any element to platform-based interface elements or
     * vice versa.
     */
    appearance?: ICSSRule | string;
    /**
     * Lets you apply graphical effects such as blurring or color shifting to the area
     * behind an element. Because it applies to everything behind the element, to see
     * the effect you must make the element or its background at least partially transparent.
     */
    backdropFilter?: ICSSRule | string;
    /**
     * Edge requires the -webkit prefix backdrop-filter.
     */
    WebkitBackdropFilter?: ICSSRule | string;
    /**
     * Determines whether or not the “back” side of a transformed element is visible when
     * facing the viewer.
     */
    backfaceVisibility?: ICSSRule | string;
    /**
     * Shorthand property to set the values for one or more of:
     * background-clip, background-color, background-image,
     * background-origin, background-position, background-repeat,
     * background-size, and background-attachment.
     */
    background?: ICSSRule | string;
    /**
     * If a background-image is specified, this property determines
     * whether that image's position is fixed within the viewport,
     * or scrolls along with its containing block.
     * See CSS 3 background-attachment property https://drafts.csswg.org/css-backgrounds-3/#the-background-attachment
     */
    backgroundAttachment?: ICSSRule | 'scroll' | 'fixed' | 'local' | string;
    /**
     * This property describes how the element's background images should blend with each
     * other and the element's background color. The value is a list of blend modes that
     * corresponds to each background image. Each element in the list will apply to the
     * corresponding element of background-image. If a property doesn’t have enough
     * comma-separated values to match the number of layers, the UA must calculate its
     * used value by repeating the list of values until there are enough.
     */
    backgroundBlendMode?: ICSSRule | string;
    /**
     * The background-clip CSS property specifies if an element's background, whether a
     * `<color>` or an `<image>`, extends underneath its border.
     *
     * \* Does not work in IE
     *
     * \* The `text` value is experimental and should not be used in production code.
     */
    backgroundClip?: ICSSRule | 'border-box' | 'padding-box' | 'content-box' | 'text' | string;
    /**
     * Sets the background color of an element.
     */
    backgroundColor?: ICSSRule | string;
    /**
     * Sets a compositing style for background images and colors.
     */
    backgroundComposite?: ICSSRule | string;
    /**
     * Applies one or more background images to an element. These can be any valid CSS
     * image, including url() paths to image files or CSS gradients.
     */
    backgroundImage?: ICSSRule | string;
    /**
     * Specifies what the background-position property is relative to.
     */
    backgroundOrigin?: ICSSRule | string;
    /**
     * Sets the position of a background image.
     */
    backgroundPosition?: ICSSRule | string;
    /**
     * Background-repeat defines if and how background images will be repeated after they
     * have been sized and positioned
     */
    backgroundRepeat?: ICSSRule | string;
    /**
     * Sets the size of background images
     */
    backgroundSize?: ICSSRule | string;
    /**
     * Shorthand property that defines the different properties of all four sides of an
     * element's border in a single declaration. It can be used to set border-width,
     * border-style and border-color, or a subset of these.
     */
    border?: ICSSRule | 0 | string;
    /**
     * Shorthand that sets the values of border-bottom-color,
     * border-bottom-style, and border-bottom-width.
     */
    borderBottom?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Sets the color of the bottom border of an element.
     */
    borderBottomColor?: ICSSRule | string;
    /**
     * Defines the shape of the border of the bottom-left corner.
     */
    borderBottomLeftRadius?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Defines the shape of the border of the bottom-right corner.
     */
    borderBottomRightRadius?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Sets the line style of the bottom border of a box.
     */
    borderBottomStyle?: ICSSRule | string;
    /**
     * Sets the width of an element's bottom border. To set all four borders, use the
     * border-width shorthand property which sets the values simultaneously for
     * border-top-width, border-right-width, border-bottom-width, and border-left-width.
     */
    borderBottomWidth?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Border-collapse can be used for collapsing the borders between table cells
     */
    borderCollapse?: ICSSRule | string;
    /**
     * The CSS border-color property sets the color of an element's four borders. This
     * property can have from one to four values, made up of the elementary properties:
     *      •       border-top-color
     *      •       border-right-color
     *      •       border-bottom-color
     *      •       border-left-color The default color is the currentColor of each of
     * these values.
     * If you provide one value, it sets the color for the element. Two values set the
     * horizontal and vertical values, respectively. Providing three values sets the top,
     * vertical, and bottom values, in that order. Four values set all for sides: top,
     * right, bottom, and left, in that order.
     */
    borderColor?: ICSSRule | string;
    /**
     * Specifies different corner clipping effects, such as scoop (inner curves), bevel
     * (straight cuts) or notch (cut-off rectangles). Works along with border-radius to
     * specify the size of each corner effect.
     */
    borderCornerShape?: ICSSRule | string;
    /**
     * The property border-image-source is used to set the image to be used instead of
     * the border style. If this is set to none the border-style is used instead.
     */
    borderImageSource?: ICSSRule | string;
    /**
     * The border-image-width CSS property defines the offset to use for dividing the
     * border image in nine parts, the top-left corner, central top edge, top-right-corner,
     * central right edge, bottom-right corner, central bottom edge, bottom-left corner,
     * and central right edge. They represent inward distance from the top, right, bottom,
     * and left edges.
     */
    borderImageWidth?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Shorthand property that defines the border-width, border-style and border-color of
     * an element's left border in a single declaration. Note that you can use the
     * corresponding longhand properties to set specific individual properties of the left
     * border — border-left-width, border-left-style and border-left-color.
     */
    borderLeft?: ICSSRule | ICSSPixelUnitRule;
    /**
     * The CSS border-left-color property sets the color of an element's left border. This
     *  page explains the border-left-color value, but often you will find it more
     * convenient to fix the border's left color as part of a shorthand set, either
     * border-left or border-color. Colors can be defined several ways. For more
     * information, see Usage.
     */
    borderLeftColor?: ICSSRule | string;
    /**
     * Sets the style of an element's left border. To set all four borders, use the
     * shorthand property, border-style. Otherwise, you can set the borders individually
     * with border-top-style, border-right-style, border-bottom-style, border-left-style.
     */
    borderLeftStyle?: ICSSRule | string;
    /**
     * Sets the width of an element's left border. To set all four borders, use the
     * border-width shorthand property which sets the values simultaneously for
     * border-top-width, border-right-width, border-bottom-width, and border-left-width.
     */
    borderLeftWidth?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Defines how round the border's corners are.
     */
    borderRadius?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Shorthand property that defines the border-width, border-style and border-color of
     * an element's right border in a single declaration. Note that you can use the
     * corresponding longhand properties to set specific individual properties of the
     * right border — border-right-width, border-right-style and border-right-color.
     */
    borderRight?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Sets the color of an element's right border. This page explains the
     * border-right-color value, but often you will find it more convenient to fix the
     * border's right color as part of a shorthand set, either border-right or border-color.
     * Colors can be defined several ways. For more information, see Usage.
     */
    borderRightColor?: ICSSRule | string;
    /**
     * Sets the style of an element's right border. To set all four borders, use the
     * shorthand property, border-style. Otherwise, you can set the borders individually
     * with border-top-style, border-right-style, border-bottom-style, border-left-style.
     */
    borderRightStyle?: ICSSRule | string;
    /**
     * Sets the width of an element's right border. To set all four borders, use the
     * border-width shorthand property which sets the values simultaneously for
     * border-top-width, border-right-width, border-bottom-width, and border-left-width.
     */
    borderRightWidth?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Specifies the distance between the borders of adjacent cells.
     */
    borderSpacing?: ICSSRule | string;
    /**
     * Sets the style of an element's four borders. This property can have from one to
     * four values. With only one value, the value will be applied to all four borders;
     * otherwise, this works as a shorthand property for each of border-top-style,
     *  border-right-style, border-bottom-style, border-left-style, where each border
     *  style may be assigned a separate value.
     */
    borderStyle?: ICSSRule | string;
    /**
     * Shorthand property that defines the border-width, border-style and border-color of
     * an element's top border in a single declaration. Note that you can use the
     * corresponding longhand properties to set specific individual properties of the top
     * border — border-top-width, border-top-style and border-top-color.
     */
    borderTop?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Sets the color of an element's top border. This page explains the border-top-color
     * value, but often you will find it more convenient to fix the border's top color as
     * part of a shorthand set, either border-top or border-color.
     * Colors can be defined several ways. For more information, see Usage.
     */
    borderTopColor?: ICSSRule | string;
    /**
     * Sets the rounding of the top-left corner of the element.
     */
    borderTopLeftRadius?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Sets the rounding of the top-right corner of the element.
     */
    borderTopRightRadius?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Sets the style of an element's top border. To set all four borders, use the
     * shorthand property, border-style. Otherwise, you can set the borders individually
     * with border-top-style, border-right-style, border-bottom-style, border-left-style.
     */
    borderTopStyle?: ICSSRule | string;
    /**
     * Sets the width of an element's top border. To set all four borders, use the
     * border-width shorthand property which sets the values simultaneously for
     * border-top-width, border-right-width, border-bottom-width, and border-left-width.
     */
    borderTopWidth?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Sets the width of an element's four borders. This property can have from one to
     * four values. This is a shorthand property for setting values simultaneously for
     * border-top-width, border-right-width, border-bottom-width, and border-left-width.
     */
    borderWidth?: ICSSRule | ICSSPixelUnitRule;
    /**
     * This property specifies how far an absolutely positioned box's bottom margin edge
     * is offset above the bottom edge of the box's containing block. For relatively
     * positioned boxes, the offset is with respect to the bottom edges of the box itself
     * (i.e., the box is given a position in the normal flow, then offset from that
     * position according to these properties).
     */
    bottom?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Breaks a box into fragments creating new borders, padding and repeating backgrounds
     * or lets it stay as a continuous box on a page break, column break, or, for inline
     * elements, at a line break.
     */
    boxDecorationBreak?: ICSSRule | string;
    /**
     * Cast a drop shadow from the frame of almost any element.
     * MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
     */
    boxShadow?: ICSSRule | string;
    /**
     * The CSS box-sizing property is used to alter the default CSS box model used to
     * calculate width and height of the elements.
     */
    boxSizing?: ICSSRule | 'border-box' | 'content-box' | string;
    /**
     * The CSS break-after property allows you to force a break on multi-column layouts.
     * More specifically, it allows you to force a break after an element. It allows you
     * to determine if a break should occur, and what type of break it should be. The
     * break-after CSS property describes how the page, column or region break behaves
     * after the generated box. If there is no generated box, the property is ignored.
     */
    breakAfter?: ICSSRule | string;
    /**
     * Control page/column/region breaks that fall above a block of content
     */
    breakBefore?: ICSSRule | string;
    /**
     * Control page/column/region breaks that fall within a block of content
     */
    breakInside?: ICSSRule | string;
    /**
     * The clear CSS property specifies if an element can be positioned next to or must be
     * positioned below the floating elements that precede it in the markup.
     */
    clear?: ICSSRule | string;
    /**
     * Clipping crops an graphic, so that only a portion of the graphic is rendered, or
     * filled. This clip-rule property, when used with the clip-path property, defines
     * which clip rule, or algorithm, to use when filling the different parts of a graphics.
     */
    clipRule?: ICSSRule | string;
    /**
     * The color property sets the color of an element's foreground content (usually text),
     * accepting any standard CSS color from keywords and hex values to RGB(a) and HSL(a).
     */
    color?: ICSSRule | string;
    /**
     * Describes the number of columns of the element.
     * See CSS 3 column-count property https://www.w3.org/TR/css3-multicol/#cc
     */
    columnCount?: ICSSRule | number | 'auto' | string;
    /**
     * Specifies how to fill columns (balanced or sequential).
     */
    columnFill?: ICSSRule | string;
    /**
     * The column-gap property controls the width of the gap between columns in multi-column
     * elements.
     */
    columnGap?: ICSSRule | string;
    /**
     * Sets the width, style, and color of the rule between columns.
     */
    columnRule?: ICSSRule | string;
    /**
     * Specifies the color of the rule between columns.
     */
    columnRuleColor?: ICSSRule | string;
    /**
     * Specifies the width of the rule between columns.
     */
    columnRuleWidth?: ICSSRule | ICSSPixelUnitRule;
    /**
     * The column-span CSS property makes it possible for an element to span across all
     * columns when its value is set to all. An element that spans more than one column
     * is called a spanning element.
     */
    columnSpan?: ICSSRule | string;
    /**
     * Specifies the width of columns in multi-column elements.
     */
    columnWidth?: ICSSRule | ICSSPixelUnitRule;
    /**
     * This property is a shorthand property for setting column-width and/or column-count.
     */
    columns?: ICSSRule | string;
    /**
     * Content for pseudo selectors.
     */
    content?: string;
    /**
     * The counter-increment property accepts one or more names of counters (identifiers),
     * each one optionally followed by an integer which specifies the value by which the
     * counter should be incremented (e.g. if the value is 2, the counter increases by 2
     * each time it is invoked).
     */
    counterIncrement?: ICSSRule | string;
    /**
     * The counter-reset property contains a list of one or more names of counters, each
     * one optionally followed by an integer (otherwise, the integer defaults to 0.) Each
     * time the given element is invoked, the counters specified by the property are set to the given integer.
     */
    counterReset?: ICSSRule | string;
    /**
     * The cue property specifies sound files (known as an "auditory icon") to be played by
     * speech media agents before and after presenting an element's content; if only one
     * file is specified, it is played both before and after. The volume at which the
     * file(s) should be played, relative to the volume of the main element, may also be
     * specified. The icon files may also be set separately with the cue-before and
     * cue-after properties.
     */
    cue?: ICSSRule | string;
    /**
     * The cue-after property specifies a sound file (known as an "auditory icon") to be
     * played by speech media agents after presenting an element's content; the volume at
     * which the file should be played may also be specified. The shorthand property cue
     * sets cue sounds for both before and after the element is presented.
     */
    cueAfter?: ICSSRule | string;
    /**
     * Specifies the mouse cursor displayed when the mouse pointer is over an element.
     */
    cursor?: ICSSRule | string;
    /**
     * The direction CSS property specifies the text direction/writing direction. The rtl
     * is used for Hebrew or Arabic text, the ltr is for other languages.
     */
    direction?: ICSSRule | string;
    /**
     * This property specifies the type of rendering box used for an element. It is a
     * shorthand property for many other display properties.
     * W3: https://www.w3.org/TR/css-display-3/#the-display-properties
     * MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/display
     */
    display?: ICSSRule | ICSSDisplayRule | string;
    /**
     * The ‘fill’ property paints the interior of the given graphical element. The area to
     * be painted consists of any areas inside the outline of the shape. To determine the
     * inside of the shape, all subpaths are considered, and the interior is determined
     * according to the rules associated with the current value of the ‘fill-rule’
     * property. The zero-width geometric outline of a shape is included in the area to be
     * painted.
     */
    fill?: ICSSRule | string;
    /**
     * SVG: Specifies the opacity of the color or the content the current object is filled
     * with.
     * See SVG 1.1 https://www.w3.org/TR/SVG/painting.html#FillOpacityProperty
     */
    fillOpacity?: ICSSRule | number;
    /**
     * The ‘fill-rule’ property indicates the algorithm which is to be used to determine
     * what parts of the canvas are included inside the shape. For a simple,
     * non-intersecting path, it is intuitively clear what region lies "inside"; however,
     * for a more complex path, such as a path that intersects itself or where one subpath
     * encloses another, the interpretation of "inside" is not so obvious.
     * The ‘fill-rule’ property provides two options for how the inside of a shape is
     * determined:
     */
    fillRule?: ICSSRule | string;
    /**
     * Applies various image processing effects. This property is largely unsupported. See
     * Compatibility section for more information.
     */
    filter?: ICSSRule | string;
    /**
     * Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`.
     */
    flex?: ICSSRule | string | number;
    /**
     * The flex-basis CSS property describes the initial main size of the flex item before
     * any free space is distributed according to the flex factors described in the flex
     * property (flex-grow and flex-shrink).
     */
    flexBasis?: ICSSRule | string | number;
    /**
     * The flex-direction CSS property describes how flex items are placed in the flex
     * container, by setting the direction of the flex container's main axis.
     */
    flexDirection?: ICSSRule | 'row' | 'row-reverse' | 'column' | 'column-reverse' | string;
    /**
     * The flex-flow CSS property defines the flex container's main and cross axis. It is
     * a shorthand property for the flex-direction and flex-wrap properties.
     */
    flexFlow?: ICSSRule | string;
    /**
     * Specifies the flex grow factor of a flex item.
     * See CSS flex-grow property https://drafts.csswg.org/css-flexbox-1/#flex-grow-property
     */
    flexGrow?: ICSSRule | number | string;
    /**
     * Specifies the flex shrink factor of a flex item.
     * See CSS flex-shrink property https://drafts.csswg.org/css-flexbox-1/#flex-shrink-property
     */
    flexShrink?: ICSSRule | number | string;
    /**
     * Specifies whether flex items are forced into a single line or can be wrapped onto
     * multiple lines. If wrapping is allowed, this property also enables you to control
     * the direction in which lines are stacked.
     * See CSS flex-wrap property https://drafts.csswg.org/css-flexbox-1/#flex-wrap-property
     */
    flexWrap?: ICSSRule | 'nowrap' | 'wrap' | 'wrap-reverse' | string;
    /**
     * Elements which have the style float are floated horizontally. These elements can
     * move as far to the left or right of the containing element. All elements after
     * the floating element will flow around it, but elements before the floating element
     * are not impacted. If several floating elements are placed after each other, they
     * will float next to each other as long as there is room.
     */
    float?: ICSSRule | string;
    /**
     * Flows content from a named flow (specified by a corresponding flow-into) through
     * selected elements to form a dynamic chain of layout regions.
     */
    flowFrom?: ICSSRule | string;
    /**
     * The property which allows authors to opt particular elements out of forced colors mode,
     * restoring full control over the colors to CSS. Currently it's only supported in Edge Chromium.
     */
    forcedColorAdjust?: 'auto' | 'none' | string;
    /**
     * Lays out one or more grid items bound by 4 grid lines. Shorthand for setting
     * grid-column-start, grid-column-end, grid-row-start, and grid-row-end in a single
     * declaration.
     */
    gridArea?: ICSSRule | string;
    /**
     * Specifies the size of an implicitly-created grid column track
     */
    gridAutoColumns?: ICSSRule | string;
    /**
     * Controls how the auto-placement algorithm works,
     * specifying exactly how auto-placed items get flowed into the grid.
     */
    gridAutoFlow?: ICSSRule | string;
    /**
     * Specifies the size of an implicitly-created grid column track
     */
    gridAutoRows?: ICSSRule | string;
    /**
     * Controls a grid item's placement in a grid area, particularly grid position and a
     * grid span. Shorthand for setting grid-column-start and grid-column-end in a single
     * declaration.
     */
    gridColumn?: ICSSRule | string;
    /**
     * Controls a grid item's placement in a grid area as well as grid position and a
     * grid span. The grid-column-end property (with grid-row-start, grid-row-end, and
     * grid-column-start) determines a grid item's placement by specifying the grid lines
     * of a grid item's grid area.
     */
    gridColumnEnd?: ICSSRule | string;
    /**
     * Sets the size of the gap (gutter) between an element's columns
     */
    gridColumnGap?: ICSSRule | string;
    /**
     * Determines a grid item's placement by specifying the starting grid lines of a grid
     * item's grid area . A grid item's placement in a grid area consists of a grid
     * position and a grid span. See also ( grid-row-start, grid-row-end, and
     * grid-column-end)
     */
    gridColumnStart?: ICSSRule | string;
    /**
     * Specifies the gaps (gutters) between grid rows and columns. It is a shorthand
     * for grid-row-gap and grid-column-gap.
     */
    gridGap?: ICSSRule | string;
    /**
     * Gets or sets a value that indicates which row an element within a Grid should
     * appear in. Shorthand for setting grid-row-start and grid-row-end in a single
     * declaration.
     */
    gridRow?: ICSSRule | string;
    /**
     * Determines a grid item’s placement by specifying the block-end. A grid item's
     * placement in a grid area consists of a grid position and a grid span. The
     * grid-row-end property (with grid-row-start, grid-column-start, and grid-column-end)
     * determines a grid item's placement by specifying the grid lines of a grid item's
     * grid area.
     */
    gridRowEnd?: ICSSRule | string;
    /**
     * Sets the size of the gap (gutter) between an element's grid rows
     */
    gridRowGap?: ICSSRule | string;
    /**
     * Specifies a grid item’s start position within the grid row by contributing a line,
     * a span, or nothing (automatic) to its grid placement, thereby specifying the
     * inline-start edge of its grid area
     */
    gridRowStart?: ICSSRule | string;
    /**
     * Specifies a row position based upon an integer location, string value, or desired
     * row size.
     * css/properties/grid-row is used as short-hand for grid-row-position and
     * grid-row-position
     */
    gridRowPosition?: ICSSRule | string;
    /**
     * Specifies named grid areas which are not associated with any particular grid item,
     * but can be referenced from the grid-placement properties. The syntax of the
     * grid-template-areas property also provides a visualization of the structure of the
     * grid, making the overall layout of the grid container easier to understand.
     */
    gridTemplate?: ICSSRule | string;
    /**
     * Specifies named grid areas
     */
    gridTemplateAreas?: ICSSRule | string;
    /**
     * Specifies (with grid-template-rows) the line names and track sizing functions of
     * the grid. Each sizing function can be specified as a length, a percentage of the
     * grid container’s size, a measurement of the contents occupying the column or row,
     * or a fraction of the free space in the grid.
     */
    gridTemplateColumns?: ICSSRule | string;
    /**
     * Specifies (with grid-template-columns) the line names and track sizing functions of
     * the grid. Each sizing function can be specified as a length, a percentage of the
     * grid container’s size, a measurement of the contents occupying the column or row,
     * or a fraction of the free space in the grid.
     */
    gridTemplateRows?: ICSSRule | string;
    /**
     * Sets the height of an element. The content area of the element height does not
     * include the padding, border, and margin of the element.
     */
    height?: ICSSRule | ICSSPixelUnitRule;
    /**
     * Specifies the minimum number of characters in a hyphenated word
     */
    hyphenateLimitChars?: ICSSRule | string;
    /**
     * Indicates the maximum number of successive hyphenated lines in an element. The
     * ‘no-limit’ value means that there is no limit.
     */
    hyphenateLimitLines?: ICSSRule | string;
    /**
     * Specifies the maximum amount of trailing whitespace (before justification) that may
     * be left in a line before hyphenation is triggered to pull part of a word from the
     * next line back up into the current one.
     */
    hyphenateLimitZone?: ICSSRule | string;
    /**
     * Specifies whether or not words in a sentence can be split by the use of a manual or
     * automatic hyphenation mechanism.
     */
    hyphens?: ICSSRule | string;
    /**
     * Defines how the browser distributes space between and around flex items
     * along the main-axis of their container.
     * See CSS justify-content property
     * https://www.w3.org/TR/css-flexbox-1/#justify-content-property
     */
    justifyContent?: ICSSRule | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | string;
    /**
     * Justifies the box (as the alignment subject) within its containing block (as the alignment container)
     * along the inline/row/main axis of the alignment container.
     *
     * See CSS jusitfy-self property
     * https://www.w3.org/TR/css-align-3/#propdef-justify-self
     */
    justifySelf?: ICSSRule | 'auto' | 'normal' | 'stretch' | ICSSBaselinePositionRule | ICSSOverflowAndSelfPositionRule | 'left' | 'right' | 'safe left' | 'safe right' | 'unsafe left' | 'unsafe right' | string;
    /**
     * Sets the left position of an element relative to the nearest ancestor that is set
     * to position absolute, relative, or fixed.
     */
    left?: ICSSRule | ICSSPixelUnitRule;
    /**
     * The letter-spacing CSS property specifies the spacing behavior between text
     * characters.
     */
    letterSpacing?: ICSSRule | string;
    /**
     * Specifies the height of an inline block level element.
     * See CSS 2.1 line-height property https://www.w3.org/TR/CSS21/visudet.html#propdef-line-height
     */
    lineHeight?: ICSSRule | 'normal' | ICSSPixelUnitRule | ICSSPercentageRule;
    /**
     * Shorthand property that sets the list-style-type, list-style-position and
     * list-style-image properties in one declaration.
     */
    listStyle?: ICSSRule | string;
    /**
     * This property sets the image that will be used as the list item marker. When the
     * image is available, it will replace the marker set with the 'list-style-type'
     * marker. That also means that if the image is not available, it will show the style
     * specified by list-style-property
     */
    listStyleImage?: ICSSRule | string;
    /**
     * Specifies if the list-item markers should appear inside or outside the content flow.
     */
    listStylePosition?: ICSSRule | string;
    /**
     * Specifies the type of list-item marker in a list.
     */
    listStyleType?: ICSSRule | string;
    /**
     * The margin property is shorthand to allow you to set all four margins of an element
     * at once. Its equivalent longhand properties are margin-top, margin-right,
     * margin-bottom and margin-left. Negative values are also allowed.
     */
    margin?: ICSSRule | ICSSPixelUnitRule;
    /**
     * margin-bottom sets the bottom margin of an element.
     */