Merge branch 'master' into transform-origin-and-percentage-translate

Author: Pedrozxcv

changelog.md

@@ -6,40 +6,74 @@ on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project ad
 
 [comment]: # 'Section Titles: Added/Fixed/Changed/Removed'
 
+## [4.9.1] - 2025-06-25
+
+### Fixed
+
+- Fixed custom border width [(#325)](https://github.com/jaredh159/twrnc/issues/325) and
+  [(#339)](https://github.com/jaredh159/twrnc/issues/339).
+
+## [4.9.0] - 2025-06-12
+
+### Added
+
+- support pointer-events-(auto|none|box-only|box-none) (thanks @ferretwithaberet)
+  [(#349)](https://github.com/jaredh159/tailwind-react-native-classnames/issues/349) and
+  [(#350)](https://github.com/jaredh159/tailwind-react-native-classnames/pull/350)
+
+## [4.8.0] - 2025-05-27
+
+### Added
+
+- support arbitrary hsl colors and opacity modifiers (thanks @cpotdevin)
+  [(#347)](https://github.com/jaredh159/tailwind-react-native-classnames/pull/347)
+
 ## [4.7.0] - 2025-05-06
 
-- support transform scale, rotate, skew, translate
-  [(#343)](https://github.com/jaredh159/tailwind-react-native-classnames/pulls/343)
+### Added
+
+- support transform scale, rotate, skew, translate (thanks @Pedrozxcv)
+  [(#343)](https://github.com/jaredh159/tailwind-react-native-classnames/pull/343)
 
 ## [4.6.1] - 2025-01-24
 
+### Changed
+
 - prevent auto-upgrades to `[email protected]` until we explore/fix compitibility
   [(#331)](https://github.com/jaredh159/tailwind-react-native-classnames/issues/331)
 
 ## [4.6.0] - 2024-11-07
 
 - added support for fontWeight sub-customization in fontSize theming (thanks @Gyeop)
-  [(#324)](https://github.com/jaredh159/tailwind-react-native-classnames/pulls/324)
+  [(#324)](https://github.com/jaredh159/tailwind-react-native-classnames/pull/324)
 
 ## [4.5.1] - 2024-08-23
 
+### Changed
+
 - revised minimum RN version to 0.62.2 after testing, see
   [(#308)](https://github.com/jaredh159/tailwind-react-native-classnames/issues/308)
 
 ## [4.5.0] - 2024-07-22
 
+### Added
+
 - added support for `size-*` shorthand utility
   [(#314)](https://github.com/jaredh159/tailwind-react-native-classnames/issues/314) and
   [(#315)](https://github.com/jaredh159/tailwind-react-native-classnames/pull/315)
 
 ## [4.4.0] - 2024-07-09
 
+### Added
+
 - added support for arbitrary named colors (eg. `text-[lemonchiffon]`)
   [(#306)](https://github.com/jaredh159/tailwind-react-native-classnames/issues/306) and
   [(#309)](https://github.com/jaredh159/tailwind-react-native-classnames/pull/309)
 
 ## [4.3.0] - 2024-06-18
 
+### Added
+
 - added support for line-height shorthand with font-size (eg. `text-sm/6`)
   [(#282)](https://github.com/jaredh159/tailwind-react-native-classnames/issues/292) and
   [(#293)](https://github.com/jaredh159/tailwind-react-native-classnames/pull/293)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "twrnc",
-  "version": "4.7.0",
+  "version": "4.9.1",
   "description": "simple, expressive API for tailwindcss + react-native",
   "author": "Jared Henderson <[email protected]>",
   "module": "dist/esm/index.js",

package.json

@@ -54,6 +54,7 @@ const MyComponent = () => (
 - [RN-Only Additions](#rn-only-additions)
 - [JIT-style Arbitrary Values](#jit-style-arbitrary-values)
 - [VS Code Intellisense](#vs-code-intellisense)
+- [JetBrains IDEs Intellisense](#jetbrains-ides-intellisense)
 - [Memo-Busting](#memo-busting)
 - [Migrating from previous versions](#migrating-from-previous-versions)
 - [Prior Art](#prior-art)
@@ -414,6 +415,7 @@ to web-css, including:
 - `align-self: baseline;` via `self-baseline`
 - `include-font-padding` and `remove-font-padding` (android only: `includeFontPadding`)
 - image tint color control (`tint-{color}` e.g. `tint-red-200`)
+- `pointer-events-(box-only|box-none)`
 
 ## JIT-Style Arbitrary Values
 
@@ -451,6 +453,23 @@ for VS Code.
 More detailed instructions, including how to add snippets, are available
 [here](https://github.com/jaredh159/tailwind-react-native-classnames/discussions/124).
 
+## JetBrains IDEs Intellisense
+
+For JetBrains IDEs (WebStorm, IntelliJ, etc.) Go to Settings | Languages & Frameworks |
+Style Sheets | Tailwind CSS. Add the following configuration options:
+
+```jsonc
+// ...
+"tailwindCSS.classAttributes": [
+    // ...
+    "style"
+],
+"tailwindCSS.classFunctions": ["tw", "tw.color", "tw.style"],
+```
+
+It is important that you have a `tailwind.config.js` in the root of the repository even if
+the content is just `export default {}`, otherwise the Tailwind LSP won't start correctly.
+
 ## Memo Busting
 
 If you're using device-context prefixes (like `dark:`, and `md:`), _memoized_ components

readme.md

@@ -24,6 +24,7 @@ import {
   transformNone,
   translate,
 } from './resolve/transform';
+import pointerEvents from './resolve/pointer-events';
 
 export default class UtilityParser {
   private position = 0;
@@ -337,6 +338,11 @@ export default class UtilityParser {
       if (style) return style;
     }
 
+    if (this.consumePeeked(`pointer-events-`)) {
+      style = pointerEvents(this.rest);
+      if (style) return style;
+    }
+
     h.warn(`\`${this.rest}\` unknown or invalid utility`);
     return null;
   }

src/UtilityParser.ts

@@ -69,3 +69,48 @@ describe(`border-radius`, () => {
     expect(tw.style(utility)).toEqual(expected);
   });
 });
+
+describe(`custom borderWidth`, () => {
+  test(`custom borderWidth values from theme config are applied`, () => {
+    const tw = create({
+      theme: {
+        borderWidth: {
+          DEFAULT: `1px`,
+          0: `0`,
+          2: `2px`,
+          4: `4px`,
+          8: `8px`,
+          10: `10px`,
+          0.5: `0.5px`,
+          hw: `0.33`,
+          foo: `3rem`,
+          bar: `57px`,
+        },
+      },
+    });
+    expect(tw.style(`border-bar`)).toEqual({ borderWidth: 57 });
+    expect(tw.style(`border-foo`)).toEqual({ borderWidth: 48 });
+    expect(tw.style(`border-hw`)).toEqual({ borderWidth: 0.33 });
+    expect(tw.style(`border-0.5`)).toEqual({ borderWidth: 0.5 });
+    expect(tw.style(`border`)).toEqual({ borderWidth: 1 });
+  });
+
+  test(`custom borderWidth and width values from theme.extend are applied`, () => {
+    const tw = create({
+      plugins: [],
+      theme: {
+        extend: {
+          borderWidth: {
+            hw: `0.33`,
+            foo: `3rem`,
+            bar: `57px`,
+          },
+          width: { hw: `0.33` },
+        },
+      },
+    });
+    expect(tw.style(`border-hw w-hw`)).toEqual({ borderWidth: 0.33, width: 0.33 });
+    expect(tw.style(`border-bar`)).toEqual({ borderWidth: 57 });
+    expect(tw.style(`border-foo`)).toEqual({ borderWidth: 48 });
+  });
+});

src/__tests__/borders.spec.ts

@@ -69,8 +69,16 @@ describe(`colors`, () => {
 
   test(`rgb/a configged colors`, () => {
     tw = create({
-      theme: { colors: { foo: `rgb(1, 2, 3)`, bar: `rgba(4, 5, 6, 0.5)` } },
+      theme: {
+        colors: {
+          foo: `rgb(1, 2, 3)`,
+          bar: `rgba(4, 5, 6, 0.5)`,
+          fizz: `rgb(7 8 9)`,
+          buzz: `rgba(10 11 12 / 0.6)`,
+        },
+      },
     });
+
     expect(tw`text-foo bg-bar`).toEqual({
       color: `rgb(1, 2, 3)`,
       backgroundColor: `rgba(4, 5, 6, 0.5)`,
@@ -79,6 +87,66 @@ describe(`colors`, () => {
     expect(tw`text-foo text-opacity-75`).toEqual({
       color: `rgba(1, 2, 3, 0.75)`,
     });
+
+    expect(tw`text-foo/50 bg-bar/75`).toEqual({
+      color: `rgba(1, 2, 3, 0.5)`,
+      backgroundColor: `rgba(4, 5, 6, 0.75)`,
+    });
+
+    expect(tw`text-fizz bg-buzz`).toEqual({
+      color: `rgb(7 8 9)`,
+      backgroundColor: `rgba(10 11 12 / 0.6)`,
+    });
+
+    expect(tw`text-fizz text-opacity-75`).toEqual({
+      color: `rgba(7 8 9 / 0.75)`,
+    });
+
+    expect(tw`text-fizz/50 bg-buzz/75`).toEqual({
+      color: `rgba(7 8 9 / 0.5)`,
+      backgroundColor: `rgba(10 11 12 / 0.75)`,
+    });
+  });
+
+  test(`hsl/a configged colors`, () => {
+    tw = create({
+      theme: {
+        colors: {
+          foo: `hsl(1, 2%, 3%)`,
+          bar: `hsla(4, 5%, 6%, 0.5)`,
+          fizz: `hsl(7 8% 9%)`,
+          buzz: `hsla(10 11% 12% / 0.6)`,
+        },
+      },
+    });
+
+    expect(tw`text-foo bg-bar`).toEqual({
+      color: `hsl(1, 2%, 3%)`,
+      backgroundColor: `hsla(4, 5%, 6%, 0.5)`,
+    });
+
+    expect(tw`text-foo text-opacity-75`).toEqual({
+      color: `hsla(1, 2%, 3%, 0.75)`,
+    });
+
+    expect(tw`text-foo/50 bg-bar/75`).toEqual({
+      color: `hsla(1, 2%, 3%, 0.5)`,
+      backgroundColor: `hsla(4, 5%, 6%, 0.75)`,
+    });
+
+    expect(tw`text-fizz bg-buzz`).toEqual({
+      color: `hsl(7 8% 9%)`,
+      backgroundColor: `hsla(10 11% 12% / 0.6)`,
+    });
+
+    expect(tw`text-fizz text-opacity-75`).toEqual({
+      color: `hsla(7 8% 9% / 0.75)`,
+    });
+
+    expect(tw`text-fizz/50 bg-buzz/75`).toEqual({
+      color: `hsla(7 8% 9% / 0.5)`,
+      backgroundColor: `hsla(10 11% 12% / 0.75)`,
+    });
   });
 
   test(`DEFAULT special modifier`, () => {
@@ -97,9 +165,19 @@ describe(`colors`, () => {
     expect(tw`bg-[rgba(3,4,5,0.1)]`).toEqual({
       backgroundColor: `rgba(3,4,5,0.1)`,
     });
+    expect(tw`bg-[hsla(6,7%,8%,0.2)]`).toEqual({
+      backgroundColor: `hsla(6,7%,8%,0.2)`,
+    });
+
     expect(tw`bg-[#012] bg-opacity-50`).toEqual({
       backgroundColor: `rgba(0, 17, 34, 0.5)`,
     });
+    expect(tw`bg-[rgba(3,4,5,0.1)] bg-opacity-50`).toEqual({
+      backgroundColor: `rgba(3,4,5, 0.5)`,
+    });
+    expect(tw`bg-[hsla(6,7%,8%,0.2)] bg-opacity-50`).toEqual({
+      backgroundColor: `hsla(6,7%,8%, 0.5)`,
+    });
   });
 
   test(`non-group dashed custom colors`, () => {

src/__tests__/colors.spec.ts

@@ -0,0 +1,18 @@
+import { describe, test, expect } from '@jest/globals';
+import { create } from '../';
+
+describe(`pointer-events utilities`, () => {
+  let tw = create();
+  beforeEach(() => (tw = create()));
+
+  const cases: Array<[string, Record<string, string>]> = [
+    [`pointer-events-none`, { pointerEvents: `none` }],
+    [`pointer-events-auto`, { pointerEvents: `auto` }],
+    [`pointer-events-box-only`, { pointerEvents: `box-only` }],
+    [`pointer-events-box-none`, { pointerEvents: `box-none` }],
+  ];
+
+  test.each(cases)(`tw\`%s\` -> %s`, (utility, expected) => {
+    expect(tw.style(utility)).toEqual(expected);
+  });
+});

src/__tests__/pointer-events.spec.ts

@@ -10,9 +10,10 @@ import { color } from './color';
 
 export function border(value: string, theme?: TwTheme): StyleIR | null {
   let [rest, direction] = parseAndConsumeDirection(value);
-  const widthUtilityMatch = rest.match(/^(-?(\d)+)?$/);
-  if (widthUtilityMatch) {
-    return borderWidth(rest, direction, theme?.borderWidth);
+  const config = theme?.borderWidth;
+  const key = rest.replace(/^-/, ``);
+  if (config && (config[key] !== undefined || key.match(/^(-?(\d)+)?$/))) {
+    return borderWidth(key, direction, config);
   }
 
   rest = rest.replace(/^-/, ``);

src/resolve/borders.ts

@@ -19,8 +19,8 @@ export function color(
 
   let color = ``;
 
-  // arbitrary hex/rgb(a) support: `bg-[#eaeaea]`, `text-[rgba(1, 1, 1, 0.5)]`
-  if (value.startsWith(`[#`) || value.startsWith(`[rgb`)) {
+  // arbitrary hex/rgb(a)/hsl(a) support: `bg-[#eaeaea]`, `text-[rgba(1, 1, 1, 0.5)]`, `text-[hsla(1, 1%, 1%, 0.5)]`
+  if (value.startsWith(`[#`) || value.startsWith(`[rgb`) || value.startsWith(`[hsl`)) {
     color = value.slice(1, -1);
     // arbitrary named colors: `bg-[lemonchiffon]`
   } else if (value.startsWith(`[`) && value.slice(1, -1).match(/^[a-z]{3,}$/)) {
@@ -78,11 +78,15 @@ export function colorOpacity(type: ColorStyleType, value: string): StyleIR | nul
 function addOpacity(color: string, opacity: number): string {
   if (color.startsWith(`#`)) {
     color = hexToRgba(color);
-  } else if (color.startsWith(`rgb(`)) {
-    color = color.replace(/^rgb\(/, `rgba(`).replace(/\)$/, `, 1)`);
+  } else if (color.startsWith(`rgb(`) || color.startsWith(`hsl(`)) {
+    color = color.replace(/^rgb\(/, `rgba(`).replace(/^hsl\(/, `hsla(`);
+    if (color.includes(`,`)) {
+      color = color.replace(/\)$/, `, 1)`);
+    } else {
+      color = color.replace(/\)$/, ` / 1)`);
+    }
   }
-  // @TODO: support hls/hlsa if anyone opens an issue...
-  return color.replace(/, ?\d*\.?(\d+)\)$/, `, ${opacity})`);
+  return color.replace(/ ?\d*\.?(\d+)\)$/, ` ${opacity})`);
 }
 
 export function removeOpacityHelpers(style: Style): void {