How to use the @nativescript/core/ui/core/properties.CssProperty function in @nativescript/core

import { CssProperty } from '@nativescript/core/ui/core/properties';
import { Color } from '@nativescript/core/color';
import { Style } from '@nativescript/core/ui/styling/style';
import { booleanConverter } from '@nativescript/core/ui/core/view-base';

export const trackBackgroundColorProperty = new CssProperty({
    name: 'trackBackgroundColor',
    cssName: 'track-background-color',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
trackBackgroundColorProperty.register(Style);
export const thumbColorProperty = new CssProperty({
    cssName: 'thumb-color',
    name: 'thumbColor',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
thumbColorProperty.register(Style);

export const trackFillColorProperty = new CssProperty({
    cssName: 'track-fill-color',
    name: 'trackFillColor',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
trackFillColorProperty.register(Style);
export const thumbHollowAtStartProperty = new CssProperty({
    cssName: 'thumb-hollow-at-start',

cssName: string,
  inherited = false,
  defaultValue?: T,
  valueConverter?: (value: string) => T,
): CssProperty {
  let property: CssProperty | InheritedCssProperty;

  if (inherited) {
    property = new InheritedCssProperty({
      name,
      cssName,
      defaultValue,
      valueConverter,
    });
  } else {
    property = new CssProperty({
      name,
      cssName,
      defaultValue,
      valueConverter,
    });
  }

  Object.defineProperty(viewClass.prototype, name, {
    set(this: ViewClass, value: T) {
      this.style[name] = value;
    },
    get(this: ViewClass) {
      return this.style[name];
    },
  });

export const rippleColorProperty = new CssProperty({
    name: 'rippleColor',
    cssName: 'ripple-color',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
rippleColorProperty.register(Style);
export const elevationProperty = new CssProperty({
    name: 'elevation',
    cssName: 'elevation',

    valueConverter: parseFloat
});
elevationProperty.register(Style);
export const dynamicElevationOffsetProperty = new CssProperty({
    name: 'dynamicElevationOffset',
    cssName: 'dynamic-elevation-offset',

    valueConverter: parseFloat
});
dynamicElevationOffsetProperty.register(Style);

export const variantProperty = new CssProperty({
    name: 'variant',
    cssName: 'variant'
});
variantProperty.register(Style);

const textAlignmentConverter = makeParser(makeValidator('initial', 'top', 'middle', 'bottom'));
export const verticalTextAlignmentProperty = new InheritedCssProperty({
    name: 'verticalTextAlignment',

function createSetter(key) {
    return function(newVal) {
        this.style[key] = newVal;
    };
}

export const cssProperty = (target: Object, key: string | symbol) => {
    Object.defineProperty(target, key, {
        get: createGetter(key),
        set: createSetter(key),
        enumerable: true,
        configurable: true
    });
};

export const rippleColorProperty = new CssProperty({
    name: 'rippleColor',
    cssName: 'ripple-color',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
rippleColorProperty.register(Style);
export const elevationProperty = new CssProperty({
    name: 'elevation',
    cssName: 'elevation',

    valueConverter: parseFloat
});
elevationProperty.register(Style);
export const dynamicElevationOffsetProperty = new CssProperty({
    name: 'dynamicElevationOffset',
    cssName: 'dynamic-elevation-offset',

import { Style } from '@nativescript/core/ui/styling/style';
import { booleanConverter } from '@nativescript/core/ui/core/view-base';

export const errorColorProperty = new CssProperty({
    name: 'errorColor',
    cssName: 'error-color',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
errorColorProperty.register(Style);
export const helperProperty = new CssProperty({
    name: 'helper',
    cssName: 'helper'
});
helperProperty.register(Style);
export const errorProperty = new CssProperty({
    name: 'error',
    cssName: 'error'
});
errorProperty.register(Style);
export const maxLengthProperty = new CssProperty({
    name: 'maxLength',
    cssName: 'max-length',
    valueConverter: v => parseFloat(v)
});
maxLengthProperty.register(Style);
export const floatingProperty = new CssProperty({
    name: 'floating',
    cssName: 'floating',
    valueConverter: booleanConverter
});
floatingProperty.register(Style);

});
maxLengthProperty.register(Style);
export const floatingProperty = new CssProperty({
    name: 'floating',
    cssName: 'floating',
    valueConverter: booleanConverter
});
floatingProperty.register(Style);
export const floatingColorProperty = new CssProperty({
    name: 'floatingColor',
    cssName: 'floating-color',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
floatingColorProperty.register(Style);
export const strokeColorProperty = new CssProperty({
    name: 'strokeColor',
    cssName: 'stroke-color',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
strokeColorProperty.register(Style);
export const buttonColorProperty = new CssProperty({
    name: 'buttonColor',
    cssName: 'button-color',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
buttonColorProperty.register(Style);

name: 'helper',
    cssName: 'helper'
});
helperProperty.register(Style);
export const errorProperty = new CssProperty({
    name: 'error',
    cssName: 'error'
});
errorProperty.register(Style);
export const maxLengthProperty = new CssProperty({
    name: 'maxLength',
    cssName: 'max-length',
    valueConverter: v => parseFloat(v)
});
maxLengthProperty.register(Style);
export const floatingProperty = new CssProperty({
    name: 'floating',
    cssName: 'floating',
    valueConverter: booleanConverter
});
floatingProperty.register(Style);
export const floatingColorProperty = new CssProperty({
    name: 'floatingColor',
    cssName: 'floating-color',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
floatingColorProperty.register(Style);
export const strokeColorProperty = new CssProperty({
    name: 'strokeColor',
    cssName: 'stroke-color',
    equalityComparer: Color.equals,

Object.defineProperty(target, key, {
        get: createGetter(key),
        set: createSetter(key),
        enumerable: true,
        configurable: true
    });
};

export const rippleColorProperty = new CssProperty({
    name: 'rippleColor',
    cssName: 'ripple-color',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
rippleColorProperty.register(Style);
export const elevationProperty = new CssProperty({
    name: 'elevation',
    cssName: 'elevation',

    valueConverter: parseFloat
});
elevationProperty.register(Style);
export const dynamicElevationOffsetProperty = new CssProperty({
    name: 'dynamicElevationOffset',
    cssName: 'dynamic-elevation-offset',

    valueConverter: parseFloat
});
dynamicElevationOffsetProperty.register(Style);

export const variantProperty = new CssProperty({
    name: 'variant',

import { Color } from '@nativescript/core/color';
import { CssProperty, Style } from '@nativescript/core/ui/core/properties';
import { CSSType } from '@nativescript/core/ui/core/view';
import { Progress as NSProgress } from '@nativescript/core/ui/progress';

@CSSType('MDProgress')
export abstract class ProgressBase extends NSProgress {}

export const progressColorProperty = new CssProperty({
    cssName: 'progress-color',
    name: 'progressColor',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
export const progressBackgroundColorProperty = new CssProperty({
    cssName: 'progress-background-color',
    name: 'progressBackgroundColor',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
progressColorProperty.register(Style);
progressBackgroundColorProperty.register(Style);

cssName: 'error'
});
errorProperty.register(Style);
export const maxLengthProperty = new CssProperty({
    name: 'maxLength',
    cssName: 'max-length',
    valueConverter: v => parseFloat(v)
});
maxLengthProperty.register(Style);
export const floatingProperty = new CssProperty({
    name: 'floating',
    cssName: 'floating',
    valueConverter: booleanConverter
});
floatingProperty.register(Style);
export const floatingColorProperty = new CssProperty({
    name: 'floatingColor',
    cssName: 'floating-color',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
floatingColorProperty.register(Style);
export const strokeColorProperty = new CssProperty({
    name: 'strokeColor',
    cssName: 'stroke-color',
    equalityComparer: Color.equals,
    valueConverter: v => new Color(v)
});
strokeColorProperty.register(Style);
export const buttonColorProperty = new CssProperty({
    name: 'buttonColor',
    cssName: 'button-color',