Bootstrap cleanup: Scan the codebase for unused CSS classes

The goal is to reduce the overall size of Tiki by cleaning all unused CSS classes found in all files under https://gitlab.com/tikiwiki/tiki/-/tree/master/themes/base_files/scss.

The idea is to run an initial cleanup scan of the entire codebase, and later have the script run in the CI on relevant modified files.

So, we need to find an open-source tool written either in PHP or JavaScript that can:

• Parse stylesheet (CSS and SCSS) files under a given directory, and detect all CSS classes
• Scan the codebase for PHP, JS, Smarty, and Vue files
• Detect all classes (including dynamically generated ones) in the files
• Cleanup stylesheet files with respect to the report given

PurgeCSS

https://github.com/FullHuman/purgecss

• Does not natively support SCSS files, but is achievable through the integration of PostCSS SCSS in the parser.
• Will be stuck on dynamically generated classes and report them as unused
• POC:
  • Source: https://gitlab.com/mercihabam/tiki/-/blob/detect-unused-css-with-purgecss/doc/devtools/detect_unused_css_classes_purgecss.mjs
  • Report: https://gitlab.com/mercihabam/tiki/-/blob/detect-unused-css-with-purgecss/doc/devtools/report-temp

UnCSS

https://github.com/uncss/uncss

• Cannot run on tpl files or other non-HTML files.
• But it has direct support for HTML content from given URLs.
• This is a very old option (lastly released in 2020), so I won't focus much on it.

PurifyCSS

https://github.com/purifycss/purifycss

• Unlike UnCSS, PurifyCSS allows content from non-HTML files.
• Nothing interesting here that isn't already achieved by PurgeCSS, and this is a very old option as well (lastly released in 2017).

DropCSS

https://github.com/leeoniya/dropcss

• Only runs on HTML files, so this can't be the best option when most content is found in tpl files.
• It's also stated that "there will always exist cases of valid input that cannot be processed by DropCSS". That's a downside when we're aiming for accurate results.
• Does not generate stats after parsing HTML and CSS, only outputs cleaned CSS, making manual verification harder.
• A very old option, lastly released in 2019.

postcss-remove-unused-css

https://github.com/shff/postcss-remove-unused-css

• A PostCSS plugin, so PostCSS must be configured to make use of it.
• It states that it works the same way PurifyCSS does.
• It supports multiple file types, not only HTML.
• It matches words from the given file content to CSS selectors. This has a higher chance of generating inaccurate results.