refactor(theme): rename 'resolvers' to 'matchers'

BREAKING CHANGE: the `resolvers` key of theme objects (e.g. passed to `createTheme`) shall be renamed to `matchers`
kripod · Apr 19, 2020 · c363cf3 · c363cf3
1 parent 27e0798
commit c363cf3
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 15 deletions.
diff --git a/packages/glaze/README.md b/packages/glaze/README.md
@@ -145,7 +145,7 @@ export default createTheme({
   aliases: {
     px: 'paddingX',
   },
-  resolvers: {
+  matchers: {
     paddingLeft: 'spacing',
     paddingRight: 'spacing',
   },
@@ -157,7 +157,7 @@ An `sx` parameter is matched to CSS rules as follows:
 1. `{ px: 4 }`
 2. `{ paddingX: 4 }`, after transforming aliases
 3. `{ paddingLeft: 4, paddingRight: 4 }`, after unfolding custom shorthands
-4. `{ paddingLeft: '1rem', paddingRight: '1rem' }`, after applying resolvers
+4. `{ paddingLeft: '1rem', paddingRight: '1rem' }`, after applying matchers
 
 ## ✨ Contributors
 

diff --git a/packages/glaze/src/theme.ts b/packages/glaze/src/theme.ts
@@ -40,8 +40,8 @@ export interface StaticTheme extends CommonTheme {
     zIndex: ScaleTokens<'zIndex'>;
     duration: ScaleTokens<'animationDuration'>;
   };
-  resolvers: {
-    [key in keyof CSSProperties]:
+  matchers: {
+    [property in keyof CSSProperties]:
       | keyof this['scales']
       | keyof ThemeOrAny['scales'];
   };
@@ -180,7 +180,7 @@ export const defaultTokens = {
     bg: 'background',
   },
 
-  resolvers: {
+  matchers: {
     top: 'spacing',
     right: 'spacing',
     bottom: 'spacing',

diff --git a/packages/glaze/src/useStyling.treat.ts b/packages/glaze/src/useStyling.treat.ts
@@ -1,13 +1,14 @@
-import { Style, styleMap } from 'treat';
+import { ClassRef, Style, styleMap } from 'treat';
 
 export default styleMap((theme) => {
-  const result: { [key: string]: Style } = {};
+  const styles: { [className in ClassRef]: Style } = {};
 
-  Object.entries(theme.resolvers).forEach(([property, scale]) => {
+  Object.entries(theme.matchers).forEach(([property, scale]) => {
     const tokens = Object.entries(theme.scales[scale]);
     tokens.forEach(([key, value]) => {
-      result[`${property}-${key}`] = { [property]: value };
+      styles[`${property}-${key}`] = { [property]: value };
     });
   });
-  return result;
+
+  return styles;
 });
diff --git a/packages/glaze/src/useStyling.ts b/packages/glaze/src/useStyling.ts
@@ -85,10 +85,10 @@ export type ThemedStyle = Style &
     [key in Extract<
       | keyof ThemeOrAny['aliases']
       | keyof ThemeOrAny['shorthands']
-      | keyof ThemeOrAny['resolvers'],
+      | keyof ThemeOrAny['matchers'],
       string
     >]?:
-      | keyof ThemeOrAny['scales'][ThemeOrAny['resolvers'][ResolveAlias<key>]]
+      | keyof ThemeOrAny['scales'][ThemeOrAny['matchers'][ResolveAlias<key>]]
 
       // Allow non-themed CSS values
       // TODO: Replace literal union hack, see https://github.com/microsoft/TypeScript/issues/29729

diff --git a/packages/website/docs/how-it-works.mdx b/packages/website/docs/how-it-works.mdx
@@ -33,7 +33,7 @@ export default createTheme({
   aliases: {
     px: 'paddingX',
   },
-  resolvers: {
+  matchers: {
     paddingLeft: 'spacing',
     paddingRight: 'spacing',
   },
@@ -45,4 +45,4 @@ An `sx` parameter is matched to CSS rules as follows:
 1. `{ px: 4 }`
 2. `{ paddingX: 4 }`, after transforming aliases
 3. `{ paddingLeft: 4, paddingRight: 4 }`, after unfolding custom shorthands
-4. `{ paddingLeft: '1rem', paddingRight: '1rem' }`, after applying resolvers
+4. `{ paddingLeft: '1rem', paddingRight: '1rem' }`, after applying matchers
diff --git a/packages/website/docs/theming.mdx b/packages/website/docs/theming.mdx
@@ -4,7 +4,7 @@ title: Theming
 
 ## Default theme
 
-TODO: Details about scales, shorthands and aliases, possibly mentioning the available resolvers
+TODO: Details about scales, shorthands and aliases, possibly mentioning the available matchers
 
 :::note
 Aliases and shorthands can be combined. For instance, `px` is an alias for the `paddingX` shorthand.