search

Bjorn-Strom / FSS

MIT License
101 stars 4 forks source link

[Proposal] Add attribute selectors #17

Closed thyvini closed 2 years ago

thyvini commented 2 years ago

One thing that would be great to have is attribute selectors, like input[type="text"] or a[href].

At first, could be just these two variations, because the others ($=, ^=,...) can be a little tricky and/or time-consuming.

thyvini commented 2 years ago

Just noticed that there is already an Attribute module. Does it have any usage right now? I couldn't find references besides the tests.

Bjorn-Strom commented 2 years ago

Hey @LooserName404 👋 Thanks for the suggestion. Yes I agree this would be nice to have. I have already spent some time working on this.

Just like you suggested, I have started with the simpler variations, as well as allowing them after pseudo-classes.

Once I have it more locked down I will post the syntax suggestion here for some input 😄

Bjorn-Strom commented 2 years ago

Hey again and sorry for the late reply. I have been quite busy the last couple of weeks.

As for attributes nothing is really ready to merge, but I did get some help from a friend and we found a syntax we both like.

Attr.Has (Html.A, Attribute.Href, [ Color.purple ]) // a[href] { color: purple }
MatchAttr.Exactly (Html.P, Attribute.Title, "Header", [
    FontSize.value(24px)
    BackgroundColor.red ]) // p[attribute="Header"] { font-size... }

Where the Exactly keyword can be swapped out to get other ways of matching like ($=, ^=,...) You would use these in normal fss blocks. Any thoughts?

So far nothing has been implemented apart from a small POC. What I have been working on lately is the next version of the library that will include some new CSS generation among other things. I think attributes will be a part of that also.

thyvini commented 2 years ago

Hello,

This is looking amazing! Good job!

These two samples would be something I'll surely use.

My only suggestion is to put the Rule list apart from the other parameters, like this:

Attr.Has (Html.A, Attribute.Href) [ Color.purple ]

I think that it reads a little better, and also makes it harder to "lose" bracket or parentheses, but its only a suggestion.

Thank you for the update. :)

Bjorn-Strom commented 2 years ago

Closed with merge of #19 and release of Fss 2.0.0.

Thanks for the help 👍