Skip to content

Commit

Permalink
Update handling of css globals & mixins
Browse files Browse the repository at this point in the history
  • Loading branch information
fabiankaegy committed Apr 22, 2024
1 parent eccfc08 commit c6104d7
Show file tree
Hide file tree
Showing 6 changed files with 22 additions and 1 deletion.
1 change: 0 additions & 1 deletion themes/10up-theme/assets/css/frontend/global/index.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
@import url("reset.css");
@import url("colors.css");
@import url("media-queries.css");
Empty file.
11 changes: 11 additions & 0 deletions themes/10up-theme/assets/css/globals/readme.md
Original file line number Diff line number Diff line change
@@ -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
Empty file.
11 changes: 11 additions & 0 deletions themes/10up-theme/assets/css/mixins/readme.md
Original file line number Diff line number Diff line change
@@ -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

0 comments on commit c6104d7

Please sign in to comment.