Merge pull request #238 from atom-ide-community/css-containment

Author: aminya

static/core-ui/text-editor.less

@@ -1,17 +1,13 @@
 @import "ui-variables";
 @import "octicon-utf-codes";
 @import "octicon-mixins";
+@import "utils.less";
 
 :root {
   // Fixes specs
   --editor-font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
 }
 
-@contain_all: layout size paint style;
-@contain_but_size: layout paint style;
-@contain_but_layout: size paint style;
-@contain_but_paint: layout size style;
-
 atom-text-editor {
   contain: @contain_but_size;
   display: flex;
@@ -40,7 +36,7 @@ atom-text-editor {
 
   .gutter:hover {
     .line-number.foldable .icon-right {
-      contain: paint style;
+      contain: @contain_but_layout_size;
       visibility: visible;
 
       &:hover {
@@ -51,7 +47,7 @@ atom-text-editor {
 
   .gutter, .gutter:hover {
     .line-number.folded .icon-right {
-      contain: paint style;
+      contain: @contain_but_layout_size;
       .octicon(chevron-right, 0.8em);
 
       visibility: visible;
@@ -77,7 +73,7 @@ atom-text-editor {
     position: relative;
 
     .icon-right {
-      contain: paint style;
+      contain: @contain_but_layout_size;
       .octicon(chevron-down, 0.8em);
       display: inline-block;
       visibility: hidden;
@@ -136,7 +132,7 @@ atom-text-editor {
   }
 
   .indent-guide {
-    contain: paint style;
+    contain: @contain_but_layout_size;
     display: inline-block;
     box-shadow: inset 1px 0;
   }

static/core-ui/utils.less

@@ -0,0 +1,10 @@
+
+// CSS containment variables.
+// The words after `but` explicitly show the excluded/incompatible values.
+@contain_all: layout size paint style;
+@contain_but_layout: size paint style;
+@contain_but_size: layout paint style;
+@contain_but_paint: layout size style;
+@contain_but_layout_size: paint style;
+@contain_but_layout_paint: size style;
+@containt_but_size_paint: layout style;

static/core-ui/workspace-view.less

@@ -1,6 +1,8 @@
 @import "ui-variables";
+@import "utils";
 
 atom-workspace {
+  contain: @contain_all;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -11,17 +13,20 @@ atom-workspace {
   font-family: @font-family;
 
   atom-workspace-axis {
+    contain: @contain_but_layout_paint;
     position: relative;
   }
 
   atom-workspace-axis.horizontal {
+    contain: @contain_but_layout_paint;
     display: flex;
     flex: 1;
     min-width: 0;
     min-height: 0;
   }
 
   atom-workspace-axis.vertical {
+    contain: @contain_but_layout_paint;
     display: flex;
     flex: 1;
     flex-direction: column;