💾 Archived View for space.matthewphillips.info › posts › corset-update captured on 2024-05-10 at 10:50:15. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2023-01-29)
-=-=-=-=-=-=-
Corset was announced back in March and the response was fairly substantial.
A lot of people really seemed interested in taking a different approach to reactive data bindings for the web. Corset's unique CSS-like DSL provides a way to do data-bindings without the compromises and corner-cases you run into with the more popular HTML-like DSL approaches (JSX, Vue, Svelte, etc.)
However, there was also significant feedback about the project that made it obvious some big changes were needed. I've been working on these changes since that time.
A new major version of Corset is under development with a few big changes.
One of the feedbacks I received was that the bracket syntax for properties made the DSL feel not like CSS any more. Given that asking people to try something that's substantially different from mainstream libraries is already a lot, making it as close to something that's already familiar as possible helps.
It was always the intent to make Corset as close to CSS (syntax wise) as possible. The bracket syntax was the one exception. To that end, the bracket syntax will no longer be supported in Corset 2.0.
#my-input {
attr-toggle[disabled]: true;
}
Instead you will provide the *key* as a value of the property:
#my-input {
attr-toggle: disabled true;
}
This latter syntax is already supported in Corset today. However, today Corset treats all properties as destructive. That means if you have two properties right after each other, only the latter will be applied:
.sidebar {
class-toggle: one true;
class-toggle: two true;
}
In this example only the `two` class will be applied. If you wanted to have both you could comma-separate them in a single declaration like so:
.sidebar {
class-toggle: one true, two true;
}
However, you don't want to have to relist all of your classes (or attributes, etc) every time you use a property. So the bracket syntax was the solution for that, allowing you to control a single key for a multi-binding property.
With this change, properties in Corset are now always additive, rather than destructive, meaning when you do:
.sidebar {
class-toggle: one true;
class-toggle: two true;
}
Both `one` and `two` classes are added. Since you *usually* want properties to be additive, it made sense to change this to become the default. This change alleviates the need for the bracket syntax, as you can always just include the key as the property value, like shown above.
The use-case for properties being destructive was to allow explicitly overriding previous values. Say you had several classes on an element and some state change made it so that you wanted to remove *all* of the previous ones and add just a single class. In the past any time you used the `class-toggle: one true` syntax, that's exactly what would happen.
Now to do this, you can use the `unset` keyword. It will look something like this:
button {
event: * unset;
}
The exact details are still being discussed, but in this example, the `*` means to apply to *all* event bindings on this button. See the following issue for discussion on the exact shape of this feature.
Currently there isn't a way to target the root element of a sheet (the element you are mounted to). This means you need a wrapper element in a lot of cases, which makes creating child behaviors cumbersome.
The solution will be a special selector for targeting the root. The current proposal is to call this `:corset-root`.
An example usage would be:
:corset-root {
class-toggle: testing true;
}
This change will be coming post-1.0 but it's probably next on the list.
These things were intentionally left off of 1.0 but will make using Corset more powerful.
With media queries you could add behaviors (and DOM) only on certain screen sizes like so:
@media only screen and (max-width: 768px) {
.sidebar {
mount: ${MobileSidebar};
}
}
CSS nesting is another feature that might be expected by many, but is missing from Corset at the moment. This change would follow the CSS spec.
There are many other CSS features that might make sense in Corset. Not *everything*, but a lot of things. Please file issues of there are CSS features you'd like to see make it into Corset.
Lastly, the name of Corset will be changed. When the project was given the name it seemed symbolic of what the library does; bind to the DOM. And while that's true, there are a few reasons why naming your project after an undergarment isn't a wise choice.
When I announced the project I had found a public domain vector image of a corset to use as the logo. One person told me that they didn't feel comfortable sharing the project with teammates because of the logo, so I removed it. It would be difficult to come up with a logo that's *not* the undergarment.
But more importantly, the name makes it difficult to search for the project. If you attempt to search for Corset on Google you will get images of models in corsets, not surprisingly. But if you search for Corset on Twitter you will get NSFW videos as well.
This is really the thing that pushed me over the edge towards a rebrand. If you don't feel comfortable for searching for a project, the project is doomed.
I have not come up with a new name yet. The rebranding will likely occur after the 2.0 release and will include a (likely small) website refresh. If you have ideas for a new name please reach out to me. I have a few of my own but haven't thought very strongly about it yet. I am going for something that feels bright and sunny, the way I want people to feel when using the library.
Aside from the initial announcement tweet I did virtually no marketing for Corset after the 1.0 release. As a result, the adoption hasn't been much. I'm not surprised or disappointed in that given that the project is pretty *out there* compared to the status quo. I'm happy to be doing something that's completely different and solving issues that the mainstream libraries cannot and aren't trying to solve.
I plan on doing a series of videos on building things with Corset. Your mindset has to be different when working with Corset, but once you get it you quickly see how powerful it is. Videos on practical usage will help people see it for themselves.