I'm looking into Google's stylesheet renaming feature and I'm not sure how to rewrite my jquery selectors. I didn't find the doc very clear on that.
If I have some code that looks like this:
<div class="MyClass"></div>
<div id="MyID"></div>
$('.MyClass').someFunc();
$('#MyID').someFunc();
How must the HTML and javascript be written so that CSS renaming will work?
Thanks for your suggestions.
For Closure-stylesheets to work in combination with an external library like jQuery, you will need to use the Closure-library as well to add support for
goog.getCssName
. However, because Closure-Library is written to make maximum use of the dead code elimination of Closure-compiler, only a very small amount of the library code will be included in the final output (about 1KB in this example).Step 1 - Setup your project
You'll need the following tools:
Step 2 - Setup Your Source Files
Stylesheet Source (sample.gss)
Closure Template Source (sample.soy)
Javascript Source (sample.js)
HTML Source (development.htm)
Step 3 - Compile your Stylesheet and Templates
Using the tools downloaded from the templates and stylesheet projects, you'll need to compile the
sample.gss
andsample.soy
files. Here's the commands used for this sample:With these files, you can test the renaming during development. See the example.
Step 4 - Compile the Project for Production
First recompile your stylesheets to produce a renaming map using the "CLOSURE_COMPILED" option:
Then you will need to calculate the Closure-library dependency files and compile all of the source javascript files into a single source.
Note: since jQuery is not compatible with ADVANCED_OPTIMIZATIONS of Closure-compiler, it will not be included as input. Instead, reference the appropriate jQuery extern file found in the Closure-compiler contrib/externs folder.
The calcdeps.py script in the Closure-library project can be used to also call the Closure-compiler on the input files it determines.
See the final result: compiled version.
Final Notes
As you can see, using Google Closure Stylesheets requires not only pieces of the entire Closure-tools suite, but is quite involved.
document.write
call to output the HTML with the properly renamed class, however there are more elegant and maintainable techniques for production code.