Removal of unused css

[ansarizafar]

I want to use semantic-ui/Tailwindcss with hyperhtml. These are big css files and I am trying to use purgejs webpack plugin with poi to remove unused css. It seems that purgejs plugin configuration is working fine but the pluing unable to find used css. Any idea how it can be done?

[WebReflection]

I've honestly no idea what you're talking about.

This is a very poor bug report:

• not a link
• not even related to the library (css?)
• not a demo, an example, a snippet

Please file reasonable bugs so that neither you nor me would waste any extra time.

Thank you.

[ansarizafar]

I am experimenting with amazing hyperhtml and I want to use it for my next project that is why trying to identify all the requirements of a real world project.

Most real world projects use some css framework like Bootstrape, Foundation, Semantic-ui, Tailwindcss etc. These frameworks are big in terms of file size. Tools like Purgejs https://www.purgecss.com/ are used to remove unused css from a project to reduce bundle size. I have used these tools successfully with other frameworks like VueJS etc but these tools with same configuration are not working with Hyperhtml as this library is using template literals that is why purgejs is unable to identify css classes used in templates.

This is a real issue specially If you are building a PWA. I hope you can help finding a solution to this issue. Here is sample repo https://github.com/ansarizafar/hyperhtml

Thank you for creating amazing Hyperhtml.

[WebReflection]

you could use same strategy used by viper-news, it's described in here: https://github.com/WebReflection/viperHTML#handy-patterns

the render would be this.html and the model any extra data you need per update.

In few words you'd create *.html files, you would transform them as CJS modules and you would end up with components like:

const { Component } = require("hyperhtml/umd");

const update = require("../views/header.js");

export default class Header extends Component {

  render() {
    return update(this.html, this);
  }

}

In this way you can pass the folder with all HTML components to whatever too you want and it will work (should?) out of the box.

[ansarizafar]

There should be a better and developer friendly way of doing this, like Vuejs webpack loader https://vue-loader.vuejs.org/en/

Tooling is very important for any front end framework to succeed in this very competitive world. Thanks for the solution.

[WebReflection]

Solution: https://github.com/WebReflection/hyperHTML/issues/180