From b2ff34154d6d8320178a2255da00a4dfa3c9eaba Mon Sep 17 00:00:00 2001 From: Lucas Cimon Date: Tue, 5 Dec 2017 09:04:20 +0100 Subject: [PATCH] Replacing csslint by stylelint --- .pre-commit-config.yaml | 10 +++++++ .stylelintrc | 13 ++++++++ gen_statics_bundles.py | 50 ++++++++++++++----------------- run.sh | 8 ++--- static/main.css | 66 +++++++++++++++++++++-------------------- 5 files changed, 84 insertions(+), 63 deletions(-) create mode 100644 .stylelintrc diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 199bc0c..e510e07 100755 --- a/.pre-commit-config.yaml +++ b/.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: '' diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..33583ad --- /dev/null +++ b/.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 + } +} \ No newline at end of file diff --git a/gen_statics_bundles.py b/gen_statics_bundles.py index dda8652..894afcd 100755 --- a/gen_statics_bundles.py +++ b/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: - bundle_file.write(bundle) + with open('static/' + bundle_filename, 'wb') as 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: - bundle_file.write(bundle) + with open('static/' + bundle_filename, 'wb') as 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')) diff --git a/run.sh b/run.sh index 4b793fd..94d4d5e 100755 --- a/run.sh +++ b/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/ } diff --git a/static/main.css b/static/main.css index 12104bc..d487a80 100644 --- a/static/main.css +++ b/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; - margin: .5rem 1rem; + padding: 0.5rem 1.5rem; + 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; - color: #D14905; } + margin: 0 0.5rem; + 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 {