search

noprompt / garden

Generate CSS with Clojure
1.34k stars 87 forks source link

Idea: Expand Vectors of CSS Properties #103

Open xcthulhu opened 8 years ago

xcthulhu commented 8 years ago

It would convenient if vectors of keywords could be automatically expanded.

Here's what I have in mind:

(def user-select [:-webkit-touch-callout 
                  :-webkit-user-select 
                  :-khtml-user-select 
                  :-moz-user-select 
                  :-ms-user-select 
                  :user-select])

(garden.core/css {user-select "none"})
; => "{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}"

This corresponds to a feature in SASS: https://github.com/sass/sass/issues/109

noprompt commented 8 years ago

@xcthulhu Let me think about this one.

xcthulhu commented 8 years ago

It's nice to have, but not critical... in SASS since they aren't embedded in a real programming language they can't just quick things like:

(-> {:size "12pt"} (into (for [p user-select] [p "none"]))

On the other hand, the behavior as it is doesn't produce valid CSS:

(garden.core/css ["*" {[:padding-left :padding-right] "4pt"}])
;; => "* {\n  [:padding-left :padding-right]: 4pt;\n}"

So, I know I'm a lowly internet rando, but I would suggest picking one of these options:

  1. Expanding vectors as per my original suggestion
  2. Throwing an exception

My 2¢

noprompt commented 8 years ago

@xcthulhu I do like this idea. @priyatam What do you think?

priyatam commented 8 years ago

A PR is nice to have :).

In general, I would be interested in ideas focused on improving core CSS standards compatibility, versus utilities.

noprompt commented 8 years ago

@priyatam I'm not sure I want a PR just yet. I think the main thing I was interested in is whether or not you'd use a feature like this?

priyatam commented 8 years ago

I won't use it, but I agree with @xcthulhu that we should have better error reporting if something is obviously incorrect—which is a larger issue, I think.

xcthulhu commented 8 years ago

I'd use the feature I suppose, to be honest it's not a big deal.

I would point out you can't do such things when you are in a {:style {...}} in for instance; it's probably for the best that the syntax for garden and hiccup stay exactly the same at this level as per the principle of least astonishment.

thedavidmeister commented 7 years ago

otoh i'm seeing sass libraries starting to downplay their support for vendor prefixing in favour of https://github.com/postcss/autoprefixer so if that's the only use case for this it might be less urgent?