Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve custom messages and blacklist absolute units #62

Merged
merged 15 commits into from
Jan 24, 2020
Merged

Improve custom messages and blacklist absolute units #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6f5c3b5
feat: enforce use of variables to colors (hex, rgb, hsl and named)
jdiogopeixoto Jan 22, 2020
a810272
feat: enforce use of variables to colors (hex, rgb, hsl and named)
jdiogopeixoto Jan 22, 2020
8b81bd0
Merge branch 'feat/declaration-property-value-blacklist' of https://g…
jdiogopeixoto Jan 23, 2020
1de972a
feat: improve regex expressions
jdiogopeixoto Jan 23, 2020
c8e7c7c
feat: change error to warning for declaration-strict-value
jdiogopeixoto Jan 23, 2020
d10fb6a
feat: change severity from error to warning for some rules
jdiogopeixoto Jan 23, 2020
823c429
feat: add custom message for rules that enforce the use of variables
jdiogopeixoto Jan 23, 2020
edf1715
test: fix tests
jdiogopeixoto Jan 23, 2020
c8ab72d
fix: improve custom messages
jdiogopeixoto Jan 24, 2020
6bf3058
fix: improve custom messages
jdiogopeixoto Jan 24, 2020
dc93af3
fix: update ignored keywords for declaration-strict-value
jdiogopeixoto Jan 24, 2020
c6bdab9
feat: add rule unit-blacklist
jdiogopeixoto Jan 24, 2020
c9eb52f
test: update tests according to the new rule
jdiogopeixoto Jan 24, 2020
8105a2f
Merge branch 'fix/rules-custom-messages' of https://github.com/moxyst…
jdiogopeixoto Jan 24, 2020
d0f4c0f
feat: improve custom messages
jdiogopeixoto Jan 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions rules/base.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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