diff --git a/core/api.txt b/core/api.txt
index 81f5454fc2..15fd9c07d8 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -24,8 +24,8 @@ ion-action-sheet,event,ionActionSheetDidPresent,void,true
 ion-action-sheet,event,ionActionSheetDidUnload,void,true
 ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail,true
 ion-action-sheet,event,ionActionSheetWillPresent,void,true
-ion-action-sheet,style,--max-width
-ion-action-sheet,style,--width
+ion-action-sheet,css-prop,--max-width
+ion-action-sheet,css-prop,--width
 
 ion-alert-controller,method,create,create(opts: AlertOptions) => Promise<HTMLIonAlertElement>
 ion-alert-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
@@ -54,52 +54,52 @@ ion-alert,event,ionAlertDidPresent,void,true
 ion-alert,event,ionAlertDidUnload,void,true
 ion-alert,event,ionAlertWillDismiss,OverlayEventDetail,true
 ion-alert,event,ionAlertWillPresent,void,true
-ion-alert,style,--background
-ion-alert,style,--max-height
-ion-alert,style,--min-width
+ion-alert,css-prop,--background
+ion-alert,css-prop,--max-height
+ion-alert,css-prop,--min-width
 
 ion-anchor,prop,color,string | undefined,undefined,false
 ion-anchor,prop,href,string | undefined,undefined,false
 ion-anchor,prop,routerDirection,"back" | "forward" | "root",'forward',false
-ion-anchor,style,--background
-ion-anchor,style,--color
+ion-anchor,css-prop,--background
+ion-anchor,css-prop,--color
 
 ion-animation-controller,method,create,create(animationBuilder?: AnimationBuilder | undefined, baseEl?: any, opts?: any) => Promise<Animation>
 
 
-ion-avatar,style,--border-radius
+ion-avatar,css-prop,--border-radius
 
 ion-back-button,prop,color,string | undefined,undefined,false
 ion-back-button,prop,defaultHref,string | undefined,undefined,false
 ion-back-button,prop,icon,null | string | undefined,undefined,false
 ion-back-button,prop,mode,"ios" | "md",undefined,false
 ion-back-button,prop,text,null | string | undefined,undefined,false
-ion-back-button,style,--background
-ion-back-button,style,--border-radius
-ion-back-button,style,--color
-ion-back-button,style,--icon-font-size
-ion-back-button,style,--icon-font-weight
-ion-back-button,style,--icon-margin-bottom
-ion-back-button,style,--icon-margin-end
-ion-back-button,style,--icon-margin-start
-ion-back-button,style,--icon-margin-top
-ion-back-button,style,--icon-padding-bottom
-ion-back-button,style,--icon-padding-end
-ion-back-button,style,--icon-padding-start
-ion-back-button,style,--icon-padding-top
-ion-back-button,style,--margin-bottom
-ion-back-button,style,--margin-end
-ion-back-button,style,--margin-start
-ion-back-button,style,--margin-top
-ion-back-button,style,--min-height
-ion-back-button,style,--min-width
-ion-back-button,style,--opacity
-ion-back-button,style,--padding-bottom
-ion-back-button,style,--padding-end
-ion-back-button,style,--padding-start
-ion-back-button,style,--padding-top
-ion-back-button,style,--ripple-color
-ion-back-button,style,--transition
+ion-back-button,css-prop,--background
+ion-back-button,css-prop,--border-radius
+ion-back-button,css-prop,--color
+ion-back-button,css-prop,--icon-font-size
+ion-back-button,css-prop,--icon-font-weight
+ion-back-button,css-prop,--icon-margin-bottom
+ion-back-button,css-prop,--icon-margin-end
+ion-back-button,css-prop,--icon-margin-start
+ion-back-button,css-prop,--icon-margin-top
+ion-back-button,css-prop,--icon-padding-bottom
+ion-back-button,css-prop,--icon-padding-end
+ion-back-button,css-prop,--icon-padding-start
+ion-back-button,css-prop,--icon-padding-top
+ion-back-button,css-prop,--margin-bottom
+ion-back-button,css-prop,--margin-end
+ion-back-button,css-prop,--margin-start
+ion-back-button,css-prop,--margin-top
+ion-back-button,css-prop,--min-height
+ion-back-button,css-prop,--min-width
+ion-back-button,css-prop,--opacity
+ion-back-button,css-prop,--padding-bottom
+ion-back-button,css-prop,--padding-end
+ion-back-button,css-prop,--padding-start
+ion-back-button,css-prop,--padding-top
+ion-back-button,css-prop,--ripple-color
+ion-back-button,css-prop,--transition
 
 ion-backdrop,prop,stopPropagation,boolean,true,false
 ion-backdrop,prop,tappable,boolean,true,false
@@ -108,12 +108,12 @@ ion-backdrop,event,ionBackdropTap,void,true
 
 ion-badge,prop,color,string | undefined,undefined,false
 ion-badge,prop,mode,"ios" | "md",undefined,false
-ion-badge,style,--background
-ion-badge,style,--color
-ion-badge,style,--padding-bottom
-ion-badge,style,--padding-end
-ion-badge,style,--padding-start
-ion-badge,style,--padding-top
+ion-badge,css-prop,--background
+ion-badge,css-prop,--color
+ion-badge,css-prop,--padding-bottom
+ion-badge,css-prop,--padding-end
+ion-badge,css-prop,--padding-start
+ion-badge,css-prop,--padding-top
 
 ion-button,prop,buttonType,string,'button',false
 ion-button,prop,color,string | undefined,undefined,false
@@ -129,30 +129,30 @@ ion-button,prop,strong,boolean,false,false
 ion-button,prop,type,"button" | "reset" | "submit",'button',false
 ion-button,event,ionBlur,void,true
 ion-button,event,ionFocus,void,true
-ion-button,style,--background
-ion-button,style,--background-activated
-ion-button,style,--background-focused
-ion-button,style,--border-color
-ion-button,style,--border-radius
-ion-button,style,--border-style
-ion-button,style,--border-width
-ion-button,style,--box-shadow
-ion-button,style,--color
-ion-button,style,--color-activated
-ion-button,style,--color-focused
-ion-button,style,--height
-ion-button,style,--margin-bottom
-ion-button,style,--margin-end
-ion-button,style,--margin-start
-ion-button,style,--margin-top
-ion-button,style,--opacity
-ion-button,style,--padding-bottom
-ion-button,style,--padding-end
-ion-button,style,--padding-start
-ion-button,style,--padding-top
-ion-button,style,--ripple-color
-ion-button,style,--transition
-ion-button,style,--width
+ion-button,css-prop,--background
+ion-button,css-prop,--background-activated
+ion-button,css-prop,--background-focused
+ion-button,css-prop,--border-color
+ion-button,css-prop,--border-radius
+ion-button,css-prop,--border-style
+ion-button,css-prop,--border-width
+ion-button,css-prop,--box-shadow
+ion-button,css-prop,--color
+ion-button,css-prop,--color-activated
+ion-button,css-prop,--color-focused
+ion-button,css-prop,--height
+ion-button,css-prop,--margin-bottom
+ion-button,css-prop,--margin-end
+ion-button,css-prop,--margin-start
+ion-button,css-prop,--margin-top
+ion-button,css-prop,--opacity
+ion-button,css-prop,--padding-bottom
+ion-button,css-prop,--padding-end
+ion-button,css-prop,--padding-start
+ion-button,css-prop,--padding-top
+ion-button,css-prop,--ripple-color
+ion-button,css-prop,--transition
+ion-button,css-prop,--width
 
 
 ion-card-content,prop,mode,"ios" | "md",undefined,false
@@ -163,16 +163,16 @@ ion-card-header,prop,translucent,boolean,false,false
 
 ion-card-subtitle,prop,color,string | undefined,undefined,false
 ion-card-subtitle,prop,mode,"ios" | "md",undefined,false
-ion-card-subtitle,style,--color
+ion-card-subtitle,css-prop,--color
 
 ion-card-title,prop,color,string | undefined,undefined,false
 ion-card-title,prop,mode,"ios" | "md",undefined,false
-ion-card-title,style,--color
+ion-card-title,css-prop,--color
 
 ion-card,prop,color,string | undefined,undefined,false
 ion-card,prop,mode,"ios" | "md",undefined,false
-ion-card,style,--background
-ion-card,style,--color
+ion-card,css-prop,--background
+ion-card,css-prop,--color
 
 ion-checkbox,prop,checked,boolean,false,false
 ion-checkbox,prop,color,string | undefined,undefined,false
@@ -183,23 +183,23 @@ ion-checkbox,prop,value,string,'on',false
 ion-checkbox,event,ionBlur,void,true
 ion-checkbox,event,ionChange,CheckedInputChangeEvent,true
 ion-checkbox,event,ionFocus,void,true
-ion-checkbox,style,--background
-ion-checkbox,style,--background-checked
-ion-checkbox,style,--border-color
-ion-checkbox,style,--border-color-checked
-ion-checkbox,style,--border-radius
-ion-checkbox,style,--border-style
-ion-checkbox,style,--border-width
-ion-checkbox,style,--checkmark-color
-ion-checkbox,style,--height
-ion-checkbox,style,--transition
-ion-checkbox,style,--width
+ion-checkbox,css-prop,--background
+ion-checkbox,css-prop,--background-checked
+ion-checkbox,css-prop,--border-color
+ion-checkbox,css-prop,--border-color-checked
+ion-checkbox,css-prop,--border-radius
+ion-checkbox,css-prop,--border-style
+ion-checkbox,css-prop,--border-width
+ion-checkbox,css-prop,--checkmark-color
+ion-checkbox,css-prop,--height
+ion-checkbox,css-prop,--transition
+ion-checkbox,css-prop,--width
 
 ion-chip,prop,color,string | undefined,undefined,false
 ion-chip,prop,mode,"ios" | "md",undefined,false
 ion-chip,prop,outline,boolean,false,false
-ion-chip,style,--background
-ion-chip,style,--color
+ion-chip,css-prop,--background
+ion-chip,css-prop,--color
 
 ion-col,prop,offset,string | undefined,undefined,false
 ion-col,prop,offsetLg,string | undefined,undefined,false
@@ -225,13 +225,13 @@ ion-col,prop,sizeMd,string | undefined,undefined,false
 ion-col,prop,sizeSm,string | undefined,undefined,false
 ion-col,prop,sizeXl,string | undefined,undefined,false
 ion-col,prop,sizeXs,string | undefined,undefined,false
-ion-col,style,--ion-grid-column-padding
-ion-col,style,--ion-grid-column-padding-lg
-ion-col,style,--ion-grid-column-padding-md
-ion-col,style,--ion-grid-column-padding-sm
-ion-col,style,--ion-grid-column-padding-xl
-ion-col,style,--ion-grid-column-padding-xs
-ion-col,style,--ion-grid-columns
+ion-col,css-prop,--ion-grid-column-padding
+ion-col,css-prop,--ion-grid-column-padding-lg
+ion-col,css-prop,--ion-grid-column-padding-md
+ion-col,css-prop,--ion-grid-column-padding-sm
+ion-col,css-prop,--ion-grid-column-padding-xl
+ion-col,css-prop,--ion-grid-column-padding-xs
+ion-col,css-prop,--ion-grid-columns
 
 ion-content,prop,color,string | undefined,undefined,false
 ion-content,prop,forceOverscroll,boolean | undefined,undefined,false
@@ -247,15 +247,15 @@ ion-content,method,scrollToTop,scrollToTop(duration?: number) => Promise<void>
 ion-content,event,ionScroll,ScrollDetail,true
 ion-content,event,ionScrollEnd,ScrollBaseDetail,true
 ion-content,event,ionScrollStart,ScrollBaseDetail,true
-ion-content,style,--background
-ion-content,style,--color
-ion-content,style,--keyboard-offset
-ion-content,style,--offset-bottom
-ion-content,style,--offset-top
-ion-content,style,--padding-bottom
-ion-content,style,--padding-end
-ion-content,style,--padding-start
-ion-content,style,--padding-top
+ion-content,css-prop,--background
+ion-content,css-prop,--color
+ion-content,css-prop,--keyboard-offset
+ion-content,css-prop,--offset-bottom
+ion-content,css-prop,--offset-top
+ion-content,css-prop,--padding-bottom
+ion-content,css-prop,--padding-end
+ion-content,css-prop,--padding-start
+ion-content,css-prop,--padding-top
 
 ion-datetime,prop,cancelText,string,'Cancel',false
 ion-datetime,prop,dayNames,string | string[] | undefined,undefined,false
@@ -283,11 +283,11 @@ ion-datetime,event,ionBlur,void,true
 ion-datetime,event,ionCancel,void,true
 ion-datetime,event,ionChange,InputChangeEvent,true
 ion-datetime,event,ionFocus,void,true
-ion-datetime,style,--padding-bottom
-ion-datetime,style,--padding-end
-ion-datetime,style,--padding-start
-ion-datetime,style,--padding-top
-ion-datetime,style,--placeholder-color
+ion-datetime,css-prop,--padding-bottom
+ion-datetime,css-prop,--padding-end
+ion-datetime,css-prop,--padding-start
+ion-datetime,css-prop,--padding-top
+ion-datetime,css-prop,--placeholder-color
 
 ion-fab-button,prop,activated,boolean,false,false
 ion-fab-button,prop,color,string | undefined,undefined,false
@@ -300,29 +300,29 @@ ion-fab-button,prop,translucent,boolean,false,false
 ion-fab-button,prop,type,"button" | "reset" | "submit",'button',false
 ion-fab-button,event,ionBlur,void,true
 ion-fab-button,event,ionFocus,void,true
-ion-fab-button,style,--background
-ion-fab-button,style,--background-activated
-ion-fab-button,style,--background-focused
-ion-fab-button,style,--border-color
-ion-fab-button,style,--border-radius
-ion-fab-button,style,--border-style
-ion-fab-button,style,--border-width
-ion-fab-button,style,--box-shadow
-ion-fab-button,style,--color
-ion-fab-button,style,--color-activated
-ion-fab-button,style,--color-focused
-ion-fab-button,style,--height
-ion-fab-button,style,--margin-bottom
-ion-fab-button,style,--margin-end
-ion-fab-button,style,--margin-start
-ion-fab-button,style,--margin-top
-ion-fab-button,style,--padding-bottom
-ion-fab-button,style,--padding-end
-ion-fab-button,style,--padding-start
-ion-fab-button,style,--padding-top
-ion-fab-button,style,--ripple-color
-ion-fab-button,style,--transition
-ion-fab-button,style,--width
+ion-fab-button,css-prop,--background
+ion-fab-button,css-prop,--background-activated
+ion-fab-button,css-prop,--background-focused
+ion-fab-button,css-prop,--border-color
+ion-fab-button,css-prop,--border-radius
+ion-fab-button,css-prop,--border-style
+ion-fab-button,css-prop,--border-width
+ion-fab-button,css-prop,--box-shadow
+ion-fab-button,css-prop,--color
+ion-fab-button,css-prop,--color-activated
+ion-fab-button,css-prop,--color-focused
+ion-fab-button,css-prop,--height
+ion-fab-button,css-prop,--margin-bottom
+ion-fab-button,css-prop,--margin-end
+ion-fab-button,css-prop,--margin-start
+ion-fab-button,css-prop,--margin-top
+ion-fab-button,css-prop,--padding-bottom
+ion-fab-button,css-prop,--padding-end
+ion-fab-button,css-prop,--padding-start
+ion-fab-button,css-prop,--padding-top
+ion-fab-button,css-prop,--ripple-color
+ion-fab-button,css-prop,--transition
+ion-fab-button,css-prop,--width
 
 ion-fab-list,prop,activated,boolean,false,false
 ion-fab-list,prop,side,"bottom" | "end" | "start" | "top",'bottom',false
@@ -337,18 +337,18 @@ ion-footer,prop,mode,"ios" | "md",undefined,false
 ion-footer,prop,translucent,boolean,false,false
 
 ion-grid,prop,fixed,boolean,false,false
-ion-grid,style,--ion-grid-padding
-ion-grid,style,--ion-grid-padding-lg
-ion-grid,style,--ion-grid-padding-md
-ion-grid,style,--ion-grid-padding-sm
-ion-grid,style,--ion-grid-padding-xl
-ion-grid,style,--ion-grid-padding-xs
-ion-grid,style,--ion-grid-width
-ion-grid,style,--ion-grid-width-lg
-ion-grid,style,--ion-grid-width-md
-ion-grid,style,--ion-grid-width-sm
-ion-grid,style,--ion-grid-width-xl
-ion-grid,style,--ion-grid-width-xs
+ion-grid,css-prop,--ion-grid-padding
+ion-grid,css-prop,--ion-grid-padding-lg
+ion-grid,css-prop,--ion-grid-padding-md
+ion-grid,css-prop,--ion-grid-padding-sm
+ion-grid,css-prop,--ion-grid-padding-xl
+ion-grid,css-prop,--ion-grid-padding-xs
+ion-grid,css-prop,--ion-grid-width
+ion-grid,css-prop,--ion-grid-width-lg
+ion-grid,css-prop,--ion-grid-width-md
+ion-grid,css-prop,--ion-grid-width-sm
+ion-grid,css-prop,--ion-grid-width-xl
+ion-grid,css-prop,--ion-grid-width-xs
 
 ion-header,prop,mode,"ios" | "md",undefined,false
 ion-header,prop,translucent,boolean,false,false
@@ -400,25 +400,25 @@ ion-input,event,ionFocus,void,true
 ion-input,event,ionInput,KeyboardEvent,true
 ion-input,event,ionInputDidLoad,void,true
 ion-input,event,ionInputDidUnload,void,true
-ion-input,style,--background
-ion-input,style,--color
-ion-input,style,--padding-bottom
-ion-input,style,--padding-end
-ion-input,style,--padding-start
-ion-input,style,--padding-top
-ion-input,style,--placeholder-color
-ion-input,style,--placeholder-font-style
-ion-input,style,--placeholder-font-weight
-ion-input,style,--placeholder-opacity
+ion-input,css-prop,--background
+ion-input,css-prop,--color
+ion-input,css-prop,--padding-bottom
+ion-input,css-prop,--padding-end
+ion-input,css-prop,--padding-start
+ion-input,css-prop,--padding-top
+ion-input,css-prop,--placeholder-color
+ion-input,css-prop,--placeholder-font-style
+ion-input,css-prop,--placeholder-font-weight
+ion-input,css-prop,--placeholder-opacity
 
 ion-item-divider,prop,color,string | undefined,undefined,false
 ion-item-divider,prop,mode,"ios" | "md",undefined,false
-ion-item-divider,style,--background
-ion-item-divider,style,--color
-ion-item-divider,style,--padding-bottom
-ion-item-divider,style,--padding-end
-ion-item-divider,style,--padding-start
-ion-item-divider,style,--padding-top
+ion-item-divider,css-prop,--background
+ion-item-divider,css-prop,--color
+ion-item-divider,css-prop,--padding-bottom
+ion-item-divider,css-prop,--padding-end
+ion-item-divider,css-prop,--padding-start
+ion-item-divider,css-prop,--padding-top
 
 
 ion-item-option,prop,color,string | undefined,undefined,false
@@ -426,8 +426,8 @@ ion-item-option,prop,disabled,boolean,false,false
 ion-item-option,prop,expandable,boolean,false,false
 ion-item-option,prop,href,string | undefined,undefined,false
 ion-item-option,prop,mode,"ios" | "md",undefined,false
-ion-item-option,style,--background
-ion-item-option,style,--color
+ion-item-option,css-prop,--background
+ion-item-option,css-prop,--color
 
 ion-item-options,prop,side,"end" | "start",'end',false
 ion-item-options,event,ionSwipe,any,true
@@ -449,43 +449,43 @@ ion-item,prop,lines,"full" | "inset" | "none" | undefined,undefined,false
 ion-item,prop,mode,"ios" | "md",undefined,false
 ion-item,prop,routerDirection,"back" | "forward" | "root",'forward',false
 ion-item,prop,type,"button" | "reset" | "submit",'button',false
-ion-item,style,--background
-ion-item,style,--background-activated
-ion-item,style,--border-color
-ion-item,style,--border-radius
-ion-item,style,--border-style
-ion-item,style,--border-width
-ion-item,style,--box-shadow
-ion-item,style,--color
-ion-item,style,--detail-icon-color
-ion-item,style,--detail-icon-font-size
-ion-item,style,--detail-icon-opacity
-ion-item,style,--highlight-color-focused
-ion-item,style,--highlight-color-invalid
-ion-item,style,--highlight-color-valid
-ion-item,style,--highlight-height
-ion-item,style,--inner-border-width
-ion-item,style,--inner-box-shadow
-ion-item,style,--inner-padding-bottom
-ion-item,style,--inner-padding-end
-ion-item,style,--inner-padding-start
-ion-item,style,--inner-padding-top
-ion-item,style,--min-height
-ion-item,style,--padding-bottom
-ion-item,style,--padding-end
-ion-item,style,--padding-start
-ion-item,style,--padding-top
-ion-item,style,--transition
+ion-item,css-prop,--background
+ion-item,css-prop,--background-activated
+ion-item,css-prop,--border-color
+ion-item,css-prop,--border-radius
+ion-item,css-prop,--border-style
+ion-item,css-prop,--border-width
+ion-item,css-prop,--box-shadow
+ion-item,css-prop,--color
+ion-item,css-prop,--detail-icon-color
+ion-item,css-prop,--detail-icon-font-size
+ion-item,css-prop,--detail-icon-opacity
+ion-item,css-prop,--highlight-color-focused
+ion-item,css-prop,--highlight-color-invalid
+ion-item,css-prop,--highlight-color-valid
+ion-item,css-prop,--highlight-height
+ion-item,css-prop,--inner-border-width
+ion-item,css-prop,--inner-box-shadow
+ion-item,css-prop,--inner-padding-bottom
+ion-item,css-prop,--inner-padding-end
+ion-item,css-prop,--inner-padding-start
+ion-item,css-prop,--inner-padding-top
+ion-item,css-prop,--min-height
+ion-item,css-prop,--padding-bottom
+ion-item,css-prop,--padding-end
+ion-item,css-prop,--padding-start
+ion-item,css-prop,--padding-top
+ion-item,css-prop,--transition
 
 ion-label,prop,color,string | undefined,undefined,false
 ion-label,prop,mode,"ios" | "md",undefined,false
 ion-label,prop,position,"fixed" | "floating" | "stacked" | undefined,undefined,false
-ion-label,style,--color
+ion-label,css-prop,--color
 
 ion-list-header,prop,color,string | undefined,undefined,false
 ion-list-header,prop,mode,"ios" | "md",undefined,false
-ion-list-header,style,--background
-ion-list-header,style,--color
+ion-list-header,css-prop,--background
+ion-list-header,css-prop,--color
 
 ion-list,prop,inset,boolean,false,false
 ion-list,prop,lines,"full" | "inset" | "none" | undefined,undefined,false
@@ -523,7 +523,7 @@ ion-menu-button,prop,autoHide,boolean,true,false
 ion-menu-button,prop,color,string | undefined,undefined,false
 ion-menu-button,prop,menu,string | undefined,undefined,false
 ion-menu-button,prop,mode,"ios" | "md",undefined,false
-ion-menu-button,style,--color
+ion-menu-button,css-prop,--color
 
 ion-menu-controller,method,close,close(menuId?: string | null | undefined) => Promise<boolean>
 ion-menu-controller,method,enable,enable(shouldEnable: boolean, menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
@@ -558,9 +558,9 @@ ion-menu,event,ionDidClose,void,true
 ion-menu,event,ionDidOpen,void,true
 ion-menu,event,ionWillClose,void,true
 ion-menu,event,ionWillOpen,void,true
-ion-menu,style,--background
-ion-menu,style,--width
-ion-menu,style,--width-small
+ion-menu,css-prop,--background
+ion-menu,css-prop,--width
+ion-menu,css-prop,--width-small
 
 ion-modal-controller,method,create,create<T extends ComponentRef>(opts: ModalOptions<T>) => Promise<HTMLIonModalElement>
 ion-modal-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
@@ -618,7 +618,7 @@ ion-nav,event,ionNavWillLoad,void,true
 
 ion-note,prop,color,string | undefined,undefined,false
 ion-note,prop,mode,"ios" | "md",undefined,false
-ion-note,style,--color
+ion-note,css-prop,--color
 
 
 ion-picker-controller,method,create,create(opts: PickerOptions) => Promise<HTMLIonPickerElement>
@@ -691,8 +691,8 @@ ion-radio,event,ionFocus,void,true
 ion-radio,event,ionRadioDidLoad,void,true
 ion-radio,event,ionRadioDidUnload,void,true
 ion-radio,event,ionSelect,CheckedInputChangeEvent,true
-ion-radio,style,--color
-ion-radio,style,--color-checked
+ion-radio,css-prop,--color
+ion-radio,css-prop,--color-checked
 
 ion-range,prop,color,string | undefined,undefined,false
 ion-range,prop,debounce,number,0,false
@@ -709,14 +709,14 @@ ion-range,prop,value,number | { lower: number; upper: number; },0,false
 ion-range,event,ionBlur,void,true
 ion-range,event,ionChange,InputChangeEvent,true
 ion-range,event,ionFocus,void,true
-ion-range,style,--bar-background
-ion-range,style,--bar-background-active
-ion-range,style,--bar-height
-ion-range,style,--height
-ion-range,style,--knob-background
-ion-range,style,--knob-border-radius
-ion-range,style,--knob-box-shadow
-ion-range,style,--knob-size
+ion-range,css-prop,--bar-background
+ion-range,css-prop,--bar-background-active
+ion-range,css-prop,--bar-height
+ion-range,css-prop,--height
+ion-range,css-prop,--knob-background
+ion-range,css-prop,--knob-border-radius
+ion-range,css-prop,--knob-box-shadow
+ion-range,css-prop,--knob-size
 
 ion-refresher-content,prop,pullingIcon,null | string | undefined,undefined,false
 ion-refresher-content,prop,pullingText,string | undefined,undefined,false
@@ -785,15 +785,15 @@ ion-searchbar,event,ionChange,TextInputChangeEvent,true
 ion-searchbar,event,ionClear,void,true
 ion-searchbar,event,ionFocus,void,true
 ion-searchbar,event,ionInput,KeyboardEvent,true
-ion-searchbar,style,--background
-ion-searchbar,style,--cancel-button-color
-ion-searchbar,style,--clear-button-color
-ion-searchbar,style,--color
-ion-searchbar,style,--icon-color
-ion-searchbar,style,--placeholder-color
-ion-searchbar,style,--placeholder-font-style
-ion-searchbar,style,--placeholder-font-weight
-ion-searchbar,style,--placeholder-opacity
+ion-searchbar,css-prop,--background
+ion-searchbar,css-prop,--cancel-button-color
+ion-searchbar,css-prop,--clear-button-color
+ion-searchbar,css-prop,--color
+ion-searchbar,css-prop,--icon-color
+ion-searchbar,css-prop,--placeholder-color
+ion-searchbar,css-prop,--placeholder-font-style
+ion-searchbar,css-prop,--placeholder-font-weight
+ion-searchbar,css-prop,--placeholder-opacity
 
 ion-segment-button,prop,checked,boolean,false,false
 ion-segment-button,prop,color,string | undefined,undefined,false
@@ -802,30 +802,30 @@ ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-
 ion-segment-button,prop,mode,"ios" | "md",undefined,false
 ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false
 ion-segment-button,event,ionSelect,void,true
-ion-segment-button,style,--background
-ion-segment-button,style,--background-activated
-ion-segment-button,style,--background-checked
-ion-segment-button,style,--background-hover
-ion-segment-button,style,--border-color
-ion-segment-button,style,--border-radius
-ion-segment-button,style,--border-style
-ion-segment-button,style,--border-width
-ion-segment-button,style,--color
-ion-segment-button,style,--color-activated
-ion-segment-button,style,--color-checked
-ion-segment-button,style,--color-checked-disabled
-ion-segment-button,style,--color-disabled
-ion-segment-button,style,--indicator-color
-ion-segment-button,style,--indicator-color-checked
-ion-segment-button,style,--margin-bottom
-ion-segment-button,style,--margin-end
-ion-segment-button,style,--margin-start
-ion-segment-button,style,--margin-top
-ion-segment-button,style,--padding-bottom
-ion-segment-button,style,--padding-end
-ion-segment-button,style,--padding-start
-ion-segment-button,style,--padding-top
-ion-segment-button,style,--transition
+ion-segment-button,css-prop,--background
+ion-segment-button,css-prop,--background-activated
+ion-segment-button,css-prop,--background-checked
+ion-segment-button,css-prop,--background-hover
+ion-segment-button,css-prop,--border-color
+ion-segment-button,css-prop,--border-radius
+ion-segment-button,css-prop,--border-style
+ion-segment-button,css-prop,--border-width
+ion-segment-button,css-prop,--color
+ion-segment-button,css-prop,--color-activated
+ion-segment-button,css-prop,--color-checked
+ion-segment-button,css-prop,--color-checked-disabled
+ion-segment-button,css-prop,--color-disabled
+ion-segment-button,css-prop,--indicator-color
+ion-segment-button,css-prop,--indicator-color-checked
+ion-segment-button,css-prop,--margin-bottom
+ion-segment-button,css-prop,--margin-end
+ion-segment-button,css-prop,--margin-start
+ion-segment-button,css-prop,--margin-top
+ion-segment-button,css-prop,--padding-bottom
+ion-segment-button,css-prop,--padding-end
+ion-segment-button,css-prop,--padding-start
+ion-segment-button,css-prop,--padding-top
+ion-segment-button,css-prop,--transition
 
 ion-segment,prop,color,string | undefined,undefined,false
 ion-segment,prop,disabled,boolean,false,false
@@ -860,16 +860,16 @@ ion-select,event,ionBlur,void,true
 ion-select,event,ionCancel,void,true
 ion-select,event,ionChange,SelectInputChangeEvent,true
 ion-select,event,ionFocus,void,true
-ion-select,style,--color
-ion-select,style,--icon-color
-ion-select,style,--padding-bottom
-ion-select,style,--padding-end
-ion-select,style,--padding-start
-ion-select,style,--padding-top
-ion-select,style,--placeholder-color
+ion-select,css-prop,--color
+ion-select,css-prop,--icon-color
+ion-select,css-prop,--padding-bottom
+ion-select,css-prop,--padding-end
+ion-select,css-prop,--padding-start
+ion-select,css-prop,--padding-top
+ion-select,css-prop,--placeholder-color
 
 ion-skeleton-text,prop,width,string,'100%',false
-ion-skeleton-text,style,--background
+ion-skeleton-text,css-prop,--background
 
 
 ion-slides,prop,mode,"ios" | "md",undefined,false
@@ -906,29 +906,29 @@ ion-slides,event,ionSlideTouchStart,void,true
 ion-slides,event,ionSlideTransitionEnd,void,true
 ion-slides,event,ionSlideTransitionStart,void,true
 ion-slides,event,ionSlideWillChange,void,true
-ion-slides,style,--bullet-background
-ion-slides,style,--bullet-background-active
+ion-slides,css-prop,--bullet-background
+ion-slides,css-prop,--bullet-background-active
 
 ion-spinner,prop,color,string | undefined,undefined,false
 ion-spinner,prop,duration,number | undefined,undefined,false
 ion-spinner,prop,name,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | undefined,undefined,false
 ion-spinner,prop,paused,boolean,false,false
-ion-spinner,style,--color
+ion-spinner,css-prop,--color
 
 ion-split-pane,prop,disabled,boolean,false,false
 ion-split-pane,prop,when,boolean | string,QUERY['lg'],false
 ion-split-pane,event,ionChange,{visible: boolean},false
 ion-split-pane,event,ionSplitPaneVisible,void,true
-ion-split-pane,style,--border
+ion-split-pane,css-prop,--border
 
 ion-tab-bar,prop,color,string | undefined,undefined,false
 ion-tab-bar,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide",'icon-top',false
 ion-tab-bar,prop,mode,"ios" | "md",undefined,false
 ion-tab-bar,prop,selectedTab,string | undefined,undefined,false
 ion-tab-bar,prop,translucent,boolean,false,false
-ion-tab-bar,style,--background
-ion-tab-bar,style,--border
-ion-tab-bar,style,--color
+ion-tab-bar,css-prop,--background
+ion-tab-bar,css-prop,--border
+ion-tab-bar,css-prop,--color
 
 ion-tab-button,prop,color,string | undefined,undefined,false
 ion-tab-button,prop,disabled,boolean,false,false
@@ -936,15 +936,15 @@ ion-tab-button,prop,href,string | undefined,undefined,false
 ion-tab-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,undefined,false
 ion-tab-button,prop,mode,"ios" | "md",undefined,false
 ion-tab-button,prop,tab,string,undefined,false
-ion-tab-button,style,--background
-ion-tab-button,style,--background-selected
-ion-tab-button,style,--color
-ion-tab-button,style,--color-selected
-ion-tab-button,style,--padding-bottom
-ion-tab-button,style,--padding-end
-ion-tab-button,style,--padding-start
-ion-tab-button,style,--padding-top
-ion-tab-button,style,--ripple-color
+ion-tab-button,css-prop,--background
+ion-tab-button,css-prop,--background-selected
+ion-tab-button,css-prop,--color
+ion-tab-button,css-prop,--color-selected
+ion-tab-button,css-prop,--padding-bottom
+ion-tab-button,css-prop,--padding-end
+ion-tab-button,css-prop,--padding-start
+ion-tab-button,css-prop,--padding-top
+ion-tab-button,css-prop,--ripple-color
 
 ion-tab,prop,component,Function | HTMLElement | null | string | undefined,undefined,false
 ion-tab,prop,tab,string,undefined,false
@@ -984,23 +984,23 @@ ion-textarea,event,ionBlur,void,true
 ion-textarea,event,ionChange,TextInputChangeEvent,true
 ion-textarea,event,ionFocus,void,true
 ion-textarea,event,ionInput,KeyboardEvent,true
-ion-textarea,style,--background
-ion-textarea,style,--border-radius
-ion-textarea,style,--color
-ion-textarea,style,--padding-bottom
-ion-textarea,style,--padding-end
-ion-textarea,style,--padding-start
-ion-textarea,style,--padding-top
-ion-textarea,style,--placeholder-color
-ion-textarea,style,--placeholder-font-style
-ion-textarea,style,--placeholder-font-weight
-ion-textarea,style,--placeholder-opacity
+ion-textarea,css-prop,--background
+ion-textarea,css-prop,--border-radius
+ion-textarea,css-prop,--color
+ion-textarea,css-prop,--padding-bottom
+ion-textarea,css-prop,--padding-end
+ion-textarea,css-prop,--padding-start
+ion-textarea,css-prop,--padding-top
+ion-textarea,css-prop,--placeholder-color
+ion-textarea,css-prop,--placeholder-font-style
+ion-textarea,css-prop,--placeholder-font-weight
+ion-textarea,css-prop,--placeholder-opacity
 
-ion-thumbnail,style,--border-radius
-ion-thumbnail,style,--size
+ion-thumbnail,css-prop,--border-radius
+ion-thumbnail,css-prop,--size
 
 ion-title,prop,color,string | undefined,undefined,false
-ion-title,style,--color
+ion-title,css-prop,--color
 
 ion-toast-controller,method,create,create(opts?: ToastOptions | undefined) => Promise<HTMLIonToastElement>
 ion-toast-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
@@ -1029,9 +1029,9 @@ ion-toast,event,ionToastDidPresent,void,true
 ion-toast,event,ionToastDidUnload,void,true
 ion-toast,event,ionToastWillDismiss,OverlayEventDetail,true
 ion-toast,event,ionToastWillPresent,void,true
-ion-toast,style,--background
-ion-toast,style,--button-color
-ion-toast,style,--color
+ion-toast,css-prop,--background
+ion-toast,css-prop,--button-color
+ion-toast,css-prop,--color
 
 ion-toggle,prop,checked,boolean,false,false
 ion-toggle,prop,color,string | undefined,undefined,false
@@ -1042,24 +1042,24 @@ ion-toggle,prop,value,null | string | undefined,'on',false
 ion-toggle,event,ionBlur,void,true
 ion-toggle,event,ionChange,CheckedInputChangeEvent,true
 ion-toggle,event,ionFocus,void,true
-ion-toggle,style,--background
-ion-toggle,style,--background-checked
-ion-toggle,style,--handle-background
-ion-toggle,style,--handle-background-checked
+ion-toggle,css-prop,--background
+ion-toggle,css-prop,--background-checked
+ion-toggle,css-prop,--handle-background
+ion-toggle,css-prop,--handle-background-checked
 
 ion-toolbar,prop,color,string | undefined,undefined,false
 ion-toolbar,prop,mode,"ios" | "md",undefined,false
-ion-toolbar,style,--background
-ion-toolbar,style,--border-color
-ion-toolbar,style,--border-style
-ion-toolbar,style,--border-width
-ion-toolbar,style,--color
-ion-toolbar,style,--min-height
-ion-toolbar,style,--opacity
-ion-toolbar,style,--padding-bottom
-ion-toolbar,style,--padding-end
-ion-toolbar,style,--padding-start
-ion-toolbar,style,--padding-top
+ion-toolbar,css-prop,--background
+ion-toolbar,css-prop,--border-color
+ion-toolbar,css-prop,--border-style
+ion-toolbar,css-prop,--border-width
+ion-toolbar,css-prop,--color
+ion-toolbar,css-prop,--min-height
+ion-toolbar,css-prop,--opacity
+ion-toolbar,css-prop,--padding-bottom
+ion-toolbar,css-prop,--padding-end
+ion-toolbar,css-prop,--padding-start
+ion-toolbar,css-prop,--padding-top
 
 ion-virtual-scroll,prop,approxFooterHeight,number,40,false
 ion-virtual-scroll,prop,approxHeaderHeight,number,40,false
diff --git a/core/scripts/api-spec-generator.js b/core/scripts/api-spec-generator.js
index b8f93f3076..fbbe9447e9 100644
--- a/core/scripts/api-spec-generator.js
+++ b/core/scripts/api-spec-generator.js
@@ -28,7 +28,7 @@ function generateComponent(component, content) {
     content.push(`${component.tag},event,${prop.event},${prop.detail},${prop.bubbles}`);
   });
   component.styles.forEach(prop => {
-    content.push(`${component.tag},style,${prop.name}`);
+    content.push(`${component.tag},css-prop,${prop.name}`);
   });
 }