tailwindcss/src/util
Robin Malfait 527031d5f6
Improve data type analyses for arbitrary values (#9320)
* improve split logic by delimiter

The original RegEx did mostly what we want, the idea is that we wanted
to split by a `,` but one that was not within `()`. This is useful when
you define multiple background colors for example:
```html
<div class="bg-[rgb(0,0,0),rgb(255,255,255)]"></div>
```

In this case splitting by the regex would result in the proper result:
```js
let result = [
  'rgb(0,0,0)',
  'rgb(255,255,255)'
]
```

Visually, you can think of it like:
```
    ┌─[./example.html]
    │
∙ 1 │   <div class="bg-[rgb(0,0,0),rgb(255,255,255)]"></div>
    ·                       ──┬── ┬    ─────┬─────
    ·                         │   │         ╰─────── Guarded by parens
    ·                         │   ╰───────────────── We will split here
    ·                         ╰───────────────────── Guarded by parens
    │
    └─
```

We properly split by `,` not inside a `()`. However, this RegEx fails
the moment you have deeply nested RegEx values.

Visually, this is what's happening:
```
    ┌─[./example.html]
    │
∙ 1 │   <div class="bg-[rgba(0,0,0,var(--alpha))]"></div>
    ·                         ┬ ┬ ┬
    ·                         ╰─┴─┴── We accidentally split here
    │
    └─
```
This is because on the right of the `,`, the first paren is an opening
paren `(` instead of a closing one `)`.

I'm not 100% sure how we can improve the RegEx to handle that case as
well, instead I wrote a small `splitBy` function that allows you to
split the string by a character (just like you could do before) but
ignores the ones inside the given exceptions. This keeps track of a
stack to know whether we are within parens or not.

Visually, the fix looks like this:
```
    ┌─[./example.html]
    │
∙ 1 │   <div class="bg-[rgba(0,0,0,var(--alpha)),rgb(255,255,255,var(--alpha))]"></div>
    ·                         ┬ ┬ ┬             ┬       ┬   ┬   ┬
    ·                         │ │ │             │       ╰───┴───┴── Guarded by parens
    ·                         │ │ │             ╰────────────────── We will split here
    ·                         ╰─┴─┴──────────────────────────────── Guarded by parens
    │
    └─
```

* use already existing `splitAtTopLevelOnly` function

* add faster implemetation for `splitAtTopLevelOnly`

However, the faster version can't handle separators with multiple
characters right now. So instead of using buggy code or only using the
"slower" code, we've added a fast path where we use the faster code
wherever we can.

* use `splitAtTopLevelOnly` directly

* make split go brrrrrrr

* update changelog

* remove unncessary array.from call

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2022-09-14 14:08:56 +02:00
..
bigSign.js [WIP] Unify JIT and AOT code paths (#4188) 2021-04-30 10:58:40 -04:00
buildMediaQuery.js Add tuple syntax to guarantee screens order (#6104) 2021-11-16 18:01:06 +01:00
cloneDeep.js Remove lodash (#5390) 2021-09-06 14:15:10 -04:00
cloneNodes.js Don't rewrite source maps for @layer rules (#8971) 2022-07-27 12:19:08 -04:00
color.js Improve type detection for arbitrary color values (#8201) 2022-04-28 11:18:51 +01:00
configurePlugins.js Make it possible to enable caretColor and content core plugins in AOT mode (#4548) 2021-06-03 15:27:22 +02:00
createPlugin.js ensure options for plugins are not stale between builds (#2695) 2020-10-28 13:46:12 -04:00
createUtilityPlugin.js Make negative values a first-class feature, rather than theme-driven (#5709) 2021-10-06 13:42:05 -04:00
dataTypes.js Improve data type analyses for arbitrary values (#9320) 2022-09-14 14:08:56 +02:00
defaults.js Move defaults to their own always-on layer (#6500) 2021-12-14 12:21:38 -05:00
escapeClassName.js Remove lodash (#5390) 2021-09-06 14:15:10 -04:00
escapeCommas.js [WIP] Unify JIT and AOT code paths (#4188) 2021-04-30 10:58:40 -04:00
flattenColorPalette.js Remove AOT (#5340) 2021-09-01 17:13:59 +02:00
formatVariantSelector.js Handle variants in utility selectors using :where() and :has() (#9309) 2022-09-12 15:08:31 -04:00
getAllConfigs.js Add future flag to disable color opacity utility plugins (#9088) 2022-08-15 13:45:02 -04:00
hashConfig.js Ignore unknown types when hashing config 2021-05-06 13:16:32 -04:00
isKeyframeRule.js Fix malformed keyframes when using class variants (#5223) 2021-08-16 12:25:30 -04:00
isPlainObject.js [WIP] Unify JIT and AOT code paths (#4188) 2021-04-30 10:58:40 -04:00
isValidArbitraryValue.js Add support for arbitrary properties (#6161) 2021-11-22 12:38:37 -05:00
log.js Remove process dependency from log functions (#8530) 2022-06-07 11:23:32 +02:00
nameClass.js Add support for arbitrary properties (#6161) 2021-11-22 12:38:37 -05:00
negateValue.js Allow negating utilities using min/max/clamp (#9237) 2022-09-01 12:15:23 -04:00
normalizeConfig.js Move some config error checking out of resolveConfig (#8362) 2022-05-16 10:10:40 -04:00
normalizeScreens.js Partially revert tuple syntax PR for screens: #6104 (#6289) 2021-12-07 18:49:40 +01:00
parseAnimationValue.js ensure we don't override the name (#5602) 2021-09-26 07:44:41 -04:00
parseBoxShadowValue.js Improve data type analyses for arbitrary values (#9320) 2022-09-14 14:08:56 +02:00
parseDependency.js Fix using negated content globs (#5625) 2021-09-29 11:15:31 +01:00
parseObjectStyles.js Remove lodash (#5390) 2021-09-06 14:15:10 -04:00
pluginUtils.js Replace rgb and hsl helpers with <alpha-value> placeholder for colors with custom properties (#8501) 2022-06-02 10:21:20 -04:00
prefixSelector.js Fix negative utility generation and detection when using a prefix (#7295) 2022-02-07 10:24:30 -05:00
removeAlphaVariables.js Remove text opacity CSS variables from ::marker (#8622) 2022-06-14 10:09:09 -04:00
resolveConfig.js Fix issue with Tailwind modifying global state (#9294) 2022-09-09 11:45:25 -04:00
resolveConfigPath.js Remove log 2021-05-29 14:48:10 -04:00
responsive.js Replaces use of Lodash isArray with built-in Array.isArray 2019-07-13 16:52:07 +02:00
splitAtTopLevelOnly.js Improve data type analyses for arbitrary values (#9320) 2022-09-14 14:08:56 +02:00
tap.js Remove lodash (#5390) 2021-09-06 14:15:10 -04:00
toColorValue.js Remove lodash (#5390) 2021-09-06 14:15:10 -04:00
toPath.js Support alpha values for theme() function (#8416) 2022-05-25 13:54:30 -04:00
transformThemeValue.js Fix theme(fontFamily.*) when family contains fontFeatureSettings config (#9217) 2022-08-30 17:18:41 +01:00
validateConfig.js Move some config error checking out of resolveConfig (#8362) 2022-05-16 10:10:40 -04:00
withAlphaVariable.js Replace rgb and hsl helpers with <alpha-value> placeholder for colors with custom properties (#8501) 2022-06-02 10:21:20 -04:00