[IDEA] => CSS Modules => Ability to pass identifier names to methods

Hello, thank you for all the work you have done.

Goal

• To further optimize the processed CSS after importing it as a module. Example:
  • .mdc-button becomes .b_0

Story

Webpack along with css-loader using css-modules allow us to import necessary for a developer component and then call it in the following way, assuming we import object named styles:

• styles.mdcButton

Problem

The problem is with the JavaScript architecture that is currently in use. The methods should accept classes (identifiers using css-modules) as parameters, instead you are returning constants. See example @material/ripple/constants

In the end, we have huge nonsense in production classnames like mdc-ripple-upgraded--foreground-activation, when we instead could pass it as a generated CSS local identifier such as b_0

Suggested solution

The function should accept an object parameter, default = false, with the classnames generated from the local identifiers of the processed component. Instead of returning constants after interacting with elements like Ripple that become no longer valid, since the classnames change based on the local identifiers.

[amsheehan]

Keep in mind with regard to framework specific UI libraries that some frameworks require wrappers because they interact with the DOM in different ways. This is exactly why MDC Web is architected the way it is—so specific frameworks can implement all of their DOM interactions in the way required by a specific framework.

I see nothing wrong with having enthusiasts with domain specific expertise maintain framework specific wrappers in lock step with MDC Web. We found it’s a better use of everyone’s time and results in a better MDC Web, and better framework specific wrapper libraries.

As for spending time building UI—while it may not be a goal of your project to spend engineering time on the front end, that doesn’t mean that a library like MDC Web shouldn’t provide for, and recommend the work of other highly skilled front end engineers.

In terms of suggesting things to address your specific request. It is my opinion that css renaming (shortening) should not even really be the responsibility of a UI library like MDC Web, and that something in your build chain should do does this. What Lynn suggested is to reimplement the adapter methods in the components that add or remove classes to use shorter custom names in place of the default MDC classes. I think that’s a valid suggestion and is supplemented with a code snippet.

[jamesmfriedman]

This came up with RMWC. I’m curious to know what the total reduction in CSS size would be. Other than that, I’m not aware of the length of class names helping or hurting runtime performance.