garden icon indicating copy to clipboard operation
garden copied to clipboard

Compiler: Support for emitting prefixed css-functions

Open the-kenny opened this issue 10 years ago • 12 comments

On older iOS devices, the calc function must be prefixed with -webkit-. I think it would be helpful if the ^:prefix metadata could be applied to css-functions as well.

the-kenny avatar May 24 '14 17:05 the-kenny

I'm inclined to agree. The only question I have is what should the output look like in that case? Let's suppose we have

{:some-property ^:prefix ^:vendors [:webkit] (some-css-fn ...)}

Do we compile separate declarations for each vendor?

lol {
  some-property: -webkit-some-css-fn(...);
  some-property: some-css-fn(...); 
}

noprompt avatar May 24 '14 19:05 noprompt

Yes, that's the correct way of doing this according to MDN. See https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Examples

On Sat, May 24, 2014 at 9:15 PM, Joel Holdbrooks [email protected]:

I'm inclined to agree. The only question I have is what should the output look like in that case? Let's suppose we have

{:some-property ^:prefix ^:vendors [:webkit](some-css-fn ...)}

Do we compile separate declarations for each vendor?

lol { some-property: -webkit-some-css-fn(...); some-property: some-css-fn(...); }

— Reply to this email directly or view it on GitHubhttps://github.com/noprompt/garden/issues/52#issuecomment-44096853 .

the-kenny avatar May 24 '14 19:05 the-kenny

You might also want to consider the following: transtion: all 1s, -webkit-transform 2s;

jeluard avatar May 24 '14 19:05 jeluard

OK. I think this is doable but it's going to require a bit of forethought and planning before we can make this happen. One concern is

^:prefix {:some-property ^:prefix (some-css-fn ...)}

I suppose we could make the assumption that if, for example, the vendors were [:moz :webkit] we'd compile three lines: one for -moz-, one for -webkit-, and one unprefixed.

noprompt avatar May 24 '14 19:05 noprompt

@jeluard I think we can handle that case during declaration expansion but that's kind of gross. The compiler needs to be reworked to operate on a data format like tools.analyzer has. I've been toying with that idea and I'm willing to bet we could make a lot of these problems go away by moving in that direction.

noprompt avatar May 24 '14 19:05 noprompt

I suppose we could make the assumption that if, for example, the vendors were [:moz :webkit] we'd compile three lines: one for -moz-, one for -webkit-, and one unprefixed.

Sounds reasonable.

the-kenny avatar May 24 '14 19:05 the-kenny

@the-kenny @jeluard If you guys think of any more edge cases be sure to post them here. I want to close out some of the other stale issues before moving on this.

noprompt avatar May 24 '14 19:05 noprompt

Also not sure how it fits here but I've been thinking it would be really nice to leverage CSS.supports for the ClojureScript implementation. It would allow to generate the proper flavor at runtime and skip the useless ones.

jeluard avatar May 24 '14 19:05 jeluard

@jeluard Yes! That definitely needs to get added!

noprompt avatar May 24 '14 22:05 noprompt

...two years later this has been fixed (734e494).

noprompt avatar Dec 02 '16 05:12 noprompt

seems like this never got closed?

awkay avatar Mar 21 '18 04:03 awkay

@awkay it's fixed on the 2.0.0 branch (which is still in the works).

noprompt avatar Apr 12 '18 17:04 noprompt