Extract IE11 specific styles to IE stylesheet (https://github.com/woocommerce/woocommerce-admin/pull/1199)

* Extract IE11 specific styles to IE stylesheet

* Enqueue IE stylesheet conditionally

* Use server-side http user agent to detect IE11

IE11 and up does not detect conditional comments for stylesheets so match user agent string and conditionally load stylesheet.

plugins/woocommerce-admin/lib/admin.php

@@ -214,6 +214,16 @@ function wc_admin_enqueue_script() {
 
 	wp_enqueue_script( WC_ADMIN_APP );
 	wp_enqueue_style( WC_ADMIN_APP );
+
+	// Use server-side detection to prevent unneccessary stylesheet loading in other browsers.
+	$user_agent = isset( $_SERVER['HTTP_USER_AGENT'] ) ? $_SERVER['HTTP_USER_AGENT'] : ''; // WPCS: sanitization ok.
+	preg_match( '/MSIE (.*?);/', $user_agent, $matches );
+	if ( count( $matches ) < 2 ) {
+		preg_match( '/Trident\/\d{1,2}.\d{1,2}; rv:([0-9]*)/', $user_agent, $matches );
+	}
+	if ( count( $matches ) > 1 ) {
+		wp_enqueue_style( 'wc-components-ie' );
+	}
 }
 add_action( 'admin_enqueue_scripts', 'wc_admin_enqueue_script' );
 

plugins/woocommerce-admin/lib/client-assets.php

@@ -102,6 +102,13 @@ function wc_admin_register_script() {
 		filemtime( wc_admin_dir_path( 'dist/components/style.css' ) )
 	);
 
+	wp_register_style(
+		'wc-components-ie',
+		wc_admin_url( 'dist/components/ie.css' ),
+		array( 'wp-edit-blocks' ),
+		filemtime( wc_admin_dir_path( 'dist/components/ie.css' ) )
+	);
+
 	wp_register_style(
 		WC_ADMIN_APP,
 		wc_admin_url( "dist/{$entry}/style.css" ),

plugins/woocommerce-admin/packages/components/src/ie.scss

@@ -0,0 +1,6 @@
+/**
+ * Internal Dependencies
+ */
+@import 'segmented-selection/ie.scss';
+@import 'summary/ie.scss';
+@import 'table/ie.scss';

plugins/woocommerce-admin/packages/components/src/segmented-selection/ie.scss

@@ -0,0 +1,17 @@
+.woocommerce-segmented-selection__item {
+	display: block;
+	@include set-grid-item-position( 2, 10 );
+
+	&:nth-child(2n) {
+		border-left: 1px solid $core-grey-light-700;
+		border-top: 1px solid $core-grey-light-700;
+	}
+
+	&:nth-child(2n + 1) {
+		border-top: 1px solid $core-grey-light-700;
+	}
+
+	&:nth-child(-n + 2) {
+		border-top: 0;
+	}
+}

plugins/woocommerce-admin/packages/components/src/segmented-selection/style.scss

@@ -14,24 +14,6 @@
 	background-color: $core-grey-light-700;
 }
 
-.woocommerce-segmented-selection__item {
-	display: block;
-	@include set-grid-item-position( 2, 10 );
-
-	&:nth-child(2n) {
-		border-left: 1px solid $core-grey-light-700;
-		border-top: 1px solid $core-grey-light-700;
-	}
-
-	&:nth-child(2n + 1) {
-		border-top: 1px solid $core-grey-light-700;
-	}
-
-	&:nth-child(-n + 2) {
-		border-top: 0;
-	}
-}
-
 .woocommerce-segmented-selection__label {
 	background-color: $core-grey-light-100;
 	padding: $gap-small $gap-small $gap-small $gap-larger;

plugins/woocommerce-admin/packages/components/src/summary/ie.scss

@@ -0,0 +1,64 @@
+
+// IE11 doesn't auto-position grid children, so their position must be set manually
+.has-1-items .woocommerce-summary__item-container {
+	@include set-grid-item-position( 1, 1 );
+}
+
+.has-2-items .woocommerce-summary__item-container {
+	@include set-grid-item-position( 2, 2 );
+}
+
+.has-3-items .woocommerce-summary__item-container {
+	@include set-grid-item-position( 3, 3 );
+}
+
+.has-4-items .woocommerce-summary__item-container {
+	@include set-grid-item-position( 4, 4 );
+}
+
+.has-5-items .woocommerce-summary__item-container {
+	@include set-grid-item-position( 5, 5 );
+}
+
+.has-6-items .woocommerce-summary__item-container {
+	@include set-grid-item-position( 6, 6 );
+
+	@include breakpoint( '<1440px' ) {
+		@include set-grid-item-position( 3, 6 );
+	}
+}
+
+.has-7-items .woocommerce-summary__item-container {
+	@include set-grid-item-position( 4, 7 );
+}
+
+.has-8-items .woocommerce-summary__item-container {
+	@include set-grid-item-position( 4, 8 );
+}
+
+.has-9-items .woocommerce-summary__item-container {
+	@include set-grid-item-position( 5, 9 );
+
+	@include breakpoint( '<1440px' ) {
+		@include set-grid-item-position( 3, 9 );
+	}
+}
+
+.has-10-items .woocommerce-summary__item-container {
+	@include set-grid-item-position( 5, 10 );
+
+	@include breakpoint( '<1440px' ) {
+		@include set-grid-item-position( 4, 10 );
+	}
+}
+
+@include breakpoint( '<960px' ) {
+	@for $i from 1 through 10 {
+		.woocommerce-summary > .woocommerce-summary__item-container:nth-child(#{$i}) {
+			grid-column-start: 1;
+			grid-column-end: 2;
+			grid-row-start: #{$i};
+			grid-row-end: #{$i+1};
+		}
+	}
+}

plugins/woocommerce-admin/packages/components/src/summary/style.scss

@@ -257,70 +257,6 @@ $inner-border: $core-grey-light-500;
 	}
 }
 
-// IE11 doesn't auto-position grid children, so their position must be set manually
-.has-1-items .woocommerce-summary__item-container {
-	@include set-grid-item-position( 1, 1 );
-}
-
-.has-2-items .woocommerce-summary__item-container {
-	@include set-grid-item-position( 2, 2 );
-}
-
-.has-3-items .woocommerce-summary__item-container {
-	@include set-grid-item-position( 3, 3 );
-}
-
-.has-4-items .woocommerce-summary__item-container {
-	@include set-grid-item-position( 4, 4 );
-}
-
-.has-5-items .woocommerce-summary__item-container {
-	@include set-grid-item-position( 5, 5 );
-}
-
-.has-6-items .woocommerce-summary__item-container {
-	@include set-grid-item-position( 6, 6 );
-
-	@include breakpoint( '<1440px' ) {
-		@include set-grid-item-position( 3, 6 );
-	}
-}
-
-.has-7-items .woocommerce-summary__item-container {
-	@include set-grid-item-position( 4, 7 );
-}
-
-.has-8-items .woocommerce-summary__item-container {
-	@include set-grid-item-position( 4, 8 );
-}
-
-.has-9-items .woocommerce-summary__item-container {
-	@include set-grid-item-position( 5, 9 );
-
-	@include breakpoint( '<1440px' ) {
-		@include set-grid-item-position( 3, 9 );
-	}
-}
-
-.has-10-items .woocommerce-summary__item-container {
-	@include set-grid-item-position( 5, 10 );
-
-	@include breakpoint( '<1440px' ) {
-		@include set-grid-item-position( 4, 10 );
-	}
-}
-
-@include breakpoint( '<960px' ) {
-	@for $i from 1 through 10 {
-		.woocommerce-summary > .woocommerce-summary__item-container:nth-child(#{$i}) {
-			grid-column-start: 1;
-			grid-column-end: 2;
-			grid-row-start: #{$i};
-			grid-row-end: #{$i+1};
-		}
-	}
-}
-
 .woocommerce-summary__item {
 	display: block;
 	padding: $spacing;

plugins/woocommerce-admin/packages/components/src/table/ie.scss

@@ -0,0 +1,24 @@
+.woocommerce-table {
+	&.has-compare,
+	&.has-search {
+		.woocommerce-card__action {
+			.woocommerce-table__compare {
+				align-self: center;
+				grid-column-start: 1;
+				grid-column-end: 2;
+			}
+
+			.woocommerce-search {
+				align-self: center;
+				grid-column-start: 2;
+				grid-column-end: 3;
+			}
+
+			.woocommerce-table__download-button {
+				align-self: center;
+				grid-column-start: 3;
+				grid-column-end: 4;
+			}
+        }
+    }
+}

plugins/woocommerce-admin/packages/components/src/table/style.scss

@@ -27,24 +27,6 @@
 			display: grid;
 			width: 100%;
 			grid-template-columns: auto 1fr auto;
-
-			.woocommerce-table__compare {
-				align-self: center;
-				grid-column-start: 1;
-				grid-column-end: 2;
-			}
-
-			.woocommerce-search {
-				align-self: center;
-				grid-column-start: 2;
-				grid-column-end: 3;
-			}
-
-			.woocommerce-table__download-button {
-				align-self: center;
-				grid-column-start: 3;
-				grid-column-end: 4;
-			}
 		}
 
 		@include breakpoint( '<960px' ) {