jorgebucaran / classcat Goto Github PK

From the discussion on Reddit.

Curious why you allow number type rather than returning a warning or error or just skipping it.

A class that starts with a number is not valid CSS. However, I think that restriction might be going away in future revisions of the CSS spec. Even so, a number on its own is semantically meaningless without some sort of prefix.

In retrospect, I shouldn't have added a feature I didn't need at the time (YAGNI), but I wanted one feature more than classNames. I still don't need this feature and think it's unnecessary bloat, so I'd like to remove it and release a 3.0 (even though I just published 2.0 with a breaking bug fix from @developerdizzle).

EDIT: If people using this project are opposed to this change, I am okay with not removing it, otherwise let's do it! 🔥

The order of my classes is different server side and client side, so I am forced to use classnames in the meantime.

Consider changing name. Thought this was something for cond inheritance.

$ git clone https://github.com/jorgebucaran/classcat.git
$ cd classcat/bench
$ npm i
$ node .
[...]
Error: Cannot find module '../'
[...]

Only after running npm run build and applying to following patch to bench/index.js

-const cc = require("../")
+const cc = require("../dist/classcat")

was I able to run the benchmarks as described in bench/README.md

Same as JedWatson/classnames#182

In react, if the value passed to className is an empty string, the html output will be <div class=""/>. In order to have a clean <div />, undefined should be passed.

Any idea how this can be solved? There is a PR in classnames, what do you think about this in classcat? :)

Hey 👋

I've check provided string benchmark which has ['one', 'two', 'three'] argument. It produces one two three class.

Both classnames and clsx don't need to use array argument for this - clsx('one', 'two', 'three') will produce same class.

Would be nice to have this reflected in benchmark to see if it has any effect. 🤔

The ./bench dir contains a benchmarking code that is not part of the module strictly speaking so it doesn't need to be published. On the same line of argument we can skip publishing the tests as well.

Suggested solution

Add an .npmignore file to the root with this content:

bench/
tests/

That's all! 👍

// Install with npm
npm i classcat

// foo.tsx
import classcat from 'classcat'

bundle with rollup(transpile with typescript)

show warning: 'classcat' is imported by src\js\foo.tsx, but could not be resolved – treating it as an external dependency

no problem with other import

Perhaps you could mention that cc is a unary function (arity of 1, accepts 1 argument) and not variadic (indefinite arity).

“variable arguments” confused me a little at first, I think using the mathematical terms is more concise, easier to google as well than linking to mdn’s argument page.

The library currently provides only default export, which makes it a bit inconvenient for IntelliSense to provide autocomplete and automatic imports. Re-exporting with export { default as cc } from 'classcat' somewhat solves this issue, but in my opinion having named export would be beneficial as it improves developer experience.

I'm using a utility framework with Classcat and it wasn't rendering the classes for one of the checks even thought it was evaluating to true. Switching the order of the classes, or renaming the first class made it work.

cc([
    'mr-auto px-1 py-0.5 font-bold tracking-lg rounded',
    {
        'text-black bg-white': isNew(order),
-       'text-white bg-grey': isPending(order), // don't work
+       'bg-grey text-white': isPending(order), // works
// or
+       'text-green bg-grey': isPending(order), // works
        'text-white bg-grey': isAccepted(order),
        'text-red bg-white': isExpired(order),
    }
])

I'm reporting because it looks like a bug.

v5 breaks in a create-react-app project. Maybe related to exports in package.json and webpack 4?

https://codesandbox.io/s/hidden-rain-pldjt?file=/src/App.js

title self descriptive.

I initially started using classnames and discovered classcat about 3 years ago and always preferred it due to its size and speed.

However, classnames offer a very handy method called bind to make it easier to work with CSS Modules.

Do you have plans to implement something similar?

Congratulations on the v4 release 🎉

Btw, our Jest tests are broken with the classcat v4 😢

/home/wata727/ghq/github.com/wata727/sideci/node_modules/classcat/src/index.js:3                         
    export default function cc(names) {                                                                      
    ^^^^^^                                                                                                   

    SyntaxError: Unexpected token export

      13 |   readonly className?: string
      14 |   readonly onClick?: (children: string) => void
    > 15 |   readonly children: string
         |                                    ^
      16 |   readonly dismissible?: boolean
      17 |   readonly button?: boolean
      18 |   readonly "data-spec"?: string

      at ScriptTransformer._transformAndBuildScript (../node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (../node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (src/cheshire/components/Chip/index.tsx:15:36)

I guess that's probably because the main target is now an ES module. But Jest doesn't support ES modules natively. See jestjs/jest#4842

My team thinks it is not a good idea to introduce Babel just because of this problem... Could you also support CommonJS style modules? Thank you.

I think we should link in Readme this amazing project: https://github.com/merceyz/babel-plugin-optimize-clsx.

I just asked to add this library as a default.

Good morning! 👋

As per 3.1.1 (which changed bundling system to iife), Webpack bundling of classcat causes the following error:

TypeError: classcat__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function

With all due respect, I suggest not changing what your library exports in a patch. 😄

You probably should roll back to 3.1.0 or publish 3.1.2 with amd bundling and offer iife in 4.0.0 or optionally in a minor along side with the existing export interface.

Hope it helps!

Classcat is orders of magnitude faster.

Also, classNames accepts a variable number of arguments whereas Classcat a single argument.

cc("foo", "bar", "baz") // => foo

To work around this, wrap the arguments inside an array.

cc(["foo", "bar", "baz"]) // => foo bar baz

Eg:

classcat([
  "tab",
  {
    tab: {
      "--success": false,
    }
  }
]); // "tab tab"

https://codepen.io/dizzle/pen/baOjjj

I would expect it not to be included in the class list, but is this by design?

Description

While the function already supports the following missing types, the typings does not and this renders TypeScript to not be able to run the type check without any errors.

Proposals

1. Use safer unknown to accept any types

   export as namespace Classcat
   
   /**
    * @param names A string, array or object of CSS class names (as keys).
    * @returns The class attribute string.
    */
   export default function (names: unknown): string
   

2. Add missing undefined and null

   - export type Class = string | number | ClassObject | ClassArray
   + export type Class = string | number | undefined | null | ClassObject | ClassArray
   ...

I started tinkering with a codemod to replace JedWatson/classNames with classwrap re: this comment.

JSCodeShift hurts my head.

progress so far:
http://astexplorer.net/#/gist/0373f05229963c3e336b5eec91818479/3718f610fc2e9982a934da242a35104be0947312

may there be weeping and gnashing of teeth.

https://codepen.io/colshacol/pen/MOzMOQ?editors=0010

I went to check out the CodePen example and found that it did not work.

I referred to the hyperapp docs and found that app.view needed to be composed of two functions rather than one function that takes two arguments.

Then I got a similar error with actions.toggle and found in the docs that actions should be structured the same way as the view.

I made these changes on a "fork" for you to review and update your existing CodePen example.

... And, for compliance and to make myself feel like a real contributor...

Expected:

When going to check out the CodePen example, the example works.

Actual:

When going to check out the CodePen example, the example not works.

Steps to Reproduce:

Go checkout the CodePen example.