Repository: microsoft/griffel
Pull request #411 (2023-07-26 13:36:47)

chore(core): move prefixer to stylis directory
Moves `prefixerPlugin` to `/runtime/stylis` directory where all `stylis` related things live.

github-actions[bot]: ## 📊 Bundle size report

| Package & Exports                                                                                                 |    Baseline (minified/GZIP) |                          PR |                                                                                                                                                                                                Change |
| :---------------------------------------------------------------------------------------------------------------- | --------------------------: | --------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeResetStyles.fixture.js'>makeResetStyles (runtime)</abbr>    | `16.937 kB`<br />`6.452 kB` | `16.943 kB`<br />`6.452 kB` |                                                                                                 `6 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /><br /> |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeStyles.fixture.js'>makeStyles (runtime)</abbr>              | `21.365 kB`<br />`8.067 kB` | `21.371 kB`<br />`8.064 kB` | `6 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /><br />`-3 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/decrease.png" /> |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeResetStyles.fixture.js'>makeResetStyles (runtime)</abbr>   | `18.816 kB`<br />`7.251 kB` | `18.822 kB`<br />`7.251 kB` |                                                                                                 `6 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /><br /> |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeStaticStyles.fixture.js'>makeStaticStyles (runtime)</abbr> |  `8.791 kB`<br />`3.897 kB` |  `8.797 kB`<br />`3.896 kB` | `6 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /><br />`-1 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/decrease.png" /> |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeStyles.fixture.js'>makeStyles (runtime)</abbr>             |  `23.26 kB`<br />`8.836 kB` | `23.266 kB`<br />`8.836 kB` |                                                                                                 `6 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /><br /> |

<details>
<summary>Unchanged fixtures</summary>

| Package & Exports                                                                                                          |       Size (minified/GZIP) |
| -------------------------------------------------------------------------------------------------------------------------- | -------------------------: |
| <samp>core</samp> <br /> <abbr title='bundle-size/__resetStyles.fixture.js'>\_\_resetStyles (makeResetStyles)</abbr>       |       `254 B`<br />`184 B` |
| <samp>core</samp> <br /> <abbr title='bundle-size/__styles.fixture.js'>\_\_styles (makeStyles)</abbr>                      |    `1.649 kB`<br />`787 B` |
| <samp>core</samp> <br /> <abbr title='bundle-size/mergeClasses.fixture.js'>mergeClasses</abbr>                             |     `1.82 kB`<br />`881 B` |
| <samp>core</samp> <br /> <abbr title='bundle-size/shorthands.padding.fixture.js'>shorthands.padding()</abbr>               | `4.677 kB`<br />`1.517 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/__css.fixture.js'>\_\_css</abbr>                                        |    `1.645 kB`<br />`767 B` |
| <samp>react</samp> <br /> <abbr title='bundle-size/__styles.fixture.js'>\_\_styles</abbr>                                  | `3.504 kB`<br />`1.593 kB` |
| <samp>shadow-dom</samp> <br /> <abbr title='bundle-size/createShadowDOMRenderer.fixture.js'>createShadowDOMRenderer</abbr> | `3.232 kB`<br />`1.405 kB` |

</details>
<sub>🤖 This report was generated against <a href='https://github.com/microsoft/griffel/commit/a3267efa6d08ff72c4843320e09a1a06d1e35be5'>a3267efa6d08ff72c4843320e09a1a06d1e35be5</a></sub>

<!-- Sticky Pull Request Comment -->

Patch:
diff --git a/change/@griffel-core-bfc4fd85-b03a-4200-88cc-14704f59ac47.json b/change/@griffel-core-bfc4fd85-b03a-4200-88cc-14704f59ac47.json
new file mode 100644
index 0000000..b0a07ee
--- /dev/null
+++ b/change/@griffel-core-bfc4fd85-b03a-4200-88cc-14704f59ac47.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(core): move prefixer to stylis directory",
+  "packageName": "@griffel/core",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/core/src/runtime/compileCSSRules.ts b/packages/core/src/runtime/compileCSSRules.ts
index b3a3c84..b3553bf 100644
--- a/packages/core/src/runtime/compileCSSRules.ts
+++ b/packages/core/src/runtime/compileCSSRules.ts
@@ -1,8 +1,8 @@
 import { compile, middleware, rulesheet, serialize, stringify } from 'stylis';
 
 import { globalPlugin } from './stylis/globalPlugin';
+import { prefixerPlugin } from './stylis/prefixerPlugin';
 import { sortClassesInAtRulesPlugin } from './stylis/sortClassesInAtRulesPlugin';
-import { prefixer } from './prefixer';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 function noop() {}
@@ -15,8 +15,7 @@ export function compileCSSRules(cssRules: string, sortClassesInAtRules: boolean)
     middleware([
       globalPlugin,
       sortClassesInAtRules ? sortClassesInAtRulesPlugin : noop,
-      // prefixer,
-      prefixer,
+      prefixerPlugin,
       stringify,
 
       // 💡 we are using `.insertRule()` API for DOM operations, which does not support
diff --git a/packages/core/src/runtime/compileKeyframeCSS.ts b/packages/core/src/runtime/compileKeyframeCSS.ts
index b123617..d2fd521 100644
--- a/packages/core/src/runtime/compileKeyframeCSS.ts
+++ b/packages/core/src/runtime/compileKeyframeCSS.ts
@@ -1,6 +1,7 @@
 import type { GriffelAnimation } from '@griffel/style-types';
 import { compile, middleware, serialize, rulesheet, stringify } from 'stylis';
-import { prefixer } from './prefixer';
+
+import { prefixerPlugin } from './stylis/prefixerPlugin';
 import { cssifyObject } from './utils/cssifyObject';
 
 export function compileKeyframeRule(keyframeObject: GriffelAnimation): string {
@@ -25,7 +26,7 @@ export function compileKeyframesCSS(keyframeName: string, keyframeCSS: string):
     compile(cssRule),
     middleware([
       stringify,
-      prefixer,
+      prefixerPlugin,
       // 💡 we are using `.insertRule()` API for DOM operations, which does not support
       // insertion of multiple CSS rules in a single call. `rulesheet` plugin extracts
       // individual rules to be used with this API
diff --git a/packages/core/src/runtime/prefixer.ts b/packages/core/src/runtime/stylis/prefixerPlugin.ts
similarity index 98%
rename from packages/core/src/runtime/prefixer.ts
rename to packages/core/src/runtime/stylis/prefixerPlugin.ts
index 4b9f685..2846ca3 100644
--- a/packages/core/src/runtime/prefixer.ts
+++ b/packages/core/src/runtime/stylis/prefixerPlugin.ts
@@ -9,14 +9,13 @@ import {
   MS,
   MOZ,
   WEBKIT,
-  Element,
   copy,
   serialize,
   DECLARATION,
   RULESET,
   combine,
-  Middleware,
 } from 'stylis';
+import type { Element, Middleware } from 'stylis';
 
 export function prefix(value: string, length: number, children?: Element[]): string {
   switch (hash(value, length)) {
@@ -110,7 +109,7 @@ export function prefix(value: string, length: number, children?: Element[]): str
  * @param {object[]} children
  * @param {function} callback
  */
-export function prefixer(
+export function prefixerPlugin(
   element: Element,
   index: number,
   children: Element[],


Test patch:
diff --git a/packages/core/src/runtime/prefixer.test.ts b/packages/core/src/runtime/stylis/prefixerPlugin.test.ts
similarity index 99%
rename from packages/core/src/runtime/prefixer.test.ts
rename to packages/core/src/runtime/stylis/prefixerPlugin.test.ts
index b3e2fd9..0819666 100644
--- a/packages/core/src/runtime/prefixer.test.ts
+++ b/packages/core/src/runtime/stylis/prefixerPlugin.test.ts
@@ -1,4 +1,4 @@
-import { prefix } from './prefixer';
+import { prefix } from './prefixerPlugin';
 
 const globalCssValues = ['inherit', 'initial', 'unset', 'revert', 'revert-layer'];