@meetdomaine/tailwind-syrah - npm Package Compare versions

Comparing version 1.0.24 to 1.0.25

package.json

 {
   "name": "@meetdomaine/tailwind-syrah",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "A TailwindCSS plugin for Domaine",
@@ -5,0 +5,0 @@ "main": "src/index.ts",

src/addButtons/schema.ts

@@ -20,3 +20,3 @@ import { z } from "zod";
 
-const BaseSpacingSchema = z
+export const BaseSpacingSchema = z
   .record(z.string(), ResponsiveValuesSchema)
@@ -23,0 +23,0 @@ .transform((data) => {

src/addSizing/index.ts

@@ -9,2 +9,3 @@ import { set } from "lodash";
   ResponsiveValuesNumberSchema,
+  BaseSpacingSchema,
 } from "./schema";
@@ -18,10 +19,15 @@ import { ExtendedConfig } from "../types";
 
-const addSpacingConfig = (config: ExtendedConfig, manifest: unknown) => {
+const addSpacingConfig = (
+  config: ExtendedConfig,
+  manifest: unknown,
+  withFluid = true
+) => {
   const spacings = SpacingsSchema.safeParse(manifest);
   const flatSpacing = StaticSpacingsSchema.safeParse(manifest);
   if (spacings.success) {
-    set(config, "theme.extend.spacing", {
-      ...config.theme?.extend?.spacing,
-      ...spacings.data,
-    });
+    withFluid &&
+      set(config, "theme.extend.spacing", {
+        ...config.theme?.extend?.spacing,
+        ...spacings.data,
+      });
   } else {
@@ -91,6 +97,87 @@ consoleError(spacings.error.message, "Manifest Colors are Invalid");
 
-const handler = (config: ExtendedConfig, manifest: unknown) => {
-  addSpacingConfig(config, manifest);
+const getSpacingForType = (types: string[]) => {
+  return (value: unknown) => {
+    const validateValue = ResponsiveValuesNumberSchema.safeParse(value);
+    if (validateValue.success) {
+      const mobileStyles = types.reduce((acc, type) => {
+        return {
+          ...acc,
+          [type]: rem(validateValue.data.mobile),
+        };
+      }, {});
+
+      const desktopStyles = types.reduce((acc, type) => {
+        return {
+          ...acc,
+          [type]: rem(validateValue.data.desktop),
+        };
+      }, {});
+
+      return {
+        ...mobileStyles,
+        [`@screen ${ScreenSizeMapping.desktop}`]: desktopStyles,
+      };
+    }
+
+    return null;
+  };
 };
 
+export const addResponsizeSpacing = (
+  pluginAPI: PluginAPI,
+  manifest: unknown
+) => {
+  const mapping = BaseSpacingSchema.safeParse(manifest);
+
+  if (mapping.success) {
+    debug("mapping", mapping.data);
+    pluginAPI.matchUtilities(
+      {
+        gap: getSpacingForType(["gap"]),
+        "row-gap": getSpacingForType(["row-gap"]),
+        "column-gap": getSpacingForType(["column-gap"]),
+        p: getSpacingForType(["padding"]),
+        px: getSpacingForType(["paddingLeft", "paddingRight"]),
+        py: getSpacingForType(["paddingTop", "paddingBottom"]),
+        pt: getSpacingForType(["paddingTop"]),
+        pb: getSpacingForType(["paddingBottom"]),
+        pl: getSpacingForType(["paddingLeft"]),
+        pr: getSpacingForType(["paddingRight"]),
+        m: getSpacingForType(["margin"]),
+        mt: getSpacingForType(["marginTop"]),
+        mb: getSpacingForType(["marginBottom"]),
+        ml: getSpacingForType(["marginLeft"]),
+        mr: getSpacingForType(["marginRight"]),
+        mx: getSpacingForType(["marginLeft", "marginRight"]),
+        my: getSpacingForType(["marginTop", "marginBottom"]),
+        inset: getSpacingForType(["top", "right", "bottom", "left"]),
+        top: getSpacingForType(["top"]),
+        right: getSpacingForType(["right"]),
+        bottom: getSpacingForType(["bottom"]),
+        left: getSpacingForType(["left"]),
+        width: getSpacingForType(["width"]),
+        minWidth: getSpacingForType(["minWidth"]),
+        maxWidth: getSpacingForType(["maxWidth"]),
+        height: getSpacingForType(["height"]),
+        minHeight: getSpacingForType(["minHeight"]),
+        maxHeight: getSpacingForType(["maxHeight"]),
+      },
+      {
+        values: mapping.data,
+      }
+    );
+  } else {
+    debug("Sizing", mapping.error.message);
+    consoleError(mapping.error.message, "Manifest Colors are Invalid");
+  }
+};
+
+const handler = (
+  config: ExtendedConfig,
+  manifest: unknown,
+  withFluid = true
+) => {
+  addSpacingConfig(config, manifest, withFluid);
+};
+
 export default handler;

src/addSizing/schema.ts

@@ -11,3 +11,3 @@ import { z } from "zod";
 
-const BaseSpacingSchema = z
+export const BaseSpacingSchema = z
   .record(z.string(), ResponsiveValuesSchema)
@@ -14,0 +14,0 @@ .transform((data) => {

src/index.ts

@@ -15,3 +15,3 @@ import plugin from "tailwindcss/plugin";
 } from "./types";
-import addSizing, { addBorderRadius } from "./addSizing";
+import addSizing, { addBorderRadius, addResponsizeSpacing } from "./addSizing";
 import addFluidHelper from "./addFluidHelper";
@@ -99,2 +99,4 @@ import addButtons from "./addButtons";
     addBorderRadius(pluginAPI, manifest[ManifestKeys.Sizing]);
+    !fluidTypography &&
+      addResponsizeSpacing(pluginAPI, manifest[ManifestKeys.Sizing]);
   };
@@ -110,2 +112,3 @@ };
     sizing = true,
+    fluidTypography = true,
   }: DomainTWOptions) {
@@ -120,3 +123,3 @@ checkManifestFileExists(manifestFilePath);
     colors && addColors(config, manifest[ManifestKeys.Colors]);
-    sizing && addSizing(config, manifest[ManifestKeys.Sizing]);
+    sizing && addSizing(config, manifest[ManifestKeys.Sizing], fluidTypography);
     typography && addTypographyConfigOverrides(config);
@@ -123,0 +126,0 @@ return config satisfies ExtendedConfig;

No alert changes

Improved metrics

Total package byte prevSize

42446

increased by7.1%

Lines of code

1352

increased by6.62%

No dependency changes