From 3c259a4b47d54df5ef123723d251c93b4a2023dc Mon Sep 17 00:00:00 2001 From: The Jared Wilcurt Date: Fri, 20 Jul 2018 08:23:00 -0400 Subject: [PATCH] Write tests --- .gitignore | 1 - .npmignore | 8 ++ .travis.yml | 9 ++ README.md | 4 +- package.json | 2 +- test-files/app.scss | 69 +++++++++++ test-files/components/Container.scss | 34 ++++++ test-files/components/Events.scss | 3 + test-files/components/Footer.scss | 2 + test-files/components/Header.scss | 2 + test-files/components/ListItem.scss | 36 ++++++ test-files/components/NProgress.scss | 65 ++++++++++ test-files/components/Navigation.scss | 34 ++++++ test-files/components/People.scss | 15 +++ test-files/components/Person.scss | 114 ++++++++++++++++++ test-files/components/ProfilePhoto.scss | 25 ++++ test-files/components/SubNavigation.scss | 31 +++++ test-files/components/_index.scss | 12 ++ test-files/components/core/Core.scss | 6 + test-files/components/core/CoreBody.scss | 6 + test-files/components/core/CoreHeader.scss | 2 + .../components/core/CoreNavigation.scss | 39 ++++++ .../components/core/CoreSubNavigation.scss | 2 + test-files/components/core/_index.scss | 5 + test-files/elements/_index.scss | 1 + test-files/elements/base.scss | 61 ++++++++++ test-files/generic/_index.scss | 39 ++++++ test-files/generic/highlight.scss | 3 + test-files/generic/reset.scss | 67 ++++++++++ test-files/objects/_index.scss | 1 + test-files/settings/_index.scss | 10 ++ test-files/settings/animations.scss | 82 +++++++++++++ test-files/settings/colors.scss | 15 +++ test-files/settings/fonts.scss | 18 +++ test-files/settings/other.scss | 47 ++++++++ test-files/settings/variables.scss | 8 ++ test-files/tools/_index.scss | 2 + test-files/tools/mixins.scss | 103 ++++++++++++++++ test-files/tools/repeat.scss | 19 +++ test-files/utilities/_index.scss | 22 ++++ test.js | 96 +++++++++++++++ windows.yml | 3 + 42 files changed, 1120 insertions(+), 3 deletions(-) create mode 100644 .npmignore create mode 100644 .travis.yml create mode 100644 test-files/app.scss create mode 100644 test-files/components/Container.scss create mode 100644 test-files/components/Events.scss create mode 100644 test-files/components/Footer.scss create mode 100644 test-files/components/Header.scss create mode 100644 test-files/components/ListItem.scss create mode 100644 test-files/components/NProgress.scss create mode 100644 test-files/components/Navigation.scss create mode 100644 test-files/components/People.scss create mode 100644 test-files/components/Person.scss create mode 100644 test-files/components/ProfilePhoto.scss create mode 100644 test-files/components/SubNavigation.scss create mode 100644 test-files/components/_index.scss create mode 100644 test-files/components/core/Core.scss create mode 100644 test-files/components/core/CoreBody.scss create mode 100644 test-files/components/core/CoreHeader.scss create mode 100644 test-files/components/core/CoreNavigation.scss create mode 100644 test-files/components/core/CoreSubNavigation.scss create mode 100644 test-files/components/core/_index.scss create mode 100644 test-files/elements/_index.scss create mode 100644 test-files/elements/base.scss create mode 100644 test-files/generic/_index.scss create mode 100644 test-files/generic/highlight.scss create mode 100644 test-files/generic/reset.scss create mode 100644 test-files/objects/_index.scss create mode 100644 test-files/settings/_index.scss create mode 100644 test-files/settings/animations.scss create mode 100644 test-files/settings/colors.scss create mode 100644 test-files/settings/fonts.scss create mode 100644 test-files/settings/other.scss create mode 100644 test-files/settings/variables.scss create mode 100644 test-files/tools/_index.scss create mode 100644 test-files/tools/mixins.scss create mode 100644 test-files/tools/repeat.scss create mode 100644 test-files/utilities/_index.scss create mode 100644 test.js diff --git a/.gitignore b/.gitignore index 0ec6691..8817363 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,4 @@ .sass-cache/ *.css.map package-lock.json -sass/ node_modules/ diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..be46274 --- /dev/null +++ b/.npmignore @@ -0,0 +1,8 @@ +node_modules/ +test-files/ +.editorconfig +.gitignore +.travis.yml +package-lock.json +test.js +windows.yml diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..1b8695d --- /dev/null +++ b/.travis.yml @@ -0,0 +1,9 @@ +sudo: required +dist: trusty +language: node_js +node_js: + - "10" +install: + - npm install +script: + - npm test diff --git a/README.md b/README.md index 952066a..e6ec284 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,12 @@ # TJW-SassLint-Rules +[![Build Status](https://travis-ci.org/TheJaredWilcurt/tjw-sasslint-rules.svg?branch=master)](https://travis-ci.org/TheJaredWilcurt/tjw-sasslint-rules) + ### *The Jared Wilcurt's very aggressive Sass Linting rules for obsessives.* #### **From the makers of: [Scout-App](http://scout-app.io)** -These linting rules are designed to be very strict. Much thought has been placed in every rule. This includes a strict ordering of CSS properties. However not every single CSS property is included in this ruleset. If you find you are using a CSS property that is not in the list, please create an issue on GitHub to report it and it will be added into the ruleset. +These linting rules are designed to be **very strict**. Much thought has been placed in every rule. This includes a strict ordering of CSS properties. However not every single CSS property is included in this ruleset. If you find you are using a CSS property that is not in the list, please create an issue on GitHub to report it and it will be added into the ruleset. These linting rules work on both `.sass` and `.scss` files, though if you are using these rules, you should probably be using `.sass` files primarily as they are stricter by default and less error proned (see pros/cons below). diff --git a/package.json b/package.json index eeaf34a..3f213cf 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "The Jared Wilcurt's Sass linting rules", "main": "index.js", "scripts": { - "test": "npm run sasslint", + "test": "node test.js", "sasslint": "sass-lint -c tjwsasslint.yml '**/*.sass, **/*.scss' -v -f table", "sasslint2": "sass-lint -c node_modules/tjw-sasslint-rules/tjwsasslint.yml '**/*.sass, **/*.scss' -v -f table", "winlint": "sass-lint -c windows.yml -v -f table", diff --git a/test-files/app.scss b/test-files/app.scss new file mode 100644 index 0000000..c7bdcab --- /dev/null +++ b/test-files/app.scss @@ -0,0 +1,69 @@ +/* + * Methodologies for this Project + * + * + * ITCSS + * https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ + * + * Stands for Inverted Triangle CSS and it helps you to organize your + * project CSS files in such way that you can better deal with + * (not always easy-to-deal with) CSS specifics like global + * namespace, cascade and selectors specificity. + * + * + * BEM + * http://getbem.com/introduction/ + * + * Stands for Block Element Modifier and helps to avoid inheritance, + * provides some sort of scope by using unique CSS classes per + * element (like .Button__icon--active), and reduces style + * conflicts by keeping CSS specificity to a minimum level. + */ + + +/* + * Variables, Fonts, Colors, Definitions, Branding + */ +@import "settings/index"; + + +/* + * Global mixins and functions. + */ +@import "tools/index"; + + +/* + * Reset Stylesheets, first layer of CSS. + */ +@import "generic/index"; + + +/* + * Styling of Bare elements like H1, p, a, etc. + */ +@import "elements/index"; + + +/* + * Class-based selectors which define undecorated + * design patterns, for example media object + * known from OOCSS. + */ +@import "objects/index"; + + +/* + * Specific UI components. This is where majority + * of our work takes place and our UI components + * are often composed of Objects and Components. + */ +@import "components/index"; + + +/* + * Helper classes with ability to override + * anything which goes before in the + * triangle, eg. hide helper class. + */ +@import "utilities/index"; diff --git a/test-files/components/Container.scss b/test-files/components/Container.scss new file mode 100644 index 0000000..053dbff --- /dev/null +++ b/test-files/components/Container.scss @@ -0,0 +1,34 @@ +.Container { + position: relative ; + border: #ccc solid 1px; + box-shadow: 2px 4px 12px rgba(0,0,0,0); + margin: 20px ; + max-width: 100%; + padding: 40px 20px 20px ; + + //&:hover { + // box-shadow: 2px 4px 12px rgba(0,0,0,.25); + // border-color: desaturate($primary-color, 50%); + //} + + > code { + background: #f1f1f1; + border: #ccc solid 1px; + border-left: 0; + @include font-size(12px); + border-top: 0; + display: inline-flex; + flex-grow: 0; + flex-shrink: 1; + left: 0; + margin: 0 0 20px; + padding: 6px 8px 4px; + position: absolute; + top: 0; + } +} + +body.Container { + border: 0; + margin: 0 ; +} diff --git a/test-files/components/Events.scss b/test-files/components/Events.scss new file mode 100644 index 0000000..c405e29 --- /dev/null +++ b/test-files/components/Events.scss @@ -0,0 +1,3 @@ +.Events { + +} diff --git a/test-files/components/Footer.scss b/test-files/components/Footer.scss new file mode 100644 index 0000000..12b0826 --- /dev/null +++ b/test-files/components/Footer.scss @@ -0,0 +1,2 @@ +.Footer { +} diff --git a/test-files/components/Header.scss b/test-files/components/Header.scss new file mode 100644 index 0000000..d563b48 --- /dev/null +++ b/test-files/components/Header.scss @@ -0,0 +1,2 @@ +.Header { +} diff --git a/test-files/components/ListItem.scss b/test-files/components/ListItem.scss new file mode 100644 index 0000000..9f81fbb --- /dev/null +++ b/test-files/components/ListItem.scss @@ -0,0 +1,36 @@ +.ListItem { + align-items: center; + color: $font__base-color; + cursor: pointer; + display: flex; + flex-direction: row; + padding: 14px 10px 12px; + text-decoration: none; + + &__con { + display: flex; + flex-direction: column; + margin-left: 16px; + + &:first-child { + margin-left: 0; + } + } + + &__title { + @include font-size(16px); + font-weight: 600; + text-transform: capitalize; + } + + &__subtitle { + @include font-size(12px); + color: #999; + margin-top: 3px; + } + + &:hover { + background: #eee; + color: $primary-color; + } +} diff --git a/test-files/components/NProgress.scss b/test-files/components/NProgress.scss new file mode 100644 index 0000000..65a5745 --- /dev/null +++ b/test-files/components/NProgress.scss @@ -0,0 +1,65 @@ +#nprogress { + pointer-events: none; + + .bar { + background: $pbar__bar-color; + + height: 6px; + left: 0; + position: fixed; + top: 0; + + width: 100%; + z-index: 1031; + } + + /* Fancy blur effect */ + .peg { + box-shadow: 0 0 10px $pbar__blur-color, 0 0 5px $pbar__blur-color; + display: block; + height: 100%; + opacity: 1; + position: absolute; + right: 0; + transform: rotate(3deg) translate(0, -4px); + + width: 100px; + } + + /* Remove these to get rid of the spinner */ + .spinner { + display: block; + position: fixed; + right: 15px; + top: 15px; + z-index: 1031; + } + + .spinner-icon { + animation: nprogress-spinner 400ms linear infinite; + border: solid 2px transparent; + border-left-color: $pbar__spin-color; + + border-radius: 50%; + border-top-color: $pbar__spin-color; + box-sizing: border-box; + height: 18px; + + width: 18px; + } +} + +.nprogress-custom-parent { + overflow: hidden; + position: relative; +} + +.nprogress-custom-parent #nprogress .spinner, +.nprogress-custom-parent #nprogress .bar { + position: absolute; +} + +@include keyframes(nprogress-spinner) { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } +} diff --git a/test-files/components/Navigation.scss b/test-files/components/Navigation.scss new file mode 100644 index 0000000..8371a42 --- /dev/null +++ b/test-files/components/Navigation.scss @@ -0,0 +1,34 @@ +.Navigation { + + &__con { + display: flex; + flex-direction: row; + width: 100%; + + a { + align-items: center; + background: rgba($primary-color, 0.08); + border: rgba(desaturate($primary-color, 50%), 0.5) solid 1px; + color: $primary-color; + display: flex; + height: 48px; + justify-content: center; + margin-left: 8px; + padding: 0 20px; + text-decoration: none; + + &:first-child { + margin-left: 0; + } + + &:hover { + background: #fff; + } + + &.active { + background: $primary-color; + color: #fff; + } + } + } +} diff --git a/test-files/components/People.scss b/test-files/components/People.scss new file mode 100644 index 0000000..1b8ebac --- /dev/null +++ b/test-files/components/People.scss @@ -0,0 +1,15 @@ +.People { + +} + +.PeopleIndex { + + &__con { + + } + + &__list { + display: flex; + flex-direction: column; + } +} diff --git a/test-files/components/Person.scss b/test-files/components/Person.scss new file mode 100644 index 0000000..5cc5f84 --- /dev/null +++ b/test-files/components/Person.scss @@ -0,0 +1,114 @@ +.Person { + + &__con { + display: flex; + flex-direction: row; + } + + &__navigate { + display: flex; + justify-content: space-between; + + button { + align-items: center; + background: rgba($secondary-color, 0.25); + border: darken($secondary-color, 10%) solid 1px; + color: darken($secondary-color, 50%); + display: flex; + height: 34px; + justify-content: center; + padding: 0 12px; + + i { + margin: 0 8px; + } + + &:first-child { + padding-left: 2px; + } + + &:last-child { + padding-right: 2px; + } + + &:hover { + background: $secondary-color; + } + + &:disabled { + background: #eee; + border-color: #ccc; + color: #ccc; + cursor: default; + } + } + } +} + +.PersonSidebar { + max-width: 280px; + width: 50%; + + &__con { + display: flex; + flex-direction: column; + } + + &__details { + align-items: center; + display: flex; + flex-direction: column; + } + + nav { + display: flex; + flex-direction: column; + margin: 10px 0 0; + + a { + border-top: $border__base-color solid 1px; + color: $primary-color; + display: flex; + padding: 8px 4px 6px; + text-decoration: none; + + &:first-child { + border-top: 0; + } + + &:hover { + background: rgba($primary-color, 0.05); + } + + &.active { + background: $primary-color; + color: #fff; + } + } + } +} + +.PersonView { + width: 100%; + + &__con { + display: flex; + flex-direction: column; + } +} + +.PersonViewContact { + + &__item { + display: flex; + flex-direction: column; + + strong { + + } + + span { + + } + } +} diff --git a/test-files/components/ProfilePhoto.scss b/test-files/components/ProfilePhoto.scss new file mode 100644 index 0000000..ca053bb --- /dev/null +++ b/test-files/components/ProfilePhoto.scss @@ -0,0 +1,25 @@ +.ProfilePhoto { + align-items: center; + background: #eee; + display: flex; + height: 64px; + justify-content: center; + @include border-radius(64px); + overflow: hidden; + width: 64px; + + img { + max-width: 100%; + width: 100%; + } + + &--large { + height: 128px; + width: 128px; + } + + &--small { + height: 32px; + width: 32px; + } +} diff --git a/test-files/components/SubNavigation.scss b/test-files/components/SubNavigation.scss new file mode 100644 index 0000000..0af419b --- /dev/null +++ b/test-files/components/SubNavigation.scss @@ -0,0 +1,31 @@ +.SubNavigation { + display: flex; + flex-direction: row; + width: 100%; + + a { + align-items: center; + background: rgba($primary-color, 0.05); + border: rgba(desaturate($primary-color, 20%), 0.3) solid 1px; + color: darken($primary-color, 20%); + display: flex; + height: 32px; + justify-content: center; + margin-left: 8px; + padding: 0 20px; + text-decoration: none; + + &:first-child { + margin-left: 0; + } + + &:hover { + background: #fff; + } + + &.active { + background: darken($primary-color, 20%); + color: #fff; + } + } +} diff --git a/test-files/components/_index.scss b/test-files/components/_index.scss new file mode 100644 index 0000000..d7fc3d1 --- /dev/null +++ b/test-files/components/_index.scss @@ -0,0 +1,12 @@ +@import "Header"; +@import "Container"; +@import "Events"; +@import "People"; +@import "Person"; +@import "Footer"; +@import "Navigation"; +@import "SubNavigation"; +@import "./core/index"; +@import "NProgress"; +@import "ProfilePhoto"; +@import "ListItem"; diff --git a/test-files/components/core/Core.scss b/test-files/components/core/Core.scss new file mode 100644 index 0000000..ac4fb02 --- /dev/null +++ b/test-files/components/core/Core.scss @@ -0,0 +1,6 @@ +.Core { + + &__con { + width: 100%; + } +} diff --git a/test-files/components/core/CoreBody.scss b/test-files/components/core/CoreBody.scss new file mode 100644 index 0000000..f3d3c5a --- /dev/null +++ b/test-files/components/core/CoreBody.scss @@ -0,0 +1,6 @@ +.CoreBody { + + &__con { + position: relative; + } +} diff --git a/test-files/components/core/CoreHeader.scss b/test-files/components/core/CoreHeader.scss new file mode 100644 index 0000000..f776ff3 --- /dev/null +++ b/test-files/components/core/CoreHeader.scss @@ -0,0 +1,2 @@ +.CoreHeader { +} diff --git a/test-files/components/core/CoreNavigation.scss b/test-files/components/core/CoreNavigation.scss new file mode 100644 index 0000000..6cca8cd --- /dev/null +++ b/test-files/components/core/CoreNavigation.scss @@ -0,0 +1,39 @@ +.CoreNavigation { + + &__actions { + display: flex; + flex-direction: row; + + button { + align-items: center; + border: $border__base-color solid 1px; + border-left: 0; + color: $font__base-color; + display: flex; + height: 32px; + justify-content: center; + outline: none; + + i { + margin: 0 5px; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + } + + &:first-child { + border-left: $border__base-color solid 1px; + } + + &:hover { + background: #eee; + color: $primary-color; + } + } + } +} diff --git a/test-files/components/core/CoreSubNavigation.scss b/test-files/components/core/CoreSubNavigation.scss new file mode 100644 index 0000000..96eb1d2 --- /dev/null +++ b/test-files/components/core/CoreSubNavigation.scss @@ -0,0 +1,2 @@ +.CoreSubNavigation { +} diff --git a/test-files/components/core/_index.scss b/test-files/components/core/_index.scss new file mode 100644 index 0000000..996df5f --- /dev/null +++ b/test-files/components/core/_index.scss @@ -0,0 +1,5 @@ +@import "Core"; +@import "CoreHeader"; +@import "CoreNavigation"; +@import "CoreSubNavigation"; +@import "CoreBody"; diff --git a/test-files/elements/_index.scss b/test-files/elements/_index.scss new file mode 100644 index 0000000..9acd9cd --- /dev/null +++ b/test-files/elements/_index.scss @@ -0,0 +1 @@ +@import "base"; diff --git a/test-files/elements/base.scss b/test-files/elements/base.scss new file mode 100644 index 0000000..5c1e33c --- /dev/null +++ b/test-files/elements/base.scss @@ -0,0 +1,61 @@ + +/* Base Styles */ +html { + font-size: 62.5%; + min-height: 100%; + + @include html(); +} +body { + -moz-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -webkit-font-smoothing: subpixel-antialiased; + -webkit-text-size-adjust: 100%; + line-height: 1; + min-height: 100%; + + @include body(); +} + +body, +button, +input, +select, +textarea { + font-family: $font__base-family; + color: $font__base-color; + font-style: $font__base-style; + @include font-size($font__base-size); +} + +h1, h2, h3, h4, h5, h6 { +} + +h1 { + @include font-size(30px); + line-height: 140%; +} + +h2 { + @include font-size(22px); + font-weight: 300; + margin-bottom: 20px; +} + +h3 { + @include font-size(20px); + font-weight: 300; + margin-bottom: 8px; +} + +p { + line-height: 130%; + margin-bottom: 10px; + padding: 3px 0 2px; +} + +hr { + border: 0; + border-top: $hr-color solid 1px; + margin: 30px 0; +} diff --git a/test-files/generic/_index.scss b/test-files/generic/_index.scss new file mode 100644 index 0000000..d1a3422 --- /dev/null +++ b/test-files/generic/_index.scss @@ -0,0 +1,39 @@ +@import "reset"; +@import "highlight"; + + + + + + + +.m2-header { + background-image: url("/images/module2/temp.jpg"); + height: 800px; + position: relative; + width: 100%; + + &:before { + background: linear-gradient(transparent, #fff); + content: ' '; + height: 800px; + position: absolute; + width: 100%; + } +} + +.slide { + border: 5px solid #000; + margin: 50px; +} + +.slide-header { + font-size: 30pt; + font-weight: 400; +} + +.citation-source { + color: #a59d95; + font-size: 16px; +} + diff --git a/test-files/generic/highlight.scss b/test-files/generic/highlight.scss new file mode 100644 index 0000000..e62567e --- /dev/null +++ b/test-files/generic/highlight.scss @@ -0,0 +1,3 @@ +/* Highlight Styles */ +::-moz-selection {background: $highlight-selection;color: $highlight-font-color;text-shadow: none;} +::selection {background: $highlight-selection;color: $highlight-font-color;text-shadow: none;} diff --git a/test-files/generic/reset.scss b/test-files/generic/reset.scss new file mode 100644 index 0000000..2b4688a --- /dev/null +++ b/test-files/generic/reset.scss @@ -0,0 +1,67 @@ +* { + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, +acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, +sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, +footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + border: 0;font: inherit;font-size: 100%;margin: 0;outline: none;padding: 0;vertical-align: baseline; +} +img {-ms-interpolation-mode: bicubic;border: 0;max-width: 100%;vertical-align: middle;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, q:before, q:after {content: "";content: none;} +small {font-size: 80%;} +ins {background: #ff0;color: #000;text-decoration: none;} +mark {background: #ff0;color: #000;} +del {text-decoration: line-through;} +b, strong {font-weight: bold;} +em, dfn {font-style: italic;} +abbr[title], dfn[title] {border-bottom: 1px dotted;cursor: help;} +table {border-collapse: collapse;border-spacing: 0;} +hr {-moz-box-sizing: content-box;-webkit-box-sizing: content-box;box-sizing: content-box;height: 0;} +legend {margin-left: -7px;white-space: normal;} +table {border-collapse: collapse;border-spacing: 0;} +caption, th, td {font-weight: normal;text-align: left;vertical-align: middle;} +pre, code, kbd, samp {_font-family: 'courier new', monospace;font-family: monospace, serif;font-size: 1em;} +pre {white-space: pre;white-space: pre-wrap;word-wrap: break-word;} /* Improve readability of pre-formatted text in all browsers */ +svg:not(:root) {overflow: visible;} /* Correct overflow not hidden in IE9 */ +sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;} +sup {top: -0.5em;} +sub {bottom: -0.25em;} + +/* HTML5 Definitions */ +article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;} +audio, canvas, video {display: inline-block;display: inline;zoom: 1;} +audio:not([controls]) {display: none;height: 0;} +[hidden] {display: none;} + +/* Reset Form Styles */ +button[disabled], input[disabled] {cursor: default;} +button, input {line-height: normal;} /* Define line-height as normal to match FF3/4 */ +select, input, textarea, button {font-size: 100%;text-transform: none;vertical-align: baseline;vertical-align: middle;} /* Font Normalization */ +textarea {overflow: auto;resize: vertical;vertical-align: top;} +button {border: #fff solid 0;overflow: visible;width: auto;} /* Make buttons play nice in IE */ +button::-moz-focus-inner, input::-moz-focus-inner {border: 0;padding: 0;} /* Remove inner padding and border in FF3/4 */ + +/* Consistent box sizing and appearance */ +input[type="checkbox"], input[type="radio"] {height: 13px;padding: 0;width: 13px;} +input[type="search"] {-moz-box-sizing: content-box;-webkit-appearance: textfield;-webkit-box-sizing: content-box;box-sizing: content-box;} +input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none;} +button::-moz-focus-inner, input::-moz-focus-inner {border: 0;padding: 0;} /* Remove inner padding and border in FF3/4: h5bp.com/l */ + +/* Align checkboxes, radios, text inputs with their label */ +input[type="checkbox"], +input[type="radio"] {height: 13px;vertical-align: middle;width: 13px;} + +/* Hand cursor on clickable input elements */ +label, input[type="button"], input[type="submit"], input[type="reset"], +input[type="image"], button {-webkit-appearance: none;cursor: pointer;overflow: visible;} + +/* Colors for form validity */ +input:valid, textarea:valid {} +input:invalid, textarea:invalid {background-color: #f0dddd;} diff --git a/test-files/objects/_index.scss b/test-files/objects/_index.scss new file mode 100644 index 0000000..033657e --- /dev/null +++ b/test-files/objects/_index.scss @@ -0,0 +1 @@ +//@import ""; diff --git a/test-files/settings/_index.scss b/test-files/settings/_index.scss new file mode 100644 index 0000000..c835c2f --- /dev/null +++ b/test-files/settings/_index.scss @@ -0,0 +1,10 @@ + +@import "variables"; + +@import "colors"; + +@import "fonts"; + +@import "animations"; + +@import "other"; diff --git a/test-files/settings/animations.scss b/test-files/settings/animations.scss new file mode 100644 index 0000000..98c37c6 --- /dev/null +++ b/test-files/settings/animations.scss @@ -0,0 +1,82 @@ + +/* + * Base Animation Variables + */ + + // cubic bezier values + $bounce-v1: 0.175, 0.885, 0.32, 1.275; + $bounce-v2: .71,.52,.22,1.04; + + // cubic bezier + $animate__cubic-bezier: cubic-bezier(.82,.01,.32,1); + $animate__cubic-bezier--enter: cubic-bezier(.71,.52,.22,1.04); + $animate__cubic-bezier--leave: cubic-bezier(.83,-0.34,.19,1.23); + + // slide + $slide-duration: 300ms; + + + +/* + * Slide Left + * + * ... + */ + + .slide-left-enter-active, .slide-left-leave-active { + transition: transform $slide-duration cubic-bezier(1, 0.5, 0.8, 1), + opacity $slide-duration cubic-bezier(1, 0.5, 0.8, 1); + } + + .slide-left-enter { + opacity: 0; + transform: translateX(100px); + } + + .slide-left-enter-to, .slide-left-leave { + opacity: 1; + transform: translateX(0); + } + + .slide-left-leave-to { + opacity: 0; + transform: translateX(-100px); + } + + + + +/* + * Slide Right + * + * ... + */ + + .slide-right-enter-active, .slide-right-leave-active { + transition: transform $slide-duration cubic-bezier(1, 0.5, 0.8, 1), + opacity $slide-duration cubic-bezier(1, 0.5, 0.8, 1); + } + + .slide-right-enter { + opacity: 0; + transform: translateX(-100px); + } + + .slide-right-enter-to, .slide-right-leave { + opacity: 1; + transform: translateX(0); + } + + .slide-right-leave-to { + opacity: 0; + transform: translateX(100px); + } + + + + + .slide-left-enter-active, .slide-left-leave-active, + .slide-right-enter-active, .slide-right-leave-active { + position: absolute; + top: 0; + } diff --git a/test-files/settings/colors.scss b/test-files/settings/colors.scss new file mode 100644 index 0000000..f8e573e --- /dev/null +++ b/test-files/settings/colors.scss @@ -0,0 +1,15 @@ + +/* + * Base Colors + */ + + $primary-color: #85144b; + $secondary-color: #39cccc; + + +/* + * Background Colors + */ + + $html__bgcolor: none; + $body__bgcolor: none; diff --git a/test-files/settings/fonts.scss b/test-files/settings/fonts.scss new file mode 100644 index 0000000..a6d717a --- /dev/null +++ b/test-files/settings/fonts.scss @@ -0,0 +1,18 @@ +//@import url('https://fonts.googleapis.com/css?family=Oswald:200|Source+Sans+Pro:300,400,700'); +//@import "~@fortawesome/fontawesome-free-webfonts/scss/fontawesome"; +//$fa-font-path: '/webfonts'; +//@import "~@fortawesome/fontawesome-free-webfonts/scss/fa-solid"; +//@import "~@fortawesome/fontawesome-free-webfonts/scss/fa-regular"; +//@import "~@fortawesome/fontawesome-free-webfonts/scss/fa-brands"; + +$font__base-color: #444; +$font__base-family: 'Source Sans Pro', 'Open Sans', Helvetica, Arial, Verdana, sans-serif; +$font__base-size: 16px; +$font__base-style: normal; + +$font__base-anchor-color: $primary-color; +$font__base-anchor-hover-color: $secondary-color; + +$font__title-family: 'Oswald', 'Source Sans Pro', 'Open Sans', Helvetica, Arial, Verdana, sans-serif; +$font__title-weight: 200; +$font__title-letterspacing: -01rem; diff --git a/test-files/settings/other.scss b/test-files/settings/other.scss new file mode 100644 index 0000000..1b12689 --- /dev/null +++ b/test-files/settings/other.scss @@ -0,0 +1,47 @@ + +/* + * NProgress Bar Colors + */ + + $pbar__bar-color: $primary-color; + $pbar__blur-color: $primary-color; + $pbar__spin-color: $primary-color; + + + +/* + * User Select / Text Highlight + */ + + $highlight-selection: #000; + $highlight-font-color: #fff; + + + +/* + * Colors for other variables + */ + + // default border color + $border__base-color: #ccc; + + // default horizontal rule color + $hr-color: #fff; + + + +/* + * Styling for HTML and Body elements + */ + + @mixin html() { + background-color: $html__bgcolor; + overflow-y: scroll; + } + + @mixin body() { + background-color: $body__bgcolor; + } + + + diff --git a/test-files/settings/variables.scss b/test-files/settings/variables.scss new file mode 100644 index 0000000..5b9373c --- /dev/null +++ b/test-files/settings/variables.scss @@ -0,0 +1,8 @@ + +/* + * Variables used for mixins + */ + + $body__width--desktop: 1200px; + $body__width--tablet: 1000px; + $body__width--mobile: 750px; diff --git a/test-files/tools/_index.scss b/test-files/tools/_index.scss new file mode 100644 index 0000000..216521e --- /dev/null +++ b/test-files/tools/_index.scss @@ -0,0 +1,2 @@ +@import 'mixins'; +@import 'repeat'; diff --git a/test-files/tools/mixins.scss b/test-files/tools/mixins.scss new file mode 100644 index 0000000..53b947d --- /dev/null +++ b/test-files/tools/mixins.scss @@ -0,0 +1,103 @@ +@function calculateRem($size) { + $remSize: $size / 10px; + @return $remSize * 1rem; +} + +@mixin font-size($size) { + font-size: $size; // fallback for browsers that do not support rem sizing + font-size: calculateRem($size); +} + +@mixin keyframes($animation-name) { + @-webkit-keyframes #{$animation-name} { + @content; + } + @-moz-keyframes #{$animation-name} { + @content; + } + @-ms-keyframes #{$animation-name} { + @content; + } + @-o-keyframes #{$animation-name} { + @content; + } + @keyframes #{$animation-name} { + @content; + } +} + +@mixin placeholder($color) { + ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ + color: $color; + } + :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: $color; + opacity: 1; + } + ::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: $color; + opacity: 1; + } + :-ms-input-placeholder { /* Internet Explorer 10-11 */ + color: $color; + } +} + +@mixin animation($str...) { + -moz-animation: #{$str}; + -ms-animation: #{$str}; + -o-animation: #{$str}; + -webkit-animation: #{$str}; + animation: #{$str}; +} + +@mixin transition($args...) { + -moz-transition: $args; + -ms-transition: $args; + -o-transition: $args; + -webkit-transition: $args; + transition: $args; +} + +@mixin opacity($opacity) { + $opacity-ie: $opacity * 100; + filter: alpha(opacity=$opacity-ie); + opacity: $opacity; //IE8 +} + +@mixin border-radius($radius) { + -moz-border-radius: $radius; + -webkit-border-radius: $radius; + background-clip: padding-box; + border-radius: $radius; /* stops bg color from leaking outside the border: */ +} + +/* Gradient: Top to Bottom */ +@mixin gradient-t2b($start-colour, $end-colour) { + background-color: $start-colour; + background-image: -webkit-gradient(linear, left top, left bottom, from($start-colour), to($end-colour)); + background-image: -webkit-linear-gradient(top, $start-colour, $end-colour); + background-image: -moz-linear-gradient(top, $start-colour, $end-colour); + background-image: -ms-linear-gradient(top, $start-colour, $end-colour); + background-image: -o-linear-gradient(top, $start-colour, $end-colour); + background-image: linear-gradient(top, $start-colour, $end-colour); + filter: progid:DXImageTransform.Microsoft.gradient(start-colourStr='#{$start-colour}', end-colourStr='#{$end-colour}'); +} + +@mixin phone() { + @media screen and (max-width: 750px) { + @content + } +} + +@mixin tablet() { + @media screen and (max-width: $body__width--tablet) { + @content + } +} + +@mixin desktop() { + @media screen and (min-width: $body__width--desktop) { + @content + } +} diff --git a/test-files/tools/repeat.scss b/test-files/tools/repeat.scss new file mode 100644 index 0000000..9fd77ce --- /dev/null +++ b/test-files/tools/repeat.scss @@ -0,0 +1,19 @@ +%valign { + display: block; + position: relative; + top: 50%; + transform: translateY(-50%); +} + +%clearfix { + *zoom: 1; + + &:before, + &:after { + content: ' '; + display: table; + } + &:after { + clear: both; + } +} \ No newline at end of file diff --git a/test-files/utilities/_index.scss b/test-files/utilities/_index.scss new file mode 100644 index 0000000..740109c --- /dev/null +++ b/test-files/utilities/_index.scss @@ -0,0 +1,22 @@ +.wrap { + margin: 0 auto; + max-width: $body__width--desktop; + @extend %clearfix; +} +.al {text-align: left;} +.ac {text-align: center;} +.ar {text-align: right;} +.fl {float: left;} +.fr {float: right;} +.hidden {display: none ;visibility: hidden;} /* Hide from both screenreaders and browsers */ +.invisible {visibility: hidden;} /* Hide visually and from screenreaders, but maintain layout */ +.noscroll { + bottom: 0; + height: 100%; + left: 0; + position: fixed; + right: 0; + top: 0; + + width: 100%; +} diff --git a/test.js b/test.js new file mode 100644 index 0000000..cd235d5 --- /dev/null +++ b/test.js @@ -0,0 +1,96 @@ + + + + + +// IMPORTS + +const path = require('path'); +const exec = require('child_process').execSync; + + + + + +// EXECUTABLE AND ARGS + +let extension = ''; + +if (process.platform === 'win32') { + extension = '.cmd'; +} + +let executable = path.join('.', 'node_modules', '.bin', 'sass-lint') + extension; + +let args = [ + // config file + '-c windows.yml', + // do not exit on errors + '-q', + // verbose + '-v', + // format as json + '-f json', + // throw error if more than 5000 warnings + '--max-warnings 5000' +].join(' '); + +let executableAndArgs = executable + ' ' + args; + + + + + +// RUN AND GET RESULTS + +let results = ''; + +try { + results = exec(executableAndArgs); +} catch (err) { + if (err && err.stdout) { + results = String(err.stdout); + } +} + +results = JSON.parse(results); + + + + + +// COMPUTE TOTALS + +let totalErrors = 0; +let totalWarnings = 0; + +results.forEach(function (result) { + totalErrors = totalErrors + result.errorCount; + totalWarnings = totalWarnings + result.warningCount; +}); + + + + + +// COMPARE AGAINST EXPECTATIONS + +const expectedErrors = 184; +const expectedWarnings = 497; + +if (totalErrors === expectedErrors && totalWarnings === expectedWarnings) { + console.log('Lint ran successfully.'); +} else { + let message = [ + 'Sass-Lint results discrepancy.', + ' ERRORS:', + ' ∙ Expected: ' + expectedErrors, + ' ∙ Actual: ' + totalErrors, + ' WARNINGS:', + ' ∙ Expected: ' + expectedWarnings, + ' ∙ Actual: ' + totalWarnings + ].join('\n'); + console.log(message); + + throw 'TEST FAILED'; +} diff --git a/windows.yml b/windows.yml index 974cd25..9acd4ef 100644 --- a/windows.yml +++ b/windows.yml @@ -1,4 +1,7 @@ options: config-file: tjwsasslint.yml + formatter: json + max-warnings: 5000 files: include: '**/*.s+(a|c)ss' +