Add Support for vendor prefix

[Skyfold]

Right now there isn't a way to represent CSS vendor prefixes since attributes (Called Name) must be unique. For example, there isn't a way to write this CSS:

{
    background: -webkit-linear-gradient(left, #fff, #000);
    background: -moz-linear-gradient(left, #fff, #000);
    background: -ms-linear-gradient(left, #fff, #000);
    background: -o-linear-gradient(left, #fff, #000);
    background: linear-gradient(to right, #fff, #000);
}

One way to fix this is to add a Prefixed option to StyleValue. For example:

newtype Prefix = Prefix { unPrefix :: Text }

data StyleValue
  = Prefixed (NEMap Prefix Text)
  | Plain Text

This is similar to the way Clay handles prefixes, but with a non-empty map to better represent the data and make writing the Semigroup instance easy.

However, we still need to handle prefixes in attributes (Name):

{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

We can represent this with just Map Name StyleValue, but it makes adding prefixes to attribute names cumbersome. We can learn from Clay by creating a separate Prefixed type:

newtype Prefix = Prefix { unPrefix :: Text }

data Prefixed
  = Prefixed (NEMap Prefix Text)
  | Plain Text

Then making both StyleValue and Name newtype of Prefixed:

newtype StyleValue = StyleValue { unStyleValue :: Prefixed }
newtype Name = Name { unName :: Prefixed }
newtype Styles = Styles { unStyles :: Map Name StyleValue }

We need to make Styles a newtype to change the Semigroup instance so prefixes are not mixed and matched when combining.

Although this change touches a lot of code, most functions will just use the Plain version and not change functionally. We will gain a addBrowerPrefix function and can create Mod that have builtin prefixes. Let me know what you think about the types, I'll draft a PR afterwards.

[seanhess]

I haven't had to use vendor prefixes in years, since browsers are getting so much more consistent. I'm not opposed to this idea, but I think the solution complexity should depend on how common we think people will need prefixes.

For example, this could be solved pretty simply with an alternative to prop that supports prefixes and just adds multiple things to the Map Name StyleValue

webkit = Prefix "webkit"
moz = Prefix "moz"
msoft = Prefix "ms"
opera = Prefix "o"

cls "myclass"
  & propPrefixes [webkit, moz, msoft, opera] "transition" "all 0.3s ease"

propPrefixes :: (ToStyleValue val) => [Prefix] -> Name -> val -> Class -> Class
propPrefixes = -- use a fold to Map.insert multiple (Prefix <> Name)

Do you still think it's worth updating the base types?

Wait, your example has StyleValue as prefixed. Are css values ever prefixed?

[Skyfold]

You are right, vendor prefixes are less common since most CSS you want to use is already supported in all major vendors.

I started looking at this because I wanted to see if we could use convert Clay CSS to web-view so we don't have to re-implement some of it's features. At the time I wanted to have background gradients and noticed we only had bg for background-color. The first obstacle I ran into was that Clay has vendor prefixes for both the attribute and value (Name and StyleValue). I thought this was a bit strange, but you can have vendor prefixes in both (though most vendor prefix are on attributes).

After I went down the vendor prefix rabbit hole, I did manage to partially convert Clay CSS to web-view types where I used a hash of the values to create a unique class name. However, there is no way to ensure the selectors/classes written in Clay match the HTML. So I ditched the idea.

Still I had written the code to handle vendor prefixes for both attributes and values, so I went ahead and created an issue to discuss it. Given that value vendor prefixes are rare, we can just ignore them since we do have to change the types to handle them. The example code you wrote would work fine for attribute prefixes.

I would be happy either way.