Flynt Next: Backward compatiblity

[aaronmeder]

Hey guys

We've been doing our first small projects using the next branch to get some hands-on experience with the upcoming setup. It's been generally relatively solid and most things work as we are used from Flynt 👏🏻

One thing we ran into is support for older Browsers, specifically Safari 12 on older iOS versions. There seem to be generally issues with both JS and the more modern CSS approaches.

JS
Doesn't seem to run at all.

CSS
One thing I've integrated so far is postcss-logical through postcss in vite.config.js to translate the logical margin-, etc properties.

Do you generally have a best practice of adjustments you are making, if you want a project to support this platform?

Thanks for your inputs.
Aaron

[timohubois]

Hi @aaronmeder, thanks a lot for the feedback. In general our goal is to deliver a modern base so that developers can adopt Flynt fast to personal prefers or project specific needs.

JS
I never had this issue before, but i also have not tested the new Version in Detail with iOS 12. Are the issues only related to Safari 12 on older iOS devices?

CSS
Regarding “logical-properties”, we decided to ship them by default in the codebase, but generally dont’t want to force a developer to use it, so the “stylelint-use-logical” the package will dropped in the final release - just added the plugin to make sure we get a consistent codebase while development.

Further we also started to use "logical-properties" in some newer projects and i personally did not run in any downfalls with it.

In terms of adjustments to make if you want to support older platforms when using Flynt next, I will also ask internally our team what he has done in the past.

[aaronmeder]

@timohubois thanks for the info...also think the path you are planing to take with CSS logical properties seems reasonable. Although my 10+ margin-xy mind muscle memory need some flexing to get used to it 🧠 😅

As far as I can test the JS seems to fail completely with Safari 12 and older (tested on macOS 10.14 + iOS 12.5.7), Safari 13 (macOS 10.15 tested, no iOS version to test) seems to work just fine.
Since Safari 12 is almost five years old I think it somewhat ok not to support it on macOS, since there are enough alternatives there but sadly not on iOS. I would be interested if someone of your team knows a fix that could be applied.

Also CSS seems to be fine starting on Safari 13 (at least with postcss-logical installed, which is an easy enough install).

[timohubois]

@aaronmeder we talked today in our team about this topic. To add legacy support for javascript you can try the following:

1. Install @vitejs/plugin-legacy and add it to the vite.config.js

import legacy from '@vitejs/plugin-legacy'

  plugins: [
    flynt({ dest, host }),
    FullReload(watchFiles),
    legacy()
  ],

2. After that replace all occurrences where a adventlistener is used in combination with matchMedia, and provide a fallback solution.

For example (script.js from Navigation Main):

  if (isDesktopMediaQuery?.addEventListener) {
    isDesktopMediaQuery.addEventListener('change', onBreakpointChange)
  } else {
    isDesktopMediaQuery.addListener(onBreakpointChange)
  }

or (FlyntComponent.js inside the scripts folder):

    if (mediaQueryList?.addEventListener) {
      mediaQueryList.addEventListener(
        'change',
        () => resolve(true),
        { once: true }
      )
    } else {
      mediaQueryList.addListener(
        () => resolve(true)
      )
    }

3. Edit the package.json

  "browserslist": [
    "ios >= 12"
  ]

Let me know if this works for you?