feat: change shorthands to aliases

.changeset/seven-geese-kiss.md

@@ -0,0 +1,5 @@
+---
+"@svbstrate/core": patch
+---
+
+Change "shorthands" to "aliases" everywhere

packages/core/lib/__tests__/index.test.ts

@@ -5,7 +5,7 @@ import * as types from "../types";
 import { properties as defaultCssProps } from "../properties";
 import * as defaults from "../presets";
 
-const { tokens, shorthands, macros } = defaults;
+const { tokens, aliases, macros } = defaults;
 
 const theme = createTheme(defaults);
 
@@ -50,7 +50,7 @@ test("style", () => {
  tokens: {
  space: [0, 4, 8, 12],
  },
- shorthands: {
+ aliases: {
  c: ["color"],
  m: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
  },
@@ -85,9 +85,9 @@ for (const key of Object.keys(defaultCssProps)) {
  });
 }
 
-for (const key of Object.keys(shorthands)) {
+for (const key of Object.keys(aliases)) {
  const properties = ([] as string[]).concat(
- shorthands[key as keyof types.Shorthands]
+ aliases[key as keyof types.Aliases]
  );
 
  for (const prop of properties) {
@@ -96,7 +96,7 @@ for (const key of Object.keys(shorthands)) {
 
  if (!property) continue;
 
- test(`shorthands - ${key}`, () => {
+ test(`aliases - ${key}`, () => {
  const { toValue, token } = property;
  const rawValue = 0;
  // @ts-expect-error
@@ -212,7 +212,7 @@ test("negative values", () => {
 
 test("variants", () => {
  const custom = createTheme({
- shorthands,
+ aliases,
  variants: {
  appearance: {
  primary: {
@@ -247,7 +247,7 @@ test("variants", () => {
 test("breakpoints", () => {
  const custom = createTheme({
  breakpoints: ["400px", "800px"],
- shorthands,
+ aliases,
  });
  const styles = style(
  {
@@ -265,7 +265,7 @@ test("breakpoints in correct cascading order", () => {
  const custom = createTheme({
  ...theme,
  breakpoints: ["400px", "800px"],
- shorthands,
+ aliases,
  });
 
  const styles = style(
@@ -291,7 +291,7 @@ test("breakpoints in correct cascading order", () => {
 test("breakpoints in other units", () => {
  const custom = createTheme({
  breakpoints: ["20em", "40em"],
- shorthands,
+ aliases,
  });
  const styles = style(
  {
@@ -308,7 +308,7 @@ test("breakpoints in other units", () => {
 test("too many breakpoints", () => {
  const custom = createTheme({
  breakpoints: ["400px", "800px"],
- shorthands,
+ aliases,
  });
  const styles = style(
  {
@@ -363,7 +363,7 @@ test("pseudo elements", () => {
 test("pick", () => {
  const theme = createTheme({
  tokens,
- shorthands,
+ aliases,
  macros,
  variants: {
  appearance: {

packages/core/lib/__tests__/test

@@ -28,7 +28,7 @@ declare module "../" {
  }
  }
 
- interface Shorthands extends s.PresetShorthands {
+ interface Aliases extends s.PresetAliases {
  foo: s.MapPropertyToToken<'color', 'color'>;
  }
 
@@ -55,8 +55,8 @@ const theme = s.createTheme({
  width: [1],
  padding: space,
  },
- shorthands: {
- ...presets.shorthands,
+ aliases: {
+ ...presets.aliases,
  foo: ["color"],
  },
  macros: {

packages/core/lib/index.ts

@@ -4,7 +4,7 @@ import { properties as cssProperties } from "./properties";
 export * from "./types";
 
 /**
- * Expand all macros, variants, and shorthand props.
+ * Expand all macros, variants, and alias props.
  */
 export function explode(
  props: types.SvbstrateStyleObject,
@@ -60,11 +60,11 @@ export function explode(
  }
 
  /*
- * If any keys are shorthand props, expand them and overwrite their previous
+ * If any keys are alias props, expand them and overwrite their previous
  * values
  */
  for (const [prop, value] of Object.entries(styles)) {
- const cssProperties = theme.shorthands[prop as keyof types.Shorthands] as
+ const cssProperties = theme.aliases[prop as keyof types.Aliases] as
  | string[]
  | undefined;
 
@@ -73,7 +73,7 @@ export function explode(
  styles[property] = value;
  }
 
- delete styles[prop]; // remove original shorthand key
+ delete styles[prop]; // remove original alias key
  }
  }
 
@@ -214,7 +214,7 @@ export function pick<T = types.UnknownKeyValue>(
  if (
  theme.macros[prop as keyof types.Macros] ||
  theme.variants[prop as keyof types.Variants] ||
- theme.shorthands[prop as keyof types.Shorthands] ||
+ theme.aliases[prop as keyof types.Aliases] ||
  theme.properties[prop as keyof types.CSSProperties] ||
  theme.customProperties[prop as keyof types.CustomProperties]
  ) {
@@ -239,7 +239,7 @@ export function createTheme(
  return {
  breakpoints: theme.breakpoints || [],
  tokens: Object.assign({}, theme.tokens || {}),
- shorthands: Object.assign({}, theme.shorthands || {}),
+ aliases: Object.assign({}, theme.aliases || {}),
  macros: Object.assign({}, theme.macros || {}),
  variants: Object.assign({}, theme.variants || {}),
  customProperties: Object.assign({}, theme.customProperties || {}),

packages/core/lib/presets.ts

@@ -27,8 +27,8 @@ export const tokens: {
  lineHeight: [1.1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6],
 };
 
-export const shorthands: {
- [Shorthand in keyof types.PresetShorthands]: (keyof types.CSSProperties)[];
+export const aliases: {
+ [Alias in keyof types.PresetAliases]: (keyof types.CSSProperties)[];
 } = {
  d: ["display"],
  w: ["width"],

packages/core/lib/types.ts

@@ -28,7 +28,7 @@ export interface PresetTokens extends BaseTokens {
 }
 export interface Tokens extends BaseTokens {}
 
-export interface PresetShorthands {
+export interface PresetAliases {
  d: MapPropertyToToken<"display", "display">;
  w: MapPropertyToToken<"width", "width">;
  h: MapPropertyToToken<"height", "height">;
@@ -55,7 +55,7 @@ export interface PresetShorthands {
  lh: MapPropertyToToken<"lineHeight", "lineHeight">;
  ta: MapPropertyToToken<"textAlign", "textAlign">;
 }
-export interface Shorthands {}
+export interface Aliases {}
 
 export interface PresetMacros {
  db: boolean;
@@ -129,7 +129,7 @@ export type SvbstrateCSSStyleObject = {
  paddingBottom?: MapPropertyToToken<"paddingBottom", "space">;
  paddingLeft?: MapPropertyToToken<"paddingLeft", "space">;
  paddingRight?: MapPropertyToToken<"paddingRight", "space">;
-} & Partial<Shorthands> &
+} & Partial<Aliases> &
  Partial<CustomProperties> &
  Partial<Macros> &
  Partial<Variants>;
@@ -158,8 +158,8 @@ export interface ThemeConfig {
  tokens: {
  [Property in keyof Tokens]: Tokens[Property];
  };
- shorthands: {
- [Shorthand in keyof Shorthands]: (keyof CSSProperties)[];
+ aliases: {
+ [Alias in keyof Aliases]: (keyof CSSProperties)[];
  };
  macros: {
  [Macro in keyof Macros]: SvbstrateCSSStyleObject;