|
| 1 | +# Minify CSS with Python |
| 2 | +**Learn how to utilize cssutils to minimize CSS files in a Web Project** |
| 3 | + |
| 4 | + |
| 5 | +## Idea |
| 6 | + |
| 7 | +In this article, we will make a python program that will search for classes used in all HTML files in a project and it will then search and compile these files from the CSS files. The program will serve a specific purpose as it will match classes strictly; which means `bg-black` won't `bg-black:hover`, The used classes have to appear in the stylesheets as they are used. This way of minimizing is useful for utility classes such as `width-800px` or `color-grey-800` that only change on the property. Now maybe your utility classes also entail something like this pattern: `child-margin-2rem` which in the stylesheet is actually `child-margin-2rem > *`, this won't match by default but we will make it possible to replace such patterns with the appropriate selector. Finally, you can change the code so the minified works better for your case or you could even redo it on your own with the knowledge gained. |
| 8 | + |
| 9 | +We will utilize a CSS Library called CSSUtils that allows us to parse, read and write CSS. |
| 10 | + |
| 11 | +## Imports |
| 12 | + |
| 13 | +Let's start with the Modules and Libraries we have to import for our little program. The most important will be `cssutils` which has to be downloaded with `pip install cssutils`. We also want to import `re`, `os`, `time`. We get the logging module simply to turn off logging because cssutils throws a lot of errors. We then clear the console with `os.system` and we save the start time of the program to a variable. |
| 14 | + |
| 15 | +```py |
| 16 | +import cssutils |
| 17 | +import re |
| 18 | +import logging |
| 19 | +import os |
| 20 | +import time |
| 21 | +cssutils.log.setLevel(logging.CRITICAL) |
| 22 | + |
| 23 | +startTime = time.time() |
| 24 | +os.system('cls') |
| 25 | +``` |
| 26 | + |
| 27 | +## Getting the Files |
| 28 | + |
| 29 | +Firstly we get lists of files ending in `.html` and `.css`. We save these lists for later. |
| 30 | + |
| 31 | +```py |
| 32 | +htmlFiles = getFilesByExtension('.html', '.') |
| 33 | + |
| 34 | +cssFiles = getFilesByExtension('.css', 'style') |
| 35 | +``` |
| 36 | + |
| 37 | +Let's also go over the function that searches for all these files. keep in mind it has to be defined before its usage. Here we use the `walk` function of `os` which receives a path and it will return data about each subdirectory and the directory itself. We only need the files which are the third item of the returned tuple. We loop over these and if they end with the specified extension we add them to the `foundFiles` list. Lastly, we also need to return this list. |
| 38 | + |
| 39 | +```py |
| 40 | +def getFilesByExtension(ext, root): |
| 41 | + foundFiles = [] |
| 42 | + |
| 43 | + for root, directories, files in os.walk(root): |
| 44 | + |
| 45 | + for f in files: |
| 46 | + |
| 47 | + if f.endswith(ext): |
| 48 | + foundFiles.append(os.path.join(root, f)) |
| 49 | +``` |
| 50 | + |
| 51 | +## Finding all used Classes |
| 52 | + |
| 53 | +Next up we want to find all used classes in all HTML files that were found. To do this we first create a dictionary to store each class name as an item. We do it this way so we don't have duplicates in the end. We then loop over all HTML files and for each one we get the content and we use a Regular Expression to find all class strings. Continuing we split each of these found strings because classes are separated by a space. Lastly, we return the found list dictionary but we return the keys which are the classes. |
| 54 | + |
| 55 | +```py |
| 56 | +usedClasses = findAllCSSClasses() |
| 57 | + |
| 58 | +# Function, defined before |
| 59 | +def findAllCSSClasses(): |
| 60 | + usedClasses = {} |
| 61 | + |
| 62 | + # Find all used classes |
| 63 | + for htmlFile in htmlFiles: |
| 64 | + with open(htmlFile, 'r') as f: |
| 65 | + htmlContent = f.read() |
| 66 | + |
| 67 | + regex = r'class="(.*?)"' |
| 68 | + |
| 69 | + matched = re.finditer(regex, htmlContent, re.MULTILINE | re.DOTALL) |
| 70 | + |
| 71 | + for i in matched: |
| 72 | + |
| 73 | + for className in i.groups()[0].split(' '): |
| 74 | + usedClasses[className] = '' |
| 75 | + |
| 76 | + return list(usedClasses.keys()) |
| 77 | +``` |
| 78 | + |
| 79 | +## Translating used Classes |
| 80 | + |
| 81 | +Now wer translate some classes, this is useful if the class name won't exactly match the selector, but it follows a pattern like all classes starting with `child-` have `> *` appended to their selector, and here we handle this. We define each translation in a list where the first item is the regex and the second is the replacement. |
| 82 | + |
| 83 | +```py |
| 84 | +# Use Translations if the class names in the Markup don't exactly |
| 85 | +# match the CSS Selector ( Except for the dot at the beginning. ) |
| 86 | +translations = [ |
| 87 | + [ |
| 88 | + '@', |
| 89 | + '\\@' |
| 90 | + ], |
| 91 | + [ |
| 92 | + r"(.*?):(.*)", |
| 93 | + r"\g<1>\\:\g<2>:\g<1>", |
| 94 | + ], |
| 95 | + [ |
| 96 | + r"child(.*)", |
| 97 | + "child\\g<1> > *", |
| 98 | + ], |
| 99 | +] |
| 100 | + |
| 101 | +usedClasses = translateUsedClasses(usedClasses) |
| 102 | +``` |
| 103 | + |
| 104 | +In the function we then loop over each regex for each class, so every translation is potentially applied to each class name. We then simply apply the replacement with the `re.sub` method. |
| 105 | + |
| 106 | +```py |
| 107 | +def translateUsedClasses(classList): |
| 108 | + |
| 109 | + for i, usedClass in enumerate(classList): |
| 110 | + for translation in translations: |
| 111 | + |
| 112 | + regex = translation[0] |
| 113 | + subst = translation[1] |
| 114 | + |
| 115 | + if re.search(regex, usedClass): |
| 116 | + result = re.sub(regex, subst, usedClass, 1, re.MULTILINE) |
| 117 | + |
| 118 | + classList[i] = result |
| 119 | + |
| 120 | + return classList |
| 121 | +``` |
| 122 | + |
| 123 | +## Getting used Classes from the Stylesheets |
| 124 | + |
| 125 | +After that, we get the style definition from the stylesheets with cssutils, before we loop over the found style sheets we first define the path of the minified CSS which in this case is `min.css` then we also create a variable called `newCSS` that will hold the new CSS content. |
| 126 | + |
| 127 | +```py |
| 128 | +output = 'min.css' |
| 129 | + |
| 130 | +newCSS = '' |
| 131 | +``` |
| 132 | + |
| 133 | +We continue by looping over all CSS files. We parse each file with `cssutils.parsefile(path)` and get all the rules in the style sheet with the custom `flattenStyleSheet()` function, we later go over how it works but it will essentially put all rules hidden inside media queries into the same list as top-level rules. then we define a list that will hold all selector names that are not classes that we encounter. We do this because something like `input` should not be left out. Then we loop over each rule and each class and if the selector and selector text of the rule match up we add the whole CSS text of the rule to the newCSS string. We simply need to watch out if the rule has a parent rule which would be a media query. We do the same thing for all the rules not starting with a dot. |
| 134 | + |
| 135 | +```py |
| 136 | +for cssFile in cssFiles: |
| 137 | + |
| 138 | + sheet = cssutils.parseFile(cssFile) |
| 139 | + rules = flattenStyleSheet(sheet) |
| 140 | + |
| 141 | + noClassSelectors = [] |
| 142 | + |
| 143 | + for rule in rules: |
| 144 | + for usedClass in usedClasses: |
| 145 | + |
| 146 | + if '.' + usedClass == rule.selectorText: |
| 147 | + usedClasses.remove(usedClass) |
| 148 | + |
| 149 | + if rule.parentRule: |
| 150 | + newCSS += str(rule.parentRule.cssText) |
| 151 | + else: |
| 152 | + newCSS += str(rule.cssText) |
| 153 | + |
| 154 | + if rule.selectorText[0] != '.' and not rule.selectorText in noClassSelectors: |
| 155 | + |
| 156 | + noClassSelectors.append(rule.selectorText) |
| 157 | + |
| 158 | + if rule.parentRule: |
| 159 | + newCSS += str(rule.parentRule.cssText) |
| 160 | + else: |
| 161 | + newCSS += str(rule.cssText) |
| 162 | +``` |
| 163 | + |
| 164 | +### `flattenstylesheet` function |
| 165 | + |
| 166 | +Lets quickly go over the flattenstylesheet function. It will receive the sheet and it loops over each rule in that sheet in, then it will check if the rule is simply a style rule or media rule so it can add all rules to a one-dimensional list. |
| 167 | + |
| 168 | +```py |
| 169 | +def flattenStyleSheet(sheet): |
| 170 | + ruleList = [] |
| 171 | + |
| 172 | + for rule in sheet.cssRules: |
| 173 | + |
| 174 | + if rule.typeString == 'MEDIA_RULE': |
| 175 | + ruleList += rule.cssRules |
| 176 | + |
| 177 | + elif rule.typeString == 'STYLE_RULE': |
| 178 | + ruleList.append(rule) |
| 179 | + |
| 180 | + return ruleList |
| 181 | +``` |
| 182 | + |
| 183 | +## Saving new CSS |
| 184 | + |
| 185 | +Lastly, we minify the CSS further by removing linebreaks and double spaces and we save this new CSS to the specified location. |
| 186 | + |
| 187 | +```py |
| 188 | +newCSS = newCSS.replace('\n', '') |
| 189 | +newCSS = newCSS.replace(' ', '') |
| 190 | + |
| 191 | +with open(output, 'w') as f: |
| 192 | + f.write(newCSS) |
| 193 | + |
| 194 | + |
| 195 | +print('TIME: ', time.time() - startTime) |
| 196 | +``` |
| 197 | + |
| 198 | +## Conclusion |
| 199 | + |
| 200 | +Excellent! You have successfully created a CSS Minifier using Python code! See how you can add more features to this program such as a config file for further options. Also keep in mind that this program could need some optimization since it runs very slow on larger projects. |
0 commit comments