Quantifying Browser Support and Auto Prefixer

[mdgriffith]

It would be really nice to say "if you use this library, you support these browsers". Obviously related is to implement any style property/value/psuedoclass prefixing that is necessary to get the best browser support possible.

I can implement the actual prefixing(actually, the bones of it are already written), but finding which prefixes are currently necessary and detecting the browser profile is more of the actual leg work.

It would also be nice if there was some degree of automation, but that might be for a later project if it's even necessary.

[icidasset]

Hey @mdgriffith 👋 Thanks for this awesome library!

I was wondering if I could help out with this bit? I had the following in mind:

1. Fetch data from https://github.com/Fyrd/caniuse
2. Generate an Elm file with some static data on which vendor prefixes to use for certain properties
3. Import that Elm file in the Style.Internal.Prefixer module

Step 1 and 2 would happen in some sort of script, and step 3 would look something like this:

module VendorPrefixes exposing (list)

list : Dict String (List String)
list =
    Dict.fromList
        [ ( "flex"
          , [ "-webkit-box-flex", "-ms-flex" ]
          ) 

module Style.Internal.Prefixer exposing (prefix)

import VendorPrefixes

prefix : (String, String) -> List (String, String)
prefix (property, value) =
     if Dict.member property VendorPrefixes.list then
          List.append
               (VendorPrefixes.list
                    |> Dict.get property
                    |> Maybe.withDefault []
                    |> List.map (\prop -> (,) prop value)
               )
               [ (property, value) ]
     else
          [ (property, value) ]

[mdgriffith]

Hello!

This would be super helpful! I really like the idea of a separate package that captures the vendor prefix data. Then anyone doing style-related work in the elm ecosystem could also use it.

It'd be really cool to go a little bit farther and capture

• any notes or flags that come along with a property
  • Like for css grid, internet explorer requires a -ms prefix, but it's actually supporting an older version of the grid spec, which means it may not be totally equivalent.
• Browser compatibility data.
  • So I can say "Hey, I'm using these properties, what browsers am I totally compatible with?"

I haven't checked out the data from caniuse, so I wonder how hard that would be.

So there's really two parts to this, 1. the prefixer, and 2. some simple analysis to see where a library is compatibility-wise.

If you set up the scripts for downloading and embedding in an elm file, I can help/advise/whatever on what API would make it nice for style-elements to use. I think we'd probably want to capture a decent amount of the information in elm types.

Maybe something like this?

type Supported
    = Supported
     | SupportedWithPrefix
     | PartiallySupported String -- Capture any notes that exist
     | PartiallySupportedWithPrefix String
     | NotSupported

type Browser = WebKit | FireFox | Chrome 
    
type alias BrowserSupport
     { browser : Browser
     , version : String
     , suport : Supported
     }

prefixes : Dict String (List BrowserSupport)

Anyway, I'm happy to help out when i get free moments and I really appreciate your interest :D

[icidasset]

@mdgriffith Thanks for the detailed write-up, your suggestions sound great! I'll start tinkering with some stuff and will let you know when I got something viable or when I have some questions.

[icidasset]

@mdgriffith My initial work for this is up, you can find it here: https://github.com/icidasset/css-support

I might have to scale down the "imported" data, the generated Elm module is 707 KB 😅 That said, I included a documentation.json file in the repo that you can use with http://package.elm-lang.org/help/docs-preview. The functions that are most important are in the src/Css/Support.elm file.

[icidasset]

@mdgriffith By the way, could I also help with the other part of this (ie. the applying of the prefixes in this library)?