First iteration of GitLab own Stylelints

DRYed the code

Changed new rules to warnings

Manual prettified and added stylelint rules

.stylelintrc

 {
    "plugins":[
-      "stylelint-scss"
+      "./scripts/frontend/stylelint/stylelint-duplicate-selectors.js",
+      "./scripts/frontend/stylelint/stylelint-utility-classes.js",
+      "stylelint-scss",
    ],
    "rules":{
       "at-rule-blacklist":[
@@ -95,13 +97,15 @@
          },
       ],
       "selector-list-comma-newline-after":"always",
-      "selector-max-compound-selectors":[5, { "severity": "warning" }],
+      "selector-max-compound-selectors":[3, { "severity": "warning" }],
       "selector-max-id":1,
       "selector-no-vendor-prefix":true,
       "selector-pseudo-element-colon-notation":"double",
       "selector-pseudo-element-no-unknown":true,
       "shorthand-property-no-redundant-values":true,
       "string-quotes":"single",
-      "value-no-vendor-prefix":[true, { ignoreValues: ["sticky"] }]
+      "value-no-vendor-prefix":[true, { ignoreValues: ["sticky"] }],
+      "stylelint-gitlab/duplicate-selectors":[true,{ "severity": "warning" }],
+      "stylelint-gitlab/utility-classes":[true,{ "severity": "warning" }],
    }
 }

app/assets/stylesheets/notify.scss

-@import "framework/variables";
+@import 'framework/variables';
 
 img {
   max-width: 100%;

package.json

@@ -17,6 +17,8 @@
     "prettier-all": "node ./scripts/frontend/prettier.js check-all",
     "prettier-all-save": "node ./scripts/frontend/prettier.js save-all",
     "stylelint": "node node_modules/stylelint/bin/stylelint.js app/assets/stylesheets/**/*.* --custom-formatter node_modules/stylelint-error-string-formatter",
+    "stylelint-file": "node node_modules/stylelint/bin/stylelint.js",
+    "stylelint-create-utility-map": "node scripts/frontend/stylelint/stylelint-utility-map.js",
     "test": "yarn jest && yarn karma",
     "webpack": "webpack --config config/webpack.config.js",
     "webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js"
@@ -169,13 +171,15 @@
     "karma-mocha-reporter": "^2.2.5",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.0-beta.0",
+    "md5": "^2.2.1",
+    "node-sass": "^4.11.0",
     "nodemon": "^1.18.9",
     "pixelmatch": "^4.0.2",
     "postcss": "^7.0.14",
     "prettier": "1.16.4",
     "stylelint": "^9.10.1",
     "stylelint-config-recommended": "^2.1.0",
-    "stylelint-scss": "^3.5.3",
+    "stylelint-scss": "^3.5.4",
     "vue-jest": "^4.0.0-beta.2",
     "webpack-dev-server": "^3.1.14",
     "yarn-deduplicate": "^1.1.1"

scripts/frontend/stylelint/stylelint-duplicate-selectors.js

+const stylelint = require('stylelint');
+const utils = require('./stylelint-utils');
+const ruleName = 'stylelint-gitlab/duplicate-selectors';
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  expected: (selector1, selector2) => {
+    return `"${selector1}" and "${selector2}" have the same properties.`;
+  },
+});
+
+module.exports = stylelint.createPlugin(ruleName, function(enabled) {
+  if (!enabled) {
+    return;
+  }
+
+  return function(root, result) {
+    const selectorGroups = {};
+    utils.createPropertiesHashmap(root, result, ruleName, messages, selectorGroups, true);
+  };
+});
+
+module.exports.ruleName = ruleName;
+module.exports.messages = messages;

scripts/frontend/stylelint/stylelint-utility-classes.js

+const stylelint = require('stylelint');
+const utils = require('./stylelint-utils');
+const utilityClasses = require('./utility-classes-map.js');
+
+const ruleName = 'stylelint-gitlab/utility-classes';
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  expected: (selector1, selector2) => {
+    return `"${selector1}" has the same properties as our BS4 utility class "${selector2}" so please use that instead.`;
+  },
+});
+
+module.exports = stylelint.createPlugin(ruleName, function(enabled) {
+  if (!enabled) {
+    return;
+  }
+
+  return function(root, result) {
+    utils.createPropertiesHashmap(root, result, ruleName, messages, utilityClasses, false);
+  };
+});
+
+module.exports.ruleName = ruleName;
+module.exports.messages = messages;

scripts/frontend/stylelint/stylelint-utility-map.js

+const sass = require('node-sass');
+const postcss = require('postcss');
+const fs = require('fs');
+const path = require('path');
+const prettier = require('prettier');
+
+const utils = require('./stylelint-utils');
+const ROOT_PATH = path.resolve(__dirname, '../../..');
+const hashMapPath = path.resolve(__dirname, './utility-classes-map.js');
+
+//
+// This creates a JS based hash map (saved in utility-classes-map.js) of the different values in the utility classes
+//
+sass.render(
+  {
+    data: `
+      @import './functions';
+      @import './variables';
+      @import './mixins';
+      @import './utilities';
+    `,
+    includePaths: [path.resolve(ROOT_PATH, 'node_modules/bootstrap/scss')],
+  },
+  (err, result) => {
+    if (err) console.error('Error ', err);
+
+    const cssResult = result.css.toString();
+
+    // We just use postcss to create a CSS tree
+    postcss([])
+      .process(cssResult, {
+        // This supresses a postcss warning
+        from: undefined,
+      })
+      .then(result => {
+        const selectorGroups = {};
+        utils.createPropertiesHashmap(result.root, result, null, null, selectorGroups, true);
+
+        const prettierOptions = prettier.resolveConfig.sync(hashMapPath);
+        const prettyHashmap = prettier.format(
+          `module.exports = ${JSON.stringify(selectorGroups)};`,
+          prettierOptions,
+        );
+
+        fs.writeFile(hashMapPath, prettyHashmap, function(err) {
+          if (err) {
+            return console.log(err);
+          }
+
+          console.log('The file was saved!');
+        });
+      });
+  },
+);

scripts/frontend/stylelint/stylelint-utils.js

+const stylelint = require('stylelint');
+const md5 = require('md5');
+
+module.exports.createPropertiesHashmap = (
+  ruleRoot,
+  result,
+  ruleName,
+  messages,
+  selectorGroups,
+  addSelectors,
+) => {
+  ruleRoot.walkRules(rule => {
+    const selector = rule.selector.replace(/(?:\r\n|\r|\n)/g, ' ');
+
+    if (
+      rule &&
+      rule.parent &&
+      rule.parent.type != 'atrule' &&
+      !(
+        selector.includes('-webkit-') ||
+        selector.includes('-moz-') ||
+        selector.includes('-o-') ||
+        selector.includes('-ms-') ||
+        selector.includes(':')
+      )
+    ) {
+      let cssArray = [];
+      rule.nodes.forEach(function(property) {
+        const { prop, value } = property;
+        if (property && value) {
+          const propval = `${prop}${value}${property.important ? '!important' : ''}`;
+          cssArray.push(propval);
+        }
+      });
+
+      cssArray = cssArray.sort();
+      const cssContent = cssArray.toString();
+
+      if (cssContent) {
+        const hashValue = md5(cssContent);
+        const selObj = selectorGroups[hashValue];
+
+        const selectorLine = `${selector} (${
+          rule.source.input.file ? rule.source.input.file + ' -' : ''
+        }${rule.source.start.line}:${rule.source.start.column})`;
+
+        if (selObj) {
+          if (selectorGroups[hashValue].selectors.indexOf(selector) == -1) {
+            let lastSelector =
+              selectorGroups[hashValue].selectors[selectorGroups[hashValue].selectors.length - 1];
+
+            // So we have nicer formatting if it is the same file, we remove the filename
+            lastSelector = lastSelector.replace(`${rule.source.input.file} - `, '');
+
+            if (messages) {
+              stylelint.utils.report({
+                result,
+                ruleName,
+                message: messages.expected(selector, lastSelector),
+                node: rule,
+                word: rule.node,
+              });
+            }
+
+            if (addSelectors) {
+              selectorGroups[hashValue].selectors.push(selectorLine);
+            }
+          }
+        } else if (addSelectors) {
+          selectorGroups[hashValue] = {
+            selectors: [selectorLine],
+          };
+        }
+      }
+    }
+  });
+};

scripts/frontend/stylelint/utility-classes-map.js

+module.exports = {
+  '99097f29a9473b56eacdb9ff0681c366': { selectors: ['.align-baseline (1:1)'] },
+  d969b318bb994e104e8c965006d71cb7: { selectors: ['.align-top (4:1)'] },
+  '8cd54ab97b9cc43cb9d13d2ea7c601c7': { selectors: ['.align-middle (7:1)'] },
+  dd06eb6c49e979b7a9fdaa7119aa0a0b: { selectors: ['.align-bottom (10:1)'] },
+  '0af1e90cbc468615e299ec9f49e97c4a': { selectors: ['.align-text-bottom (13:1)'] },
+  '50af706df238cf59bdc634fc684ba0c9': { selectors: ['.align-text-top (16:1)'] },
+  c968922e6e47445362129a684b5913c0: { selectors: ['.bg-primary (19:1)'] },
+  '3c397f9786c24cff4779a11cf5b3d7e7': { selectors: ['.bg-secondary (27:1)'] },
+  '659677469a4477267fabc1788f7cad4e': { selectors: ['.bg-success (35:1)'] },
+  '56d246d5b6a708a4c6f78dbd2444106c': { selectors: ['.bg-info (43:1)'] },
+  '6bec0a33df3a6380c30103db5c273455': { selectors: ['.bg-warning (51:1)'] },
+  '0ce5d074c8667ce6c32360658f428d5d': { selectors: ['.bg-danger (59:1)'] },
+  '0d0269c62a01e97caa9039d227a25d12': { selectors: ['.bg-light (67:1)'] },
+  '3a56309ad8c5b46ebcc3b13fe1987ac1': { selectors: ['.bg-dark (75:1)'] },
+  '0e252f8dd392a33343d3d5efc1e3194a': { selectors: ['.bg-white (83:1)'] },
+  '3af6f52f0ed4f98e797d5f10a35ca6bc': { selectors: ['.bg-transparent (86:1)'] },
+  '16da7fdce74577ceab356509db565612': { selectors: ['.border (89:1)'] },
+  '929622517ca05efde3b51e5f1a57064e': { selectors: ['.border-top (92:1)'] },
+  '7283090353df54f1d515a6ceddfb9693': { selectors: ['.border-right (95:1)'] },
+  bd5670d71332c652b46db82949042e31: { selectors: ['.border-bottom (98:1)'] },
+  fa71e003d04734a898a85cc5285e3cbb: { selectors: ['.border-left (101:1)'] },
+  ed482cea071e316f29d78fd93c3f3644: { selectors: ['.border-0 (104:1)'] },
+  '90cb661baf21e10be6e479cb0544b1a7': { selectors: ['.border-top-0 (107:1)'] },
+  '8a32707eaa09fc998bf8cc915710b60c': { selectors: ['.border-right-0 (110:1)'] },
+  a6f01957e142a000e7742b31ac6c2331: { selectors: ['.border-bottom-0 (113:1)'] },
+  c740fe952cc1985ee14f7d1c7a359a29: { selectors: ['.border-left-0 (116:1)'] },
+  af9dd93e9780306ffa4bb25a6384902f: { selectors: ['.border-primary (119:1)'] },
+  afa290dfe58cca06be5924ceae1b019b: { selectors: ['.border-secondary (122:1)'] },
+  '9b1ac460bdddf1e0164d7bf988cc2da8': { selectors: ['.border-success (125:1)'] },
+  '091cbf41d6be12061382fa571ee1ce82': { selectors: ['.border-info (128:1)'] },
+  '3ada321d4a387901dad6d80e1b6be3fd': { selectors: ['.border-warning (131:1)'] },
+  '13b4713dd52c1e359d1b43dd658cb249': { selectors: ['.border-danger (134:1)'] },
+  '0048e110875ea22b04104d55e764a367': { selectors: ['.border-light (137:1)'] },
+  a900b6b567c9a911326cdd0e19f40f8e: { selectors: ['.border-dark (140:1)'] },
+  '78bcd867ac9677c743c2bc33b872f27b': { selectors: ['.border-white (143:1)'] },
+  e0fc10c49c7b7f4d1924336d21a4f64e: { selectors: ['.rounded (146:1)'] },
+  '1b74b9d0a7d6a59281b5b5cae43c859a': { selectors: ['.rounded-top (149:1)'] },
+  '20b75f55f39e662e038d51a6442c03df': { selectors: ['.rounded-right (153:1)'] },
+  '83ea6db794873239c21f44af25618677': { selectors: ['.rounded-bottom (157:1)'] },
+  '8464e9e8001e65dfc06397436a5eebd7': { selectors: ['.rounded-left (161:1)'] },
+  '59c2f788287fa43caf5891adfc5c796e': { selectors: ['.rounded-circle (165:1)'] },
+  '31a632ba94f8c41558bd6044458f1459': { selectors: ['.rounded-0 (168:1)'] },
+  '16aaf53ab29d6b248b0257f2fa413914': { selectors: ['.d-none (176:1)'] },
+  '4f42736ac9217039ed791b4306e60aeb': { selectors: ['.d-inline (179:1)'] },
+  '067efa04b76649e8afcdceb9f5f7e870': { selectors: ['.d-inline-block (182:1)'] },
+  de54f49149fb9b512aa79ad9ada838f2: { selectors: ['.d-block (185:1)'] },
+  '80fc32acbc0c28ee890a160c23529d26': { selectors: ['.d-table (188:1)'] },
+  '6a87b1db48298ca94cbe5dee79a6eed1': { selectors: ['.d-table-row (191:1)'] },
+  b9896f0d94760bf5920f47904e9f7512: { selectors: ['.d-table-cell (194:1)'] },
+  d25c51f38c4d057209b96c664de68c44: { selectors: ['.d-flex (197:1)'] },
+  e72d46b636d5b8e17e771daa95793f33: { selectors: ['.d-inline-flex (200:1)'] },
+  '2c433b7c14a5ae32cfa8ec7867ee8526': { selectors: ['.embed-responsive (303:1)'] },
+  '56b318b8d8eb845b769d60cefcd131bb': {
+    selectors: [
+      '.embed-responsive .embed-responsive-item,   .embed-responsive iframe,   .embed-responsive embed,   .embed-responsive object,   .embed-responsive video (312:3)',
+    ],
+  },
+  c5009af89633c4d2f71a0a9fa333630d: { selectors: ['.flex-row (337:1)'] },
+  '7b06a3d956579cd64b6f5b1a57255369': { selectors: ['.flex-column (340:1)'] },
+  '21744a8c4dc6ed1519903b4236b00af4': { selectors: ['.flex-row-reverse (343:1)'] },
+  '18d903735f9c71070b6d8166aa1112f1': { selectors: ['.flex-column-reverse (346:1)'] },
+  e2a57aa8196347d4da84f33a4f551325: { selectors: ['.flex-wrap (349:1)'] },
+  b6b29f75b174b5609f9e7d5eef457b70: { selectors: ['.flex-nowrap (352:1)'] },
+  '839230fc7c0abacb6418b49d8f10b27f': { selectors: ['.flex-wrap-reverse (355:1)'] },
+  '924d9b261944a8e8ff684d5b519062bb': { selectors: ['.flex-fill (358:1)'] },
+  '5ed396aeb08464b7df8fc37d29455319': { selectors: ['.flex-grow-0 (361:1)'] },
+  '94251dc4d012339a3e37df6196fc79bb': { selectors: ['.flex-grow-1 (364:1)'] },
+  '0eeed7dabca0452a46574776a4485e6e': { selectors: ['.flex-shrink-0 (367:1)'] },
+  c69e60d5e51a1b74d22b172ab98ef9d5: { selectors: ['.flex-shrink-1 (370:1)'] },
+  '03401c1a81eb6d4639f020f76dd60176': { selectors: ['.justify-content-start (373:1)'] },
+  '39e3d2c344e78869c98ef099249e717d': { selectors: ['.justify-content-end (376:1)'] },
+  '3b2d00c0bea857ab78a71b0872842980': { selectors: ['.justify-content-center (379:1)'] },
+  b1c3c9edd20ed7c08b43863d38ebee40: { selectors: ['.justify-content-between (382:1)'] },
+  a11b4b1d983c5fa75777f273e998f73e: { selectors: ['.justify-content-around (385:1)'] },
+  '50e33f29f65bfffa6a3591fcb6045ca9': { selectors: ['.align-items-start (388:1)'] },
+  e44b276e47415ec19b74cc16740ada1d: { selectors: ['.align-items-end (391:1)'] },
+  '4a9d2716bca651758564059dceed1271': { selectors: ['.align-items-center (394:1)'] },
+  fd970b017f7f558f30cb273bf71ede7d: { selectors: ['.align-items-baseline (397:1)'] },
+  '7204b6b00b69f8af1e4a24c9b6e7f7f9': { selectors: ['.align-items-stretch (400:1)'] },
+  '350fbb74eb70bd05f9438067c3990e9f': { selectors: ['.align-content-start (403:1)'] },
+  '74d61397b4fcbf608f3dba39ab3b2a1b': { selectors: ['.align-content-end (406:1)'] },
+  eed1ab4ee9e5b327a434512176741548: { selectors: ['.align-content-center (409:1)'] },
+  '19878ab832978ef7e1746ac2fe4084b2': { selectors: ['.align-content-between (412:1)'] },
+  dded333d0522692809517039f5a727c1: { selectors: ['.align-content-around (415:1)'] },
+  '5cbb83ea2af7e9db8ef13f4c7d6db875': { selectors: ['.align-content-stretch (418:1)'] },
+  dc3df46d3c023184d375a63a71916646: { selectors: ['.align-self-auto (421:1)'] },
+  '0c6d2d8c9732c571f9cf61a4b1d2877f': { selectors: ['.align-self-start (424:1)'] },
+  fe7c6071e3e17214df1bdd38850d9ff0: { selectors: ['.align-self-end (427:1)'] },
+  '9611bbad74d72d50cf238088576a5089': { selectors: ['.align-self-center (430:1)'] },
+  '4bc5edddf5981866946175bfedb7247f': { selectors: ['.align-self-baseline (433:1)'] },
+  '4fffdd27ec60120ec9ed16fd7feef801': { selectors: ['.align-self-stretch (436:1)'] },
+  '39e658501f5502b35919f02fa9591360': { selectors: ['.float-left (719:1)'] },
+  b51436c537ffc4269b1533e44d7c3467: { selectors: ['.float-right (722:1)'] },
+  c4597a87d2c793a6d696cfe06f6c95ce: { selectors: ['.float-none (725:1)'] },
+  aaf8dc6e0768e59f3098a98a5c144d66: { selectors: ['.position-static (760:1)'] },
+  '79592de2383045d15ab57d35aa1dab95': { selectors: ['.position-relative (763:1)'] },
+  a7c272f53d0368730bde4c2740ffb5c3: { selectors: ['.position-absolute (766:1)'] },
+  dad0bb92d53f17cf8affc10f77824b7f: { selectors: ['.position-fixed (769:1)'] },
+  '6da0f6a7354a75fe6c95b08a4cabc06f': { selectors: ['.position-sticky (772:1)'] },
+  '66602e21eea7b673883155c8f42b9590': { selectors: ['.fixed-top (775:1)'] },
+  '33ea70eb6db7f6ab3469680f182abb19': { selectors: ['.fixed-bottom (782:1)'] },
+  '405e9dd7c9919943af14658313fd31e4': { selectors: ['.sr-only (795:1)'] },
+  '9220ad156a70c2586b15fe2b9b6108b2': { selectors: ['.shadow-sm (813:1)'] },
+  b1b8c0ff70767ca2160811a026766982: { selectors: ['.shadow (816:1)'] },
+  da0792abe99964acb6692a03c61d6dd8: { selectors: ['.shadow-lg (819:1)'] },
+  bb2173057af1cf20e687469b2d9cbb3c: { selectors: ['.shadow-none (822:1)'] },
+  '6d8abb6519a186483b25429ab8b9765e': { selectors: ['.w-25 (825:1)'] },
+  a087c1ffdf8ead76cdd37445b414d63e: { selectors: ['.w-50 (828:1)'] },
+  '28180742013a90275be5633e6ec0dd51': { selectors: ['.w-75 (831:1)'] },
+  '195a03bc95a0af0ba6c8824db97a0b2f': { selectors: ['.w-100 (834:1)'] },
+  e67c74b650d6236b03be9dfc10c78e32: { selectors: ['.w-auto (837:1)'] },
+  c1b6262b3ee069addc1fbe46f64aac4e: { selectors: ['.h-25 (840:1)'] },
+  a520396ae349bef86145e0761aa0699e: { selectors: ['.h-50 (843:1)'] },
+  '7c53b57d54beb087fd7ab8b669c5fe60': { selectors: ['.h-75 (846:1)'] },
+  ad74f1972cb745b7a78b03e16a387f21: { selectors: ['.h-100 (849:1)'] },
+  '2cd49c3d63d260ba4f0b23c559ad05e0': { selectors: ['.h-auto (852:1)'] },
+  '0b43071a67efc45ee1735fdc2491313c': { selectors: ['.mw-100 (855:1)'] },
+  eac31a6f08e5c935e24b97df0fdad579: { selectors: ['.mh-100 (858:1)'] },
+  cfdb4f497b16074959bfd3deb7ea9c42: { selectors: ['.m-0 (861:1)'] },
+  '4d666c270ba50524312d97c4b937d153': { selectors: ['.mt-0, .my-0 (864:1)'] },
+  eccf47ccd76ceffb4b139cb6c080b5ac: { selectors: ['.mr-0, .mx-0 (868:1)'] },
+  '9bc513e73c0bdc6efdf170cb31de16d1': { selectors: ['.mb-0, .my-0 (872:1)'] },
+  e99cfc55b03f0e67f11628b19889ad7b: { selectors: ['.ml-0, .mx-0 (876:1)'] },
+  e1c39484d90d2acaa00973531f47f738: { selectors: ['.m-1 (880:1)'] },
+  '63791bc02eccfdfa2c01621a801e565f': { selectors: ['.mt-1, .my-1 (883:1)'] },
+  bcb27ab9d7dcfdd0d7cacad02709966c: { selectors: ['.mr-1, .mx-1 (887:1)'] },
+  cb5d1c4328e25b5bc93be9a252973690: { selectors: ['.mb-1, .my-1 (891:1)'] },
+  b80b1010c7dcfbb30bed9015c4f2e969: { selectors: ['.ml-1, .mx-1 (895:1)'] },
+  ecab1c9cdf8a562e3c0f70307aeafa89: { selectors: ['.m-2 (899:1)'] },
+  '6505fe17fbbd88b1884113a754aa82ab': { selectors: ['.mt-2, .my-2 (902:1)'] },
+  '6f0c7d09d1e729f332c4671ccc2b48c0': { selectors: ['.mr-2, .mx-2 (906:1)'] },
+  '70ef7b668b382b3c747b2d73e08cdbed': { selectors: ['.mb-2, .my-2 (910:1)'] },
+  '2d7f277cc78ed324a8fc1f71ab281e1f': { selectors: ['.ml-2, .mx-2 (914:1)'] },
+  '8ebcfe52fd4024861082ffb1735747a7': { selectors: ['.m-3 (918:1)'] },
+  '9965fb516bdb72b87023a533123a8035': { selectors: ['.mt-3, .my-3 (921:1)'] },
+  b1fcbbb1dc6226f6da6000830088e051: { selectors: ['.mr-3, .mx-3 (925:1)'] },
+  '02204826cfbe3da98535c0d802870940': { selectors: ['.mb-3, .my-3 (929:1)'] },
+  '0259859060250ae6b730218733e7a437': { selectors: ['.ml-3, .mx-3 (933:1)'] },
+  '8cf300dab2a4994a105eeddda826f2e6': { selectors: ['.m-4 (937:1)'] },
+  '1ba62fdddd3349f52a452050688905c7': { selectors: ['.mt-4, .my-4 (940:1)'] },
+  '66a104129fa13db5a0829567fba6ee41': { selectors: ['.mr-4, .mx-4 (944:1)'] },
+  eefcc4c10b79e70e8e8a5a66fb2b7aa1: { selectors: ['.mb-4, .my-4 (948:1)'] },
+  eb1503656dc920d15a31116956fdffa4: { selectors: ['.ml-4, .mx-4 (952:1)'] },
+  '79cbb6e5c9b73fd0be29d4fc5733a099': { selectors: ['.m-5 (956:1)'] },
+  '67d8671699df706a428e7da42a7141cb': { selectors: ['.mt-5, .my-5 (959:1)'] },
+  e9cb4a0a8a60ff018c87a0b7efa9de29: { selectors: ['.mr-5, .mx-5 (963:1)'] },
+  '93f579214354dbd8cb60209c068f0086': { selectors: ['.mb-5, .my-5 (967:1)'] },
+  '2a789d4af97d2b87fd0bf2b4626120cd': { selectors: ['.ml-5, .mx-5 (971:1)'] },
+  '64a89d28e8287c1a0ac153001082644c': { selectors: ['.p-0 (975:1)'] },
+  b03aa6db5ddf110bbdbefbbec43fda30: { selectors: ['.pt-0, .py-0 (978:1)'] },
+  e38192ca32a98888d4c4876880f4fece: { selectors: ['.pr-0, .px-0 (982:1)'] },
+  '70fe8ef50e999ddd29506f672c107069': { selectors: ['.pb-0, .py-0 (986:1)'] },
+  '9355e8cd9109049726475ba356661bcf': { selectors: ['.pl-0, .px-0 (990:1)'] },
+  '0d4c53468c2658c5324b9ec7a8ca6de2': { selectors: ['.p-1 (994:1)'] },
+  d74e430b2a56b3a4e20065c972b7fa3f: { selectors: ['.pt-1, .py-1 (997:1)'] },
+  '21e4644967aedd19888b6f4a700b629b': { selectors: ['.pr-1, .px-1 (1001:1)'] },
+  e315a7b9b7a1d0df3ea7d95af5203a0b: { selectors: ['.pb-1, .py-1 (1005:1)'] },
+  '14630ca122e1d9830a9ef5591c4097d0': { selectors: ['.pl-1, .px-1 (1009:1)'] },
+  '5b1c65e5139e86e5f4755824f8b77d13': { selectors: ['.p-2 (1013:1)'] },
+  '244af70950a1e200d3849f75ce51d707': { selectors: ['.pt-2, .py-2 (1016:1)'] },
+  b583832738cad724c7c23e5c14ac9bfb: { selectors: ['.pr-2, .px-2 (1020:1)'] },
+  e1e633c4f1375e8276154192d8899e39: { selectors: ['.pb-2, .py-2 (1024:1)'] },
+  '676b01e25f0dbb3f7d2f2529231cda08': { selectors: ['.pl-2, .px-2 (1028:1)'] },
+  '9b5165e3333b22801f2287f7983d7516': { selectors: ['.p-3 (1032:1)'] },
+  '5bcaa9df87a507f6cd14659ea176bdc5': { selectors: ['.pt-3, .py-3 (1035:1)'] },
+  f706637180776c5589385599705a2409: { selectors: ['.pr-3, .px-3 (1039:1)'] },
+  '41157cfbcf47990b383b5b0379386ab2': { selectors: ['.pb-3, .py-3 (1043:1)'] },
+  cac1e7a204bb6a1f42707b684ad46238: { selectors: ['.pl-3, .px-3 (1047:1)'] },
+  '43e0671cd41a4b7590284888b607a134': { selectors: ['.p-4 (1051:1)'] },
+  '116b0f95ebde1ff8907e488413a88854': { selectors: ['.pt-4, .py-4 (1054:1)'] },
+  ecb06765fe691d892df000eebbb23dcc: { selectors: ['.pr-4, .px-4 (1058:1)'] },
+  '1331503a48d36025c861e660bc615048': { selectors: ['.pb-4, .py-4 (1062:1)'] },
+  f8665f7e547e499abd7ac63813b274f5: { selectors: ['.pl-4, .px-4 (1066:1)'] },
+  '4160a315459f1b5a98255863f42136fe': { selectors: ['.p-5 (1070:1)'] },
+  f55a6b2de6a434ec7b4375f06f4fad75: { selectors: ['.pt-5, .py-5 (1073:1)'] },
+  '19391dc45c8d7730a86d521c28f52c3f': { selectors: ['.pr-5, .px-5 (1077:1)'] },
+  '15898bcb7ff74a60006f9931422b4ad3': { selectors: ['.pb-5, .py-5 (1081:1)'] },
+  '6290bdc6355aed1e9b27379003aa4828': { selectors: ['.pl-5, .px-5 (1085:1)'] },
+  e57ec4fe9e8ed36e38f1c50041fc9f47: { selectors: ['.m-auto (1089:1)'] },
+  f10380665932186d1effe0674a74ba12: { selectors: ['.mt-auto, .my-auto (1092:1)'] },
+  '2ce71a27023eb50a47c24a99399faa28': { selectors: ['.mr-auto, .mx-auto (1096:1)'] },
+  '196c77d357d314678cd3a99cfacbea96': { selectors: ['.mb-auto, .my-auto (1100:1)'] },
+  ca007ce268b463a6bf42145cf5ce3685: { selectors: ['.ml-auto, .mx-auto (1104:1)'] },
+  cb431b84034f2e710509c7656b3c6f16: { selectors: ['.text-monospace (1844:1)'] },
+  a8fc5ca823f51d72673577064387a029: { selectors: ['.text-justify (1847:1)'] },
+  '0bb94dfab7ca2c9892ebbd993b2baf0f': { selectors: ['.text-nowrap (1850:1)'] },
+  aea4958ce85ddc0cbffca1015c3a7eba: { selectors: ['.text-truncate (1853:1)'] },
+  '52b9443947b6b94a5c7e1b837da115e2': { selectors: ['.text-left (1858:1)'] },
+  baaf5136fc6e1c54ba29b6040f166d5f: { selectors: ['.text-right (1861:1)'] },
+  '282aa4319bee75af06cc2632b7124e26': { selectors: ['.text-center (1864:1)'] },
+  '1cb1c8ad9b560eca25ebcefe95c1b7fa': { selectors: ['.text-lowercase (1899:1)'] },
+  '45234533eac658ba2857e9c4d3bc78a5': { selectors: ['.text-uppercase (1902:1)'] },
+  f9e3f64237f2e81b6aed84223a0ceb1d: { selectors: ['.text-capitalize (1905:1)'] },
+  '09caca3d36aa9f3ef815e0da7e1a16b4': { selectors: ['.font-weight-light (1908:1)'] },
+  '25189f4fad18eaeef19e349c6680834c': { selectors: ['.font-weight-normal (1911:1)'] },
+  b2a9507678ec557603eb8ec077f0eb1f: { selectors: ['.font-weight-bold (1914:1)'] },
+  '7d2da06b621a98a8599e5ec82e39eac8': { selectors: ['.font-italic (1917:1)'] },
+  '0020d10e4fce033b418aace7c3143b82': { selectors: ['.text-white (1920:1)'] },
+  '34ad81e372a038e6f78ae4f22bd4813d': { selectors: ['.text-primary (1923:1)'] },
+  '9fde9a179d24755438ace2a874dda817': {
+    selectors: ['.text-secondary (1929:1)', '.text-muted (1974:1)'],
+  },
+  '9ffcb1532b3fb397c0e818850683da29': { selectors: ['.text-success (1935:1)'] },
+  f28fd089809bcd15d5684b158a0af98d: { selectors: ['.text-info (1941:1)'] },
+  '6cac1cb5ee5149e91e45d15d0bdae310': { selectors: ['.text-warning (1947:1)'] },
+  '2faab1e0abf22b20fdf05b9b01fff29b': { selectors: ['.text-danger (1953:1)'] },
+  '46b52fea531aaaf29b63c40be2356849': { selectors: ['.text-light (1959:1)'] },
+  '78f31d1ab6529decf28e0366a8ee81aa': { selectors: ['.text-dark (1965:1)'] },
+  '45330b41b77e8880ad7680c51e0f61c4': { selectors: ['.text-body (1971:1)'] },
+  '60d93588f62b5e85eb4f11dfd3461897': { selectors: ['.text-black-50 (1977:1)'] },
+  '7dea35658553032ff7b7cc0287613b7c': { selectors: ['.text-white-50 (1980:1)'] },
+  '61bf92980cac3d51d0cf1ba24c948fa1': { selectors: ['.text-hide (1983:1)'] },
+  '7dcad258820769677bc60871fafe9b93': { selectors: ['.visible (1990:1)'] },
+  '0f8833af4e2f4a6fc785bd7edc1e75b3': { selectors: ['.invisible (1993:1)'] },
+};