Migrating Cascading Style Sheets to Preprocessors by Introducing Mixins

Abstract

Cascading Style Sheets (CSS) is the standard language for styling web documents and is extensively used in the industry. However, CSS lacks constructs that would allow code reuse (e.g., functions). Consequently, maintaining CSS code is often a cumbersome and errorā€prone task. Preprocessors (e.g., Less and Sass) have been introduced to fill this gap, by extending CSS with the missing constructs. Despite the clear maintainability benefits coming from the use of preprocessors, there is currently no support for migrating legacy CSS code to preprocessors. In this paper, we propose a technique for automatically detecting duplicated style declarations in CSS code that can be migrated to preprocessor functions (i.e., mixins). Our technique can parameterize differences in the style values of duplicated declarations, and ensure that the migration will not change the presentation semantics of the web documents. The evaluation has shown that our technique is able to detect 98% of the mixins that professional developers introduced in websites and Style Sheet libraries, and can safely migrate real CSS code.

Cascading Style Sheets CSS Preprocessors ASE Migration

Downloads

  • The paper can be downloaded here.
  • The analyzed Less files (websites and libraries) can be downloaded here.
  • The collected data (as pipe-separated files) can be downloaded here.
  • The Java code used for collecting information from Less files is included in our tool which can be downloaded here. Run it (ca.concordia.cssanalyser.app.CSSAnalyserCLI) with these parameters: --mode:mixin_migration --outfolder:OUT/FOLDER --infolder:IN/FOLDER, where OUT/FOLDER is the path to the output folder and IN/FOLDER is the path to the input files. The tool will recursively search for a file called mainfiles.txt in each folder. This file contains the list of all preprocessor files (one file per line) inside the same folder, which are the main for generating the CSS files (i.e., the files which probably import other files).
  • The Eclipse plug-in can be downloaded here.
  • R scripts used for the analysis and generating plots in the paper can be found here. (This is an R Studio project). Note that, first you will need to modify the CSVs variable in the load.R file, the loadData() function, to point to the folder containing all pipe-separated files. Run loadData() function to load the data. The corresponding functions for analyzing data and generating plots are in other provided .R files.

BibTex

@inproceedings{Mazinanian:ASE:2016,
  author = {Mazinanian, Davood and Tsantalis, Nikolaos
  title = {Migrating Cascading Style Sheets to Preprocessors by Introducing Mixins},
  booktitle = {Proceedings of the 31st IEEE/ACM International Conference on Automated Software Engineering},
  series = {ASE 2016},
  year = {2016},
  isbn = {978-1-4503-3845-5},
  location = {Singapore, Singapore},
  pages = {672--683},
  numpages = {12},
  url = {http://doi.acm.org/10.1145/2970276.2970348},
  doi = {10.1145/2970276.2970348},
  acmid = {2970348},
  publisher = {ACM},
  address = {New York, NY, USA},
  keywords = {Cascading style sheets, duplication, migration, refactoring},    
}