[UNKNOWN_THEME_VALUE] error when referencing variables in grouping using template literal syntax

[tw-in-js]

[UNKNOWN_THEME_VALUE] error when referencing variables in grouping using template literal syntax

[sastan]

With this PR we have a way to detect such grouping and throw an error. We could instead stop creating the optimization and fallback to the slow interleave mode we used to have in beamwind & oceanwind. That would mean fast for most cases and slow for this one. Maybe we could warn when we are using slow parsing.

[lukejacksonn]

Yeh, like @gojutin says, I think it is one of the big advantages we are afforded when taking a runtime approach. If we can get away with is without too much code disruption then we should do it.

Regards warning, I'm not too sure if it is even necessary to be honest.. when we say "slow" we still mean tens of thousands of operations per second 😅 and like you say @sastan this is not a usual case.

[sastan]

Currently we assume that interpolation value will not affect groupings. In that case it starts a new grouping which leads to the error.

I'll look into it.

[sastan]

Here are my findings:

For performance reasons we assume that template literal strings do not change. Do that we can pre-calculate all groupings and static rules which are later combined with the dynamic rules from interpolations.

For this to work we assume that interpolations are only used as last part of a grouping. Meaning interpolations can not be used as a part of a new grouping.

Valid:

tw`text(${'center'} underline)`
tw`text-${'center'}`
tw`hover:(text(${'center'}))`
tw`bg-${'red-600'}`
tw`bg-${'red-600'} hover:bg-${'red-700'} focus:bg-${'red-700'}`

Invalid:

tw`bg-${'red'}-600`
tw`bg(${'red'}(600 700(hover:&))`

I currently see two ways the handle such a interpolation:

1. Fail with hint – implemented in #56
2. Fallback to slow parsing

@lukejacksonn What do you think?

[lukejacksonn]

This is a tough one.. part of me thinks that this should be possible:

tw`bg-${'red'}-600`

When you say fallback to slow parsing, would it be just for these cases or for all cases? Could we detect that you are interpolating part way through a directive/grouping and then not cache that bit? This seems like a best of both worlds outcome for DX but might add some unwanted complexity?

[just214]

This is a tough one.. part of me thinks that this should be possible:

tw`bg-${'red'}-600`

I also like being able to get granular with dynamic class generation, even if it means a small performance hit. Also, this feature is another big improvement since certain dynamic classes in Tailwind would often lead to unintended purging during the build step.

[sastan]

There seems to be consent that we should support this.

Should we warn when deopt?

[just214]

I think a warning in development env would be nice. Maybe even eventually a linting warning?

[sastan]

I'll start to implement this as agreed on.

[sastan]

Implemented in #56

Try the Preview Package

Official releases are only available on registry.npmjs.org as twind.

This PR has been published to npm.pkg.github.com as @tw-in-js/twind@pr56.

Install/Update

Configure your NPM client (click to expand)

Adjust you .npmrc to use https://npm.pkg.github.com for @tw-in-js

@tw-in-js:registry=https://npm.pkg.github.com

Using the command line:

npm config set @tw-in-js:registry https://npm.pkg.github.com --global

# For npm
npm install --force twind@npm:@tw-in-js/twind@pr56

# For yarn - upgrade implies install
yarn upgrade twind@npm:@tw-in-js/twind@pr56