google / eleventy-high-performance-blog

A high performance blog template for the 11ty static site generator.

https://www.industrialempathy.com/posts/eleventy-high-performance-blog/

MIT License

4.03k stars 283 forks source link

Testing css #57

Open djmtype opened 3 years ago

djmtype commented 3 years ago

During development, npm run watch, how is one suppose to test css if the code has been minified? There are no line references because everything is on line 1.

hhh968574 commented 3 years ago

*@lonekorean ***

cramforce commented 3 years ago

The CSS should be unminified. There really is no good reason for the current state since it gets re-minified during build.

djmtype commented 3 years ago

@cramforce True, the css isn't minified in the css file, but it does get transformed/minified (probably due to csso) during development – npm run watch. Therefore, there is no real frame of reference when troubleshooting.

Screen Shot 4

cramforce commented 3 years ago

Should be totally possible to generate a sourcemap!

djmtype commented 3 years ago

@cramforce CSSO provides an option, but then the css gets parsed through PurgeCSS anyway, I think.

Please don't keep me in suspense. How can we add a css sourcemap for npm run watch only?

cramforce commented 3 years ago

I filed https://github.com/FullHuman/purgecss/issues/526

There is, indeed, little that can be done for now short of turning off CSS purging during development.

theor commented 3 years ago

I've disabled css inlining in dev mode, as it allows browsersync to inject css and bypass 11ty, which is way faster. is it something worth a PR ?

cramforce commented 3 years ago

I don't think I want to make that a default, but otherwise it is worth a PR for sure!

theor commented 3 years ago

https://github.com/google/eleventy-high-performance-blog/pull/108 let me know what you think !