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

build: use stylelint #1836

Open
wants to merge 4 commits into
base: gh-pages
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ jobs:
node-version: 20

- name: Install Node.js dependencies
run: npm install
run: npm ci

- name: Run tests
- name: Run Lint
shell: bash
run: npm test
run: npm run lint

- name: Jekyll Build
run: bundle exec jekyll build
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,5 @@ _site
.jekyll-metadata
vendor
.bundle

.stylelintcache
4 changes: 4 additions & 0 deletions .stylelintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
css/font-awesome.min.css

_site
vendor
12 changes: 12 additions & 0 deletions .stylelintrc.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@

export default {
extends: ['stylelint-config-standard'],
plugins: ['stylelint-order'],
rules: {
// Enforces the order of the CSS properties to be in alphabetical order
'order/properties-alphabetical-order': true,
'no-descending-specificity': null,
// Disables the Level-4 Media Queries; Since they're more exotic and less known
'media-feature-range-notation': 'prefix',
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

consider adding following plugins
https://www.npmjs.com/package/stylelint-high-performance-animation
https://www.npmjs.com/package/stylelint-declaration-block-no-ignored-properties

Also plugin "plugin/use-defensive-css": [true, { "severity": "warning" , "accidental-hover": true, "background-repeat": true }] is useful in our code.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, that will help us maintain better CSS in this repository

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good to me, can we also implement a commit lint along with style lint to maintain a consistent commit message format.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The commit lint not yet, there's no consensus on that since there are limitations in the configuration (see expressjs/discussions#293 (comment), which mentions part of that, and I'm sure there are more issues and PRs that have tried to implement it).

Step by step.

};
8 changes: 4 additions & 4 deletions css/langs/th.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@
}

#description .description {
position: relative;
top: -5px;
font: 100 4.1em "TH SarabunNew", "Helvetica Neue", "Open Sans", sans-serif;
color: #aeaeae;
font: 100 4.1em "TH SarabunNew", "Helvetica Neue", "Open Sans", sans-serif;
line-height: .87;
margin: unset;
position: relative;
top: -5px;
}

/* Non-English pages use pre and code tags for code blocks */
.non-en-doc .page pre[class*="language-"] {
padding-top: 10px !important;
padding-bottom: 10px !important;
padding-top: 10px !important;
}
2 changes: 1 addition & 1 deletion css/search.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
}

.algolia-autocomplete {
min-width: 12em;
max-width: 12em;
min-width: 12em;
top: -0.2em;
}

Expand Down
12 changes: 8 additions & 4 deletions css/sintax.css
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
.highlight table pre { margin: 0; }

.highlight, .highlight .w {
color: #24292f;
background-color: var(--code-bg);
color: #24292f;
}

.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
Expand All @@ -37,8 +37,8 @@
}

.highlight .gd {
color: var(--red-darker);
background-color: #ffebe9;
color: var(--red-darker);
}

.highlight .nb,
Expand All @@ -57,8 +57,8 @@
}

.highlight .ges {
font-weight: bold;
font-style: italic;
font-weight: bold;
}

.highlight .l,
Expand Down Expand Up @@ -95,20 +95,24 @@
.highlight .gh {
font-weight: bold;
}

.highlight .gu {
font-weight: bold;
}

.highlight .s, .highlight .sa, .highlight .sc, .highlight .sd, .highlight .se, .highlight .sh, .highlight .sx, .highlight .ss {
color: var(--blue-darker);
}

.highlight .nd, .highlight .nf, .highlight .fm {
color: var(--pupple);
}

.highlight .err {
color: #f6f8fa;
background-color: #82071e;
color: #f6f8fa;
}

.highlight .c,
.highlight .gl
.highlight .ch,
Expand Down
Loading
Loading