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.

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

Switch linting to stylelint #1875

Merged
merged 26 commits into from
Sep 14, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
ecac371
Basic stylelint installation
kevindew May 25, 2020
56c59ae
Add stylelint-config-gds
kevindew May 25, 2020
d8cd980
Turn on at-rule-name-space-after stylelint rule
kevindew Jul 7, 2020
bc8f797
Turn on block-closing-brace-empty-line-before stylelint rule
kevindew Jul 7, 2020
68b3915
Turn on declaration-block-trailing-semicolon rule
kevindew Jul 8, 2020
3c5ab3f
Turn on declaration-colon-newline-after stylelint rule
kevindew Jul 8, 2020
e69eb81
Turn on declaration-colon-space-after stylelint rule
kevindew Jul 8, 2020
7b8dee7
Turn on function-comma-newline-after stylelint rule
kevindew Jul 8, 2020
149dc46
Turn on function-parentheses-newline-inside stylelint rule
kevindew Jul 8, 2020
f3c14a5
Turn on max-empty-lines styline rule
kevindew Jul 9, 2020
ba6641d
Turn on media-feature-name-no-unknown stylelint rule
kevindew Jul 9, 2020
22b7dd4
Turn on media-feature-parentheses-space-inside stylelint rule
kevindew Jul 9, 2020
e922a64
Turn on no-duplicate-selectors stylelint rule
kevindew Jul 9, 2020
96d1943
Turn on no-eol-whitespace stylelint rule
kevindew Jul 9, 2020
8a1ce73
Turn on no-extra-semicolons stylelint rule
kevindew Jul 9, 2020
b3a6fef
Turn on rule-empty-line-before styelint rule
kevindew Jul 9, 2020
af9899f
Turn on scss/comment-no-loud rule
kevindew Jul 9, 2020
0da26f5
Turn on scss/operator-no-unspaced
kevindew Jul 9, 2020
4943329
Turn on selector-type-no-unknown stylelint rule
kevindew Jul 9, 2020
4402115
Turn on value-keyword-case stylelint rule
kevindew Jul 9, 2020
d66c28e
Turn on value-list-max-empty-lines stylelint rule
kevindew Jul 9, 2020
880b660
Turn on indendation stylelint rule
kevindew Jul 9, 2020
09ef79d
Turn on selector-pseudo-element-colon-notation stylelint rule
kevindew Jul 15, 2020
4a2c66b
Add govuk-frontend CSS ordering rules
kevindew Jul 9, 2020
2d587fd
Turn on declaration-no-important stylelint rule
kevindew Aug 19, 2020
dabd0a4
Update stylelint disable comments for Stylelint 13.7.0
kevindew Sep 2, 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
162 changes: 162 additions & 0 deletions .stylelintrc.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
---
extends: stylelint-config-gds/scss
ignoreFiles: src/govuk/vendor/**/*
plugins:
- stylelint-order
rules:
# govuk-frontend has a specific ordering pattern that should be applied to
# rules
#
# https://github.com/hudochenkov/stylelint-order/blob/master/rules/properties-order/README.md
order/properties-order:
- content
- quotes
# Box-sizing - Allow here until global is decided
- box-sizing

- display
- visibility

- position
- z-index
- top
- right
- bottom
- left

- width
- min-width
- max-width
- height
- min-height
- max-height

- margin
- margin-top
- margin-right
- margin-bottom
- margin-left

- padding
- padding-top
- padding-right
- padding-bottom
- padding-left

- float
- clear

- overflow
- overflow-x
- overflow-y

- clip
- clip-path
- zoom
- resize

- columns

- table-layout
- empty-cells
- caption-side
- border-spacing
- border-collapse

- list-style
- list-style-position
- list-style-type
- list-style-image

- transform
- transition
- animation

- border
- border-top
- border-right
- border-bottom
- border-left

- border-width
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width

- border-style
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style

- border-radius
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius

- border-color
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color

- outline
- outline-color
- outline-offset
- outline-style
- outline-width

- opacity
# Color has been moved to ensure it appears before background
- color
- background
- background-color
- background-image
- background-repeat
- background-position
- background-size
- box-shadow
- fill

- font
- font-family
- font-size
- font-style
- font-variant
- font-weight

- font-emphasize

- letter-spacing
- line-height
- list-style
- word-spacing

- text-align
- text-align-last
- text-decoration
- text-indent
- text-justify
- text-overflow
- text-overflow-ellipsis
- text-overflow-mode
- text-rendering
- text-outline
- text-shadow
- text-transform
- text-wrap
- word-wrap
- word-break

- text-emphasis

- vertical-align
- white-space
- word-spacing
- hyphens

- src
- cursor
- -webkit-appearance
38 changes: 18 additions & 20 deletions app/assets/scss/partials/_app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,24 @@
// Injected into the preview page, that is then put in an iframe
.app-iframe-in-component-preview {
margin: 15px 0;

// Highlight the whitespace around a component, so you can see without having to
// inspect it.
.app-whitespace-highlight {
$app-preview-border-colour: #e4f2ff;

@include govuk-clearfix;

content: " ";
display: table;
width: 100%;
clear: both;
box-shadow: 0 0 0 5px $app-preview-border-colour;

@include govuk-if-ie8 {
outline: 5px solid $app-preview-border-colour;
}
}
}

// Removes the breakpoint sass-mq debug display
Expand All @@ -34,23 +52,3 @@
width: 100%;
border: 0;
}

// Highlight the whitespace around a component, so you can see without having to
// inspect it.
.app-iframe-in-component-preview {
$app-preview-border-colour: #e4f2ff;

.app-whitespace-highlight {
@include govuk-clearfix;

content: " ";
display: table;
width: 100%;
clear: both;
box-shadow: 0 0 0 5px $app-preview-border-colour;

@include govuk-if-ie8 {
outline: 5px solid $app-preview-border-colour;
}
}
}
2 changes: 1 addition & 1 deletion app/assets/scss/partials/_banner.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

.govuk-link {
color: govuk-colour("white");
}
}

.govuk-link:focus {
color: $govuk-focus-text-colour;
Expand Down
1 change: 0 additions & 1 deletion app/assets/scss/partials/_prose.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.app-prose-scope {

h1 {
@extend %govuk-heading-xl;
}
Expand Down
3 changes: 3 additions & 0 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ require('./tasks/gulp/watch.js')
require('./tasks/gulp/copy-to-destination.js')
require('./tasks/gulp/asset-version.js')
require('./tasks/gulp/sassdoc.js')
require('./tasks/gulp/stylelint.js')

// Umbrella scripts tasks for preview ---
// Runs js lint and compilation
Expand All @@ -28,6 +29,7 @@ gulp.task('scripts', gulp.series(
// --------------------------------------
gulp.task('styles', gulp.series(
'scss:lint',
'scss:stylelint',
'scss:compile'
))

Expand All @@ -44,6 +46,7 @@ gulp.task('copy:assets', () => {
// --------------------------------------
gulp.task('test', gulp.series(
'scss:lint',
'scss:stylelint',
'scss:compile'
))

Expand Down
Loading