can import classnames as standalone

Author: fibo

README.md

@@ -41,7 +41,7 @@ Almost all Trunx components have a `bulma` prop that accepts:
 
 - a string
 - an array of bulma classes
-- an object which keys are bulma classes
+- an object which keys are bulma classes, when value is truthy then the class is added
 - an array of any of the previous
 
 You know, Trunx is a Super Sayan because it is written in TypeScript. The `bulma` prop can be autocompleted and typos can be avoided thanks to type checking.
@@ -70,7 +70,7 @@ export function MyComponent({ isSuccess }: { isSuccess: boolean }) {
 
 #### Bulma related components
 
-Trunx provides other React components that implement a Bulma element or a Bulma Component. This means that they usually add a related Bulma class. For example `Button` components renders a button tag with the Bulma `button` class. They may have props related to some Bulma class (.e.g. `color`, `size`). Most of the Bulma related props start with `is`, `has` and the prop name is just the camel-case version of its related Bulma class. For example `isRounded` prop corresponds to `is-rounded` Bulma class.
+Trunx provides React components that implement a Bulma element or a Bulma component. This means that they usually add a related Bulma class. For example `Button` component renders a button HTML tag with the Bulma `button` class. They may have props related to some Bulma class (.e.g. `color`, `size`). Most of the Bulma related props start with `is`, `has` and the prop name is just the camel-case version of its related Bulma class. For example `isRounded` prop corresponds to `is-rounded` Bulma class.
 
 ```tsx
 <Button color="primary" size="large" isRounded>
@@ -193,6 +193,8 @@ Bulma related:
 
 Trunx package provides a utility for conditionally joining CSS classes together.
 
+Syntax is similar to [classnames npm package](https://www.npmjs.com/package/classnames).
+
 ```js
 import { classnames } from "trunx"
 
@@ -233,6 +235,15 @@ export function MyButton({
 }
 ```
 
+Notice that you can use Trunx without React! It can be used with any framework as well as with _Web Components_.
+The _classnames.js_ is only 299 bytes and can be imported directly with
+
+```js
+import classnames from "trunx/classnames"
+```
+
+The snippet above will avoid importing the React stuff.
+
 ## How to
 
 ### Use Trunx with Vite

minify.js

@@ -18,7 +18,10 @@ const minifiedClassnames = originalClassnames
   .replace(/ \=/g, "=")
   .replace(/\= /g, "=")
   .replace(/; /g, ";")
+  .replace(/ &&/g, "&&")
+  .replace(/&& /g, "&&")
   .replace(/if \(/g, "if(")
+  .replace(/\) return/g, ")return")
 
 const minifiedComponents = originalComponents
   .replace(/\{\n/g, "{")

package.json

@@ -9,6 +9,10 @@
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
+    },
+    "./classnames": {
+      "import": "./dist/classnames.js",
+      "types": "./dist/classnames.d.ts"
     }
   },
   "scripts": {

src/classnames.ts

@@ -33,7 +33,7 @@ export const classnames = <T extends string>(...args: ClassnamesArg<T>[]) =>
         // Make sure `arg` is not null,
         arg &&
         // and `arg` is a proper object.
-        typeof arg === "object"
+        typeof arg == "object"
       )
         return classnames(
           // Map `arg` object to an array of its keys, having a truthy value.