Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Css linting (#66)

Browse Source 
* creating css .stylelintrc file

(cherry picked from commit df0a573666151fb522cb203f82a7a6a979fc33cc)

* updating lintfile

(cherry picked from commit 623ad22d69566a912988239c05d2f803e735362f)

* ignore base bootstrap styles

(cherry picked from commit 0ea94926a004367a67983b08a8ea47c974ef6e49)

* Working on making css inline with css linting

(cherry picked from commit 259fdfcaf9ae280e664471c7d5278214d991168e)

* removing generic class names and nesting for clear names without nesting

(cherry picked from commit d0427c2c09771df049ed9ab4e7b5d2f2076106fd)

* making components compatable with new css lint

(cherry picked from commit b147f157c3b9b39708a750f281d8278211454137)

* updating csslint file

(cherry picked from commit 53b0480476b6e5c4d94763baeaef7d33e9c2342d)

* adding alphabetical ordering to stylelint and updating css files with this

(cherry picked from commit a6b7860efa01e673df20546bb5830587eeb140d6)

* integrate stylelint with webpack

this way we can integrate postcss plugins

# Conflicts:
#	ui/yarn.lock

* exit process with 1, when stylelint finds issues

* listen to unhandled rejection from stylelint

* use stylelintignore

* fix stylelint raised issues
This commit is contained in:
Sérgio Ramos 2016-11-02 17:34:08 +00:00 committed by Tom Gallacher
parent e8e3f0b3ac
commit 6a994e05f6
29 changed files with 801 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/.stylelintignore Normal file
View File

@ -0,0 +1,8 @@
/src/components/base/*.css
/node_modules
coverage
.nyc_output
docs/static
static
webpack/embed-markdown-loader

50
ui/.stylelintrc Normal file
View File

@ -0,0 +1,50 @@
{
"extends": "stylelint-config-standard",
"rules": {
"color-hex-case": "upper",
"color-hex-length": "long",
"font-family-name-quotes": "always-where-recommended",
"string-quotes": "double",
"value-list-comma-space-after": "always",
"custom-property-no-outside-root": true,
"property-no-unknown": [true, {
"ignoreProperties": [
"",
"composes"
]
}],
"declaration-colon-space-after": "always",
"declaration-no-important": true,
"declaration-block-no-duplicate-properties": true,
"declaration-block-properties-order": "alphabetical",
"declaration-block-semicolon-newline-after": "always",
"block-closing-brace-newline-after": "always-single-line",
"block-closing-brace-newline-before": "always",
"block-no-single-line": true,
"block-opening-brace-newline-after": "always",
"selector-attribute-quotes": "always",
"selector-max-compound-selectors": 3,
"selector-no-attribute": true,
"selector-no-id": true,
"selector-no-universal": true,
"selector-pseudo-class-parentheses-space-inside": "always",
"selector-list-comma-newline-before": "never-multi-line",
"selector-list-comma-space-before": "always-single-line",
"media-feature-parentheses-space-inside": "always",
"at-rule-name-space-after": "always",
"at-rule-no-unknown": [true, {
"ignoreAtRules": [
"/mixin|for/",
""
]
}],
"max-nesting-depth": 3,
"no-descending-specificity": true,
"no-duplicate-selectors": true,
"no-unknown-animations": true,
"custom-property-empty-line-before": null,
"selector-pseudo-class-no-unknown": [true, {
"ignorePseudoClasses": ["global", "$"]
}]
}
}

1
ui/Makefile
View File

@ -54,6 +54,7 @@ clean:
.PHONY: lint
lint:
$(bindir)/eslint .
./scripts/stylelint
.PHONY: lint-ci
lint-ci:

4
ui/package.json
View File

@ -53,6 +53,7 @@
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"json-loader": "^0.5.4",
"lodash.get": "^4.4.2",
"memory-fs": "^0.3.0",
"nyc": "^8.3.1",
"param-case": "^2.1.0",
"postcss-at-rules-variables": "0.0.25",
@ -72,6 +73,9 @@
"react-router": "^4.0.0-alpha.4",
"st": "^1.2.0",
"style-loader": "^0.13.1",
"stylelint": "^7.5.0",
"stylelint-config-standard": "^14.0.0",
"stylelint-webpack-plugin": "^0.4.0",
"tap-xunit": "^1.4.0",
"title-case": "^2.1.0",
"webpack": "^2.1.0-beta.25",

32
ui/scripts/stylelint Executable file
View File

@ -0,0 +1,32 @@
#!/usr/bin/env node
const StyleLintPlugin = require('stylelint-webpack-plugin');
const webpack = require('webpack');
const MemoryFS = require('memory-fs');
const config = require('../webpack');
const mfs = new MemoryFS();
const compiler = webpack(Object.assign(config, {
plugins: config.plugins.concat([
new StyleLintPlugin({
configFile: '.stylelintrc',
files: [
'**/*.css'
],
failOnError: true
})
])
}));
mfs.mkdirpSync(config.output.path);
compiler.outputFileSystem = mfs;
compiler.run((err, stats) => {
if (err) {
throw err;
}
});
process.on('unhandledRejection', () => {
process.exit(1);
});

9
ui/src/components/avatar/style.css
View File

@ -1,10 +1,10 @@
.avatar {
border-radius: 50%;
height: remCalc(50);
height: remcalc(50);
overflow: hidden;
text-align: center;
width: remCalc(50);
position: relative;
text-align: center;
width: remcalc(50);
}
.letter {
@ -12,7 +12,6 @@
}
.picture {
composes: verticle_align_center from "../../shared/composers.css";
max-width: 60%;
composes: verticle_align_center from '../../shared/composers.css';
}

5
ui/src/components/base/style.css
View File

@ -31,8 +31,8 @@
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #373a3c;
background-color: #fff;
color: #373A3C;
background-color: #FFFFFF;
& :global {
@ -593,4 +593,3 @@
}
}
}

16
ui/src/components/button/style.css
View File

@ -3,11 +3,11 @@
:root {
--primary-background: ~colors.brandPrimary;
--primary-border: #2532bb;
--primary-color: #ffffff;
--primary-border: #2532BB;
--primary-color: #FFFFFF;
--secondary-backgroud: #ffffff;
--secondary-border: #d8d8d8;
--secondary-backgroud: #FFFFFF;
--secondary-border: #D8D8D8;
--secondary-color: #646464;
--inactive-background: #F9F9F9;
@ -22,12 +22,12 @@
}
.button {
border-radius: remCalc(~boxes.borderRadius);
border-radius: remcalc(~boxes.borderRadius);
box-shadow: ~boxes.bottomShaddow;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: remCalc(16);
min-width: remCalc(120);
padding: remCalc(18 24);
font-size: remcalc(16);
min-width: remcalc(120);
padding: remcalc(18 24);
&.primary {
@add-mixin button var(--primary-background), var(--primary-border), var(--primary-color);

5
ui/src/components/checkbox/style.css
View File

@ -1,8 +1,3 @@
input[type='checkbox'] {
&.checkbox {
}
}
.label {
color: #646464;
}

4
ui/src/components/column/style.css
View File

@ -17,8 +17,8 @@
@define-mixin viewport $size {
&.$(size) {
flex-grow: 1;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
@ -39,8 +39,8 @@
.column {
box-sizing: border-box;
flex: 0 0 auto;
padding-right: var(--half-gutter-width, 0.5rem);
padding-left: var(--half-gutter-width, 0.5rem);
padding-right: var(--half-gutter-width, 0.5rem);
&.reverse {
flex-direction: column-reverse;

9
ui/src/components/container/style.css
View File

@ -11,20 +11,19 @@
--container-sm: ~sizes.containerSm;
}
@custom-media --sm-viewport ~breakpoints.sm;
@custom-media --md-viewport ~breakpoints.md;
@custom-media --lg-viewport ~breakpoints.lg;
.container-fluid, .container {
margin-right: auto;
.container-fluid,
.container {
margin-left: auto;
margin-right: auto;
}
.container-fluid {
padding-right: var(--outer-margin);
padding-left: var(--outer-margin);
padding-right: var(--outer-margin);
}
.container {

15
ui/src/components/input/style.css
View File

@ -1,3 +1,5 @@
@import "../../shared/mixins.css";
~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";
@ -5,21 +7,20 @@
--background-color: ~colors.background;
--border-color: ~colors.border;
--border-selected-color: ~colors.borderSelected;
--border-radius: remCalc(~boxes.borderRadius);
--border-radius: remcalc(~boxes.borderRadius);
--inset-box-shadow: ~boxes.insetShaddow;
}
.input {
background: var(--background-color);
border: 1px solid var(--border-color);
box-shadow: var(--inset-box-shadow);
border-radius: var(--border-radius);
height: 50px;
width: 100%;
display: block;
visibility: visible;
height: 50px;
padding-left: 15px;
padding-right: 15px;
visibility: visible;
width: 100%;
@add-mixin create-base-box-properties;
&:focus {
border-color: var(--border-selected-color);

4
ui/src/components/pagination/index.js
View File

@ -16,7 +16,7 @@ const Pagination = ({
const cn = classNames(
child.props.className,
child.props.active ? styles.active : '',
styles.li
styles.pagination_item
);
return (
@ -28,7 +28,7 @@ const Pagination = ({
return (
<nav aria-label={label} className={cn}>
<ul className={styles.ul}>
<ul className={styles.paginatation_list}>
{pages}
</ul>
</nav>

35
ui/src/components/pagination/style.css
View File

@ -1,39 +1,36 @@
@import "../../shared/mixins.css";
~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";
:root {
--border-checked: ~boxes.border.checked;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remCalc(~boxes.borderRadius);
--border-radius: remcalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
}
.pagination {
.paginatation_list {
display: inline-block;
& .ul {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
& .li {
.pagination_item {
align-items: center;
cursor: pointer;
display: flex;
float: left;
height: 50px;
justify-content: center;
margin-right: 10px;
min-width: 50px;
padding-left: 15px;
padding-right: 15px;
margin-right: 10px;
border: var(--border-unchecked);
box-shadow: var(--bottom-shaddow);
border-radius: var(--border-radius);
position: relative;
float: left;
display: flex;
justify-content: center;
align-items: center;
@add-mixin create-base-box-properties;
&:last-child {
margin-right: inherit;
@ -44,12 +41,10 @@
}
& a:hover {
text-decoration: none
text-decoration: none;
}
&.active {
cursor: default;
}
}
}
}

13
ui/src/components/radio-group/style.css
View File

@ -4,19 +4,18 @@
:root {
--border-checked: ~boxes.border.checked;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remCalc(~boxes.borderRadius);
--border-radius: remcalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
}
.group {
& .item {
cursor: pointer;
background: #FFFFFF;
border: var(--border-unchecked);
box-shadow: var(--bottom-shaddow);
border-radius: 4pxvar(--border-radius);
margin-bottom: remCalc(15);
padding: remCalc(25);
cursor: pointer;
margin-bottom: remcalc(15);
padding: remcalc(25);
@add-mixin create-base-box-properties;
&:last-child {
margin-bottom: initial;

12
ui/src/components/radio/style.css
View File

@ -1,10 +1,10 @@
@import '../../shared/mixins.css';
@import "../../shared/mixins.css";
:root {
--radio-radius: 20px;
--radio-border-size: calc(var(--radio-radius) / 4);
--dot-color: #646464;
--border-color: #cfd1d1;
--border-color: #CFD1D1;
}
.radio {
@ -15,8 +15,8 @@
}
& .span {
margin-left: remCalc(30);
margin-right: remCalc(20);
margin-left: remcalc(30);
margin-right: remcalc(20);
@add-mixin pseduo-element before, var(--radio-radius), var(--radio-radius), -1px, auto, auto, -30px {
border: var(--radio-border-size) solid white;
@ -25,11 +25,11 @@
}
}
& .input[type="radio"] {
& .input {
display: none;
visibility: hidden;
&:checked ~ .span:before {
&:checked ~ .span::before {
background: var(--dot-color);
}
}

2
ui/src/components/range-slider/index.js
View File

@ -10,7 +10,7 @@ const RangeSlider = ({
const slider = classNames(
className,
styles.input
styles.range_input
);
// TODO: Get rid of inline styles

68
ui/src/components/range-slider/style.css
View File

@ -1,4 +1,4 @@
@import '../../shared/mixins.css';
@import "../../shared/mixins.css";
~colors: "../../shared/constants.js";
~boxes: "../../shared/constants.js";
@ -14,24 +14,22 @@
MIXINS - Defining Mixins for slider
*/
@define-mixin range-track {
animate: 0.2s;
background: var(--primary-background);
cursor: pointer;
height: remCalc(6);
height: remcalc(6);
width: 100%;
@add-mixin create-base-box-properties remCalc(25)
@add-mixin create-base-box-properties remcalc(25);
}
@define-mixin range-thumb {
background: #ffffff;
-webkit-appearance: none;
background: #FFFFFF;
cursor: pointer;
height: remCalc(24);
height: remcalc(24);
position: relative;
top: -10px;
width: remCalc(36);
-webkit-appearance: none;
width: remcalc(36);
@add-mixin create-base-box-properties;
}
@ -39,13 +37,15 @@
@define-mixin range-lower {
background: var(--primary-background);
height: 6px;
@add-mixin create-base-box-properties remCalc(50), none;
@add-mixin create-base-box-properties remcalc(50), none;
}
@define-mixin range-upper {
background: #e6e6e6;
background: #E6E6E6;
height: 6px;
@add-mixin create-base-box-properties remCalc(50);
@add-mixin create-base-box-properties remcalc(50);
}
/*
@ -53,20 +53,14 @@
TODO: Complied incorrectly when selectors are in a comma seperated list
*/
.input[type="range"] {
.range_input {
-webkit-appearance: none;
border: none;
box-shadow: none;
margin: remCalc(10 0);
width: 100%;
-webkit-appearance: none;
// Try and figure out why display none is being set in doc.css
display: block;
display: block; /* Try and figure out why display none is being set in doc.css */
margin: remcalc(10 0);
visibility: visible;
&:focus {
outline: none;
}
width: 100%;
&::-moz-focus-outer {
border: 0;
@ -96,30 +90,30 @@
@add-mixin range-thumb;
}
&:focus::-webkit-slider-runnable-track {
background: var(--primary-background);
}
&::-moz-range-progress {
@add-mixin range-lower
@add-mixin range-lower;
}
&::-ms-fill-lower {
@add-mixin range-lower
}
&:focus::-ms-fill-lower {
@add-mixin range-lower
}
&::-moz-range-track {
@add-mixin range-upper;
@add-mixin range-lower;
}
&::-ms-fill-upper {
@add-mixin range-upper;
}
&:focus {
outline: none;
}
&:focus::-webkit-slider-runnable-track {
background: var(--primary-background);
}
&:focus::-ms-fill-lower {
@add-mixin range-lower;
}
&:focus::-ms-fill-upper {
@add-mixin range-upper;
}

2
ui/src/components/row/style.css
View File

@ -65,8 +65,8 @@
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: var(--gutter-compensation, -0.5rem);
margin-left: var(--gutter-compensation, -0.5rem);
margin-right: var(--gutter-compensation, -0.5rem);
&.reverse {
flex-direction: row-reverse;

7
ui/src/components/select/style.css
View File

@ -1,7 +1,10 @@
.select {
composes: input from '../input/style.css';
composes: input from "../input/style.css";
/* select[multiple] is valid CSS syntax - not added to lint library yet */
/* stylelint-disable */
&[multiple] {
/* stylelint-enable */
padding-left: 0;
padding-right: 0;
@ -21,5 +24,5 @@
}
.label {
composes: label from '../input/style.css';
composes: label from "../input/style.css";
}

2
ui/src/components/tab/index.js
View File

@ -25,7 +25,7 @@ const Tab = ({
<div className={cn}>
<input
checked={checked}
className={styles.input}
className={styles.radio_input}
defaultChecked={defaultChecked}
disabled={disabled}
id={tabId}

64
ui/src/components/tab/style.css
View File

@ -1,11 +1,11 @@
@import '../../shared/mixins.css';
@import "../../shared/mixins.css";
~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";
:root {
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remCalc(~boxes.borderRadius);
--border-radius: remcalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
}
@ -17,52 +17,54 @@
border: var(--border-unchecked);
color: #646464;
display: inline-block;
font-size: remCalc(20);
font-size: remcalc(20);
left: 1px;
margin-left: -1px;
padding: remCalc(10);
padding: remcalc(10);
position: relative;
vertical-align: bottom;
}
& .input[type="radio"] {
& .panel {
display: inline-block;
height: 0;
overflow: hidden;
position: relative;
width: 0;
}
& .radio_input {
clip: rect(0 0 0 0);
height: 1px;
opacity: 0;
width: 1px;
@add-mixin move-z -1, fixed;
}
& .panel {
display: inline;
display: inline-block;
overflow: hidden;
position: relative;
height: 0;
width: 0;
}
& .content {
box-sizing: border-box;
display: block;
background: white;
padding: remCalc(0 20);
border: var(--border-unchecked);
background: #FAFAFA;
float: left;
font-size: remCalc(16);
margin-top: remCalc(-9);
width: 100%;
}
& .input[type="radio"]:checked + .label {
&:checked {
& + .label {
background: white;
border-bottom-width: 0;
padding-bottom: remCalc(11);
padding-bottom: remcalc(11);
@add-mixin move-z 1;
}
& .input[type="radio"]:checked ~ .panel {
& ~ .panel {
display: inline;
}
}
}
& .content {
background: #FAFAFA;
border: var(--border-unchecked);
box-sizing: border-box;
display: block;
float: left;
font-size: remcalc(16);
margin-top: remcalc(-9);
padding: remcalc(0 20);
width: 100%;
}
}

4
ui/src/components/tabs/style.css
View File

@ -1,9 +1,9 @@
.tabs {
font-size: 0;
&:after {
&::after {
clear: both;
content: '';
content: "";
display: table;
}
}

14
ui/src/components/toggle/style.css
View File

@ -11,22 +11,22 @@
--background-confirmed: ~colors.confirmation;
--border-confirmed: ~boxes.border.confirmed;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remCalc(~boxes.borderRadius);
--border-radius: remcalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
}
.toggle {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #464646;
border-radius: var(--border-radius);
width: 5rem;
color: #464646;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
height: 2.5rem;
width: 5rem;
& .btn,
& .label {
height: 2.188rem;
width: 2.188rem;
margin: 0.125rem;
width: 2.188rem;
}
& .label {
@ -36,8 +36,8 @@
& .btn {
background: #FFFFFF;
box-shadow: var(--bottom-shaddow);
border-radius: var(--border-radius);
box-shadow: var(--bottom-shaddow);
}
&.on {
@ -45,8 +45,8 @@
border: var(--border-confirmed);
& .label {
float: right;
color: #FFFFFF;
float: right;
}
& .btn {

7
ui/src/components/widget/style.css
View File

@ -6,10 +6,11 @@
}
.content {
cursor: pointer;
border-radius: 4px;
border: var(--border-unchecked);
padding: remCalc(36);
border-radius: 4px;
cursor: pointer;
padding: remcalc(36);
& img {
max-width: 100%;
}

3
ui/src/shared/composers.css
View File

@ -1,8 +1,7 @@
.verticle_align_center {
/* Need to palce position:relative on parent */
left: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

2
ui/src/shared/functions.js
View File

@ -1,5 +1,5 @@
module.exports = {
remCalc: function(values) {
remcalc: function(values) {
values = values.replace('px', '').split(' ');
let outputRems = '';

5
ui/src/shared/mixins.css
View File

@ -3,10 +3,9 @@
@define-mixin pseduo-element $type, $width:auto, $height:auto, $top:auto, $right:auto, $bottom:auto, $left:auto {
position: relative;
&::$(type) {
&:$( type ) {
bottom: $bottom;
content: '';
content: "";
display: inline-block;
height: $height;
left: $left;

549
ui/yarn.lock
View File

File diff suppressed because it is too large Load Diff