Skip to content

Commit

Permalink
feat: improve custom messages and blacklist absolute units (#62)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jdiogopeixoto @satazor
jdiogopeixoto authored and satazor committed Jan 24, 2020
1 parent 6d7068b commit 8b8bdf2
Show file tree
Hide file tree
Showing 6 changed files with 152 additions and 59 deletions.
10 changes: 7 additions & 3 deletions rules/base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ module.exports = {
'color-named': ['never', {
'ignoreProperties': ['/^--\\w/'],
'severity': 'warning',
'message': 'Using plain values directly is not allowed, please use a CSS custom property instead.',
'message': 'Using named colors is not recommended, please consider using a CSS custom property instead.',
}],
'color-no-invalid-hex': true,
'comment-empty-line-before': ['always', {
Expand Down Expand Up @@ -48,7 +48,7 @@ module.exports = {
},
{
'severity': 'warning',
'message': 'Using plain values directly is not allowed, please use a CSS custom property instead.',
'message': 'Using color values directly is not recommended, please consider using a CSS custom property instead.',
}],
'function-calc-no-unspaced-operator': true,
'function-comma-newline-after': 'always-multi-line',
Expand All @@ -72,7 +72,7 @@ module.exports = {
},
{
'severity': 'warning',
'message': 'Using plain values directly is not allowed, please use a CSS custom property instead.',
'message': 'Using units other than em is not recommended. You can understand why by reading: https://zellwk.com/blog/media-query-units/',
}],
'media-feature-parentheses-space-inside': 'never',
'media-feature-range-operator-space-after': 'always',
Expand All @@ -99,6 +99,10 @@ module.exports = {
'selector-no-vendor-prefix': true,
'selector-pseudo-element-colon-notation': 'double',
'string-quotes': 'double',
'unit-blacklist': [['px', 'pt', 'pc', 'in', 'cm', 'mm'], {
'severity': 'warning',
'message': 'Using absolute units is not recommended. Consider using relative units: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Relative_length_units',
}],
'value-list-comma-newline-after': 'always-multi-line',
'value-list-comma-space-after': 'always-single-line',
'value-list-comma-space-before': 'never',
Expand Down
4 changes: 2 additions & 2 deletions rules/declaration-strict-value.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ const properties = [
];

const options = {
'ignoreKeywords': ['currentColor', 'transparent', 'inherit'],
'ignoreKeywords': ['auto', 'inherit', 'initial', 'unset'],
'disableFix': true,
'severity': 'warning',
'message': 'Using plain values directly is not allowed, please use a CSS custom property instead.',
'message': 'Using plain values directly is not recommended, please consider using a CSS custom property instead.',
};

module.exports = {
Expand Down
90 changes: 90 additions & 0 deletions test/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ Array [
"rule": "scale-unlimited/declaration-strict-value",
"severity": "warning",
},
Object {
"column": 16,
"line": 13,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 5,
"line": 14,
Expand Down Expand Up @@ -68,12 +74,24 @@ Array [
"rule": "media-feature-name-value-whitelist",
"severity": "warning",
},
Object {
"column": 20,
"line": 22,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 43,
"line": 22,
"rule": "media-feature-name-value-whitelist",
"severity": "warning",
},
Object {
"column": 20,
"line": 24,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 21,
"line": 28,
Expand All @@ -86,6 +104,24 @@ Array [
"rule": "media-feature-name-value-whitelist",
"severity": "warning",
},
Object {
"column": 45,
"line": 28,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 20,
"line": 30,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 18,
"line": 34,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 5,
"line": 36,
Expand All @@ -98,12 +134,30 @@ Array [
"rule": "color-named",
"severity": "warning",
},
Object {
"column": 20,
"line": 38,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 1,
"line": 41,
"rule": "at-rule-empty-line-before",
"severity": "error",
},
Object {
"column": 18,
"line": 41,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 20,
"line": 43,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 15,
"line": 44,
Expand All @@ -122,12 +176,24 @@ Array [
"rule": "comment-empty-line-before",
"severity": "error",
},
Object {
"column": 16,
"line": 52,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 1,
"line": 54,
"rule": "comment-empty-line-before",
"severity": "error",
},
Object {
"column": 16,
"line": 57,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 1,
"line": 59,
Expand All @@ -140,6 +206,24 @@ Array [
"rule": "declaration-property-value-blacklist",
"severity": "warning",
},
Object {
"column": 17,
"line": 63,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 22,
"line": 63,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 26,
"line": 63,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 30,
"line": 63,
Expand All @@ -158,6 +242,12 @@ Array [
"rule": "comment-empty-line-before",
"severity": "error",
},
Object {
"column": 17,
"line": 74,
"rule": "unit-blacklist",
"severity": "warning",
},
Object {
"column": 18,
"line": 74,
Expand Down
19 changes: 9 additions & 10 deletions test/fixtures/basic.good.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@mixin bar .foo;

:root {
--zero-unit-var: 0px;
--zero-unit-var: 0;
--main-color: red;
--font-family: "Arial", "Helvetica", sans-serif;
--font-weight-regular: 400;
Expand All @@ -18,15 +18,15 @@
display: block;
color: var(--main-color);
font-family: var(--font-family);
font-size: 20px;
font-size: 2.5em;
font-weight: var(--font-weight-regular);
@mixin bar;
}

@media (width: 60em) {
.foo {
border-color: currentColor;
font-size: 15px;
font-size: 2em;
}
}

Expand All @@ -42,17 +42,17 @@
}
}

@media (width <= 600px) {
@media (width <= 60em) {
.foo {
border-color: currentColor;
font-size: 15px;
font-size: 2em;
}
}

@media (width <= 400px) {
@media (width <= 40em) {
.foo {
color: color(var(--main-color) a(0%));
font-size: 10px;
font-size: 1em;
fill: transparent;
stroke: inherit;
}
Expand All @@ -64,14 +64,13 @@

.title {
font-size: 1em;
font-size: 20px;
}

/* Secondary comment block
============================================= */

.description {
font-size: 15px;
font-size: 1.5em;
}

/* Tertiary comment block & line/inline comments */
Expand All @@ -87,7 +86,7 @@

@nest .foo & {
background: var(--main-color);
box-shadow: 10px 5px 5px var(--color-black);
box-shadow: 1em 0.5em 0.5em var(--color-black);
}

/* Line comment 2 */
Expand Down
40 changes: 20 additions & 20 deletions test/fixtures/order.bad.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,23 @@ div {
bottom: 0;
left: 0;

min-width: 1000px;
width: 100px;
max-width: 50px;
min-height: 1000px;
height: 100px;
max-height: 50px;
min-width: 100rem;
width: 10rem;
max-width: 5rem;
min-height: 100rem;
height: 10rem;
max-height: 5rem;

overflow: hidden;
z-index: var(--z-index-base);
overflow-x: auto;
overflow-y: auto;

margin-top: 5px;
margin-top: 0.5rem;
margin: 0;
margin-left: 5px;
margin-right: 5px;
padding-top: 5px;
margin-left: 0.5rem;
margin-right: 0.5rem;
padding-top: 0.5rem;
padding: 0;

zoom: 1;
Expand All @@ -41,7 +41,7 @@ div {
/* display */
display: inline-block;

flex-basis: 100px;
flex-basis: 0.5rem;
flex: 0 1 auto;
flex-grow: 1;
flex-shrink: 1;
Expand Down Expand Up @@ -84,27 +84,27 @@ div {
table-layout: fixed;

/* asthethic */
border: 1px solid var(--main-color);
border: 0.1rem solid var(--main-color);
list-style: none;
outline: 1px solid var(--main-color);
outline: 0.1rem solid var(--main-color);

object-fit: contain;
opacity: 1;
object-position: center;
clip-path: none;
background: inherit;

box-shadow: 10px 5px 5px var(--main-color);
border-radius: 5px;
filter: blur(5px);
box-shadow: 1rem 0.5rem 0.5rem var(--main-color);
border-radius: 0.5rem;
filter: blur(0.5rem);

/* text */
color: var(--main-color);

font-family: var(--font-family);
font: 2em "Open Sans", sans-serif;
font-variant: small-caps;
font-size: 12px;
font-size: 1.2em;
font-size-adjust: 0.5;
font-kerning: auto;
font-weight: var(--font-weight-bold);
Expand All @@ -116,14 +116,14 @@ div {
text-underline-position: under;
text-decoration: unline;
text-transform: uppercase;
text-shadow: 1px 1px 2px var(--main-color);
text-shadow: 0.1rem 0.1rem 0.2rem var(--main-color);
text-overflow: ellipsis;
text-align: left;
text-justify: inter-word;
text-indent: 40px;
text-indent: 4rem;

tab-size: 4;
line-height: 10px;
line-height: 1rem;
white-space: nowrap;
word-spacing: normal;
word-wrap: break-word;
Expand Down
Loading

0 comments on commit 8b8bdf2

Please sign in to comment.