refactor(css): remove CSS util attributes (#18956)

BREAKING CHANGES

Removes all CSS utility attributes. Please use CSS classes instead. See the documentation for the correct class names: https://ionicframework.com/docs/layout/css-utilities

angular/src/directives/css-utils-deprecations.ts

@@ -1,134 +0,0 @@
-import { Directive, ElementRef } from '@angular/core';
-
-@Directive({
-  selector: '[align-self-start], [align-self-end], [align-self-center], [align-self-stretch], [align-self-baseline], [align-self-auto], [wrap-reverse], [justify-content-start], [justify-content-center], [justify-content-end], [justify-content-around], [justify-content-between], [justify-content-evenly], [align-items-start], [align-items-center], [align-items-end], [align-items-stretch], [align-items-baseline], [float-left], [float-right], [float-start], [float-end], [float-sm-left], [float-sm-right], [float-sm-start], [float-sm-end], [float-md-left], [float-md-right], [float-md-start], [float-md-end], [float-lg-left], [float-lg-right], [float-lg-start], [float-lg-end], [float-xl-left], [float-xl-right], [float-xl-start], [float-xl-end], [text-center], [text-justify], [text-start], [text-end], [text-left], [text-right], [text-nowrap], [text-wrap], [text-sm-center], [text-sm-justify], [text-sm-start], [text-sm-end], [text-sm-left], [text-sm-right], [text-sm-nowrap], [text-sm-wrap], [text-md-center], [text-md-justify], [text-md-start], [text-md-end], [text-md-left], [text-md-right], [text-md-nowrap], [text-md-wrap], [text-lg-center], [text-lg-justify], [text-lg-start], [text-lg-end], [text-lg-left], [text-lg-right], [text-lg-nowrap], [text-lg-wrap], [text-xl-center], [text-xl-justify], [text-xl-start], [text-xl-end], [text-xl-left], [text-xl-right], [text-xl-nowrap], [text-xl-wrap], [text-uppercase], [text-lowercase], [text-capitalize], [text-sm-uppercase], [text-sm-lowercase], [text-sm-capitalize], [text-md-uppercase], [text-md-lowercase], [text-md-capitalize], [text-lg-uppercase], [text-lg-lowercase], [text-lg-capitalize], [text-xl-uppercase], [text-xl-lowercase], [text-xl-capitalize], [no-padding], [padding], [padding-top], [padding-bottom], [padding-start], [padding-end], [padding-vertical], [padding-horizontal], [no-margin], [margin], [margin-top], [margin-bottom], [margin-start], [margin-end], [margin-vertical], [margin-horizontal]',
-})
-export class CssUtilsDeprecations {
-  constructor(ref: ElementRef) {
-    const el = (ref.nativeElement as HTMLElement);
-    const attributes = Array.from(el.attributes)
-      .map(a => a.name)
-      .filter(n => DEPRECATED_ATTRIBUTES.includes(n));
-
-    if (attributes.length > 0) {
-      console.warn(`[DEPRECATED][CSS] Ionic CSS attributes are deprecated.
-Replace:
-'<${el.tagName.toLowerCase()} ${attributes.map(n => `${n}`).join(' ')}>'
-
-With:
-'<${el.tagName.toLowerCase()} class="${attributes.map(n => `ion-${n}`).join(' ')}">'
-      `);
-    }
-  }
-}
-const DEPRECATED_ATTRIBUTES = [
-  'align-self-start',
-  'align-self-end',
-  'align-self-center',
-  'align-self-stretch',
-  'align-self-baseline',
-  'align-self-auto',
-  'wrap-reverse',
-  'justify-content-start',
-  'justify-content-center',
-  'justify-content-end',
-  'justify-content-around',
-  'justify-content-between',
-  'justify-content-evenly',
-  'align-items-start',
-  'align-items-center',
-  'align-items-end',
-  'align-items-stretch',
-  'align-items-baseline',
-  'float-left',
-  'float-right',
-  'float-start',
-  'float-end',
-  'float-sm-left',
-  'float-sm-right',
-  'float-sm-start',
-  'float-sm-end',
-  'float-md-left',
-  'float-md-right',
-  'float-md-start',
-  'float-md-end',
-  'float-lg-left',
-  'float-lg-right',
-  'float-lg-start',
-  'float-lg-end',
-  'float-xl-left',
-  'float-xl-right',
-  'float-xl-start',
-  'float-xl-end',
-  'text-center',
-  'text-justify',
-  'text-start',
-  'text-end',
-  'text-left',
-  'text-right',
-  'text-nowrap',
-  'text-wrap',
-  'text-sm-center',
-  'text-sm-justify',
-  'text-sm-start',
-  'text-sm-end',
-  'text-sm-left',
-  'text-sm-right',
-  'text-sm-nowrap',
-  'text-sm-wrap',
-  'text-md-center',
-  'text-md-justify',
-  'text-md-start',
-  'text-md-end',
-  'text-md-left',
-  'text-md-right',
-  'text-md-nowrap',
-  'text-md-wrap',
-  'text-lg-center',
-  'text-lg-justify',
-  'text-lg-start',
-  'text-lg-end',
-  'text-lg-left',
-  'text-lg-right',
-  'text-lg-nowrap',
-  'text-lg-wrap',
-  'text-xl-center',
-  'text-xl-justify',
-  'text-xl-start',
-  'text-xl-end',
-  'text-xl-left',
-  'text-xl-right',
-  'text-xl-nowrap',
-  'text-xl-wrap',
-  'text-uppercase',
-  'text-lowercase',
-  'text-capitalize',
-  'text-sm-uppercase',
-  'text-sm-lowercase',
-  'text-sm-capitalize',
-  'text-md-uppercase',
-  'text-md-lowercase',
-  'text-md-capitalize',
-  'text-lg-uppercase',
-  'text-lg-lowercase',
-  'text-lg-capitalize',
-  'text-xl-uppercase',
-  'text-xl-lowercase',
-  'text-xl-capitalize',
-  'no-padding',
-  'padding',
-  'padding-top',
-  'padding-bottom',
-  'padding-start',
-  'padding-end',
-  'padding-vertical',
-  'padding-horizontal',
-  'no-margin',
-  'margin',
-  'margin-top',
-  'margin-bottom',
-  'margin-start',
-  'margin-end',
-  'margin-vertical',
-  'margin-horizontal'
-];

angular/src/index.ts

@@ -14,7 +14,6 @@ export { IonVirtualScroll } from './directives/virtual-scroll/virtual-scroll';
 export { VirtualItem } from './directives/virtual-scroll/virtual-item';
 export { VirtualHeader } from './directives/virtual-scroll/virtual-header';
 export { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
-export { CssUtilsDeprecations } from './directives/css-utils-deprecations';
 export * from './directives/proxies';
 
 // PROVIDERS

angular/src/ionic-module.ts

@@ -8,7 +8,6 @@ import { NumericValueAccessor } from './directives/control-value-accessors/numer
 import { RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor';
 import { SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
 import { TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
-import { CssUtilsDeprecations } from './directives/css-utils-deprecations';
 import { IonBackButtonDelegate } from './directives/navigation/ion-back-button';
 import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
 import { IonTabs } from './directives/navigation/ion-tabs';
@@ -117,10 +116,7 @@ const DECLARATIONS = [
   VirtualFooter,
   VirtualHeader,
   VirtualItem,
-  IonVirtualScroll,
+  IonVirtualScroll
-
-  // Deprecations
-  CssUtilsDeprecations
 ];
 
 @NgModule({

core/src/css/flex-utils.scss

@@ -6,33 +6,27 @@
 // Align Self
 // --------------------------------------------------
 
-.ion-align-self-start,
+.ion-align-self-start {
-[align-self-start] {
   align-self: flex-start !important;
 }
 
-.ion-align-self-end,
+.ion-align-self-end {
-[align-self-end] {
   align-self: flex-end !important;
 }
 
-.ion-align-self-center,
+.ion-align-self-center {
-[align-self-center] {
   align-self: center !important;
 }
 
-.ion-align-self-stretch,
+.ion-align-self-stretch {
-[align-self-stretch] {
   align-self: stretch !important;
 }
 
-.ion-align-self-baseline,
+.ion-align-self-baseline {
-[align-self-baseline] {
   align-self: baseline !important;
 }
 
-.ion-align-self-auto,
+.ion-align-self-auto {
-[align-self-auto] {
   align-self: auto !important;
 }
 
@@ -40,18 +34,15 @@
 // Flex Wrap
 // --------------------------------------------------
 
-.ion-wrap,
+.ion-wrap {
-[wrap] {
   flex-wrap: wrap !important;
 }
 
-.ion-nowrap,
+.ion-nowrap {
-[nowrap] {
   flex-wrap: nowrap !important;
 }
 
-.ion-wrap-reverse,
+.ion-wrap-reverse {
-[wrap-reverse] {
   flex-wrap: wrap-reverse !important;
 }
 
@@ -59,33 +50,27 @@
 // Justify Content
 // --------------------------------------------------
 
-.ion-justify-content-start,
+.ion-justify-content-start {
-[justify-content-start] {
   justify-content: flex-start !important;
 }
 
-.ion-justify-content-center,
+.ion-justify-content-center {
-[justify-content-center] {
   justify-content: center !important;
 }
 
-.ion-justify-content-end,
+.ion-justify-content-end {
-[justify-content-end] {
   justify-content: flex-end !important;
 }
 
-.ion-justify-content-around,
+.ion-justify-content-around {
-[justify-content-around] {
   justify-content: space-around !important;
 }
 
-.ion-justify-content-between,
+.ion-justify-content-between {
-[justify-content-between] {
   justify-content: space-between !important;
 }
 
-.ion-justify-content-evenly,
+.ion-justify-content-evenly {
-[justify-content-evenly] {
   justify-content: space-evenly !important;
 }
 
@@ -93,27 +78,22 @@
 // Align Items
 // --------------------------------------------------
 
-.ion-align-items-start,
+.ion-align-items-start {
-[align-items-start] {
   align-items: flex-start !important;
 }
 
-.ion-align-items-center,
+.ion-align-items-center {
-[align-items-center] {
   align-items: center !important;
 }
 
-.ion-align-items-end,
+.ion-align-items-end {
-[align-items-end] {
   align-items: flex-end !important;
 }
 
-.ion-align-items-stretch,
+.ion-align-items-stretch {
-[align-items-stretch] {
   align-items: stretch !important;
 }
 
-.ion-align-items-baseline,
+.ion-align-items-baseline {
-[align-items-baseline] {
   align-items: baseline !important;
 }

core/src/css/float-elements.scss

@@ -12,23 +12,19 @@
   @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
     // Provide `.ion-float-{bp}-{side}` classes for floating the element based
     // on the breakpoint and side
-    .ion-float#{$infix}-left,
+    .ion-float#{$infix}-left {
-    [float#{$infix}-left] {
       @include float(left, !important);
     }
 
-    .ion-float#{$infix}-right,
+    .ion-float#{$infix}-right {
-    [float#{$infix}-right] {
       @include float(right, !important);
     }
 
-    .ion-float#{$infix}-start,
+    .ion-float#{$infix}-start {
-    [float#{$infix}-start] {
       @include float(start, !important);
     }
 
-    .ion-float#{$infix}-end,
+    .ion-float#{$infix}-end {
-    [float#{$infix}-end] {
       @include float(end, !important);
     }
   }

core/src/css/padding.scss

@@ -14,8 +14,7 @@ $margin: var(--ion-margin, 16px);
 // Padding
 // --------------------------------------------------
 
-.ion-no-padding,
+.ion-no-padding {
-[no-padding] {
   --padding-start: 0;
   --padding-end: 0;
   --padding-top: 0;
@@ -24,8 +23,7 @@ $margin: var(--ion-margin, 16px);
   @include padding(0);
 }
 
-.ion-padding,
+.ion-padding {
-[padding] {
   --padding-start: #{$padding};
   --padding-end: #{$padding};
   --padding-top: #{$padding};
@@ -34,44 +32,38 @@ $margin: var(--ion-margin, 16px);
   @include padding($padding);
 }
 
-.ion-padding-top,
+.ion-padding-top {
-[padding-top] {
   --padding-top: #{$padding};
 
   @include padding($padding, null, null, null);
 }
 
-.ion-padding-start,
+.ion-padding-start {
-[padding-start] {
   --padding-start: #{$padding};
 
   @include padding-horizontal($padding, null);
 }
 
-.ion-padding-end,
+.ion-padding-end {
-[padding-end] {
   --padding-end: #{$padding};
 
   @include padding-horizontal(null, $padding);
 }
 
-.ion-padding-bottom,
+.ion-padding-bottom {
-[padding-bottom] {
   --padding-bottom: #{$padding};
 
   @include padding(null, null, $padding, null);
 }
 
-.ion-padding-vertical,
+.ion-padding-vertical {
-[padding-vertical] {
   --padding-top: #{$padding};
   --padding-bottom: #{$padding};
 
   @include padding($padding, null, $padding, null);
 }
 
-.ion-padding-horizontal,
+.ion-padding-horizontal {
-[padding-horizontal] {
   --padding-start: #{$padding};
   --padding-end: #{$padding};
 
@@ -82,8 +74,7 @@ $margin: var(--ion-margin, 16px);
 // Margin
 // --------------------------------------------------
 
-.ion-no-margin,
+.ion-no-margin {
-[no-margin] {
   --margin-start: 0;
   --margin-end: 0;
   --margin-top: 0;
@@ -92,8 +83,7 @@ $margin: var(--ion-margin, 16px);
   @include margin(0);
 }
 
-.ion-margin,
+.ion-margin {
-[margin] {
   --margin-start: #{$margin};
   --margin-end: #{$margin};
   --margin-top: #{$margin};
@@ -102,44 +92,38 @@ $margin: var(--ion-margin, 16px);
   @include margin($margin);
 }
 
-.ion-margin-top,
+.ion-margin-top {
-[margin-top] {
   --margin-top: #{$margin};
 
   @include margin($margin, null, null, null);
 }
 
-.ion-margin-start,
+.ion-margin-start {
-[margin-start] {
   --margin-start: #{$margin};
 
   @include margin-horizontal($margin, null);
 }
 
-.ion-margin-end,
+.ion-margin-end {
-[margin-end] {
   --margin-end: #{$margin};
 
   @include margin-horizontal(null, $margin);
 }
 
-.ion-margin-bottom,
+.ion-margin-bottom {
-[margin-bottom] {
   --margin-bottom: #{$margin};
 
   @include margin(null, null, $margin, null);
 }
 
-.ion-margin-vertical,
+.ion-margin-vertical {
-[margin-vertical] {
   --margin-top: #{$margin};
   --margin-bottom: #{$margin};
 
   @include margin($margin, null, $margin, null);
 }
 
-.ion-margin-horizontal,
+.ion-margin-horizontal {
-[margin-horizontal] {
   --margin-start: #{$margin};
   --margin-end: #{$margin};
 

core/src/css/text-alignment.scss

@@ -12,43 +12,35 @@
   @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
     // Provide `[text-{bp}]` attributes for aligning the text based
     // on the breakpoint
-    .ion-text#{$infix}-center,
+    .ion-text#{$infix}-center {
-    [text#{$infix}-center] {
       text-align: center !important;
     }
 
-    .ion-text#{$infix}-justify,
+    .ion-text#{$infix}-justify {
-    [text#{$infix}-justify] {
       text-align: justify !important;
     }
 
-    .ion-text#{$infix}-start,
+    .ion-text#{$infix}-start {
-    [text#{$infix}-start] {
       text-align: start !important;
     }
 
-    .ion-text#{$infix}-end,
+    .ion-text#{$infix}-end {
-    [text#{$infix}-end] {
       text-align: end !important;
     }
 
-    .ion-text#{$infix}-left,
+    .ion-text#{$infix}-left {
-    [text#{$infix}-left] {
       text-align: left !important;
     }
 
-    .ion-text#{$infix}-right,
+    .ion-text#{$infix}-right {
-    [text#{$infix}-right] {
       text-align: right !important;
     }
 
-    .ion-text#{$infix}-nowrap,
+    .ion-text#{$infix}-nowrap {
-    [text#{$infix}-nowrap] {
       white-space: nowrap !important;
     }
 
-    .ion-text#{$infix}-wrap,
+    .ion-text#{$infix}-wrap {
-    [text#{$infix}-wrap] {
       white-space: normal !important;
     }
   }

core/src/css/text-transformation.scss

@@ -12,20 +12,17 @@
   @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
     // Provide `[text-{bp}]` attributes for transforming the text based
     // on the breakpoint
-    .ion-text#{$infix}-uppercase,
+    .ion-text#{$infix}-uppercase {
-    [text#{$infix}-uppercase] {
       /* stylelint-disable-next-line declaration-no-important */
       text-transform: uppercase !important;
     }
 
-    .ion-text#{$infix}-lowercase,
+    .ion-text#{$infix}-lowercase {
-    [text#{$infix}-lowercase] {
       /* stylelint-disable-next-line declaration-no-important */
       text-transform: lowercase !important;
     }
 
-    .ion-text#{$infix}-capitalize,
+    .ion-text#{$infix}-capitalize {
-    [text#{$infix}-capitalize] {
       /* stylelint-disable-next-line declaration-no-important */
       text-transform: capitalize !important;
     }