Merge pull request #228 from 10up/feature/use-new-globals-location

Update handling of css globals & mixins

mu-plugins/10up-plugin/assets/css/frontend/global/index.css

@@ -1,2 +1 @@
 @import url("colors.css");
-@import url("media-queries.css");

mu-plugins/10up-plugin/package.json

@@ -25,6 +25,10 @@
       "admin": "./assets/js/admin/admin.js",
       "frontend": "./assets/js/frontend/frontend.js",
       "shared": "./assets/js/shared/shared.js"
-    }
+    },
+	"paths": {
+		"globalStylesDir": "../../themes/10up-theme/assets/css/globals/",
+		"globalMixinsDir": "../../themes/10up-theme/assets/css/globals/mixins/"
+	}
   }
 }

themes/10up-theme/assets/css/frontend/global/index.css

@@ -1,3 +1,2 @@
 @import url("reset.css");
 @import url("colors.css");
-@import url("media-queries.css");

themes/10up-theme/assets/css/globals/readme.md

@@ -0,0 +1,11 @@
+# PostCSS Globals
+
+Any individual `.css` files placed in this folder or any nested folder will automatically get loaded by the [@csstools/postcss-global-data](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-global-data) plugin.
+
+This ensures that the definitions defined in these files become available to all CSS entrypoints. So individual block styles, the main stylesheet, etc. all have access to these definitions.
+
+> [!WARNING]
+> These CSS files should not produce any output. They are only meant to define global postcss features to become available to all entrypoints
+> Also the loading order of these files should not matter at all. They get auto included via a glob expression.
+
+Mixins also get their special treatment. They have a special [`mixins`](../mixins/) folder located next to this `globals` folder

themes/10up-theme/assets/css/mixins/readme.md

@@ -0,0 +1,11 @@
+# PostCSS Global Mixins
+
+Any individual `.css` files placed in this folder or any nested folder will automatically get loaded by the [postcss-mixins](https://github.com/postcss/postcss-mixins) plugin.
+
+This ensures that the mixins defined in these files become available to all CSS entrypoints. So individual block styles, the main stylesheet, etc. all have access to these mixins.
+
+> [!WARNING]
+> These CSS files should not produce any output. They are only meant to define global postcss features to become available to all entrypoints
+> Also the loading order of these files should not matter at all. They get auto included via a glob expression.
+
+Other global definitions such as `@custom-media`, `@custom-selector`, etc. also get their special treatment. They have a special [`globals`](../globals/) folder located next to this `mixins` folder