Use `=` instead of `:` for style properties
- Dominant language
- JavaScript
- Stars
- 6.5k
- Forks
- 183
- Avg merge
- 4h 10m
- Merged PRs (30d)
- 3
Description
This proposal has been in the back of my mind for a while and I'd like to float it here so that we can discuss it thoroughly. We can't change this after we hit 2.0 final, so we need to discuss before that. The basic proposal is to use `key=value` instead of `key:value` for style properties.
It is hard to get a feel for it without trying it with correct highlighting+tooling but I'm confident it will look and feel just as good once used to it. More importantly, there are many arguments in favor of making this change.
## Why
- `:` is already a bit ambiguous due to `::before`, `::backdrop` and other pseudo-elements.
- We now use the `@` for style modifiers like `@hover` and `@focus`, and for event handlers `@click=...`, and for decorators `@lazy def ...`, _and_ for upcoming accessors `prop item @ref.local ...`. The only reason for using `@` for style states was that we use `key:value` for properties.
- We can use `@` for the things it is actually used for in css today, like `@font-face`, `@layer`, `@supports` etc. So the syntax will move away from css in terms of using `=` instead of `:` for properties, but closer since `:hover` and `@font-face` will be the same.
- The `:some-state` will now universally be related to styles, it is not a concept elsewhere in imba. This means that we could down the road allow setting style pseudo-states on elements like `
- Since colon-prefixed identifiers is not a thing in imba 2, they could be deeply linked with styles. So setting `:selected = yes` could set a pseudo-state that is accessible from styles _and_ code.
- There is some inherent difference between `header@hover` and `header@dark`, in that `@hover` is a pseudo state of the element, but `@dark` is a general pseudo-state of the app itself. This separation would be cleaner with `header:hover` and `header@dark`.
- The `=` sign is not used for anything in styles, yet its meaning is universally understood in most languages.
## Why not
- For those who have used imba2 for a long time it might take some time to change the muscle memory
- Copying regular css styles into imba will be more cumbersome without help from tooling
- May feel even more different than css, scaring away potential new users
- Can be a bit of pain to migrate.
## Migrating
It is easy to write a script that can take the current syntax and apply the changes automatically. It will still be an awkward transition for sure. The easiest first step would be to allow both for a while, since adding support for `=` will not break any existing code. Everything will work the same until we start to allow `:hover/:focus`++ for pseudo classes. So we could make sure the tooling, highlighting etc works nicely first.
I am very open to feedback and input here - I'm not set on this change but I would like to consider it while we still can.
Contributor guide
Research direction
No files, tests, or entry points are mentioned. Start by reviewing the proposed syntax and its migration, tooling, and highlighting implications; done would require an agreed direction for supporting or rejecting the change before implementation begins.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100