{"_id":"@auaust/g-class","_rev":"6-464dbd8a8732f75a2ef9ac297f6b25cd","name":"@auaust/g-class","dist-tags":{"latest":"0.3.1"},"versions":{"0.0.0":{"name":"@auaust/g-class","description":"The only function you'll ever need to work with HTML classes in JavaScript","license":"GPL-3.0-only","version":"0.0.0","publishConfig":{"access":"public"},"author":{"name":"Aurian Aubert","email":"aurian@auaust.ch","url":"https://auaust.ch"},"packageManager":"yarn@4.0.2","dependencies":{"@changesets/cli":"^2.27.1"},"gitHead":"03e6615bec6db2e362bbe5b878b766d44fc7c955","_id":"@auaust/g-class@0.0.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-RkrfaWjXe1rS+v1CZHHCIqQwf4/xce9v0KK735mXDv6C8w9mDm26XPhiyOYwsCdDyOIR32/1U9bQOvU6KNE29g==","shasum":"789c2786bd7f650c9472cfd1429b5a3b533d48f4","tarball":"https://registry.npmjs.org/@auaust/g-class/-/g-class-0.0.0.tgz","fileCount":5,"unpackedSize":37371,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtF5lfOmGMNJEIU0B+arIINMtqTQEm0gs3ETnSOrRrxgIgDXK/FHoIn5L0SHT1UHnRj8QgY7Flrb6dvb8LtEC07/0="}]},"_npmUser":{"name":"apademide","email":"aurian@auaust.ch"},"directories":{},"maintainers":[{"name":"apademide","email":"aurian@auaust.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/g-class_0.0.0_1703267591906_0.13683399339104585"},"_hasShrinkwrap":false},"0.1.0":{"name":"@auaust/g-class","description":"The only function you'll ever need to work with HTML classes in JavaScript","license":"GPL-3.0-only","version":"0.1.0","publishConfig":{"access":"public"},"author":{"name":"Aurian Aubert","email":"aurian@auaust.ch","url":"https://auaust.ch"},"scripts":{"build":"yarn test && tsup index.ts --format cjs,esm --dts","lint":"tsc","test":"yarn jest","coverage":"yarn jest --coverage","publish":"yarn build && changeset publish"},"packageManager":"yarn@4.0.2","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","devDependencies":{"@changesets/cli":"^2.27.1","@jest/globals":"^29.7.0","jest":"^29.7.0","ts-jest":"^29.1.1","tsup":"^7.2.0","typescript":"^5.2.2"},"_id":"@auaust/g-class@0.1.0","gitHead":"c76633d8eb27758e4bd063835f5f01896f51280f","_nodeVersion":"21.5.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-Xn52dbHiWrqp4ECJAA8SXhLcBb3IGW+3RIxZjR9M8ZWL4rPCW94gU0w3xTB3C7IaLOFF/MIgJoelrtZTGOFqdQ==","shasum":"0a1194aa899a47d3ef5ca00d79a8d5e2d54475ae","tarball":"https://registry.npmjs.org/@auaust/g-class/-/g-class-0.1.0.tgz","fileCount":21,"unpackedSize":71986,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDsSKv4vTM/33AUBVvuTotai6G+vps6nvDD78g21smKjAiEAm/AUZgmXsuCLCpyEcenRepkMjjqdQuceTqgE+TW17g0="}]},"_npmUser":{"name":"apademide","email":"aurian@auaust.ch"},"directories":{},"maintainers":[{"name":"apademide","email":"aurian@auaust.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/g-class_0.1.0_1703349294609_0.5115048363171648"},"_hasShrinkwrap":false},"0.1.1":{"name":"@auaust/g-class","description":"The only function you'll ever need to work with HTML classes in JavaScript","license":"GPL-3.0-only","version":"0.1.1","publishConfig":{"access":"public"},"author":{"name":"Aurian Aubert","email":"aurian@auaust.ch","url":"https://auaust.ch"},"scripts":{"build":"yarn test && tsup index.ts --format cjs,esm --dts","lint":"tsc","test":"yarn jest","coverage":"yarn jest --coverage","publish":"yarn build && changeset publish"},"packageManager":"yarn@4.0.2","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","devDependencies":{"@changesets/cli":"^2.27.1","@jest/globals":"^29.7.0","jest":"^29.7.0","ts-jest":"^29.1.1","tsup":"^7.2.0","typescript":"^5.2.2"},"_id":"@auaust/g-class@0.1.1","gitHead":"88c61fe6f15dc69413099b129ec7e9afbb0b4169","_nodeVersion":"21.5.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-p2pCxFA966UMNXZDIx2bTUZo60lcb16Lgw8WPdRTAl1I+XrtCXCVHpevAKl6bACvKViNCvBk15BA+huoMQIJuA==","shasum":"1978530d935e95568d4c69e39258e1c941f4e144","tarball":"https://registry.npmjs.org/@auaust/g-class/-/g-class-0.1.1.tgz","fileCount":21,"unpackedSize":80415,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGplQXvbcTDLFjl21QEc/2sn3rQHYraZh/SmaA26HvSgIgYXUclwgEOcepQ1rE3bSShrmy8h5oDPXVFLPtsrNRkqA="}]},"_npmUser":{"name":"apademide","email":"aurian@auaust.ch"},"directories":{},"maintainers":[{"name":"apademide","email":"aurian@auaust.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/g-class_0.1.1_1703590837265_0.06540250474183051"},"_hasShrinkwrap":false},"0.1.2":{"name":"@auaust/g-class","description":"The only function you'll ever need to work with HTML classes in JavaScript","license":"GPL-3.0-only","version":"0.1.2","publishConfig":{"access":"public"},"author":{"name":"Aurian Aubert","email":"aurian@auaust.ch","url":"https://auaust.ch"},"scripts":{"build":"yarn test && tsup index.ts --format cjs,esm --dts","lint":"tsc","test":"yarn jest","coverage":"yarn jest --coverage","publish":"yarn build && changeset publish"},"packageManager":"yarn@4.0.2","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","devDependencies":{"@changesets/cli":"^2.27.1","@jest/globals":"^29.7.0","jest":"^29.7.0","ts-jest":"^29.1.1","tsup":"^7.2.0","typescript":"^5.2.2"},"_id":"@auaust/g-class@0.1.2","gitHead":"3a89620b2e01a4ce31bbc63eb2a97ff79c3097dc","_nodeVersion":"21.5.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-mXY2kC35f3txEk1M2/MrlBSQk4RFbSxSJg8M5Nooa1KsD8LQlyqLoTzCP2IhLesGm43rMU3xmEgubhnifzId/w==","shasum":"65874e10dabcce592dfbb1ba97bce4f614963704","tarball":"https://registry.npmjs.org/@auaust/g-class/-/g-class-0.1.2.tgz","fileCount":21,"unpackedSize":77305,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBd4Sojej3YL872O3DwlsFNnxzXm+22RO12Fw9rPCeYtAiEA/spkvn0WxAzbokK/AIbKACct+dKzm61ASPidyyaGMms="}]},"_npmUser":{"name":"apademide","email":"aurian@auaust.ch"},"directories":{},"maintainers":[{"name":"apademide","email":"aurian@auaust.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/g-class_0.1.2_1703592620617_0.22347733169326833"},"_hasShrinkwrap":false},"0.2.0":{"name":"@auaust/g-class","description":"The only function you'll ever need to work with HTML classes in JavaScript","license":"GPL-3.0-only","version":"0.2.0","publishConfig":{"access":"public"},"author":{"name":"Aurian Aubert","email":"aurian@auaust.ch","url":"https://auaust.ch"},"packageManager":"pnpm@8.14.1","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","devDependencies":{"@changesets/cli":"^2.27.1","@jest/globals":"^29.7.0","jest":"^29.7.0","ts-jest":"^29.1.1","tsup":"^8.0.1","typescript":"^5.2.2"},"scripts":{"build":"pnpm test && tsup index.ts --format cjs,esm --dts","typecheck":"tsc --noEmit","test":"pnpm jest","coverage":"pnpm jest --coverage"},"_id":"@auaust/g-class@0.2.0","_integrity":"sha512-QMz6E8QCbVdIqTH9F5dCTnCX9yMaC9S07HuG9kpiIxCytvd8UvSQ5AjopI+eHNvx4jB2uxFvSr16AVXkgx405Q==","_resolved":"/tmp/7acf156f421efb16e05985ab35a6b36f/auaust-g-class-0.2.0.tgz","_from":"file:auaust-g-class-0.2.0.tgz","_nodeVersion":"21.6.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-QMz6E8QCbVdIqTH9F5dCTnCX9yMaC9S07HuG9kpiIxCytvd8UvSQ5AjopI+eHNvx4jB2uxFvSr16AVXkgx405Q==","shasum":"c9b3d7912e3cc1241292e65147b24971e665b841","tarball":"https://registry.npmjs.org/@auaust/g-class/-/g-class-0.2.0.tgz","fileCount":21,"unpackedSize":78433,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDactgmRBbGHzoPpZi7q3YJafS+WhB8bCG9l9rdbVQVZwIhAJQMb4gEYaKnkxz9DzXw3oHFWBoJLlIBUrBdf3XEjB1y"}]},"_npmUser":{"name":"apademide","email":"aurian@auaust.ch"},"directories":{},"maintainers":[{"name":"apademide","email":"aurian@auaust.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/g-class_0.2.0_1706025721664_0.2939064178355555"},"_hasShrinkwrap":false},"0.3.0":{"name":"@auaust/g-class","description":"The only function you'll ever need to work with HTML classes in JavaScript","license":"GPL-3.0-only","version":"0.3.0","publishConfig":{"access":"public"},"author":{"name":"Aurian Aubert","email":"aurian@auaust.ch","url":"https://auaust.ch"},"packageManager":"pnpm@8.14.1","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","devDependencies":{"@changesets/cli":"^2.27.1","@jest/globals":"^29.7.0","jest":"^29.7.0","ts-jest":"^29.1.1","tsup":"^8.0.1","typescript":"^5.2.2"},"scripts":{"build":"pnpm test && tsup index.ts --format cjs,esm --dts","typecheck":"tsc --noEmit","test":"pnpm jest","coverage":"pnpm jest --coverage"},"_id":"@auaust/g-class@0.3.0","_integrity":"sha512-Wms5OwmniahF3pzKvI5CzFrf8K/FxfMp6ZDouii+xbZv1s2ldUfg619P9WWKtHy4wiNCtr5eoA78F2FVISjGpQ==","_resolved":"/tmp/4a28c5337e55b9b4a838c6b9780d991e/auaust-g-class-0.3.0.tgz","_from":"file:auaust-g-class-0.3.0.tgz","_nodeVersion":"21.6.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-Wms5OwmniahF3pzKvI5CzFrf8K/FxfMp6ZDouii+xbZv1s2ldUfg619P9WWKtHy4wiNCtr5eoA78F2FVISjGpQ==","shasum":"2d9b253a49d60d86c09ecf355204b16767b95973","tarball":"https://registry.npmjs.org/@auaust/g-class/-/g-class-0.3.0.tgz","fileCount":21,"unpackedSize":81325,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2e9R68aoXOameL08ViDixIYAOU8xVYdJheNziJ45lKAiBsDW2N76K6qrBANKdPaq9yxaZ0XbB5r6GcLGZcMdFwNA=="}]},"_npmUser":{"name":"apademide","email":"aurian@auaust.ch"},"directories":{},"maintainers":[{"name":"apademide","email":"aurian@auaust.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/g-class_0.3.0_1707657063737_0.6197879001966482"},"_hasShrinkwrap":false},"0.3.1":{"name":"@auaust/g-class","description":"The only function you'll ever need to work with HTML classes in JavaScript","license":"GPL-3.0-only","version":"0.3.1","publishConfig":{"access":"public"},"author":{"name":"Aurian Aubert","email":"aurian@auaust.ch","url":"https://auaust.ch"},"packageManager":"pnpm@8.14.1","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","devDependencies":{"@changesets/cli":"^2.27.1","@jest/globals":"^29.7.0","jest":"^29.7.0","ts-jest":"^29.1.1","tsup":"^8.0.1","typescript":"^5.2.2"},"scripts":{"build":"pnpm test && tsup index.ts --format cjs,esm --dts","typecheck":"tsc --noEmit","test":"pnpm jest","coverage":"pnpm jest --coverage"},"_id":"@auaust/g-class@0.3.1","_integrity":"sha512-h/FbWokNSTVI1Svekmx22CtuV9Qolma1Cue4Fl+tKSsXdzjnQGMcfXpyFoHgpAPbSA+eTo1Klb+hTR7iwr6+QA==","_resolved":"/tmp/9b354206fffb2406813ec74515d3cb15/auaust-g-class-0.3.1.tgz","_from":"file:auaust-g-class-0.3.1.tgz","_nodeVersion":"21.7.1","_npmVersion":"10.5.0","dist":{"integrity":"sha512-h/FbWokNSTVI1Svekmx22CtuV9Qolma1Cue4Fl+tKSsXdzjnQGMcfXpyFoHgpAPbSA+eTo1Klb+hTR7iwr6+QA==","shasum":"b4015f180d49d023772270b29534d16eaca559a0","tarball":"https://registry.npmjs.org/@auaust/g-class/-/g-class-0.3.1.tgz","fileCount":21,"unpackedSize":81343,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAQWe1woCajaR/99SoLPIsE5fhso9gS79CrW3eGRsvaNAiA7S10Xg/euiCcwxmjOJUNs6yhJIMhlU4aUBnNFpdBTOQ=="}]},"_npmUser":{"name":"apademide","email":"aurian@auaust.ch"},"directories":{},"maintainers":[{"name":"apademide","email":"aurian@auaust.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/g-class_0.3.1_1710425338741_0.3090210379532037"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-22T17:53:11.816Z","0.0.0":"2023-12-22T17:53:12.105Z","modified":"2024-03-14T14:08:59.350Z","0.1.0":"2023-12-23T16:34:54.849Z","0.1.1":"2023-12-26T11:40:37.472Z","0.1.2":"2023-12-26T12:10:20.766Z","0.2.0":"2024-01-23T16:02:01.899Z","0.3.0":"2024-02-11T13:11:03.893Z","0.3.1":"2024-03-14T14:08:58.885Z"},"maintainers":[{"name":"apademide","email":"aurian@auaust.ch"}],"description":"The only function you'll ever need to work with HTML classes in JavaScript","author":{"name":"Aurian Aubert","email":"aurian@auaust.ch","url":"https://auaust.ch"},"license":"GPL-3.0-only","readme":"###### AUAUST LIBRARIES — JavaScript — G-Class\n\n> This repository is made public to open the codebase to contributors.\n> When contributing to this repo, you agree to assign your copyrights to AUAUST.\n\n# G-Class\n\nG-Class provides a limited set of function to help deal with CSS Modules and CSS classes from JavaScript. Alike the Mercedes-Benz G-Class, it is robust, polyvalent and powerful. Unlike the Mercedes-Benz G-Class, it is lightweight, free, and isn't a car.\n\n## Overview\n\n```tsx\ncl(\n  \"my-class-1\",\n  false && \"my-class-2\",\n  true && \"my-class-3\",\n  () => \"my-class-4\",\n  [\n    \"my-class-5\",\n    {\n      \"my-class-6\": true,\n      \"my-class-7\": false,\n    },\n  ]\n); // => \"my-class-1 my-class-3 my-class-4 my-class-5 my-class-6\"\n```\n\n## Key Features\n\n- **Type Safety** – Strongly typed. Even CSS classes.\n- **Framework Agnostic** – Works with any framework (or no framework at all) as long as you can set classes on your elements by passing a string.\n- **No config** - The handling of CSS Modules should already be done by your bundler, which means any configuration is already done when G-Class receives values.\n- **Easy** – WYSIWYG.\n- **Robust** – Mostly based on native methods, adding a layer of type safety and convenience.\n- **No Dependencies** – No external dependencies. Just pure JavaScript. (Or TypeScript, if you prefer.)\n- **Isomorphic** – No usage of special APIs. Only JavaScript.\n\n## Installation\n\n```sh\nyarn add @auaust/g-class\n```\n\nor if you prefer Bun:\n\n```sh\nbun add @auaust/g-class\n```\n\n## Usage\n\nThe most simple and common use case is to use the `cl()` function to generate a string of CSS classes from a set of arguments.\nG-Class, however, also provides a set of functions that specifically target usage of CSS Modules in a type-safe manner.\n\n### `cl()`(Class List)\n\nTo `cl()` you can pass pretty much anything. All arguments will be converted to a string and concatenated.\nThe following are supported, and will be converted as follows:\n\n- Any falsy value will be ignored:\n  - `undefined` and `null` will be ignored.\n  - A number will be ignored. (Numbers are not valid CSS classes.)\n  - An empty string will be ignored.\n- All booleans will be ignored.\n- A non-empty string will be returned as is.\n- A function will be called and its return value will be re-injected into `cl()`.\n- Each entry of an array will be re-injected into `cl()`.\n- Objects will be looped through, and each key which value is truthy will be included in the output.\n\n#### Type Safety\n\nThe `cl()` function expects inputs of type `GClass.Classable`. If you happen to pass a value that's not accepted by the type system, which is unlikely if you use the function as intended, you can use `foo as GClass.Classable`. There's no risk of runtime errors with `cl()` even if you pass invalid values. They'll just be ignored.\n\n### `gc()`(Global Classes)\n\nThe advantage of using CSS Modules is that you can easily type them with existing packages such as [`typed-css-modules`](https://www.npmjs.com/package/typed-css-modules). This means you can import a CSS file in you project and be sure to only apply valid CSS classes to your elements. A rather annoying downside of using CSS Modules, tho, is the need to constantly import a bunch of CSS files and then use them in complex template literals.\nThe `cl()` function was the first step to solve this issue, as passing a few arguments to a function is much easier and safer than building a template literal. We still end up with a bunch of imports which are also often globally-targetted CSS Modules (especially when using utility-first design patterns).\n\nThe `gc()` function solves this issue. You can register the global CSS Modules once, then use them in your code by only importing the `gc()` function:\n\n```tsx\nimport { gc } from \"@auaust/g-class\";\n\nfunction Component() {\n  return (\n    <div\n      class={gc(\n        \"text:black\",\n        \"text:alignCenter\",\n        \"color:bgBlue\"\n        // ...and any other CSS class you've registered\n      )}\n    >\n      {\" \"}\n      G-Class is awesome!{\" \"}\n    </div>\n  );\n}\n```\n\n#### Registering Global CSS Modules\n\nBy default, no class is registered thus no class can be used. The `registerModule` function will register a CSS Module and make it available to the `gc()` function. You can register as many CSS Modules as you want. You can also register multiple CSS Modules under a single namespace, which can help you split your CSS Modules into multiple files. If you register multiple CSS Modules under the same namespace and they contain the same CSS class, the last one registered will be used.\n\nThe first argument of `registerModule` is the namespace, and the second argument is the CSS Module itself. A CSS Module is an object where the keys are the CSS classes that map to a unique string, generated by your CSS bundler.\n\n```css\n/* styles.module.css */\n\n.color-black {\n  color: black;\n}\n\n.quote {\n  color: darkgray;\n  text-align: center;\n  font-style: italic;\n}\n.quote::before {\n  content: \"“\";\n}\n.quote::after {\n  content: \"”\";\n}\n```\n\n```tsx\nimport { registerModule, gc } from \"@auaust/g-class\";\nimport styles from \"./styles.module.css\";\n\nregisterModule(\"text\", styles);\n\ngc(\"text:colorBlack\"); // => \"_style_color-black_1jac3\" (or whatever your CSS bundler generates)\ngc(\"text:quote\"); // => \"_style_quote_5b1h3\"\n\ngc(\"text:colorBlack\", \"text:quote\"); // => \"_style_color-black_1jac3 _style_quote_5b1h3\"\n\ngc(\"invalid:class\"); // => \"\", will not throw an error but will return an empty string silently\n```\n\nEven thought there's likely no reason to do so, note you can remove a registered CSS Module by calling `dropModule(namespace)`.\n\n#### Class names\n\nThe actual CSS Modules implementation must be done by your bundler. If you're using Vite, they're supported out of the box. This means whether you should use `gc(\"test:my-class\")` or `gc(\"test:myClass\")` depends on your bundler and external configuration.\n\nG-Class is transparent about this and will not modify the class names you pass to `gc()`.\n\n#### Type Safety\n\nOut of the box, `gc()` will accept any input that matches `${string}:${string}`. This means any namespace and any class name will be accepted as long as the general string format is respected. To provide great type safety, you need to extend the `RegisteredCSSModules` interface with your own CSS Modules. Be aware that as soon as a single CSS Module is registered, the `gc()` function will become strongly typed and any unregistered class you pass to it will be highlighted by your IDE.\n\nTo extend the interface, you can either pass the type of a CSS Module or `true`, which will allow any class name to be passed under the namespace.\n\n```tsx\nimport { registerModule } from \"@auaust/g-class\";\nimport textStyles from \"./text.module.css\";\nimport colorStyles from \"./color.module.css\";\nimport gridStyles from \"./grid.module.css\";\n\ndeclare module \"@auaust/g-class\" {\n  interface RegisteredCSSModules {\n    text: typeof textStyles;\n    color: true;\n  }\n}\n\nregisterModule(\"text\", textStyles);\nregisterModule(\"color\", colorStyles);\nregisterModule(\"grid\", gridStyles);\n\ngc(\"text:colorBlack\"); // Will be allowed AND will be hinted by your IDE\ngc(\"text:invalidClass\"); // Will be highlighted as an error by your IDE\ngc(\"color:invalidClass\"); // Will be allowed since any class name is allowed under the \"color\" namespace\ngc(\"grid:validClass\"); // Will be highlighted as an error by your IDE as the interface was not extended for the \"grid\" namespace\n\n// If, however, you used the same code without extending the interface, each entry would be accepted as they respect the `${string}:${string}` format.\n```\n\n### Concrete Example\n\nSince the `gc()` function returns a string, you can easily include it in the `cl()` function too. If you only need to use global classes, you can safely only use the `gc()` function as it provides the same runtime safety as the `cl()` function.\n\n```tsx\nimport { cl, gc } from \"@auaust/g-class\";\nimport styles from \"./my-component-styles.module.css\";\n\nfunction Component() {\n  return (\n    <div\n      clas={cl(\n        \"my-global-class\",\n        active() && \"my-active-class\", // Would work in a reactive context, if your framework supports it\n        styles.myComponentClass,\n        gc(\"text:colorBlack\", \"text:quote\")\n      )}\n    >\n      <p class={gc(\"text:mono\")}> Hello World! </p>\n    </div>\n  );\n}\n```\n\n## Related\n\nThe main function, `cl()`, is widely inspired by [`clsx`](https://www.npmjs.com/package/clsx). If you're looking for a more minimalistic solution, don't need functions to be called and don't use the globally registered CSS Modules, you should definitely check it out.\n\n## Sponsor\n\nThis library is a project by us, [AUAUST](https://auaust.ch/). We sponsor ourselves!\n","readmeFilename":"README.md"}