From 4b1ad4d95ed1c8015c1f0245e1043d1ad89ae72e Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 10 Nov 2018 15:04:16 +0100 Subject: [PATCH] add stylelint, lint & format tasks --- .stylelintrc | 11 +++ README.md | 1 + package.json | 18 +++- src/components/DocContent.module.scss | 3 +- src/components/DocFooter.module.scss | 2 +- src/components/Header.module.scss | 4 +- src/components/HeaderHome.module.scss | 6 +- .../Repositories/Repository.module.scss | 4 +- src/components/Sidebar.module.scss | 4 +- src/pages/index.module.scss | 9 +- src/styles/_animations.scss | 4 +- src/styles/_fonts.scss | 16 ++-- src/styles/_variables.scss | 89 ++++++++++--------- src/styles/global.scss | 14 +-- 14 files changed, 110 insertions(+), 75 deletions(-) create mode 100644 .stylelintrc diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 00000000..0432c0bc --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,11 @@ +{ + "extends": [ + "stylelint-config-bigchaindb", + "stylelint-config-css-modules", + "./node_modules/prettier-stylelint/config.js" + ], + "syntax": "scss", + "rules": { + "no-descending-specificity": null + } +} diff --git a/README.md b/README.md index 61c6057a..482151de 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ [![Build Status](https://travis-ci.com/oceanprotocol/docs.svg?token=3psqw6c8KMDqfdGQ2x6d&branch=master)](https://travis-ci.com/oceanprotocol/docs) [![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol) +[![css bigchaindb](https://img.shields.io/badge/css-bigchaindb-39BA91.svg)](https://github.com/bigchaindb/stylelint-config-bigchaindb) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-7b1173.svg?style=flat-square)](https://github.com/prettier/prettier) [![Greenkeeper badge](https://badges.greenkeeper.io/oceanprotocol/docs.svg?token=2757ede2de02f4679c4dfc6597a331a26f2f206fed53bfeb708c64cbe3d5f55f&ts=1541590505792)](https://greenkeeper.io/) diff --git a/package.json b/package.json index b3865c09..4ce9985d 100755 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "author": "Ocean Protocol ", "dependencies": { "@oceanprotocol/art": "^1.0.2", - "gatsby": "^2.0.44", + "gatsby": "^2.0.45", "gatsby-image": "^2.0.20", "gatsby-plugin-catch-links": "^2.0.8", "gatsby-plugin-google-analytics": "^2.0.7", @@ -39,15 +39,25 @@ "build": "gatsby build", "start": "gatsby develop", "ssr": "npm run build && serve -s public/", - "format": "prettier --write 'src/**/*.{js,jsx}'", - "test": "eslint --ext .js,.jsx ." + "format:js": "prettier --write 'src/**/*.{js,jsx}'", + "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'", + "format": "run-p format:js format:css", + "lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.{js,jsx}", + "lint:css": "stylelint ./src/**/*.{css,scss}", + "lint": "run-p lint:js lint:css", + "test": "npm run lint" }, "devDependencies": { "eslint": "^5.9.0", "eslint-config-oceanprotocol": "^1.3.0", "eslint-config-prettier": "^3.1.0", "eslint-plugin-prettier": "^3.0.0", - "prettier": "^1.14.2" + "npm-run-all": "^4.1.3", + "prettier": "^1.15.1", + "prettier-stylelint": "^0.4.2", + "stylelint-config-bigchaindb": "^1.2.1", + "stylelint-config-css-modules": "^1.3.0", + "stylelint-config-standard": "^18.2.0" }, "repository": { "type": "git", diff --git a/src/components/DocContent.module.scss b/src/components/DocContent.module.scss index 7c6fc485..a610bdfe 100644 --- a/src/components/DocContent.module.scss +++ b/src/components/DocContent.module.scss @@ -14,7 +14,8 @@ margin-top: $spacer / 2; } - h1, h2 { + h1, + h2 { margin-top: $spacer * $line-height; margin-bottom: $spacer / $line-height; padding-bottom: $spacer / $line-height; diff --git a/src/components/DocFooter.module.scss b/src/components/DocFooter.module.scss index 70aff7ab..d567bb69 100644 --- a/src/components/DocFooter.module.scss +++ b/src/components/DocFooter.module.scss @@ -28,5 +28,5 @@ } .active { - color: $brand-pink !important; + color: $brand-pink !important; // stylelint-disable-line declaration-no-important } diff --git a/src/components/Header.module.scss b/src/components/Header.module.scss index 4cc1328d..f87cffd7 100644 --- a/src/components/Header.module.scss +++ b/src/components/Header.module.scss @@ -1,7 +1,9 @@ @import 'variables'; .header { - background: $brand-black url('@oceanprotocol/art/jellyfish/jellyfish-back@2x.png') no-repeat center -4rem; + background: $brand-black + url('@oceanprotocol/art/jellyfish/jellyfish-back@2x.png') no-repeat + center -4rem; background-size: cover; width: 100%; padding: $spacer / 2 0; diff --git a/src/components/HeaderHome.module.scss b/src/components/HeaderHome.module.scss index 5cb76b68..0d50eecc 100644 --- a/src/components/HeaderHome.module.scss +++ b/src/components/HeaderHome.module.scss @@ -2,7 +2,9 @@ @import 'animations'; .header { - background: $brand-black url('@oceanprotocol/art/jellyfish/jellyfish-back@2x.png') no-repeat center 7rem; + background: $brand-black + url('@oceanprotocol/art/jellyfish/jellyfish-back@2x.png') no-repeat + center 7rem; background-size: cover; width: 100%; padding: $spacer * 2 0; @@ -46,5 +48,3 @@ font-size: $font-size-large; } } - - diff --git a/src/components/Repositories/Repository.module.scss b/src/components/Repositories/Repository.module.scss index 1e68df25..a736be71 100644 --- a/src/components/Repositories/Repository.module.scss +++ b/src/components/Repositories/Repository.module.scss @@ -27,7 +27,9 @@ padding: 0; margin-left: $spacer / $line-height; - &:before { display: none; } + &:before { + display: none; + } } a { diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss index 1c833378..b1e20696 100644 --- a/src/components/Sidebar.module.scss +++ b/src/components/Sidebar.module.scss @@ -57,7 +57,9 @@ li { display: block; - &:before { display: none; } + &:before { + display: none; + } } } diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index 3bee662d..0cf6b3a5 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -17,12 +17,13 @@ margin-top: $spacer; animation: fadeInUp .6s ease-out backwards; - &:before { display: none; } + &:before { + display: none; + } @media (min-width: $break-point--medium) { flex: 0 0 31%; } - animation-delay: .4s; &:nth-child(2) { @@ -39,7 +40,7 @@ flex-wrap: wrap; padding: $spacer $spacer * $line-height; border-radius: $border-radius; - box-shadow: rgba($brand-black, .1) 0px 9px 18px; + box-shadow: rgba($brand-black, .1) 0 9px 18px; color: $brand-grey; background: $brand-white; height: 100%; @@ -47,7 +48,7 @@ &:hover, &:focus { color: $brand-grey; - box-shadow: rgba($brand-black, .1) 0px 12px 20px; + box-shadow: rgba($brand-black, .1) 0 12px 20px; svg { transform: translate3d(.2rem, 0, 0); diff --git a/src/styles/_animations.scss b/src/styles/_animations.scss index 4ab4fa25..ca49ab0f 100644 --- a/src/styles/_animations.scss +++ b/src/styles/_animations.scss @@ -1,6 +1,6 @@ @keyframes fadeInUp { 0% { - opacity: 0.01; + opacity: .01; transform: translate3d(0, 5rem, 0); } @@ -12,7 +12,7 @@ @keyframes fadeIn { 0% { - opacity: 0.01; + opacity: .01; } 100% { diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index f52b96d4..d6c56693 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,26 +1,26 @@ @font-face { font-family: 'Sharp Sans Display'; src: url('../fonts/SharpSansDispNo1-Bold.woff2') format('woff2'), - url('../fonts/SharpSansDispNo1-Bold.woff') format('woff'); + url('../fonts/SharpSansDispNo1-Bold.woff') format('woff'); font-weight: 600; font-style: normal; font-stretch: normal; - } +} - @font-face { +@font-face { font-family: 'Sharp Sans Medium'; src: url('../fonts/SharpSans-Medium.woff2') format('woff2'), - url('../fonts/SharpSans-Medium.woff') format('woff'); + url('../fonts/SharpSans-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-stretch: normal; - } +} - @font-face { +@font-face { font-family: 'Sharp Sans Bold'; src: url('../fonts/SharpSans-Bold.woff2') format('woff2'), - url('../fonts/SharpSans-Bold.woff') format('woff'); + url('../fonts/SharpSans-Bold.woff') format('woff'); font-weight: 600; font-style: normal; font-stretch: normal; - } +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 500ca1b6..94f77211 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,59 +1,62 @@ // Colors -$brand-white: #fff; -$brand-black: #141414; -$brand-pink: #ff4092; -$brand-purple: #7b1173; -$brand-violet: #e000cf; -$brand-blue: #11597b; +$brand-white: #fff; +$brand-black: #141414; +$brand-pink: #ff4092; +$brand-purple: #7b1173; +$brand-violet: #e000cf; +$brand-blue: #11597b; -$brand-grey: #41474e; -$brand-grey-light: #8b98a9; -$brand-grey-dark: #303030; -$brand-grey-lighter: #e2e2e2; +$brand-grey: #41474e; +$brand-grey-light: #8b98a9; +$brand-grey-dark: #303030; +$brand-grey-lighter: #e2e2e2; -$green: #5fb359; -$red: #d80606; -$orange: #b35f36; -$yellow: #eac146; +$green: #5fb359; +$red: #d80606; +$orange: #b35f36; +$yellow: #eac146; $brand-gradient: linear-gradient(to right bottom, $brand-purple, $brand-pink); // Fonts -$font-family-base: 'Sharp Sans Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; -$font-family-title: 'Sharp Sans Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; -$font-family-button: 'Sharp Sans Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; +$font-family-base: 'Sharp Sans Medium', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Helvetica, Arial, sans-serif; +$font-family-title: 'Sharp Sans Display', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Helvetica, Arial, sans-serif; +$font-family-button: 'Sharp Sans Bold', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Helvetica, Arial, sans-serif; $font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas, -'Courier New', monospace; + 'Courier New', monospace; -$font-size-root: 15px; -$font-size-base: 1rem; -$font-size-large: 1.2rem; -$font-size-small: .85rem; -$font-size-mini: .65rem; -$font-size-text: $font-size-base; -$font-size-label: $font-size-base; -$font-size-title: 1.4rem; -$font-size-h1: 3rem; -$font-size-h2: 1.7rem; -$font-size-h3: 1.4rem; -$font-size-h4: $font-size-large; -$font-size-h5: 1.1rem; +$font-size-root: 15px; +$font-size-base: 1rem; +$font-size-large: 1.2rem; +$font-size-small: .85rem; +$font-size-mini: .65rem; +$font-size-text: $font-size-base; +$font-size-label: $font-size-base; +$font-size-title: 1.4rem; +$font-size-h1: 3rem; +$font-size-h2: 1.7rem; +$font-size-h3: 1.4rem; +$font-size-h4: $font-size-large; +$font-size-h5: 1.1rem; -$font-weight-base: 500; -$font-weight-bold: 600; +$font-weight-base: 500; +$font-weight-bold: 600; -$line-height: 1.6; +$line-height: 1.6; // Sizes -$spacer: 2rem; -$page-frame: .75rem; +$spacer: 2rem; +$page-frame: .75rem; -$break-point--small: 640px; -$break-point--medium: 860px; -$break-point--large: 1140px; -$break-point--huge: 1400px; -$brand-border-width: 1px; +$break-point--small: 640px; +$break-point--medium: 860px; +$break-point--large: 1140px; +$break-point--huge: 1400px; +$brand-border-width: 1px; -$border-radius: .2rem; +$border-radius: .2rem; -$narrowWidth: 35rem; +$narrowWidth: 35rem; diff --git a/src/styles/global.scss b/src/styles/global.scss index 3541ee2d..a117ec7d 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,3 +1,5 @@ +// stylelint-disable selector-no-qualifying-type, declaration-no-important, selector-no-vendor-prefix + @import 'variables'; @import 'fonts'; @@ -59,7 +61,7 @@ p { ul { li { - &::before { + &:before { content: ' \25AA'; // Black Small Square: ▪ ▪ top: -2px; } @@ -70,7 +72,7 @@ ol { counter-reset: ol-counter; li { - &::before { + &:before { content: counter(ol-counter) '.'; counter-increment: ol-counter; font-family: $font-family-button; @@ -78,7 +80,7 @@ ol { } } - ul li::before { + ul li:before { content: ' \25AA'; } } @@ -94,7 +96,7 @@ ol { position: relative; display: block; - &::before { + &:before { position: absolute; left: -($spacer / $line-height); color: $brand-grey-light; @@ -220,11 +222,11 @@ table { border-bottom: 1px solid $brand-grey-lighter; text-align: left; - &[align="center"] { + &[align='center'] { text-align: center; } - &[align="right"] { + &[align='right'] { text-align: right; } }