feat(core)!: new names of css breakpoints (#2393)

* feat!: delete deprecated css breakpoints * feat: migration for breakpoints * feat!: new names of css breakpoints
taiga-family · Aug 30, 2022 · f6b1efa · f6b1efa
1 parent 4b55474
commit f6b1efa
Show file tree

Hide file tree

Showing 39 changed files with 326 additions and 853 deletions.
diff --git a/projects/addon-doc/src/components/main/main.style.less b/projects/addon-doc/src/components/main/main.style.less
@@ -73,15 +73,15 @@ tui-doc-navigation.tui-doc-navigation {
     width: @sidebar-width;
     border-right: 1px solid var(--tui-base-03);
 
-    @media @mobile-m {
+    @media @tui-mobile {
         display: none;
     }
 }
 
 .tui-doc-content {
     margin-left: @sidebar-width;
 
-    @media @mobile-m {
+    @media @tui-mobile {
         margin-left: 0;
     }
 }

diff --git a/projects/addon-doc/src/internal/header/header.style.less b/projects/addon-doc/src/internal/header/header.style.less
@@ -28,7 +28,7 @@
 .t-menu {
     margin-left: -1.25rem;
 
-    @media @tablet-lg-min {
+    @media @tui-tablet-min {
         display: none;
     }
 }

diff --git a/projects/addon-tablebars/components/table-bars-host/table-bars-host.style.less b/projects/addon-tablebars/components/table-bars-host/table-bars-host.style.less
@@ -32,26 +32,26 @@
     margin: 0 auto;
 
     &.t-container_adaptive {
-        @media @desktop-m-min {
+        @media @tui-desktop-lg-min {
             width: 69rem;
         }
 
-        @media @desktop-s {
+        @media @tui-desktop {
             width: 51.5rem;
         }
 
-        @media @mobile-m {
+        @media @tui-mobile {
             width: 100%;
             padding: 0 1rem;
             box-sizing: border-box;
         }
     }
 
-    @media @desktop-m-min {
+    @media @tui-desktop-lg-min {
         width: 69rem;
     }
 
-    @media @desktop-s {
+    @media @tui-desktop {
         width: 51.5rem;
         padding: 0 3rem;
     }

diff --git a/projects/cdk/schematics/ng-update/constants/breakpoints.ts b/projects/cdk/schematics/ng-update/constants/breakpoints.ts
@@ -0,0 +1,32 @@
+export const DEPRECATED_BREAKPOINTS = [
+    // all previously actual breakpoints
+    {from: `@media-retina`, to: `@tui-media-retina`},
+    {from: `@media-retina-mobile`, to: `@tui-media-retina-mobile`},
+    {from: `@media-retina-tablet`, to: `@tui-media-retina-tablet`},
+    {from: `@media-retina-desktop`, to: `@tui-media-retina-desktop`},
+    {from: `@mobile-m`, to: `@tui-mobile`},
+    {from: `@mobile-m-min`, to: `@tui-mobile-min`},
+    {from: `@mobile-m-interval`, to: `@tui-mobile-interval`},
+    {from: `@tablet-lg`, to: `@tui-tablet`},
+    {from: `@tablet-lg-min`, to: `@tui-tablet-min`},
+    {from: `@tablet-lg-interval`, to: `@tui-tablet-interval`},
+    {from: `@desktop-s`, to: `@tui-desktop`},
+    {from: `@desktop-s-min`, to: `@tui-desktop-min`},
+    {from: `@desktop-s-interval`, to: `@tui-desktop-interval`},
+    {from: `@desktop-m-min`, to: `@tui-desktop-lg-min`},
+
+    // legacy breakpoints
+    {from: `@mobile`, to: `@tui-mobile`},
+    {from: `@mobile-min`, to: `@tui-mobile-min`},
+    {from: `@mobile-interval`, to: `@tui-mobile-interval`},
+    {from: `@tablet-s`, to: `@tui-mobile`},
+    {from: `@tablet-s-min`, to: `@tui-mobile-min`},
+    {from: `@tablet-s-interval`, to: `@tui-mobile-interval`},
+    {from: `@tablet`, to: `@tui-tablet`},
+    {from: `@tablet-min`, to: `@tui-tablet-min`},
+    {from: `@tablet-interval`, to: `@tui-tablet-interval`},
+    {from: `@desktop`, to: `@tui-desktop`},
+    {from: `@desktop-min`, to: `@tui-desktop-min`},
+    {from: `@desktop-interval`, to: `@tui-desktop-interval`},
+    {from: `@desktop-lg-min`, to: `@tui-desktop-lg-min`},
+] as const;
diff --git a/projects/cdk/schematics/ng-update/steps/replace-styles.ts b/projects/cdk/schematics/ng-update/steps/replace-styles.ts
@@ -1,10 +1,20 @@
 import {getActiveProject} from 'ng-morph';
+import {DEPRECATED_BREAKPOINTS} from '../constants/breakpoints';
 
 export function replaceStyles() {
     getActiveProject()
         ?.getSourceFiles('**/**.less')
         .forEach(sourceFile => {
-            const fullText = sourceFile.getFullText();
+            let fullText = sourceFile.getFullText();
+
+            if (fullText.includes(`taiga-ui-local`)) {
+                DEPRECATED_BREAKPOINTS.forEach(({from, to}) => {
+                    fullText = fullText.replaceAll(
+                        new RegExp(`(?<=@media.*)(${from})(?=[\\s,{])`, 'g'),
+                        to,
+                    );
+                });
+            }
 
             sourceFile.replaceWithText(
                 fullText.replace(

diff --git a/projects/cdk/schematics/ng-update/tests/schematic-replace-styles.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-replace-styles.spec.ts
@@ -32,10 +32,180 @@ const AFTER_GLOBAL_STYLE = `
 
 const BEFORE_LOCAL_STYLE = `
 @import '~@taiga-ui/core/styles/taiga-ui-local';
+
+.legacy-breakpoints {
+    @media @mobile {
+        color: red;
+    }
+    @media @mobile-min {
+        color: red;
+    }
+    @media @mobile-interval {
+        color: red;
+    }
+    @media @tablet-s {
+        color: red;
+    }
+    @media @tablet-s-min {
+        color: red;
+    }
+    @media @tablet-s-interval {
+        color: red;
+    }
+    @media @tablet {
+        color: red;
+    }
+    @media @tablet-min {
+        color: red;
+    }
+    @media @tablet-interval {
+        color: red;
+    }
+    @media @desktop {
+        color: red;
+    }
+    @media @desktop-min {
+        color: red;
+    }
+    @media @desktop-interval {
+        color: red;
+    }
+    @media @desktop-lg-min {
+        color: red;
+    }
+}
+
+.actual-breakpoints {
+    @media @mobile-m {
+        color: red;
+    }
+    @media @mobile-m-min {
+        color: red;
+    }
+    @media @mobile-m-interval {
+        color: red;
+    }
+    @media @tablet-lg {
+        color: red;
+    }
+    @media @tablet-lg-min {
+        color: red;
+    }
+    @media @tablet-lg-interval {
+        color: red;
+    }
+    @media @desktop-s {
+        color: red;
+    }
+    @media @desktop-s-min {
+        color: red;
+    }
+    @media @desktop-s-interval {
+        color: red;
+    }
+    @media @desktop-m-min {
+        color: red;
+    }
+}
+
+.negative-media {
+    @media not @mobile-m {
+        color: green;
+    }
+
+    @media not @desktop {
+        color: green;
+    }
+}
 `;
 
 const AFTER_LOCAL_STYLE = `
 @import '~@taiga-ui/core/styles/taiga-ui-local';
+
+.legacy-breakpoints {
+    @media @tui-mobile {
+        color: red;
+    }
+    @media @tui-mobile-min {
+        color: red;
+    }
+    @media @tui-mobile-interval {
+        color: red;
+    }
+    @media @tui-mobile {
+        color: red;
+    }
+    @media @tui-mobile-min {
+        color: red;
+    }
+    @media @tui-mobile-interval {
+        color: red;
+    }
+    @media @tui-tablet {
+        color: red;
+    }
+    @media @tui-tablet-min {
+        color: red;
+    }
+    @media @tui-tablet-interval {
+        color: red;
+    }
+    @media @tui-desktop {
+        color: red;
+    }
+    @media @tui-desktop-min {
+        color: red;
+    }
+    @media @tui-desktop-interval {
+        color: red;
+    }
+    @media @tui-desktop-lg-min {
+        color: red;
+    }
+}
+
+.actual-breakpoints {
+    @media @tui-mobile {
+        color: red;
+    }
+    @media @tui-mobile-min {
+        color: red;
+    }
+    @media @tui-mobile-interval {
+        color: red;
+    }
+    @media @tui-tablet {
+        color: red;
+    }
+    @media @tui-tablet-min {
+        color: red;
+    }
+    @media @tui-tablet-interval {
+        color: red;
+    }
+    @media @tui-desktop {
+        color: red;
+    }
+    @media @tui-desktop-min {
+        color: red;
+    }
+    @media @tui-desktop-interval {
+        color: red;
+    }
+    @media @tui-desktop-lg-min {
+        color: red;
+    }
+}
+
+.negative-media {
+    @media not @tui-mobile {
+        color: green;
+    }
+
+    @media not @tui-desktop {
+        color: green;
+    }
+}
 `;
 
 describe('replace styles', () => {

diff --git a/projects/core/components/group/group.style.less b/projects/core/components/group/group.style.less
@@ -156,7 +156,7 @@
         &.tui-group_orientation_vertical:not(.tui-group_collapsed),
         &.tui-group_orientation_horizontal {
             & > * {
-                @media @mobile-m {
+                @media @tui-mobile {
                     &:first-child:not(:last-child),
                     &:last-child:not(:first-child) {
                         border-radius: var(--tui-radius-m);
@@ -170,7 +170,7 @@
         &.tui-group_orientation_vertical:not(.tui-group_collapsed),
         &.tui-group_orientation_horizontal {
             & > * {
-                @media @mobile-m {
+                @media @tui-mobile {
                     &:first-child:not(:last-child),
                     &:last-child:not(:first-child) {
                         border-radius: var(--tui-radius-l);
@@ -182,7 +182,7 @@
 
     &_adaptive {
         &.tui-group_orientation_vertical {
-            @media @mobile-m {
+            @media @tui-mobile {
                 width: 100%;
 
                 & > * {
@@ -218,7 +218,7 @@
         }
 
         &.tui-group_orientation_horizontal {
-            @media @mobile-m {
+            @media @tui-mobile {
                 flex-direction: column;
                 width: 100%;
 
@@ -259,7 +259,7 @@
 
     &_adaptive.tui-group_radius_large {
         &.tui-group_orientation_vertical {
-            @media @mobile-m {
+            @media @tui-mobile {
                 & > * {
                     &:nth-child(n):not(:only-child) {
                         border-radius: var(--tui-radius-l);
@@ -285,7 +285,7 @@
         }
 
         &.tui-group_orientation_horizontal {
-            @media @mobile-m {
+            @media @tui-mobile {
                 & > * {
                     &:nth-child(n):not(:only-child) {
                         border-radius: var(--tui-radius-l);