Header/Footer: Modularize CSS files and process with PostCSS. (#6)

The contents will soon become too much to keep in a single file, and it's easier to separate while it's still small. PostCSS has most of the features of SASS, but is more future-proof.
WordPress · Sep 21, 2021 · 17f51fc · 17f51fc
1 parent d71a442
commit 17f51fc
Show file tree

Hide file tree

Showing 10 changed files with 3,532 additions and 27 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 # Production-only files
 README-svn.txt
+build
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # wporg-mu-plugins
 
-Over time, this is intended to become the canonical source repository all `mu-plugins` on the WordPress.org network. At the moment, it only includes a few.
+Over time, this is intended to become the canonical source repository for all `mu-plugins` on the WordPress.org network. At the moment, it only includes a few.
 
 ## Usage
 
@@ -16,6 +16,13 @@ Over time, this is intended to become the canonical source repository all `mu-pl
 	```
 1. See individual plugin readmes for specific instructions
 
+
+## Development
+
+* `npm run start` during development
+* `npm run build` before commit/sync/deploy
+
+
 ## Sync/Deploy
 
 The files here are commited to `dotorg.svn` so they can be deployed. The aren't synced to `meta.svn`, since they're already open.

diff --git a/mu-plugins/blocks/global-header-footer/blocks.php b/mu-plugins/blocks/global-header-footer/blocks.php
@@ -15,9 +15,9 @@
 function register_block_types() {
 	wp_register_style(
 		'wporg-global-header-footer',
-		plugins_url( '/style.css', __FILE__ ),
+		plugins_url( '/build/style.css', __FILE__ ),
 		array( 'wp-block-library' ), // Load `block-library` styles first, so that our styles override them.
-		filemtime( __DIR__ . '/style.css' )
+		filemtime( __DIR__ . '/build/style.css' )
 	);
 
 	register_block_type(

diff --git a/...ins/blocks/global-header-footer/style.css → .../global-header-footer/postcss/common.pcss b/...ins/blocks/global-header-footer/style.css → .../global-header-footer/postcss/common.pcss
@@ -5,10 +5,6 @@
  * https://github.com/WordPress/wporg-news-2021/issues/13 isn't done yet.
  */
 
-
-/*
- * Common
- */
 .wp-block-group.site-header,
 .wp-block-group.site-footer,
 .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
@@ -18,23 +14,3 @@
 .wp-block-navigation.is-responsive .wp-block-navigation-link__content {
     color: var(--wp--preset--color--white);
 }
-
-
-/*
- * Header
- */
-.wp-block-group.site-header {
-	padding: 37px 30px 37px 24px;
-}
-
-
-/*
- * Footer
- */
-.wp-block-group.site-footer {
-	padding: 69px 80px 61px 80px;
-}
-
-.wp-block-group.site-footer .wp-block-social-links .wp-social-link svg {
-	fill: var(--wp--preset--color--white);
-}
diff --git a/mu-plugins/blocks/global-header-footer/postcss/footer.pcss b/mu-plugins/blocks/global-header-footer/postcss/footer.pcss
@@ -0,0 +1,7 @@
+.wp-block-group.site-footer {
+	padding: 69px 80px 61px 80px;
+}
+
+.wp-block-group.site-footer .wp-block-social-links .wp-social-link svg {
+	fill: var(--wp--preset--color--white);
+}
diff --git a/mu-plugins/blocks/global-header-footer/postcss/header.pcss b/mu-plugins/blocks/global-header-footer/postcss/header.pcss
@@ -0,0 +1,3 @@
+.wp-block-group.site-header {
+	padding: 37px 30px 37px 24px;
+}
diff --git a/mu-plugins/blocks/global-header-footer/postcss/style.pcss b/mu-plugins/blocks/global-header-footer/postcss/style.pcss
@@ -0,0 +1,3 @@
+@import "common.pcss";
+@import "header.pcss";
+@import "footer.pcss";