@tw-classed/core - npm Package Compare versions

Comparing version 1.2.3-canary.0 to 1.2.3-canary.1

dist/cjs/parser.js

@@ -27,31 +27,10 @@ "use strict";
 
-    if ((typeof className === "function" || typeof className === "object") && Reflect.has(className, _constants.TW_VARS)) {
-      const record = Reflect.get(className, _constants.TW_VARS);
-      Object.assign(variantObj, record.variants);
-      Object.assign(defaultVariants, record.defaultVariants);
+    if (typeof className === "object" || typeof className === "function") {
+      const record = Reflect.has(className, _constants.TW_VARS) ? Reflect.get(className, _constants.TW_VARS) : className;
+      record.variants && Object.assign(variantObj, record.variants);
+      record.defaultVariants && Object.assign(defaultVariants, record.defaultVariants);
       record.compoundVariants && compoundVariants.push(...record.compoundVariants);
       record.className && stringClassNames.push(record.className);
       record.base && stringClassNames.push(record.base);
-      continue;
     }
-
-    if (className.variants) {
-      Object.assign(variantObj, className.variants);
-    }
-
-    if (className.defaultVariants) {
-      Object.assign(defaultVariants, className.defaultVariants);
-    }
-
-    if (className.compoundVariants) {
-      compoundVariants.push(...className.compoundVariants);
-    }
-
-    if (className.className) {
-      stringClassNames.push(className.className);
-    }
-
-    if (className.base) {
-      stringClassNames.push(className.base);
-    }
   }
@@ -73,15 +52,4 @@
   const variantValue = props[variantKey];
-  let variantSelector;
-
-  if (typeof variantValue === "string") {
-    variantSelector = variantValue;
-  } else if (typeof variantValue === "boolean") {
-    variantSelector = variantValue.toString();
-  } else if (typeof variantValue === "number") {
-    variantSelector = variantValue.toString();
-  } else {
-    variantSelector = defaultVariants?.[variantKey]?.toString();
-  }
-
-  return variantSelector;
+  const vStringValue = variantValue?.toString();
+  return vStringValue || defaultVariants?.[variantKey]?.toString();
 };
@@ -88,0 +56,0 @@

dist/cjs/utility/classNames.js

@@ -8,3 +8,3 @@ "use strict";
 
-const cx = classNames => classNames.join(" ");
+const cx = classNames => classNames.filter(Boolean).join(" ");
 
@@ -16,4 +16,3 @@ exports.cx = cx;
   if (!c2) return c1;
-  if (c1.length === 0) return c2;
-  if (c2.length === 0) return c1;
+  if (!c1) return c2;
   return c1 + " " + c2;
@@ -20,0 +19,0 @@ };

package.json

 {
   "name": "@tw-classed/core",
-  "version": "1.2.3-canary.0",
+  "version": "1.2.3-canary.1",
   "description": "A Stitches & Styled-Components inspired library to create reusable Tailwind react components",
@@ -5,0 +5,0 @@ "sideEffects": false,

readme.md

 ![tw-classed](https://raw.githubusercontent.com/sannajammeh/tw-classed/master/tw-classed.jpg)
 
-![npm](https://img.shields.io/npm/v/tw-classed?logoColor=%23000000&style=for-the-badge) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/tw-classed?label=GZIP%20Size&logoColor=%23000000&style=for-the-badge) ![NPM](https://img.shields.io/npm/l/tw-classed?style=for-the-badge)
+![npm](https://img.shields.io/npm/v/@tw-classed/core?logoColor=%23000000&style=for-the-badge) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@tw-classed/core?label=GZIP%20Size&logoColor=%23000000&style=for-the-badge) ![NPM](https://img.shields.io/npm/l/@tw-classed/core?style=for-the-badge)
 
-# tw-classed
+# @tw-classed/core
 
 A Stitches & Styled-Components inspired library to create reusable Tailwind based components, fully typed with polymorphic `as` prop, media queries and interaction support.
 
+See the [documentation](https://tw-classed.vercel.app/) for more information.
+
 ## Installation
 
 ```bash
-npm i tw-classed
+npm i @tw-classed/core
 ```
@@ -17,9 +19,38 @@
 
+```js
+import { classed } from "@tw-classed/core";
+
+const button = classed("bg-blue-500 py-2 px-4");
+
+// In your favorite DOM library
+() => html`<button class=${button}>Button</button>`;
+```
+
 ##### Multiple argument support
 
+Quickly sort out your classes by logic
+
+```js
+const button = classed(
+  "bg-blue-500 py-2 px-4",
+  "hover:bg-blue-600",
+  "focus:outline-none"
+);
+```
+
 ##### Using Variants
 
-##### Using the `as` prop
+```js
+const button = classed("bg-blue-500", "hover:bg-blue-600", {
+  variants: {
+    size: {
+      sm: "py-1 px-2",
+      lg: "py-3 px-5",
+    },
+  },
+});
 
-## Coverage
+// In your favorite DOM library
+() => html`<button class=${button({ size: "sm" })}>Button</button>`;
+```
 
@@ -37,3 +68,1 @@ ## Contributing
 7. Create a pull request and await review
-
-> This is still under development, and the API is subject to change. Thanks for your patience.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

67

increased by76.32%

Worsened metrics

Total package byte prevSize

24185

decreased by-3.64%

Lines of code

543

decreased by-8.89%

No dependency changes