fix: use 'bw' instead of cx in preparation for intellisense

README.md

@@ -32,24 +32,24 @@ This library takes inspiration from [Tailwind CSS] ([see differences](https://gi
 
 ## Quick Start
 
-> ⚡️ Check out the [live and interactive demo](https://esm.codes/#Ly8gQmVhbXdpbmQgZGVtbyAoYmFzZWQgb24gY29kZSBieSBAbHVrZWphY2tzb25uIC0gY3JlYXRvciBvZiBvY2VhbndpbmQpCi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tCiAgICAKaW1wb3J0IHsgcmVuZGVyLCBodG1sIH0gZnJvbSAnaHR0cHM6Ly9ucG0ucmV2ZXJzZWh0dHAuY29tL3ByZWFjdCxwcmVhY3QvaG9va3MsaHRtL3ByZWFjdCc7CmltcG9ydCB0YWlsd2luZCBmcm9tICdodHRwczovL3VucGtnLmNvbS9AYmVhbXdpbmQvcHJlc2V0LXRhaWx3aW5kP21vZHVsZScKaW1wb3J0IHByZWZsaWdodCBmcm9tICdodHRwczovL3VucGtnLmNvbS9AYmVhbXdpbmQvcHJlZmxpZ2h0P21vZHVsZScKaW1wb3J0IHsgY3gsIHNldHVwIH0gZnJvbSAnaHR0cHM6Ly91bnBrZy5jb20vYmVhbXdpbmQ/bW9kdWxlJwoKc2V0dXAoW3RhaWx3aW5kLCBwcmVmbGlnaHRdKQoKCmNvbnN0IHN0eWxlID0gewogIC8vIEV4YW1wbGUgb2YgYWJzdHJhY3RlZCBzdHlsZQogIGNvbnRhaW5lcjogY3hgaC1mdWxsIGJnLXByb21vdGUgZmxleCBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXJgCn0KCnJlbmRlcigKICBodG1sYAogICAgPGRpdiBjbGFzc05hbWU9JHtzdHlsZS5jb250YWluZXJ9PgogICAgICA8aDEgY2xhc3NOYW1lPSR7CiAgICAgICAgLy8gRXhhbXBsZSBvZiBhbiBpbmxpbmUgc3R5bGUKICAgICAgICBjeGAKICAgICAgICAgIHRleHQoNHhsIHdoaXRlKQogICAgICAgICAgZm9udChib2xkIHNhbnMpCiAgICAgICAgICBob3ZlcjoodHJhbnNpdGlvbiB0cmFuc2Zvcm0gcm90YXRlLTUgc2NhbGUtMTUwIGN1cnNvci1wb2ludGVyKQogICAgICAgIGAKICAgICAgfT5IZWxsbyBXb3JsZDwvaDE+CiAgICA8L2Rpdj4KICBgLAogIGRvY3VtZW50LmJvZHkKKTs=)
+> ⚡️ Check out the [live and interactive demo](https://esm.codes/#Ly8gQmVhbXdpbmQgZGVtbyAoYmFzZWQgb24gY29kZSBieSBAbHVrZWphY2tzb25uIC0gY3JlYXRvciBvZiBvY2VhbndpbmQpCi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tCiAgICAKaW1wb3J0IHsgcmVuZGVyLCBodG1sIH0gZnJvbSAnaHR0cHM6Ly9ucG0ucmV2ZXJzZWh0dHAuY29tL3ByZWFjdtwwcmVhY3QvaG9va3MsaHRtL3ByZWFjdCc7CmltcG9ydCB0YWlsd2luZCBmcm9tICdodHRwczovL3VucGtnLmNvbS9AYmVhbXdpbmQvcHJlc2V0LXRhaWx3aW5kP21vZHVsZScKaW1wb3J0IHByZWZsaWdodCBmcm9tICdodHRwczovL3VucGtnLmNvbS9AYmVhbXdpbmQvcHJlZmxpZ2h0P21vZHVsZScKaW1wb3J0IHsgYncsIHNldHVwIH0gZnJvbSAnaHR0cHM6Ly91bnBrZy5jb20vYmVhbXdpbmQ/bW9kdWxlJwoKc2V0dXAoW3RhaWx3aW5kLCBwcmVmbGlnaHRdKQoKCmNvbnN0IHN0eWxlID0gewogIC8vIEV4YW1wbGUgb2YgYWJzdHJhY3RlZCBzdHlsZQogIGNvbnRhaW5lcjogYndgaC1mdWxsIGJnLXByb21vdGUgZmxleCBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXJgCn0KCnJlbmRlcigKICBodG1sYAogICAgPGRpdiBjbGFzc05hbWU9JHtzdHlsZS5jb250YWluZXJ9PgogICAgICA8aDEgY2xhc3NOYW1lPSR7CiAgICAgICAgLy8gRXhhbXBsZSBvZiBhbiBpbmxpbmUgc3R5bGUKICAgICAgICBid2AKICAgICAgICAgIHRleHQoNHhsIHdoaXRlKQogICAgICAgICAgZm9udChib2xkIHNhbnMpCiAgICAgICAgICBob3ZlcjoodHJhbnNpdGlvbiB0cmFuc2Zvcm0gcm90YXRlLTUgc2NhbGUtMTUwIGN1cnNvci1wb2ludGVyKQogICAgICAgIGAKICAgICAgfT5IZWxsbyBXb3JsZDwvaDE+CiAgICA8L2Rpdj4KICBgLAogIGRvY3VtZW50LmJvZHkKKTs=)
 
 ```js
-import { cx } from 'https://unpkg.com/beamwind?module'
+import { bw } from 'https://unpkg.com/beamwind?module'
 
-document.body.className = cx`h-full bg-primary rotate-3 scale-95`
+document.body.className = bw`h-full bg-primary rotate-3 scale-95`
 ```
 
 Using the [tailwind preset](https://github.com/kenoxa/beamwind/blob/main/packages/preset-tailwind) and a [set opinionated of base styles](https://github.com/kenoxa/beamwind/blob/main/packages/preflight) for modern browsers:
 
 ```js
 import tailwind from 'https://unpkg.com/@beamwind/preset-tailwind?module'
 import preflight from 'https://unpkg.com/@beamwind/preflight?module'
-import { cx, setup } from 'https://unpkg.com/beamwind?module'
+import { bw, setup } from 'https://unpkg.com/beamwind?module'
 
 setup([tailwind, preflight])
 
-document.body.className = cx`h-full bg-purple-500 rotate-3 scale-95`
+document.body.className = bw`h-full bg-purple-500 rotate-3 scale-95`
 ```
 
 ## Packages

benchmarks/run.mjs

@@ -1,7 +1,7 @@
 import benchmark from 'benchmark'
 
 import { themed } from 'oceanwind/index.min.js'
-import { cx, setup, fail, createInstance } from 'beamwind/dist/node/esm/beamwind.js'
+import { bw, setup, fail, createInstance } from 'beamwind/dist/node/esm/beamwind.js'
 
 const ow = themed({ strict: true })
 setup({ warn: fail })
@@ -30,7 +30,7 @@ function bench(name, run) {
 
  new Suite()
  .add('oceanwind', () => run(ow))
- .add('beamwind', () => run(cx))
+ .add('beamwind', () => run(bw))
  .on('cycle', (event) => console.log(` ${event.target}`))
  .run()
 }
@@ -45,8 +45,8 @@ function benchInitial() {
  return ow(tokens)
  })
  .add('beamwind', () => {
- const { cx } = createInstance({ warn: fail })
- return cx(tokens)
+ const { bw } = createInstance({ warn: fail })
+ return bw(tokens)
  })
  .on('cycle', (event) => console.log(` ${event.target}`))
  .run()

examples/svelte/src/app.svelte

@@ -1,6 +1,6 @@
 <script context="module">
  import preflight from '@beamwind/preflight'
- import { cx, setup } from 'beamwind'
+ import { bw, setup } from 'beamwind'
 
  if (import.meta.env.MODE !== 'production') {
  setup({ hash: false })
@@ -35,7 +35,7 @@
 <script>
  import { onMount } from 'svelte'
 
- const appLink = cx`text-#ff3e00 no-underline inline-block px-md`
+ const appLink = bw`text-#ff3e00 no-underline inline-block px-md`
 
  let count = 0
 
@@ -47,24 +47,24 @@
  })
 </script>
 
-<div class={cx`text-center`}>
+<div class={bw`text-center`}>
  <header
- class={cx`bg-#f9f6f6 text-#333 min-h-screen flex flex-col items-center justify-center text-2xl`}>
+ class={bw`bg-#f9f6f6 text-#333 min-h-screen flex flex-col items-center justify-center text-2xl`}>
  <img
  src="/logo.svg"
- class={cx`h-36vmin pointer-events-none mb-12 animate-logo-pulse`}
+ class={bw`h-36vmin pointer-events-none mb-12 animate-logo-pulse`}
  alt="logo" />
- <p class={cx`app-p`}>
+ <p class={bw`app-p`}>
  Edit
- <code class={cx`app-code`}>src/App.svelte</code>
+ <code class={bw`app-code`}>src/App.svelte</code>
  and save to reload.
  </p>
- <p class={cx`app-p`}>
+ <p class={bw`app-p`}>
  Page has been open for
- <code class={cx`app-code`}>{count}</code>
+ <code class={bw`app-code`}>{count}</code>
  seconds.
  </p>
- <p class={cx`app-p divide-x`}>
+ <p class={bw`app-p divide-x`}>
  <a class={appLink} href="https://svelte.dev" target="_blank" rel="noopener noreferrer">
  Learn Svelte
  </a>
@@ -77,9 +77,9 @@
  </a>
  </p>
 
- <p class={cx`app-p divide-x`}>
+ <p class={bw`app-p divide-x`}>
  <button
- class={cx`focus:outline-none text-sm px-5 py-3 rounded-md font-semibold bg-promote ring(& xs promote offset(xs on-promote))`}>
+ class={bw`focus:outline-none text-sm px-5 py-3 rounded-md font-semibold bg-promote ring(& xs promote offset(xs on-promote))`}>
  ring-offset-purple-100
  </button>
  </p>

packages/beamwind/README.md

@@ -37,14 +37,14 @@ Here is a quick example:
 // Load an opinionated set of base styles for Tailwind projects.
 // If you need to support IE 11 use @beamwind/reset
 import preflight from 'https://unpkg.com/@beamwind/preflight'
-import { cx, setup } from 'https://unpkg.com/beamwind'
+import { bw, setup } from 'https://unpkg.com/beamwind'
 
 setup(preflight)
 
-<div class={cx`flex space`}>
- <div class={cx`w-1/3`}><!-- ... --></div>
- <div class={cx`w-1/3`}><!-- ... --></div>
- <div class={cx`w-1/3`}><!-- ... --></div>
+<div class={bw`flex space`}>
+ <div class={bw`w-1/3`}><!-- ... --></div>
+ <div class={bw`w-1/3`}><!-- ... --></div>
+ <div class={bw`w-1/3`}><!-- ... --></div>
 </div>
 ```
 
@@ -81,16 +81,16 @@ npm install beamwind
 And then import it:
 
 ```js
-import { cx } from 'beamwind'
+import { bw } from 'beamwind'
 ```
 
 ## Usage
 
-To use the library, first import the module then invoke the `cx` export using tagged template syntax:
+To use the library, first import the module then invoke the `bw` export using tagged template syntax:
 
 ```js
-import { cx } from 'https://unpkg.com/beamwind'
-document.body.className = cx`h-full bg-purple-500 rotate-3 scale-95`
+import { bw } from 'https://unpkg.com/beamwind'
+document.body.className = bw`h-full bg-purple-500 rotate-3 scale-95`
 ```
 
 Running the above code will result in the following happening:
@@ -113,10 +113,10 @@ for directives that require themed values (like `bg-primary` for example).
 
 > The [Theming section](#theming) provides detailed insight into the theming options.
 
-To customize the theme, use the `setup` export. This will change the theme used by the `cx` export.
+To customize the theme, use the `setup` export. This will change the theme used by the `bw` export.
 
 ```js
-import { cx, setup } from 'beamwind'
+import { bw, setup } from 'beamwind'
 
 setup({
  theme: {
@@ -126,7 +126,7 @@ setup({
  },
 })
 
-cx`bg-red-500` // will result in a hotpink background-color
+bw`bg-red-500` // will result in a hotpink background-color
 ```
 
 > `setup` can be called multiple times where each call extends the existing configuration.
@@ -150,7 +150,7 @@ css`bg-red-500` // will result in a hotpink background-color
 
 ### Function Signature
 
-It is possible to invoke beamwind in a multitude of different ways. The `cx` function can take **_any_** number of arguments, each of which can be an Object, Array, Boolean, Number, String or [inline plugins](#inline-plugins). This feature is based on [clsx](https://www.npmjs.com/package/cslx).
+It is possible to invoke beamwind in a multitude of different ways. The `bw` function can take **_any_** number of arguments, each of which can be an Object, Array, Boolean, Number, String or [inline plugins](#inline-plugins). This feature is based on [clsx](https://www.npmjs.com/package/cslx).
 
 > **Important**: _Any_ falsey values are discarded!
 > Standalone Boolean values are discarded as well.
@@ -159,40 +159,40 @@ For example:
 
 ```js
 // Tag Template Literal (falsey interpolations will be omitted)
-cx`bg-primary rounded`
+bw`bg-primary rounded`
 //=> 'bg-primary rounded'
 
-cx`bg-primary ${false && 'rounded'}`
+bw`bg-primary ${false && 'rounded'}`
 //=> 'bg-primary'
 
-cx`bg-primary ${[false && 'rounded', 'block']}`
+bw`bg-primary ${[false && 'rounded', 'block']}`
 //=> 'bg-primary block'
 
-cx`bg-primary ${{ rounded: false, 'text-underline': isTrue() }}`
+bw`bg-primary ${{ rounded: false, 'text-underline': isTrue() }}`
 //=> 'bg-primary text-underline'
 
 // Strings (variadic)
-cx('bg-primary', true && 'rounded', 'text-underline')
+bw('bg-primary', true && 'rounded', 'text-underline')
 //=> 'bg-primary rounded text-underline'
 
 // Objects (keys with falsey values will be omitted)
-cx({ 'bg-primary': true, rounded: false, 'text-underline': isTrue() })
+bw({ 'bg-primary': true, rounded: false, 'text-underline': isTrue() })
 //=> 'bg-primary text-underline'
 
 // Objects (variadic)
-cx({ 'bg-primary': true }, { rounded: false }, null, { 'text-underline': true })
+bw({ 'bg-primary': true }, { rounded: false }, null, { 'text-underline': true })
 //=> 'bg-primary text-underline'
 
 // Arrays (falsey items will be omitted)
-cx(['bg-primary', 0, false, 'rounded'])
+bw(['bg-primary', 0, false, 'rounded'])
 //=> 'bg-primary rounded'
 
 // Arrays (variadic)
-cx(['bg-primary'], ['', 0, false, 'rounded'], [['text-underline', [['text-lg'], 'block']]])
+bw(['bg-primary'], ['', 0, false, 'rounded'], [['text-underline', [['text-lg'], 'block']]])
 //=> 'bg-primary rounded text-underline text-lg block'
 
 // Kitchen sink (with nesting)
-cx(
+bw(
  'bg-primary',
  [1 && 'rounded', { underline: false, 'color-secondary': null }, ['text-lg', ['shadow-lg']]],
  'uppercase',
@@ -207,7 +207,7 @@ Directives with the same variants can be grouped using parenthesis. Beamwind wil
 > Notice any directives within tagged template literals can span multiple lines
 
 ```js
-cx`
+bw`
  sm:hover:(
  bg-black
  text-white
@@ -220,7 +220,7 @@ cx`
 It is possible to nest groupings too, for example:
 
 ```js
-cx`
+bw`
  sm:(
  bg-black
  text-white
@@ -233,7 +233,7 @@ cx`
 Object values which are String, Array or Object start a new variant group:
 
 ```js
-cx({
+bw({
  sm: {
  'bg-black': true,
  'text-white': true,
@@ -250,14 +250,14 @@ cx({
 Directives with the same prefix can be grouped using parenthesis. Beamwind will expand the nested directives; applying the prefix to each directive in the group before translation. For example:
 
 ```js
-cx`text(center underline bold primary)`)
+bw`text(center underline bold primary)`)
 // text-center text-underline text-bold text-primary
 ```
 
 Some directives like [ring](https://tailwindcss.com/docs/ring-width) need to be applied as is. For that case you can use the special `&` directive which is replaced with the current prefix:
 
 ```js
-cx`ring(& promote offset(sm on-promote))`)
+bw`ring(& promote offset(sm on-promote))`)
 // ring ring-promote ring-offset-sm ring-offset-on-promote
 ```
 
@@ -274,11 +274,11 @@ const header = (theme) => ({
  'text-align': 'center',
 })
 
-cx`font-bold ${card} color-primary`
+bw`font-bold ${card} color-primary`
 // Note: Same works for arrays and objects
 
 // You can use variants
-cx`sm:${card} color-primary`
+bw`sm:${card} color-primary`
 // Same works for arrays and objects
 ```
 
@@ -297,10 +297,10 @@ const btn = (color) => {
  return 'inline-block font-bold py-2 px-4 rounded'
 }
 
-cx(btn())
+bw(btn())
 // => inline-block font-bold py-2 px-4 rounded
 
-cx([btn(), btn('primary')])
+bw([btn(), btn('primary')])
 // => inline-block font-bold py-2 px-4 rounded bg-primary text-primary-contrast hover:bg-primary-hover active:bg-primary-active
 ```
 
@@ -632,7 +632,7 @@ setup({
 
 > Components define a set of utility tokens that should be applied if the component token is used.
 
-Static components that are only a collection of utilities can be defined as strings. The following example allows to use `card` as a token (`cx('card')`) which will be expanded to `max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl`:
+Static components that are only a collection of utilities can be defined as strings. The following example allows to use `card` as a token (`bw('card')`) which will be expanded to `max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl`:
 
 ```js
 import { setup } from 'beamwind'
@@ -662,7 +662,7 @@ setup({
 })
 ```
 
-Some dynamic components depend on additional logic and like to use the familiar `cx` API. For these case beamwind provides the [apply](https://github.com/kenoxa/beamwind/blob/main/packages/beamwind/docs/modules/_helpers_.md#apply) helper, which has the same API signature as `cx`.
+Some dynamic components depend on additional logic and like to use the familiar `bw` API. For these case beamwind provides the [apply](https://github.com/kenoxa/beamwind/blob/main/packages/beamwind/docs/modules/_helpers_.md#apply) helper, which has the same API signature as `bw`.
 
 ```js
 import { setup, apply, optional } from 'beamwind'
@@ -773,7 +773,7 @@ An injector is responsible for adding a CSS rule to its underlying target.
 During testing or server-side rendering the `virtualInjector` should be used:
 
 ```js
-import { cx, setup, virtualInjector } from 'beamwind'
+import { bw, setup, virtualInjector } from 'beamwind'
 
 const injector = virtualInjector()
 setup({ injector })
@@ -790,7 +790,7 @@ import { createInstance, cssomInjector } from 'beamwind'
 
 const iframeDocument = document.getElementsByTagName('iframe')[0].contentDocument
 
-export const { cx } = createInstance({
+export const { bw } = createInstance({
  injector: cssomInjector({
  // Make sure this node exists or create it on the fly if necessary
  target: iframeDocument.getElementById('beamwind'),
@@ -810,11 +810,11 @@ import { createInstance, virtualInjector } from 'beamwind'
 import { getStyleTag } from '@beamwind/ssr'
 
 const injector = virtualInjector()
-const cx = createInstance({ injector })
+const bw = createInstance({ injector })
 
 const html = htm.bind(h)
 const style = {
- main: cx`clearfix`,
+ main: bw`clearfix`,
 }
 
 const app = html`<main className=${style.main}>hello beamwind</main>`

packages/beamwind/TODO.md

@@ -23,12 +23,17 @@ Server Side Rendering including re-hydration
 https://tailwindui.com/components
 @tailwindcss/forms: https://github.com/tailwindlabs/tailwindcss-forms
 
+Autocompletion:
 https://tailwindcss.com/docs/intellisense
+https://github.com/kingdaro/typescript-plugin-tw-template
 
-important: needs a use case before implementing
+💥 Add important to any class with a trailing bang!
+
+bw`hidden!`
+// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
+{ "display": "none !important" }
 
-```
-text-bold!important
 ```
 
 https://tailwindcss.com/docs/background-image#background-images
+```