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.
- 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/FOLDERis the path to the output folder and
IN/FOLDERis the path to the input files. The tool will recursively search for a file called
mainfiles.txtin 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
CSVsvariable in 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