Comments (8)
Too much freedom will lead to additional learning costs. And i noticed @zaydek mentioned whether when is composable. I think this is something that needs to be made clear. Repeating definitions creates extra work. Using API
to define css selector is more friendly to javaScript string template. In my option, string template is hard to maintain and it is not friendly to the compiler.
from stylex.
What happens when multiple parent nodes use the same id ?
If two anscestor have the same id, then if either one matches the given pseudo-class, then the style would be applied. In practice, this is usually not a problem:
- With
:hover
if a child is hovered, then the parent is hovered anyway - Same with
:focus-within
- Same with
:active
- With
:focus
, it's rare to have nested focusable elements and even rarer to need IDs on two parent focusable elements.
Most other pseudo-classes don't even make sense as something to observed IMO.
The use-case for multiple IDs is mostly specific to peers or descendents (using :has()
).
@zaydek I considered an API with strings instead of function calls. There are a few reasons I don't prefer this.
- Even though TS has template string types, Flow doesn't and that's what we use internally
- Template Literal types are considerably slower at type-checking
- A generic string implies the ability to use arbitrary selectors and we want to explicitly limit the selectors that can be used.
One other thing is I'd prefer if I don't need to create n+1 files everytime I want to do this kind of thing
We might loosen the requirement for a .stylex.ts
file in the future when values are not being exported and are only being used locally within a file. For this proposal, however, I think the extra indirection adds value as we want to discourage the use of custom IDs as much as possible. Custom IDs will generally result in unique CSS that will not be shared and we want to push the usage of the default ID if at all possible.
However, whether we loosen the requirement for .stylex.ts
files is a separate discussion that we can have.
The one benefit this has over the ID approach is that I don't need to create a .stylex.ts file to adopt this pattern.
Officially, you need a .stylex.ts
file to use the variable hack as well. The fact that string variables work is an escape hatch to support legacy usage internally. It's not officially supported part of the API. Variables in StyleX should be defined using stylex.defineVars
.
from stylex.
Would it be possible to support an API like:
const id = stylex.id()
...
[`${id}:hover &`]: {
// ...
}
I would think there could be a couple of valid string interpolations the user could do, and I think these are possible to have typed in TypeScript because you can make expressions like ${string}:hover &
and so on. I understand that perhaps you want to limit users from being able to put whatever they want there, but you can always have StyleX error on illegal expressions.
That being said, I can respect that you are trying to limit the API surface area as much as possible by relying on explicit, imported function calls rather than magical strings.
One other thing is I'd prefer if I don't need to create n+1 files everytime I want to do this kind of thing (+1 file for .stylex.ts
). Perhaps this is a limitation of the Babel pipeline or something but I think one of the strongest principles of StyleX is colocation, so the decision to force users to having an extra .stylex.ts
file around for these one offs isn't personally appealing to me.
Right now when I need to implement this kind of pattern, I use the CSS variable hack as alluded to in other threads. The one benefit this has over the ID approach is that I don't need to create a .stylex.ts
file to adopt this pattern.
There is a real need for this kind of pattern overall and relying on JavaScript and event listeners is unwieldy and CSS variables feels like a work around.
from stylex.
What happens when multiple parent nodes use the same id ?
from stylex.
@nmn Got it, thanks. Other quick questions -- is when
composable? I assume not but is it explicitly disallowed that you can do when.peerAfter(when.peerBefore(id, ":hover"), ":focus")
or something zany like that? Not saying anyone would but if you haven't already, you might want to hard code some errors for these use cases. I say that because I've implemented anti patterns in the past without knowing, so having stricter errors up front would have prevented that. 🙂
Besides that I'm on board with this. I find when.ancestor
slightly confusing because it's not the ancestor of the ID, it's the ID that is the ancestor in this case. Maybe when.is
and when.has
(instead of ancestor
and descendent
) would make this distinction more clear?
from stylex.
Related Issues (20)
- An option for the babel plugin that transforms the debug/dev classes. HOT 2
- Support Older React Versions HOT 3
- CSS Properties don't get written (esbuild) HOT 1
- Add ability to customise class names generation so we can use one letter classnames. HOT 5
- StyleX Plugin for Bun.sh Bundler HOT 6
- gridTemplateRows 0fr is being compiled to 0px, which breaks css transition HOT 4
- esbuild plugin with write:false should set file name HOT 3
- [RFC] Define value for multiple pseudo-classes at one HOT 2
- [@styles/open-props]: Has any plan/progress to support `ESM`? HOT 2
- Strange :not(#\\#) selector HOT 1
- Add option to support vertical writing modes in modern browsers
- How can I use container queries with StyleX? HOT 1
- I can't make changes to the interface (next.js & react) HOT 1
- Media query specificity order. Certian properties broken (`gridColumn`) HOT 3
- Only static values are allowed inside of a stylex.create() call. HOT 5
- Need help with Qwik.
- '0px' vars are compiled to '0' which leads to error at best, unpredicatable results at worst HOT 2
- [RFC] Defining styles inline HOT 36
- [RFC] Ref - A solution for complex CSS selectors HOT 3
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 stylex.