Move non-reset SCSS to new files, add folder structure (https://github.com/woocommerce/woocommerce-admin/pull/274)

* Move non-reset SCSS to a new file

* Split shared files and “meta” files into two folders

This also creates two new base scss files for the different app vs embedded CSS files

* Move notice & embed-specific css out of reset

* Update README with folder structure notes

plugins/woocommerce-admin/client/embedded.js

@@ -10,7 +10,7 @@ import { Provider as SlotFillProvider } from 'react-slot-fill';
 /**
  * Internal dependencies
  */
-import './stylesheets/_wpadmin-reset.scss';
+import './stylesheets/_embedded.scss';
 import { EmbedLayout } from './layout';
 
 render(

plugins/woocommerce-admin/client/index.js

@@ -11,7 +11,7 @@ import 'react-dates/initialize';
 /**
  * Internal dependencies
  */
-import './stylesheets/_wpadmin-reset.scss';
+import './stylesheets/_index.scss';
 import { PageLayout } from './layout';
 import 'store';
 

plugins/woocommerce-admin/client/layout/activity-panel/style.scss

@@ -312,3 +312,47 @@
 		}
 	}
 }
+
+.woocommerce-layout__notice-list-hide {
+	display: none;
+}
+
+@keyframes slideDown {
+	0% {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+	100% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+.woocommerce-layout__notice-list-show {
+	margin-top: 100px;
+	animation: slideDown;
+	animation-duration: 1s;
+
+	&.has-screen-meta-links {
+		display: inline-block;
+		width: 100%;
+	}
+
+	@include breakpoint( '<782px' ) {
+		margin-top: 115px;
+	}
+}
+
+#wp__notice-list-uncollapsed {
+	visibility: hidden;
+	margin: -2px 0 0;
+}
+
+#wp__notice-list {
+	padding-right: 20px;
+}
+
+.woocommerce-layout__notice-list .jitm-card {
+	margin: 5px 15px 2px;
+	padding: 1px 12px;
+}

plugins/woocommerce-admin/client/stylesheets/README.md

@@ -1,5 +1,12 @@
 # CSS
 
+## Folder/File Structure
+
+- `/abstracts/*` – this contains all mixins/variables/etc, things that won't appear in compiled CSS
+- `/shared/*` – these are the styles that will appear in compiled CSS - the reset, gutenberg components import, etc
+- `/_embedded.scss` – this file is used for the embed pages CSS, and is imported in `embedded.js` only
+- `/_index.scss` – this file is used for the app's CSS, and is imported in `index.js` only
+
 ## Naming: Component classes
 
 To avoid class name collisions between elements of the woo app and to the enclosing WordPress dashboard, class names **must** adhere to the following guidelines:

plugins/woocommerce-admin/client/stylesheets/_embedded.scss

@@ -0,0 +1,13 @@
+/** @format */
+
+// Import our wp-admin reset.
+@import './shared/_reset.scss';
+
+// Import any global styles.
+@import './shared/_global.scss';
+
+// Import the embed-specific styles.
+@import './shared/_embed.scss';
+
+// Import gutenberg SCSS so that we can apply our theme colors.
+@import './shared/gutenberg-components.scss';

plugins/woocommerce-admin/client/stylesheets/_index.scss

@@ -0,0 +1,10 @@
+/** @format */
+
+// Import our wp-admin reset.
+@import './shared/_reset.scss';
+
+// Import any global styles.
+@import './shared/_global.scss';
+
+// Import gutenberg SCSS so that we can apply our theme colors.
+@import './shared/gutenberg-components.scss';

plugins/woocommerce-admin/client/stylesheets/_wpadmin-reset.scss

@@ -1,273 +0,0 @@
-/** @format */
-
-@import './gutenberg-components.scss';
-
-// By using CSS variables, we can switch the spacing rhythm using a single media query
-:root {
-	--main-gap: 24px;
-}
-@media (max-width: 782px) {
-	:root {
-		--main-gap: 16px;
-	}
-}
-
-// Set up animation
-@keyframes loading-fade {
-	0% {
-		opacity: 0.7;
-	}
-	50% {
-		opacity: 1;
-	}
-	100% {
-		opacity: 0.7;
-	}
-}
-
-// css resets some wp-admin specific rules so that the app fits better in the extension container
-.woocommerce-page {
-	.wrap {
-		margin: 0;
-	}
-
-	#wpcontent,
-	#wpbody-content {
-		padding: 0;
-		overflow-x: hidden !important;
-	}
-
-	@include breakpoint( '<782px' ) {
-		// WP breakpoint for mobile menu
-		.wp-responsive-open #wpbody {
-			right: -14.5em;
-		}
-	}
-
-	@include breakpoint( '>960px' ) {
-		#toplevel_page_woocommerce.menu-top > a:focus,
-		#toplevel_page_wcadmin--analytics.menu-top > a:focus {
-			padding-bottom: 1px;
-		}
-	}
-
-	.wp-has-current-submenu:after {
-		right: 0;
-		border: 8px solid transparent;
-		content: ' ';
-		height: 0;
-		width: 0;
-		position: absolute;
-		pointer-events: none;
-		border-right-color: #f1f1f1;
-		top: 0;
-		margin-top: 10px;
-
-		@include breakpoint( '<960px' ) {
-			border-width: 4px;
-			margin-top: 14px;
-		}
-	}
-}
-
-.woocommerce-embed-page {
-	#wpcontent,
-	#wpbody-content {
-		overflow-x: initial !important;
-	}
-
-	#wpbody-content .notice {
-		margin-top: 15px;
-	}
-
-	.wrap {
-		padding: 20px;
-	}
-
-	#screen-meta {
-		border-right: 0;
-		margin: 0;
-	}
-
-	.notice {
-		margin: 5px 15px 2px;
-		padding: 1px 12px;
-	}
-
-	.woocommerce-layout__header {
-		&.is-scrolled {
-			box-shadow: 0 8px 16px 0 rgba(85, 93, 102, 0.3);
-		}
-
-		.woocommerce-layout__header-breadcrumbs {
-			margin-top: 0;
-			margin-bottom: 0;
-		}
-	}
-
-	/**
-	* Hides screen meta and links when notices are open since the elements get moved around.
-	* The !important overwrites an inline wp-admin style.
-	*/
-	#screen-meta.is-hidden-by-notices,
-	#screen-meta-links.is-hidden-by-notices {
-		display: none !important;
-	}
-
-	.woocommerce-layout__primary {
-		margin: 0;
-		padding-top: 80px;
-
-		@include breakpoint( '782px-1100px' ) {
-			padding-top: 60px;
-		}
-	}
-
-	@keyframes isLoaded {
-		0% {
-			opacity: 0;
-		}
-		100% {
-			opacity: 1;
-		}
-	}
-
-	.woocommerce-layout__activity-panel-tabs {
-		animation: isLoaded;
-		animation-duration: 2000ms;
-	}
-}
-
-.woocommerce-layout * {
-	box-sizing: border-box;
-}
-
-.woocommerce-layout__notice-list-hide {
-	display: none;
-}
-
-@keyframes slideDown {
-	0% {
-		transform: translateY(-100%);
-		opacity: 0;
-	}
-	100% {
-		transform: translateY(0);
-		opacity: 1;
-	}
-}
-
-.woocommerce-layout__notice-list-show {
-	margin-top: 100px;
-	animation: slideDown;
-	animation-duration: 1s;
-
-	&.has-screen-meta-links {
-		display: inline-block;
-		width: 100%;
-	}
-
-	@include breakpoint( '<782px' ) {
-		margin-top: 115px;
-	}
-}
-
-.woocommerce-embed-page {
-	.woocommerce-layout__notice-list-show {
-		margin-top: 10px;
-		margin-bottom: 16px;
-
-		@include breakpoint( '<600px' ) {
-			margin-top: 80px;
-			margin-bottom: -16px;
-		}
-
-		@include breakpoint( '600px-782px' ) {
-			margin-top: 32px;
-		}
-	}
-}
-
-#wp__notice-list-uncollapsed {
-	visibility: hidden;
-	margin: -2px 0 0;
-}
-
-#wp__notice-list {
-	padding-right: 20px;
-}
-
-.woocommerce-layout__notice-list .jitm-card {
-	margin: 5px 15px 2px;
-	padding: 1px 12px;
-}
-
-#wpfooter {
-	display: none;
-}
-
-.wp-responsive-open {
-	.woocommerce-layout__header {
-		margin-left: 2px;
-	}
-
-	@include breakpoint( '<782px' ) {
-		.woocommerce-layout__activity-panel-wrapper.is-open,
-		.woocommerce-layout__activity-panel-tabs {
-			width: calc(100vw - 190px);
-		}
-	}
-}
-
-@include breakpoint( '<600px' ) {
-	#wpadminbar,
-	.jetpack-masterbar #wpadminbar {
-		position: fixed;
-	}
-}
-
-// Temporary fix for compability with the Jetpack masterbar
-// See https://github.com/Automattic/jetpack/issues/9608
-// !important rules overwrite some existing !important rules
-.jetpack-masterbar {
-	@include breakpoint( '<782px' ) {
-		&.wp-admin .wrap h1 {
-			padding-left: 0;
-		}
-
-		#wpadminbar li.menupop.my-sites {
-			margin-left: 55px;
-		}
-
-		#wpadminbar #wp-admin-bar-menu-toggle {
-			top: -5px;
-			left: -5px;
-			width: 60px;
-
-			.ab-icon:before {
-				color: $white;
-			}
-
-			a {
-				padding: 0 8px 4px 8px !important;
-			}
-
-			a:hover {
-				background: #333;
-			}
-		}
-
-		.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle {
-			left: -5px;
-			width: 60px;
-
-			.ab-icon:before {
-				color: $white !important;
-			}
-
-			a {
-				background: #333;
-			}
-		}
-	}
-}

plugins/woocommerce-admin/client/stylesheets/abstracts/_colors.scss

@@ -33,7 +33,6 @@ $core-grey-dark-900: #191e23;
 $gray-text: $core-grey-dark-500;
 
 // WooCommerce Purples
-$woocommerce: #95588a;
 $woocommerce-100: #ffd7ff;
 $woocommerce-200: #e2a5d7;
 $woocommerce-300: #c88bbd;
@@ -43,6 +42,7 @@ $woocommerce-600: #7c3f71;
 $woocommerce-700: #622557;
 $woocommerce-800: #490c3e;
 $woocommerce-900: #2f0024;
+$woocommerce: $woocommerce-500;
 
 // Gutenberg
 $button-hover: #fafafa;

plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss

@@ -0,0 +1,83 @@
+/** @format */
+
+.woocommerce-embed-page {
+	#wpcontent,
+	#wpbody-content {
+		overflow-x: initial !important;
+	}
+
+	#wpbody-content .notice {
+		margin-top: 15px;
+	}
+
+	.wrap {
+		padding: 20px;
+	}
+
+	#screen-meta {
+		border-right: 0;
+		margin: 0;
+	}
+
+	.notice {
+		margin: 5px 15px 2px;
+		padding: 1px 12px;
+	}
+
+	.woocommerce-layout__header {
+		&.is-scrolled {
+			box-shadow: 0 8px 16px 0 rgba(85, 93, 102, 0.3);
+		}
+
+		.woocommerce-layout__header-breadcrumbs {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+	}
+
+	/**
+	* Hides screen meta and links when notices are open since the elements get moved around.
+	* The !important overwrites an inline wp-admin style.
+	*/
+	#screen-meta.is-hidden-by-notices,
+	#screen-meta-links.is-hidden-by-notices {
+		display: none !important;
+	}
+
+	.woocommerce-layout__primary {
+		margin: 0;
+		padding-top: 80px;
+
+		@include breakpoint( '782px-1100px' ) {
+			padding-top: 60px;
+		}
+	}
+
+	@keyframes isLoaded {
+		0% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	.woocommerce-layout__activity-panel-tabs {
+		animation: isLoaded;
+		animation-duration: 2000ms;
+	}
+
+	.woocommerce-layout__notice-list-show {
+		margin-top: 10px;
+		margin-bottom: 16px;
+
+		@include breakpoint( '<600px' ) {
+			margin-top: 80px;
+			margin-bottom: -16px;
+		}
+
+		@include breakpoint( '600px-782px' ) {
+			margin-top: 32px;
+		}
+	}
+}

plugins/woocommerce-admin/client/stylesheets/shared/_global.scss

@@ -0,0 +1,24 @@
+/** @format */
+
+// By using CSS variables, we can switch the spacing rhythm using a single media query.
+:root {
+	--main-gap: 24px;
+}
+@media (max-width: 782px) {
+	:root {
+		--main-gap: 16px;
+	}
+}
+
+// Set up animation
+@keyframes loading-fade {
+	0% {
+		opacity: 0.7;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0.7;
+	}
+}

plugins/woocommerce-admin/client/stylesheets/shared/_reset.scss

@@ -0,0 +1,119 @@
+/** @format */
+// css resets some wp-admin specific rules so that the app fits better in the extension container
+.woocommerce-page {
+	.wrap {
+		margin: 0;
+	}
+
+	#wpcontent,
+	#wpbody-content {
+		padding: 0;
+		overflow-x: hidden !important;
+	}
+
+	@include breakpoint( '<782px' ) {
+		// WP breakpoint for mobile menu
+		.wp-responsive-open #wpbody {
+			right: -14.5em;
+		}
+	}
+
+	@include breakpoint( '>960px' ) {
+		#toplevel_page_woocommerce.menu-top > a:focus,
+		#toplevel_page_wcadmin--analytics.menu-top > a:focus {
+			padding-bottom: 1px;
+		}
+	}
+
+	.wp-has-current-submenu:after {
+		right: 0;
+		border: 8px solid transparent;
+		content: ' ';
+		height: 0;
+		width: 0;
+		position: absolute;
+		pointer-events: none;
+		border-right-color: #f1f1f1;
+		top: 0;
+		margin-top: 10px;
+
+		@include breakpoint( '<960px' ) {
+			border-width: 4px;
+			margin-top: 14px;
+		}
+	}
+}
+
+.woocommerce-layout * {
+	box-sizing: border-box;
+}
+
+#wpfooter {
+	display: none;
+}
+
+.wp-responsive-open {
+	.woocommerce-layout__header {
+		margin-left: 2px;
+	}
+
+	@include breakpoint( '<782px' ) {
+		.woocommerce-layout__activity-panel-wrapper.is-open,
+		.woocommerce-layout__activity-panel-tabs {
+			width: calc(100vw - 190px);
+		}
+	}
+}
+
+@include breakpoint( '<600px' ) {
+	#wpadminbar,
+	.jetpack-masterbar #wpadminbar {
+		position: fixed;
+	}
+}
+
+// Temporary fix for compability with the Jetpack masterbar
+// See https://github.com/Automattic/jetpack/issues/9608
+// !important rules overwrite some existing !important rules
+.jetpack-masterbar {
+	@include breakpoint( '<782px' ) {
+		&.wp-admin .wrap h1 {
+			padding-left: 0;
+		}
+
+		#wpadminbar li.menupop.my-sites {
+			margin-left: 55px;
+		}
+
+		#wpadminbar #wp-admin-bar-menu-toggle {
+			top: -5px;
+			left: -5px;
+			width: 60px;
+
+			.ab-icon:before {
+				color: $white;
+			}
+
+			a {
+				padding: 0 8px 4px 8px !important;
+			}
+
+			a:hover {
+				background: #333;
+			}
+		}
+
+		.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle {
+			left: -5px;
+			width: 60px;
+
+			.ab-icon:before {
+				color: $white !important;
+			}
+
+			a {
+				background: #333;
+			}
+		}
+	}
+}

plugins/woocommerce-admin/webpack.config.js

@@ -65,7 +65,7 @@ const webpackConfig = {
 						{
 							loader: 'sass-loader',
 							query: {
-								includePaths: [ 'client/stylesheets' ],
+								includePaths: [ 'client/stylesheets/abstracts' ],
 								data:
 									'@import "_colors"; ' +
 									'@import "_variables"; ' +