Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-80710

Use browserslist targets and postcss for autoprefixing theme sсss files


    • Icon: Improvement Improvement
    • Resolution: Unresolved
    • Icon: Minor Minor
    • None
    • 4.4
    • HTML and CSS, Themes

      Babel is using browserslist for declaring supported browser version targets that are taken into account. It would be good to use it for css autoprefixing as well, so that browser support for CSS will be consistent with JS.

      In terms of approach, I suggest to sanitize and autoprefix theme sсss using postcss/cssnano tool instead of using PHPSCSS for that purpose, so we will have to “build” CSS similar way we do that for JS (the localcache CSS serving part will stay the same for now, but it will serve pre-built CSS instead of use PHPSCSS on the fly).

      The immediate advantages:
      1. All hardcoded browser-specific prefixes can be removed from scss files, this will result in cleaner existing scss files, free from obsolete prefixes.
      2. stylelint is aware of `browserslist` too, so linting will become more specific for supported browser targets.
      3. RTL-adaptive builds (postcss-rtl)
      4. The fact that css will have to be build after changes (similar to js), it would be easier to spot issues (e.g. modified css when it was not expected).

      Follow ups and future:
      1. Use same scss build approach in plugins too?
      2. It will enable possibility to build with design system tokens.
      3. Easier to integrate with packaging tool, should we need it one day.

      Any comments or thought are more than welcome.

            kabalin Ruslan Kabalin
            kabalin Ruslan Kabalin
            1 Vote for this issue
            7 Start watching this issue


                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.