Comments (10)
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.
from twind.
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.
from twind.
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.
from twind.
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:
- Fail with hint – implemented in #56
- Fallback to slow parsing
@lukejacksonn What do you think?
from twind.
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?
from twind.
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.
from twind.
There seems to be consent that we should support this.
Should we warn when deopt?
from twind.
I think a warning in development env would be nice. Maybe even eventually a linting warning?
from twind.
I'll start to implement this as agreed on.
from twind.
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
from twind.
Related Issues (20)
- [Feature]: flex-shrink-* is deprecated HOT 1
- missing data HOT 1
- How to use tailwindcss plugins? HOT 3
- Is there a way to make tailwind-scrollbar plugin to work with twind? HOT 3
- [Bug]: keyframes added with injectGlobal only contain the last keyframe HOT 2
- [Bug]: Classes added with injectGlobal can't reference each other with @apply HOT 2
- [Bug]: Classes added with injectGlobal can't be used with variants HOT 2
- [Feature]: allow peer dep of typescript v5 HOT 2
- [Bug]: max-w-{number} does not work
- defineConfig / setup mixed up[Docs]:
- Template literals like className={tw`bg-green-${c}`}
- How to style host and slot elements with Lit HOT 2
- [Docs]: twind.dev is out of date and still seems active HOT 1
- [Feature]: support vars in square brackts
- [Bug]: How to extend theme in Tailwind v3.4 HOT 2
- Browser version doesn't work (non-ES module version) HOT 7
- Applying classes on Lit element CSS block HOT 1
- [Bug]: withTwind doesn't play nicely with Light DOM Lit elements
- [Bug]: Lit & Dark Mode not usable with "class" mode HOT 1
- [Bug]: Update typescript version to 5.x.x HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from twind.