Generate types for empty classes

[rzseattle]

Hi

Is there a possibility to create types for classes with an empty body? I think it's useful mainly because two reasons:

1. While I work with modules I often create the template sass file with class names. Then I can use these names in react component. Usually, it's easier to fill class bodies from this point.

2. Delete body of class creating the problem with code becaouse type is no longer available for typescript

[skovy]

This would be a breaking change to swap it like this, and in my opinion less correct. The types are meant to ensure you're only using valid class names that do something. An empty class doesn't do anything.

However, I can see the benefit of this during iteration. Would you suggest a new configuration option such as outputEmptyClassnames (maybe a better name) to opt-in to this behavior with the known downside it doesn't prevent empty classes?

[rzseattle]

I don't think that is wrong to generate typings for empty classes. If U wants to prepare a placeholder for future CSS improvements it's a very rational way.

And the option would be perfect. Don't have any comments to name also.

[skovy]

I'm not sure when I'll get around to this but if someone wants to create a pull request with this I can review it. I'm not sold on outputEmptyClassnames, mabye includeEmptyRules or outputEmptyRules?

[kobakazu0429]

It appears that https://github.com/sass/dart-sass does not have an option to include empty classes. So, empty classes are removed when converting from scss to css. However, the following seems to solve this problem.

.empty-class {
  /**/
}

ref: https://stackoverflow.com/questions/11837701/how-to-include-empty-classes-and-ids-in-sass-result

[skovy]

Yea, the lack of support in SASS is problematic. The PostCSS SASS plugin also relies on sass so the fact it removes empty classes will make this very challenging. The only solution I can think of right now is some custom regex but that'll be brittle, or parsing the CSS into an AST but the SASS compiler is presumably already doing this so it could add extra overhead and complicate the code. This problem is not unique to this tool, it's replicating what SASS does (and doesn't expose) so I'm thinking it doesn't make sense to support this in this tool.

[skovy]

Closing as this issue should be opened on dart-sass since this using that package. This tool should reflect what happens in reality, and if dart-sass strips empty classes in reality this tool will as well.