search

leeoniya / dropcss

An exceptionally fast, thorough and tiny unused-CSS cleaner
MIT License
2.13k stars 68 forks source link

Older browsers support #20

Closed irudoy closed 5 years ago

irudoy commented 5 years ago

This lib is not working in IE11 and other browsers that don't support m and y regexp flags. https://github.com/leeoniya/dropcss/pull/18 makes possible to polyfill it.

I think that dropcss is an awesome tool for collecting CSS usage at production, directly from the user browser, in requestIdleCallback or WebWorker. It's small and relatively fast. For projects with the big codebase and a lot of legacy, it's impossible to use it at build time.

leeoniya commented 5 years ago

i see the use case of doing something like this at runtime (for various JS interactions) but what would be the benefit of doing it in IE11? what selectors (other than ie hacks which probably won't parse anyways) would you expect to be active that will not be active in Chrome, Safari or Firefox? conditional comments were removed in ie10.

For projects with the big codebase and a lot of legacy, it's impossible to use it at build time.

i'm not sure i follow this reasoning. there's nothing that needs to be deeply integrated into any codebase to use dropcss. you just need to add post-processing or a crawler that pulls your pages and grabs the html/css. this can be done trivially as shown in https://github.com/leeoniya/dropcss#javascript-execution

irudoy commented 5 years ago

It seems like impossible to grab HTML for ~400+ various views each with own dynamically rendered pieces. Also, you need to maintain this list in the actual state. It's highly dangerous to remove unused CSS automatically in such circumstances. Would be more acceptable to generate reports about unused rules, and remove it manually with review and tests.

I think that unsupported IE11 is not an issue. But if you use dropcss at the project with some browser compatibility checks, e.g. es-check, it can be a challenge.

leeoniya commented 5 years ago

I think that unsupported IE11 is not an issue. But if you use dropcss at the project with some browser compatibility checks, e.g. es-check, it can be a challenge.

es-check takes a list of files or a glob pattern. i would rather have devs figure out a way to exclude dropcss.js from their dev/qa build checks without also affecting their production build config.

perhaps it's possible to contribute something like babel-plugin-transform-sticky-regex to Buble used by this project. this way the source can remain readable and many projects can benefit from the addition. looks like there was some proximate code touched here: https://gitlab.com/Rich-Harris/buble/commit/ac7535625d9a792aaed0ce032b258cb2f93c8e10

another option is to compile your own dropcss builds with Babel plus that transform.

It's highly dangerous to remove unused CSS automatically in such circumstances. Would be more acceptable to generate reports about unused rules, and remove it manually with review and tests.

sure, nothing stops you from using dropcss simply as a reporting tool.

leeoniya commented 5 years ago

yet another option i would be open to is if you wanted to write a bit of code for a rollup-replace config, so this transform can be part of the build system rather than the source.

probably via https://github.com/jetiny/rollup-plugin-re or if you wanna do it "properly", https://github.com/goto-bus-stop/transform-ast#readme

leeoniya commented 5 years ago

ping @irudoy

leeoniya commented 5 years ago

closing for now. ping me if you'd like to pursue any of the options i outlined.