postcss-fluid-sizing-function - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "postcss-fluid-sizing-function",
-  "version": "0.0.1",
-  "description": "PostCSS plugin to transform fluid-sizing() to an expression using clamp(), known as fluid typography.",
+  "version": "0.0.2",
+  "description": "PostCSS plugin to transform fluid() to an expression using clamp(), known as fluid typography.",
   "keywords": [
@@ -32,6 +32,7 @@ "postcss-plugin"
   "scripts": {
-    "build": "tsc --noEmit && unbuild",
+    "prebuild": "tsc --noEmit",
+    "build": "unbuild",
     "format": "prettier . --write",
     "prepare": "npm run build",
-    "pretest": "npm run build",
+    "pretest": "npm run build -- --stub",
     "test": "node --test",
@@ -63,4 +64,5 @@ "test:rewrite-expects": "REWRITE_EXPECTS=true npm run test"
   "unbuild": {
+    "sourcemap": true,
     "declaration": "node16"
   }
 }

README.md

 # postcss-fluid-sizing-function
 
-[PostCSS](https://github.com/postcss/postcss) plugin to transform `fluid-sizing()` to an expression using `clamp()`, known as [fluid typography](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/).
+[PostCSS](https://github.com/postcss/postcss) plugin to transform `fluid()` to an expression using `clamp()`, known as [fluid typography](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/).
 
 ```css
 h1 {
-  font-size: fluid-sizing(640px 2rem, 1440px 4rem);
+  font-size: fluid(640px 2rem, 1440px 4rem);
 }
 
 .container {
-  padding: fluid-sizing(640px 24px, 1440px 48px) fluid-sizing(640px 32px, 1440px 64px);
+  padding: fluid(640px 24px, 1440px 48px) fluid(640px 32px, 1440px 64px);
 }
@@ -29,3 +29,3 @@ ```
 
-The `fluid-sizing(from-viewport-width from-size, to-viewport-width to-size)` function accepts four dimensions as two comma-separated pairs as its parameters.
+The `fluid(from-viewport-width from-size, to-viewport-width to-size)` function accepts four dimensions as two comma-separated pairs as its parameters.
 
@@ -67,4 +67,7 @@ - `from-viewport-width`: The starting viewport-width.
 
-### `viewportWidths` (default: `{}`)
+### `viewportWidths`
 
+Type: `{ [key: string]: string }`  
+Default: `{}`
+
 Defines the viewport-widths that can be referenced from `from-viewport-width` and `to-viewport-width` via those keys.
@@ -85,4 +88,4 @@
 h1 {
-  font-size: fluid-sizing(sm 2rem, lg 4rem);
-  /* same as fluid-sizing(640px 2rem, 1440px 4rem) */
+  font-size: fluid(sm 2rem, lg 4rem);
+  /* same as fluid(640px 2rem, 1440px 4rem) */
 }
@@ -106,14 +109,19 @@ ```
 h1 {
-  font-size: fluid-sizing(2rem, 4rem);
-  /* same as fluid-sizing(640px 2rem, 1440px 4rem) */
+  font-size: fluid(2rem, 4rem);
+  /* same as fluid(640px 2rem, 1440px 4rem) */
 }
 ```
 
-### `useLogicalUnits` (default: `false`)
+### `useLogicalUnits`
 
+Type: `Boolean`  
+Default: `false`
+
 Allows you to use `vi` units instead of `vw` units for the output.
 
+Example:
+
 ```css
 h1 {
-  font-size: fluid-sizing(640px 2rem, 1440px 4rem);
+  font-size: fluid(640px 2rem, 1440px 4rem);
 }
@@ -130,8 +138,14 @@ ```
 
-### `rootFontSize` (default: `16`)
+### `rootFontSize`
 
+Type: `Number`  
+Default: `16`
+
 Allows you to set the `font-size` of the root used in the calculations for `rem` units.
 
-### `precision` (default: `5`)
+### `precision`
 
+Type: `Number`  
+Default: `5`
+
 Allows you to control the number of decimal places in the output numbers.

src/index.ts

@@ -14,6 +14,6 @@ import {
 import type { PluginCreator } from 'postcss';
-import { solveFluidSizing } from './fluid-sizing.js';
+import { solveFluid } from './fluid.js';
 
-const FLUID_SIZING_FUNCTION_REGEX = /\bfluid-sizing\(/i;
-const FLUID_SIZING_NAME_REGEX = /^fluid-sizing$/i;
+const FLUID_FUNCTION_REGEX = /\bfluid\(/i;
+const FLUID_NAME_REGEX = /^fluid$/i;
 
@@ -26,7 +26,9 @@ /** postcss-fluid-sizing-function plugin options */
    */
-  viewportWidths?: {
-    [key: string]: string;
-    DEFAULT_FROM?: string;
-    DEFAULT_TO?: string;
-  };
+  viewportWidths?:
+    | {
+        [key: string]: string | undefined;
+        DEFAULT_FROM?: string | undefined;
+        DEFAULT_TO?: string | undefined;
+      }
+    | undefined;
 
@@ -36,3 +38,3 @@ /**
    */
-  useLogicalUnits?: boolean;
+  useLogicalUnits?: boolean | undefined;
 
@@ -42,3 +44,3 @@ /**
    */
-  rootFontSize?: number;
+  rootFontSize?: number | undefined;
 
@@ -48,21 +50,18 @@ /**
    */
-  precision?: number;
+  precision?: number | undefined;
 };
 
-/** Transform fluid-sizing() functions in CSS. */
+/** Transform fluid() functions in CSS. */
 const creator: PluginCreator<pluginOptions> = (options_?: pluginOptions) => {
   const options = {
-    // Default options
-    viewportWidths: {},
-    useLogicalUnits: false,
-    rootFontSize: 16,
-    precision: 5,
-    // Provided options
-    ...options_,
+    viewportWidths: options_?.viewportWidths ?? {},
+    useLogicalUnits: options_?.useLogicalUnits ?? false,
+    rootFontSize: options_?.rootFontSize ?? 16,
+    precision: options_?.precision ?? 5,
   } satisfies pluginOptions;
 
-  function fluidSizing(fluidSizingNode: FunctionNode): ComponentValue | void {
+  function fluid(fluidNode: FunctionNode): ComponentValue | void {
     const relevantNodes: TokenNode[] = [];
 
-    for (const node of fluidSizingNode.value) {
+    for (const node of fluidNode.value) {
       if (isFunctionNode(node) || isSimpleBlockNode(node)) {
@@ -149,3 +148,3 @@ return;
 
-    return solveFluidSizing(fromNodes[0]!, fromNodes[1]!, toNodes[0]!, toNodes[1]!, {
+    return solveFluid(fromNodes[0]!, fromNodes[1]!, toNodes[0]!, toNodes[1]!, {
       useLogicalUnits: options.useLogicalUnits,
@@ -161,3 +160,3 @@ rootFontSize: options.rootFontSize,
       const originalValue = decl.value;
-      if (!FLUID_SIZING_FUNCTION_REGEX.test(originalValue)) {
+      if (!FLUID_FUNCTION_REGEX.test(originalValue)) {
         return;
@@ -169,10 +168,7 @@ }
         (componentValue) => {
-          if (
-            !isFunctionNode(componentValue) ||
-            !FLUID_SIZING_NAME_REGEX.test(componentValue.getName())
-          ) {
+          if (!isFunctionNode(componentValue) || !FLUID_NAME_REGEX.test(componentValue.getName())) {
             return;
           }
 
-          return fluidSizing(componentValue);
+          return fluid(componentValue);
         },
@@ -179,0 +175,0 @@ )

No alert changes

Improved metrics

Total package byte prevSize

57065

increased by104.79%

Number of package files

11

increased by22.22%

Number of lines in readme file

147

increased by10.53%

Worsened metrics

Lines of code

557

decreased by-1.42%

No dependency changes