html2canvas-pro 2.0.4 → 2.1.0

package/src/css/property-descriptors/display.ts

@@ -0,0 +1,117 @@
+import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue, isIdentToken } from '../syntax/parser';
+import { Context } from '../../core/context';
+export const enum DISPLAY {
+    NONE = 0,
+    BLOCK = 1 << 1,
+    INLINE = 1 << 2,
+    RUN_IN = 1 << 3,
+    FLOW = 1 << 4,
+    FLOW_ROOT = 1 << 5,
+    TABLE = 1 << 6,
+    FLEX = 1 << 7,
+    GRID = 1 << 8,
+    RUBY = 1 << 9,
+    SUBGRID = 1 << 10,
+    LIST_ITEM = 1 << 11,
+    TABLE_ROW_GROUP = 1 << 12,
+    TABLE_HEADER_GROUP = 1 << 13,
+    TABLE_FOOTER_GROUP = 1 << 14,
+    TABLE_ROW = 1 << 15,
+    TABLE_CELL = 1 << 16,
+    TABLE_COLUMN_GROUP = 1 << 17,
+    TABLE_COLUMN = 1 << 18,
+    TABLE_CAPTION = 1 << 19,
+    RUBY_BASE = 1 << 20,
+    RUBY_TEXT = 1 << 21,
+    RUBY_BASE_CONTAINER = 1 << 22,
+    RUBY_TEXT_CONTAINER = 1 << 23,
+    CONTENTS = 1 << 24,
+    INLINE_BLOCK = 1 << 25,
+    INLINE_LIST_ITEM = 1 << 26,
+    INLINE_TABLE = 1 << 27,
+    INLINE_FLEX = 1 << 28,
+    INLINE_GRID = 1 << 29
+}
+
+export type Display = number;
+
+export const display: IPropertyListDescriptor<Display> = {
+    name: 'display',
+    initialValue: 'inline-block',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]): Display => {
+        return tokens.filter(isIdentToken).reduce((bit, token) => {
+            return bit | parseDisplayValue(token.value);
+        }, DISPLAY.NONE);
+    }
+};
+
+const parseDisplayValue = (display: string): Display => {
+    switch (display) {
+        case 'block':
+        case '-webkit-box':
+            return DISPLAY.BLOCK;
+        case 'inline':
+            return DISPLAY.INLINE;
+        case 'run-in':
+            return DISPLAY.RUN_IN;
+        case 'flow':
+            return DISPLAY.FLOW;
+        case 'flow-root':
+            return DISPLAY.FLOW_ROOT;
+        case 'table':
+            return DISPLAY.TABLE;
+        case 'flex':
+        case '-webkit-flex':
+            return DISPLAY.FLEX;
+        case 'grid':
+        case '-ms-grid':
+            return DISPLAY.GRID;
+        case 'ruby':
+            return DISPLAY.RUBY;
+        case 'subgrid':
+            return DISPLAY.SUBGRID;
+        case 'list-item':
+            return DISPLAY.LIST_ITEM;
+        case 'table-row-group':
+            return DISPLAY.TABLE_ROW_GROUP;
+        case 'table-header-group':
+            return DISPLAY.TABLE_HEADER_GROUP;
+        case 'table-footer-group':
+            return DISPLAY.TABLE_FOOTER_GROUP;
+        case 'table-row':
+            return DISPLAY.TABLE_ROW;
+        case 'table-cell':
+            return DISPLAY.TABLE_CELL;
+        case 'table-column-group':
+            return DISPLAY.TABLE_COLUMN_GROUP;
+        case 'table-column':
+            return DISPLAY.TABLE_COLUMN;
+        case 'table-caption':
+            return DISPLAY.TABLE_CAPTION;
+        case 'ruby-base':
+            return DISPLAY.RUBY_BASE;
+        case 'ruby-text':
+            return DISPLAY.RUBY_TEXT;
+        case 'ruby-base-container':
+            return DISPLAY.RUBY_BASE_CONTAINER;
+        case 'ruby-text-container':
+            return DISPLAY.RUBY_TEXT_CONTAINER;
+        case 'contents':
+            return DISPLAY.CONTENTS;
+        case 'inline-block':
+            return DISPLAY.INLINE_BLOCK;
+        case 'inline-list-item':
+            return DISPLAY.INLINE_LIST_ITEM;
+        case 'inline-table':
+            return DISPLAY.INLINE_TABLE;
+        case 'inline-flex':
+            return DISPLAY.INLINE_FLEX;
+        case 'inline-grid':
+            return DISPLAY.INLINE_GRID;
+    }
+
+    return DISPLAY.NONE;
+};

package/src/css/property-descriptors/duration.ts

@@ -0,0 +1,14 @@
+import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { Context } from '../../core/context';
+import { CSSValue, isDimensionToken } from '../syntax/parser';
+import { time } from '../types/time';
+
+export const duration: IPropertyListDescriptor<number[]> = {
+    name: 'duration',
+    initialValue: '0s',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (context: Context, tokens: CSSValue[]) => {
+        return tokens.filter(isDimensionToken).map((token) => time.parse(context, token));
+    }
+};

package/src/css/property-descriptors/float.ts

@@ -0,0 +1,29 @@
+import { IPropertyIdentValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { Context } from '../../core/context';
+export const enum FLOAT {
+    NONE = 0,
+    LEFT = 1,
+    RIGHT = 2,
+    INLINE_START = 3,
+    INLINE_END = 4
+}
+
+export const float: IPropertyIdentValueDescriptor<FLOAT> = {
+    name: 'float',
+    initialValue: 'none',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, float: string) => {
+        switch (float) {
+            case 'left':
+                return FLOAT.LEFT;
+            case 'right':
+                return FLOAT.RIGHT;
+            case 'inline-start':
+                return FLOAT.INLINE_START;
+            case 'inline-end':
+                return FLOAT.INLINE_END;
+        }
+        return FLOAT.NONE;
+    }
+};

package/src/css/property-descriptors/font-family.ts

@@ -0,0 +1,38 @@
+import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue } from '../syntax/parser';
+import { TokenType } from '../syntax/tokenizer';
+import { Context } from '../../core/context';
+
+export type FONT_FAMILY = string;
+
+export type FontFamily = FONT_FAMILY[];
+
+export const fontFamily: IPropertyListDescriptor<FontFamily> = {
+    name: `font-family`,
+    initialValue: '',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]) => {
+        const accumulator: string[] = [];
+        const results: string[] = [];
+        tokens.forEach((token) => {
+            switch (token.type) {
+                case TokenType.IDENT_TOKEN:
+                case TokenType.STRING_TOKEN:
+                    accumulator.push(token.value);
+                    break;
+                case TokenType.NUMBER_TOKEN:
+                    accumulator.push(token.number.toString());
+                    break;
+                case TokenType.COMMA_TOKEN:
+                    results.push(accumulator.join(' '));
+                    accumulator.length = 0;
+                    break;
+            }
+        });
+        if (accumulator.length) {
+            results.push(accumulator.join(' '));
+        }
+        return results.map((result) => (result.indexOf(' ') === -1 ? result : `'${result}'`));
+    }
+};

package/src/css/property-descriptors/font-size.ts

@@ -0,0 +1,9 @@
+import { IPropertyTypeValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+
+export const fontSize: IPropertyTypeValueDescriptor = {
+    name: `font-size`,
+    initialValue: '0',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'length'
+};

package/src/css/property-descriptors/font-style.ts

@@ -0,0 +1,25 @@
+import { IPropertyIdentValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { Context } from '../../core/context';
+export const enum FONT_STYLE {
+    NORMAL = 'normal',
+    ITALIC = 'italic',
+    OBLIQUE = 'oblique'
+}
+
+export const fontStyle: IPropertyIdentValueDescriptor<FONT_STYLE> = {
+    name: 'font-style',
+    initialValue: 'normal',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, overflow: string) => {
+        switch (overflow) {
+            case 'oblique':
+                return FONT_STYLE.OBLIQUE;
+            case 'italic':
+                return FONT_STYLE.ITALIC;
+            case 'normal':
+            default:
+                return FONT_STYLE.NORMAL;
+        }
+    }
+};

package/src/css/property-descriptors/font-variant.ts

@@ -0,0 +1,12 @@
+import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue, isIdentToken } from '../syntax/parser';
+import { Context } from '../../core/context';
+export const fontVariant: IPropertyListDescriptor<string[]> = {
+    name: 'font-variant',
+    initialValue: 'none',
+    type: PropertyDescriptorParsingType.LIST,
+    prefix: false,
+    parse: (_context: Context, tokens: CSSValue[]): string[] => {
+        return tokens.filter(isIdentToken).map((token) => token.value);
+    }
+};

package/src/css/property-descriptors/font-weight.ts

@@ -0,0 +1,26 @@
+import { IPropertyValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue, isIdentToken, isNumberToken } from '../syntax/parser';
+import { Context } from '../../core/context';
+export const fontWeight: IPropertyValueDescriptor<number> = {
+    name: 'font-weight',
+    initialValue: 'normal',
+    type: PropertyDescriptorParsingType.VALUE,
+    prefix: false,
+    parse: (_context: Context, token: CSSValue): number => {
+        if (isNumberToken(token)) {
+            return token.number;
+        }
+
+        if (isIdentToken(token)) {
+            switch (token.value) {
+                case 'bold':
+                    return 700;
+                case 'normal':
+                default:
+                    return 400;
+            }
+        }
+
+        return 400;
+    }
+};

package/src/css/property-descriptors/image-rendering.ts

@@ -0,0 +1,33 @@
+import { IPropertyIdentValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { Context } from '../../core/context';
+
+export enum IMAGE_RENDERING {
+    AUTO = 0,
+    CRISP_EDGES = 1,
+    PIXELATED = 2,
+    SMOOTH = 3
+}
+
+export const imageRendering: IPropertyIdentValueDescriptor<IMAGE_RENDERING> = {
+    name: 'image-rendering',
+    initialValue: 'auto',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, value: string): IMAGE_RENDERING => {
+        switch (value.toLowerCase()) {
+            case 'crisp-edges':
+            case '-webkit-crisp-edges':
+            case '-moz-crisp-edges':
+                return IMAGE_RENDERING.CRISP_EDGES;
+            case 'pixelated':
+            case '-webkit-optimize-contrast':
+                return IMAGE_RENDERING.PIXELATED;
+            case 'smooth':
+            case 'high-quality':
+                return IMAGE_RENDERING.SMOOTH;
+            case 'auto':
+            default:
+                return IMAGE_RENDERING.AUTO;
+        }
+    }
+};

package/src/css/property-descriptors/letter-spacing.ts

@@ -0,0 +1,25 @@
+import { IPropertyValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue } from '../syntax/parser';
+import { TokenType } from '../syntax/tokenizer';
+import { Context } from '../../core/context';
+export const letterSpacing: IPropertyValueDescriptor<number> = {
+    name: 'letter-spacing',
+    initialValue: '0',
+    prefix: false,
+    type: PropertyDescriptorParsingType.VALUE,
+    parse: (_context: Context, token: CSSValue) => {
+        if (token.type === TokenType.IDENT_TOKEN && token.value === 'normal') {
+            return 0;
+        }
+
+        if (token.type === TokenType.NUMBER_TOKEN) {
+            return token.number;
+        }
+
+        if (token.type === TokenType.DIMENSION_TOKEN) {
+            return token.number;
+        }
+
+        return 0;
+    }
+};

package/src/css/property-descriptors/line-break.ts

@@ -0,0 +1,22 @@
+import { IPropertyIdentValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { Context } from '../../core/context';
+export enum LINE_BREAK {
+    NORMAL = 'normal',
+    STRICT = 'strict'
+}
+
+export const lineBreak: IPropertyIdentValueDescriptor<LINE_BREAK> = {
+    name: 'line-break',
+    initialValue: 'normal',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, lineBreak: string): LINE_BREAK => {
+        switch (lineBreak) {
+            case 'strict':
+                return LINE_BREAK.STRICT;
+            case 'normal':
+            default:
+                return LINE_BREAK.NORMAL;
+        }
+    }
+};

package/src/css/property-descriptors/line-height.ts

@@ -0,0 +1,22 @@
+import { IPropertyTokenValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue, isIdentToken } from '../syntax/parser';
+import { TokenType } from '../syntax/tokenizer';
+import { getAbsoluteValue, isLengthPercentage } from '../types/length-percentage';
+export const lineHeight: IPropertyTokenValueDescriptor = {
+    name: 'line-height',
+    initialValue: 'normal',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TOKEN_VALUE
+};
+
+export const computeLineHeight = (token: CSSValue, fontSize: number): number => {
+    if (isIdentToken(token) && token.value === 'normal') {
+        return 1.2 * fontSize;
+    } else if (token.type === TokenType.NUMBER_TOKEN) {
+        return fontSize * token.number;
+    } else if (isLengthPercentage(token)) {
+        return getAbsoluteValue(token, fontSize);
+    }
+
+    return fontSize;
+};

package/src/css/property-descriptors/list-style-image.ts

@@ -0,0 +1,19 @@
+import { TokenType } from '../syntax/tokenizer';
+import { ICSSImage, image } from '../types/image';
+import { IPropertyValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue } from '../syntax/parser';
+import { Context } from '../../core/context';
+
+export const listStyleImage: IPropertyValueDescriptor<ICSSImage | null> = {
+    name: 'list-style-image',
+    initialValue: 'none',
+    type: PropertyDescriptorParsingType.VALUE,
+    prefix: false,
+    parse: (context: Context, token: CSSValue) => {
+        if (token.type === TokenType.IDENT_TOKEN && token.value === 'none') {
+            return null;
+        }
+
+        return image.parse(context, token);
+    }
+};

package/src/css/property-descriptors/list-style-position.ts

@@ -0,0 +1,22 @@
+import { IPropertyIdentValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { Context } from '../../core/context';
+export const enum LIST_STYLE_POSITION {
+    INSIDE = 0,
+    OUTSIDE = 1
+}
+
+export const listStylePosition: IPropertyIdentValueDescriptor<LIST_STYLE_POSITION> = {
+    name: 'list-style-position',
+    initialValue: 'outside',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, position: string) => {
+        switch (position) {
+            case 'inside':
+                return LIST_STYLE_POSITION.INSIDE;
+            case 'outside':
+            default:
+                return LIST_STYLE_POSITION.OUTSIDE;
+        }
+    }
+};

package/src/css/property-descriptors/list-style-type.ts

@@ -0,0 +1,179 @@
+import { Context } from '../../core/context';
+import { IPropertyIdentValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+export const enum LIST_STYLE_TYPE {
+    NONE = -1,
+    DISC = 0,
+    CIRCLE = 1,
+    SQUARE = 2,
+    DECIMAL = 3,
+    CJK_DECIMAL = 4,
+    DECIMAL_LEADING_ZERO = 5,
+    LOWER_ROMAN = 6,
+    UPPER_ROMAN = 7,
+    LOWER_GREEK = 8,
+    LOWER_ALPHA = 9,
+    UPPER_ALPHA = 10,
+    ARABIC_INDIC = 11,
+    ARMENIAN = 12,
+    BENGALI = 13,
+    CAMBODIAN = 14,
+    CJK_EARTHLY_BRANCH = 15,
+    CJK_HEAVENLY_STEM = 16,
+    CJK_IDEOGRAPHIC = 17,
+    DEVANAGARI = 18,
+    ETHIOPIC_NUMERIC = 19,
+    GEORGIAN = 20,
+    GUJARATI = 21,
+    GURMUKHI = 22,
+    HIRAGANA = 23,
+    HIRAGANA_IROHA = 24,
+    JAPANESE_FORMAL = 25,
+    JAPANESE_INFORMAL = 26,
+    KANNADA = 27,
+    KATAKANA = 28,
+    KATAKANA_IROHA = 29,
+    KHMER = 30,
+    KOREAN_HANGUL_FORMAL = 31,
+    KOREAN_HANJA_FORMAL = 32,
+    KOREAN_HANJA_INFORMAL = 33,
+    LAO = 34,
+    LOWER_ARMENIAN = 35,
+    MALAYALAM = 36,
+    MONGOLIAN = 37,
+    MYANMAR = 38,
+    ORIYA = 39,
+    PERSIAN = 40,
+    SIMP_CHINESE_FORMAL = 41,
+    SIMP_CHINESE_INFORMAL = 42,
+    TAMIL = 43,
+    TELUGU = 44,
+    THAI = 45,
+    TIBETAN = 46,
+    TRAD_CHINESE_FORMAL = 47,
+    TRAD_CHINESE_INFORMAL = 48,
+    UPPER_ARMENIAN = 49,
+    DISCLOSURE_OPEN = 50,
+    DISCLOSURE_CLOSED = 51,
+    // This was originally 22, duplicating GURMUKHI.
+    HEBREW = 52
+}
+
+export const listStyleType: IPropertyIdentValueDescriptor<LIST_STYLE_TYPE> = {
+    name: 'list-style-type',
+    initialValue: 'none',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, type: string) => {
+        switch (type) {
+            case 'disc':
+                return LIST_STYLE_TYPE.DISC;
+            case 'circle':
+                return LIST_STYLE_TYPE.CIRCLE;
+            case 'square':
+                return LIST_STYLE_TYPE.SQUARE;
+            case 'decimal':
+                return LIST_STYLE_TYPE.DECIMAL;
+            case 'cjk-decimal':
+                return LIST_STYLE_TYPE.CJK_DECIMAL;
+            case 'decimal-leading-zero':
+                return LIST_STYLE_TYPE.DECIMAL_LEADING_ZERO;
+            case 'lower-roman':
+                return LIST_STYLE_TYPE.LOWER_ROMAN;
+            case 'upper-roman':
+                return LIST_STYLE_TYPE.UPPER_ROMAN;
+            case 'lower-greek':
+                return LIST_STYLE_TYPE.LOWER_GREEK;
+            case 'lower-alpha':
+                return LIST_STYLE_TYPE.LOWER_ALPHA;
+            case 'upper-alpha':
+                return LIST_STYLE_TYPE.UPPER_ALPHA;
+            case 'arabic-indic':
+                return LIST_STYLE_TYPE.ARABIC_INDIC;
+            case 'armenian':
+                return LIST_STYLE_TYPE.ARMENIAN;
+            case 'bengali':
+                return LIST_STYLE_TYPE.BENGALI;
+            case 'cambodian':
+                return LIST_STYLE_TYPE.CAMBODIAN;
+            case 'cjk-earthly-branch':
+                return LIST_STYLE_TYPE.CJK_EARTHLY_BRANCH;
+            case 'cjk-heavenly-stem':
+                return LIST_STYLE_TYPE.CJK_HEAVENLY_STEM;
+            case 'cjk-ideographic':
+                return LIST_STYLE_TYPE.CJK_IDEOGRAPHIC;
+            case 'devanagari':
+                return LIST_STYLE_TYPE.DEVANAGARI;
+            case 'ethiopic-numeric':
+                return LIST_STYLE_TYPE.ETHIOPIC_NUMERIC;
+            case 'georgian':
+                return LIST_STYLE_TYPE.GEORGIAN;
+            case 'gujarati':
+                return LIST_STYLE_TYPE.GUJARATI;
+            case 'gurmukhi':
+                return LIST_STYLE_TYPE.GURMUKHI;
+            case 'hebrew':
+                return LIST_STYLE_TYPE.HEBREW;
+            case 'hiragana':
+                return LIST_STYLE_TYPE.HIRAGANA;
+            case 'hiragana-iroha':
+                return LIST_STYLE_TYPE.HIRAGANA_IROHA;
+            case 'japanese-formal':
+                return LIST_STYLE_TYPE.JAPANESE_FORMAL;
+            case 'japanese-informal':
+                return LIST_STYLE_TYPE.JAPANESE_INFORMAL;
+            case 'kannada':
+                return LIST_STYLE_TYPE.KANNADA;
+            case 'katakana':
+                return LIST_STYLE_TYPE.KATAKANA;
+            case 'katakana-iroha':
+                return LIST_STYLE_TYPE.KATAKANA_IROHA;
+            case 'khmer':
+                return LIST_STYLE_TYPE.KHMER;
+            case 'korean-hangul-formal':
+                return LIST_STYLE_TYPE.KOREAN_HANGUL_FORMAL;
+            case 'korean-hanja-formal':
+                return LIST_STYLE_TYPE.KOREAN_HANJA_FORMAL;
+            case 'korean-hanja-informal':
+                return LIST_STYLE_TYPE.KOREAN_HANJA_INFORMAL;
+            case 'lao':
+                return LIST_STYLE_TYPE.LAO;
+            case 'lower-armenian':
+                return LIST_STYLE_TYPE.LOWER_ARMENIAN;
+            case 'malayalam':
+                return LIST_STYLE_TYPE.MALAYALAM;
+            case 'mongolian':
+                return LIST_STYLE_TYPE.MONGOLIAN;
+            case 'myanmar':
+                return LIST_STYLE_TYPE.MYANMAR;
+            case 'oriya':
+                return LIST_STYLE_TYPE.ORIYA;
+            case 'persian':
+                return LIST_STYLE_TYPE.PERSIAN;
+            case 'simp-chinese-formal':
+                return LIST_STYLE_TYPE.SIMP_CHINESE_FORMAL;
+            case 'simp-chinese-informal':
+                return LIST_STYLE_TYPE.SIMP_CHINESE_INFORMAL;
+            case 'tamil':
+                return LIST_STYLE_TYPE.TAMIL;
+            case 'telugu':
+                return LIST_STYLE_TYPE.TELUGU;
+            case 'thai':
+                return LIST_STYLE_TYPE.THAI;
+            case 'tibetan':
+                return LIST_STYLE_TYPE.TIBETAN;
+            case 'trad-chinese-formal':
+                return LIST_STYLE_TYPE.TRAD_CHINESE_FORMAL;
+            case 'trad-chinese-informal':
+                return LIST_STYLE_TYPE.TRAD_CHINESE_INFORMAL;
+            case 'upper-armenian':
+                return LIST_STYLE_TYPE.UPPER_ARMENIAN;
+            case 'disclosure-open':
+                return LIST_STYLE_TYPE.DISCLOSURE_OPEN;
+            case 'disclosure-closed':
+                return LIST_STYLE_TYPE.DISCLOSURE_CLOSED;
+            case 'none':
+            default:
+                return LIST_STYLE_TYPE.NONE;
+        }
+    }
+};

package/src/css/property-descriptors/margin.ts

@@ -0,0 +1,13 @@
+import { IPropertyTokenValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+
+const marginForSide = (side: string): IPropertyTokenValueDescriptor => ({
+    name: `margin-${side}`,
+    initialValue: '0',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TOKEN_VALUE
+});
+
+export const marginTop: IPropertyTokenValueDescriptor = marginForSide('top');
+export const marginRight: IPropertyTokenValueDescriptor = marginForSide('right');
+export const marginBottom: IPropertyTokenValueDescriptor = marginForSide('bottom');
+export const marginLeft: IPropertyTokenValueDescriptor = marginForSide('left');

package/src/css/property-descriptors/mix-blend-mode.ts

@@ -0,0 +1,35 @@
+import { IPropertyIdentValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { Context } from '../../core/context';
+
+export const MIX_BLEND_MODE = {
+    NORMAL: 'normal',
+    MULTIPLY: 'multiply',
+    SCREEN: 'screen',
+    OVERLAY: 'overlay',
+    DARKEN: 'darken',
+    LIGHTEN: 'lighten',
+    COLOR_DODGE: 'color-dodge',
+    COLOR_BURN: 'color-burn',
+    HARD_LIGHT: 'hard-light',
+    SOFT_LIGHT: 'soft-light',
+    DIFFERENCE: 'difference',
+    EXCLUSION: 'exclusion',
+    HUE: 'hue',
+    SATURATION: 'saturation',
+    COLOR: 'color',
+    LUMINOSITY: 'luminosity'
+} as const;
+
+export type MixBlendMode = (typeof MIX_BLEND_MODE)[keyof typeof MIX_BLEND_MODE];
+
+const VALID_VALUES = new Set<string>(Object.values(MIX_BLEND_MODE));
+
+export const mixBlendMode: IPropertyIdentValueDescriptor<MixBlendMode> = {
+    name: 'mix-blend-mode',
+    initialValue: 'normal',
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    prefix: false,
+    parse: (_context: Context, token: string): MixBlendMode => {
+        return VALID_VALUES.has(token) ? (token as MixBlendMode) : MIX_BLEND_MODE.NORMAL;
+    }
+};