Closure stylesheets css renaming issue

Question

Closure Stylesheets can rename css classes. Example:

.class-one {
  // ...  
}

.class-two {
  // ...
}

After compilation the javascript output will be:

{
  'class' : 'a',
  'one' : 'b',
  'two' : 'c'
}

And the css output:

.a-b {
  // ...  
}

.a-c {
  // ...
}

I have a big project with many css classes. After compilation I noticed that not every word was renamed. In "a-Rf-rightslider" first two words were renamed while the last one is not.

I think that Closure Stylesheets has limitation on the renaming array size. Something like: 'a', 'b', ..., 'ZY', 'ZZ'. And skips all the rest. Am I right? Any ideas?

score 0 · Answer 1 · answered Jul 07 '16 at 10:00

AFAIK There is no such limitation. Classnames can go way beyond ZZ and I have seen names like aScF even.

Can you make sure that the class names are used with goog.getCssName?

Also now days Googlers prefer to name their classes in camelCase instead of joining-with-dash because that gives you no -s in the minified name.

Closure stylesheets css renaming issue

1 Answers1