Replacing csslint by stylelint

.pre-commit-config.yaml

@@ -12,8 +12,18 @@
     -   id: remove-tabs
 -   repo: local
     hooks:
+    -   id: gen_statics_bundles
+        name: gen_statics_bundles
+        language: system
+        entry: ./gen_statics_bundles.py
+        files: ^static/(main.css$|js/)
     -   id: eslint
         name: eslint
         language: system
         entry: sh -c 'eslint templates/js/*.js'
         files: ''
+    -   id: stylelint
+        name: stylelint
+        language: system
+        entry: sh -c 'stylelint static/main.css'
+        files: ''

.stylelintrc

@@ -0,0 +1,13 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "at-rule-empty-line-before": null,
+    "block-closing-brace-newline-before": null,
+    "color-hex-case": null,
+    "max-empty-lines": 2,
+    "no-descending-specificity": null,
+    "indentation": null,
+    "rule-empty-line-before": null,
+    "selector-list-comma-newline-after": null
+  }
+}

gen_statics_bundles.py

@@ -19,38 +19,34 @@ def sed(filepath, pattern, value):
 short_hash = sha1(cat('static/main.css')).hexdigest()[:7]
 sed('templates/base.html', '-SHORTSHA1-[a-z0-9]+.css', '-SHORTSHA1-{}.css'.format(short_hash))
 for DISABLE_SEARCH in range(2):
-    bundle = b''
-    bundle += cat('static/csslibs/uikit-2.27.4.min.css')
-    if not DISABLE_SEARCH:
-        bundle += cat('static/csslibs/uikit-2.27.4-search.min.css')
-        bundle += cat('static/csslibs/tipuesearch.css')
-    bundle += cat('static/csslibs/solarized-highlight.css')
-    bundle += cat('static/main.css')
     bundle_filename = 'bundle-DISABLE_SEARCH-{}-SHORTSHA1-{}.css'.format(DISABLE_SEARCH, short_hash)
-    with open('static/' + bundle_filename, 'wb') as bundle_file:
+    with open('static/' + bundle_filename, 'wb') as bundle:
-        bundle_file.write(bundle)
+        bundle.write(cat('static/csslibs/uikit-2.27.4.min.css'))
+        if not DISABLE_SEARCH:
+            bundle.write(cat('static/csslibs/uikit-2.27.4-search.min.css'))
+            bundle.write(cat('static/csslibs/tipuesearch.css'))
+        bundle.write(cat('static/csslibs/solarized-highlight.css'))
+        bundle.write(cat('static/main.css'))
 
 # Generating JS bundle
 short_hash = sha1(cat('static/js/enable-search.js') + cat('static/js/social.js') + cat('static/js/filter-tags.js')).hexdigest()[:7]
 sed('templates/base.html', '-SHORTSHA1-[a-z0-9]+.js', '-SHORTSHA1-{}.js'.format(short_hash))
 for DISABLE_SEARCH, SHARE, MG_FILTER_TAGS in itertools.product(range(2), repeat=3):
-    bundle = b''
-    bundle += cat('static/jslibs/html5shiv-3.7.2.min.js')
-    bundle += cat('static/jslibs/jquery-1.10.2.min.js')
-    bundle += cat('static/jslibs/uikit-2.27.4.min.js')
-    bundle += cat('static/jslibs/lazysizes-4.0.0-rc3.min.js')
-    bundle += cat('static/jslibs/lazysizes-4.0.0-rc3.noscript.min.js')
-    if not DISABLE_SEARCH:
-        bundle += cat('static/jslibs/uikit-2.27.4-search.min.js')
-        bundle += cat('static/jslibs/tipuesearch_set.js')
-        bundle += cat('static/jslibs/tipuesearch.js')
-        bundle += cat('static/js/enable-search.js')
-    if SHARE:
-        bundle += cat('static/jslibs/jquery.sticky-kit.js')
-        bundle += cat('static/js/social.js')
-    if MG_FILTER_TAGS:
-        bundle += cat('static/js/filter-tags.js')
     bundle_filename = 'bundle-DISABLE_SEARCH-{}-SHARE-{}-MG_FILTER_TAGS-{}-SHORTSHA1-{}.js'.format(
             DISABLE_SEARCH, SHARE, MG_FILTER_TAGS, short_hash)
-    with open('static/' + bundle_filename, 'wb') as bundle_file:
+    with open('static/' + bundle_filename, 'wb') as bundle:
-        bundle_file.write(bundle)
+        bundle.write(cat('static/jslibs/html5shiv-3.7.2.min.js'))
+        bundle.write(cat('static/jslibs/jquery-1.10.2.min.js'))
+        bundle.write(cat('static/jslibs/uikit-2.27.4.min.js'))
+        bundle.write(cat('static/jslibs/lazysizes-4.0.0-rc3.min.js'))
+        bundle.write(cat('static/jslibs/lazysizes-4.0.0-rc3.noscript.min.js'))
+        if not DISABLE_SEARCH:
+            bundle.write(cat('static/jslibs/uikit-2.27.4-search.min.js'))
+            bundle.write(cat('static/jslibs/tipuesearch_set.js'))
+            bundle.write(cat('static/jslibs/tipuesearch.js'))
+            bundle.write(cat('static/js/enable-search.js'))
+        if SHARE:
+            bundle.write(cat('static/jslibs/jquery.sticky-kit.js'))
+            bundle.write(cat('static/js/social.js'))
+        if MG_FILTER_TAGS:
+            bundle.write(cat('static/js/filter-tags.js'))

run.sh

@@ -10,7 +10,8 @@ install () {
 }
 
 install_dev () {
-    npm install -g eslint eslint-config-strict eslint-plugin-filenames
+    npm install -g eslint eslint-config-strict eslint-plugin-filenames stylelint
+    npm install stylelint-config-standard
     pip install pre-commit
     pre-commit install
 }
@@ -25,16 +26,15 @@ test_ludochaordic () {
     git clone https://github.com/Lucas-C/ludochaordic.git
     cd ludochaordic
 
-    npm install -g csslint htmlhint
+    npm install -g htmlhint
     pip install html5lib html5validator
 
     ../pelican-mg/gen_imgs_from_mds.py content/*.md
     make DEBUG=1 OUTPUTDIR=output html
 
-    csslint --ignore=bulletproof-font-face,fallback-colors,order-alphabetical output/theme/css/main.css
-
     html5validator --root output/ \
         --ignore='Element "style" not allowed as child of element "div" in this context.'
+
     cp ../pelican-mg/.htmlhintrc output/
     htmlhint output/
 }

static/main.css

@@ -1,9 +1,11 @@
+/* csslint warned: Too many font-size declarations (10), abstraction needed. */
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 800;
   src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'), url(fonts/PRmiXeptR36kaC0GEAetxlDMrAYtoOisqqMDW9M_Mqc.ttf) format('truetype');
 }
+
 @font-face {
   font-family: 'Oswald';
   font-style: normal;
@@ -12,7 +14,7 @@
 }
 
 html, h1, h2, h3 {
-  font-family: "Oswald", "Helvetica Neue",Helvetica,Arial,sans-serif; }
+  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif; }
 html {
   font-weight: 400;
   font-size: 14px;
@@ -37,22 +39,22 @@ a {
   color: #444; }
 
 .uk-article-content {
-  font: 400 14px / 20px "Helvetica Neue",Helvetica,Arial,sans-serif; }
+  font: 400 14px / 20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
 
 .uk-icon-twitter {
-  color: #00B0ED; }
+  color: #00b0ed; }
 
 .uk-icon-facebook, .uk-icon-facebook-square {
-  color: #3B5999; }
+  color: #3b5999; }
 
 .uk-icon-google-plus, .uk-icon-google-plus-square {
-  color: #D34836; }
+  color: #d34836; }
 
 .uk-nav-side > li.uk-active > a {
-  background: #28D1B2; }
+  background: #28d1b2; }
 
 .uk-pagination > .uk-active > span {
-  background: #28D1B2; }
+  background: #28d1b2; }
 
 .uk-icon-medium {
   margin-right: 0.3em; }
@@ -94,7 +96,7 @@ a {
 
 .mg-brand, .mg-brand > h1 {
   display: block;
-  margin: .5rem 0;
+  margin: 0.5rem 0;
   font-style: italic;
   font-size: 2.5rem;
   line-height: 2.5rem;
@@ -109,7 +111,7 @@ a {
   }
 
 .mg-tagline {
-  padding: .5rem 2rem;
+  padding: 0.5rem 2rem;
   font-size: 1.4rem;
   color: white; }
 
@@ -129,8 +131,8 @@ a {
   overflow: visible;
   color: #444;
   font: inherit;
-  padding: .5rem 1.5rem;
+  padding: 0.5rem 1.5rem;
-  margin: .5rem 1rem;
+  margin: 0.5rem 1rem;
   text-transform: uppercase;
   cursor: pointer; }
   .mg-tag-filter:hover {
@@ -138,11 +140,11 @@ a {
   .mg-tag-filter-include {
     background-color: #33b5e5; }
   .mg-tag-filter-exclude {
-    background-color: #FF9148;  }
+    background-color: #ff9148;  }
 
 .mg-nav-small {
   display: flex;
-  width: 100% }
+  width: 100%; }
 .mg-nav-menu-toggle-small {
   flex: 1; }
 
@@ -169,7 +171,7 @@ a {
   min-width: 0; /* required for flexbox shrink to work properly - Chrome 60 */
   max-height: 50%;
   max-width: 50%;
-  padding: 1rem; /* csslint allow: box-model */
+  padding: 1rem; /* csslint warned here on box model */
   margin: 0 auto;
   width: 100%;
   height: 100%;
@@ -180,19 +182,19 @@ a {
 .mg-feed {
   color: #bf4d00; }
   .mg-feed:hover {
-    color: #D14905; }
+    color: #d14905; }
 
 .mg-tags {
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   text-align: right; }
 .mg-tag {
-  margin: 0 .5rem;
+  margin: 0 0.5rem;
-  color: #D14905; }
+  color: #d14905; }
   .mg-tag:hover {
-    color: #D14905; }
+    color: #d14905; }
   .mg-tag > .uk-icon-tag {
     display: inline; /* so that the icon stick with the tag label */
-    margin-right: .2rem; }
+    margin-right: 0.2rem; }
 
 .mg-list-title {
   font-size: 2em;
@@ -208,7 +210,7 @@ a {
   margin-top: 1em; }
 
 .mg-icon-link {
-  padding: .3rem; }
+  padding: 0.3rem; }
   .mg-icon-link:hover {
     text-decoration: none; }
 
@@ -217,17 +219,17 @@ a {
 
 .mg-icons-small .uk-icon-rss {
   color: white;
-  background-color: #D14905; }
+  background-color: #d14905; }
 .mg-icons-small .uk-icon-twitter {
-  background-color: #00B0ED; }
+  background-color: #00b0ed; }
 .mg-icons-small .uk-icon-facebook {
-  background-color: #3B5999; }
+  background-color: #3b5999; }
 .mg-icons-small .uk-icon-google-plus {
-  background-color: #D34836; }
+  background-color: #d34836; }
 .mg-icons-small .uk-icon-envelope {
   background-color: #059; }
 
-.uk-icon-shaarli:before {
+.uk-icon-shaarli::before {
   content: ' ';
   display: inline-block;
   height: 28px;
@@ -235,7 +237,7 @@ a {
   background-image: url(shaarli-icon.png);
   background-size: contain;
   vertical-align: middle; }
-.uk-icon-stackoverflow:before {
+.uk-icon-stackoverflow::before {
   content: ' ';
   display: inline-block;
   height: 28px;
@@ -243,7 +245,7 @@ a {
   background-image: url(stackoverflow-icon.png);
   background-size: contain;
   vertical-align: middle; }
-.uk-icon-travis-ci:before {
+.uk-icon-travis-ci::before {
   content: ' ';
   display: inline-block;
   height: 28px;
@@ -253,7 +255,7 @@ a {
   vertical-align: middle; }
 
 .mg-support-logo {
-  margin: .5rem;}
+  margin: 0.5rem;}
 
 .mg-badges li {
   float: left;
@@ -269,7 +271,7 @@ a {
 .mg-search {
   display: flex; }
 .mg-search-button {
-  font-family: FontAwesome;
+  font-family: FontAwesome, serif;
   background-color: transparent;
   border: none;
   cursor: pointer; }
@@ -285,7 +287,7 @@ a {
 
 .mg-cloud-tag {
   display: inline-block;
-  padding: .2rem;
+  padding: 0.2rem;
   line-height: 110%; }
 
 .mg-cloud-tag-size-5 {
@@ -300,7 +302,7 @@ a {
   font-size: 300%; }
 
 .mg-cloud-tag-badge {
-  color: #D14905; }
+  color: #d14905; }
 
 
 .mg-fadeable {