feat: support arbitrary values using square bracket notation #148

sastan · 2021-03-17T22:21:48Z

This PR adds the new tailwindcss square bracket notation like top-[-113px]. Works with variants too, like md:top-[-113px].

This works in places where a theme value would be used. So almost everywhere.

I would like to add a config option to disable this feature. But I'm unsure of the name. Any pointers?

Which one do you prefer: arbitraryValues or dynamicValues?

Here are some examples: Not everyone works right now – working on colors vs other value

bg-[#0f0]
bg-[#ff0000]
bg-[#0000ffcc]
bg-[hsl(0,100%,50%)]
bg-[hsla(0,100%,50%,0.3)]
bg-[rgb(123,123,123)]
bg-[rgba(123,123,123,var(--tw-bg-opacity))]
bg-opacity-[0.11]
border-[#f00]
border-[2.5px]
duration-[2s]
grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]
grid-cols-[minmax(100px,max-content)repeat(auto-fill,200px)20%]
grid-cols-[repeat(auto-fit,minmax(150px,1fr))]
flex-[30%]
ring-[#1da1f2]
ring-[7px]
ring-offset-[#1da1f2]
ring-offset-[7px]
rotate-[0.5turn]
rotate-[23deg] rotate-[2.3rad] rotate-[401grad] rotate-[1.5turn]
rounded-[33%]
scale-[2]
scale-x-[1.15]
skew-[30deg]
skew-x-[1.07rad]
space-x-[20cm]
space-x-[calc(20%-1cm)]
text-[#1da1f2]
text-[2.23rem]
text-[6px]
text-[calc(1vw+1vh+.5vmin)]
top-[-123px]
top-[123px]
transition-[font-size,color,width]
translate-[3in]
translate-y-[2px]
w-[3.23rem]
w-[calc(100%+1rem)]
w-[clamp(23ch,50%,46ch)]

/cc @tw-in-js/contributors

coveralls · 2021-03-17T22:39:05Z

Pull Request Test Coverage Report for Build 668619386

37 of 39 (94.87%) changed or added relevant lines in 6 files are covered.
2 unchanged lines in 1 file lost coverage.
Overall coverage remained the same at 93.661%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/twind/configure.ts	4	5	80.0%
src/twind/translate.ts	0	1	0.0%

Files with Coverage Reduction	New Missed Lines	%
src/twind/configure.ts	2	95.14%

Totals
Change from base Build 668610052:	0%
Covered Lines:	4988
Relevant Lines:	5305

💛 - Coveralls

github-actions · 2021-03-17T22:39:19Z

size-limit report 📦

Path	Size
dist/twind.js	12.73 KB (+0.8% 🔺)
dist/css/css.js	1.14 KB (-2.74% 🔽)
dist/observe/observe.js	665 B (-4.6% 🔽)
dist/shim/shim.js	403 B (0%)
dist/style/style.js	948 B (-2.87% 🔽)

github-actions · 2021-03-17T22:39:30Z

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@pr148.

Install/Update

Configure your NPM client (click to expand)

Generate a personal access token with at least "read:packages" scope.
Adjust your .npmrc to use the token and define the regeistry for @tw-in-js:

//npm.pkg.github.com/:_authToken=<READ_PACKAGES_TOKEN>
@tw-in-js:registry=https://npm.pkg.github.com

Using the command line:

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

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

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

lukejacksonn · 2021-03-18T15:34:47Z

This is awesome, I'm surprised by what small changes were required to support this feature. Personally I have concerns over the pattern generally (in the sense that it undermines the whole design tokens philosophy) but that aside, we should probably support it for feature parity with Tailwind at least. It might end up being more useful in practice than I think. Really great job.

Regards the enabling/disabling.. do you see any down sides of having it enabled by default? Maybe this could/should fall under the mode: 'strict' policy?

sastan · 2021-03-18T15:41:38Z

Should be enabled by default in my opinion. But we can not use mode for that. We need another name.

lukejacksonn · 2021-03-18T15:49:24Z

Maybe something like dynamicValues: true | false? I can't recall what Tailwind referred to this feature as. I guess keeping nomenclature aligned would be beneficial.

danestves · 2021-03-18T23:52:50Z

Hi! I just want to comment that, this:

Is working as expected 🎉🎉🎉

--

But this:

It's not working 🥺, it's giving an empty class at the end:

danestves · 2021-03-19T00:50:32Z

Also text-[6px] it's working on @tailwindcss/jit as you can see here https://codesandbox.io/s/elated-banach-mrrh0?file=/pages/index.js

Any configuration that you should do to make this work on this side?

hastebrot · 2021-03-19T07:56:32Z

I can't recall what Tailwind referred to this feature as. I guess keeping nomenclature aligned would be beneficial.

The README in tailwindcss-jit calls it "square bracket notation" and "arbitrary styles".

The unit tests are called "arbitrary values": https://github.com/tailwindlabs/tailwindcss-jit/blob/v0.1.3/tests/08-arbitrary-values.test.html

sastan · 2021-03-19T09:01:12Z

Also text-[6px] it's working on @tailwindcss/jit as you can see here https://codesandbox.io/s/elated-banach-mrrh0?file=/pages/index.js

The problem here is that text-[...] can be either a color or a font size value. To support this I would suggest to check if the dynamic value starts with# then use it as color value otherwise font size.

The same issue may affect several plugins.

sastan · 2021-03-19T09:02:23Z

It's not working 🥺, it's giving an empty class at the end:

Thanks! We should support this!

sastan · 2021-03-19T09:18:26Z

So either arbitraryValues or dynamicValues?

danestves · 2021-03-19T15:11:39Z

Do you have any estimated time when this will come out? We have a project in production that is waiting for this feature (we already got rid of @emotion)

sastan · 2021-03-19T15:39:18Z

Do you have any estimated time when this will come out? We have a project in production that is waiting for this feature (we already got rid of @emotion)

Just pushed an update with the two issues you reported. Could please you verify it works now as you expect?

I plan to publish this one and #149 on the weekend, maybe tonight...

sastan · 2021-03-19T15:40:49Z

We have a project in production that is waiting for this feature (we already got rid of @emotion)

That sounds great! Could you tell us more in https://github.com/tw-in-js/twind/discussions/categories/show-and-tell?

danestves · 2021-03-19T15:58:34Z

@sastan

I can confirm you that now is receiving the values very well!! If you update the package today it will be awesome 😍

danestves · 2021-03-19T16:08:03Z

I'm going to put the package into production by installing it from this PR 😂 for the excitement of all that it saves us

sastan · 2021-03-19T17:05:59Z

@danestves There you go twind@0.16.4

danestves · 2021-03-19T19:32:03Z

I will share the URL for you to see it!

sastan force-pushed the dynamic-styles branch from 2498b42 to f3eac6e Compare March 17, 2021 22:33

sastan requested a review from lukejacksonn March 17, 2021 22:46

danestves mentioned this pull request Mar 18, 2021

New Docs Site #124

Closed

sastan force-pushed the dynamic-styles branch from f3eac6e to e665337 Compare March 18, 2021 21:30

sastan changed the title ~~feat: support dynamic styles using square bracket notation~~ feat: support arbitrary values using square bracket notation Mar 19, 2021

sastan added 3 commits March 19, 2021 17:43

feat: support dynamic styles using square bracket notation

0504aed

fix: detect possible arbitrary value type

ae7673a

fix: support interpolation within square brackets

b89c872

sastan force-pushed the dynamic-styles branch from acdd584 to b89c872 Compare March 19, 2021 16:45

sastan merged commit 039e241 into main Mar 19, 2021

sastan deleted the dynamic-styles branch March 19, 2021 16:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support arbitrary values using square bracket notation #148

feat: support arbitrary values using square bracket notation #148

sastan commented Mar 17, 2021 •

edited

Loading

coveralls commented Mar 17, 2021 •

edited

Loading

github-actions bot commented Mar 17, 2021 •

edited

Loading

github-actions bot commented Mar 17, 2021

lukejacksonn commented Mar 18, 2021

sastan commented Mar 18, 2021

lukejacksonn commented Mar 18, 2021 •

edited

Loading

danestves commented Mar 18, 2021

danestves commented Mar 19, 2021

hastebrot commented Mar 19, 2021 •

edited

Loading

sastan commented Mar 19, 2021

sastan commented Mar 19, 2021

sastan commented Mar 19, 2021 •

edited

Loading

danestves commented Mar 19, 2021 •

edited

Loading

sastan commented Mar 19, 2021

sastan commented Mar 19, 2021

danestves commented Mar 19, 2021

danestves commented Mar 19, 2021

sastan commented Mar 19, 2021

danestves commented Mar 19, 2021

feat: support arbitrary values using square bracket notation #148

feat: support arbitrary values using square bracket notation #148

Conversation

sastan commented Mar 17, 2021 • edited Loading

coveralls commented Mar 17, 2021 • edited Loading

Pull Request Test Coverage Report for Build 668619386

💛 - Coveralls

github-actions bot commented Mar 17, 2021 • edited Loading

size-limit report 📦

github-actions bot commented Mar 17, 2021

Try the Preview Package

lukejacksonn commented Mar 18, 2021

sastan commented Mar 18, 2021

lukejacksonn commented Mar 18, 2021 • edited Loading

danestves commented Mar 18, 2021

danestves commented Mar 19, 2021

hastebrot commented Mar 19, 2021 • edited Loading

sastan commented Mar 19, 2021

sastan commented Mar 19, 2021

sastan commented Mar 19, 2021 • edited Loading

danestves commented Mar 19, 2021 • edited Loading

sastan commented Mar 19, 2021

sastan commented Mar 19, 2021

danestves commented Mar 19, 2021

danestves commented Mar 19, 2021

sastan commented Mar 19, 2021

danestves commented Mar 19, 2021

sastan commented Mar 17, 2021 •

edited

Loading

coveralls commented Mar 17, 2021 •

edited

Loading

github-actions bot commented Mar 17, 2021 •

edited

Loading

lukejacksonn commented Mar 18, 2021 •

edited

Loading

hastebrot commented Mar 19, 2021 •

edited

Loading

sastan commented Mar 19, 2021 •

edited

Loading

danestves commented Mar 19, 2021 •

edited

Loading