Skip to content

chore: 設定 stylelint(支援 libsass)並導入 husky 提交前自動 lint #76

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

Open
ross-nics wants to merge 2 commits into
base: main
Choose a base branch
from
Open

chore: 設定 stylelint(支援 libsass)並導入 husky 提交前自動 lint #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e87201b
chore: add husky pre-commit hook to lint staged styles
ross-nics Jun 10, 2026
8ea6995
chore: configure stylelint for libsass and fix style lint errors
ross-nics Jun 10, 2026
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
1 change: 1 addition & 0 deletions .husky/pre-commit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
npx lint-staged
8 changes: 8 additions & 0 deletions .stylelintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@
"custom-property-pattern": null,
"scss/comment-no-empty": null,
"scss/at-rule-no-unknown": true,
"scss/no-global-function-names": null,
"no-descending-specificity": null,
"media-feature-range-notation": "prefix",
"color-function-notation": "legacy",
Comment on lines +12 to +13

@gemini-code-assist gemini-code-assist Bot Jun 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

medium

在相容舊版編譯器（如 libsass）與舊版瀏覽器的情境下，rgba() 中的百分比不透明度（例如 rgba(0, 0, 0, 18%)）可能會導致編譯錯誤或解析失敗。\n\n建議在 .stylelintrc.json 中加入 \"alpha-value-notation\": \"number\" 規則，強制使用小數格式（例如 0.18），並還原各樣式檔案中被自動修正為百分比的 alpha 值。

    "media-feature-range-notation": "prefix",
    "color-function-notation": "legacy",
    "alpha-value-notation": "number",

"selector-class-pattern": [
"^[a-z][a-z0-9]*(-[a-z0-9]+)*(__[a-z0-9]+(-[a-z0-9]+)*)?(--[a-z0-9]+(-[a-z0-9]+)*)?$",
{ "message": "Expected class selector to be BEM kebab-case (block__element--modifier)" }
],
"order/order": [
"custom-properties",
"declarations"
Expand Down
27 changes: 11 additions & 16 deletions assets/css/color.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,6 @@
--gov-amber-700: #b85814;
--gov-amber-800: #8a3c0f;
--gov-amber-900: #62361c;





--gov-blue: #0d6efd;
--gov-indigo: #6610f2;
--gov-purple: #6f42c1;
Expand Down Expand Up @@ -109,9 +104,9 @@
--gov-dark-border-subtle: #adb5bd;
--gov-white-rgb: 255, 255, 255;
--gov-black-rgb: 0, 0, 0;
--gov-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--gov-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--gov-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--gov-font-sans-serif: system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--gov-font-monospace: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
--gov-gradient: linear-gradient(180deg, rgba(255, 255, 255, 15%), rgba(255, 255, 255, 0%));
Comment on lines +107 to +109

@nonumpa nonumpa Jun 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

stylelint --fix 目前會把 custom property 裡未加引號的字體名稱轉成小寫，例如 Roboto → roboto、SFMono-Regular → sfmono-regular。雖然多數瀏覽器比對 font family 時通常不區分大小寫，但 Linux fontconfig 在某些設定下可能是 case-sensitive，因此這類大小寫變更仍可能影響字體匹配結果。

建議把非 generic 的字體名稱加上引號，並保留 system-ui、-apple-system、sans-serif、monospace 這類 generic/system keyword 不加引號，例如：

--gov-font-sans-serif: system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans", "Liberation Sans", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--gov-font-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;

--gov-body-font-family: var(--gov-font-sans-serif);
--gov-body-font-size: 1rem;
--gov-body-font-weight: 400;
Expand All @@ -122,11 +117,11 @@
--gov-body-bg-rgb: 255, 255, 255;
--gov-emphasis-color: #000;
--gov-emphasis-color-rgb: 0, 0, 0;
--gov-secondary-color: rgba(33, 37, 41, 0.75);
--gov-secondary-color: rgba(33, 37, 41, 75%);
--gov-secondary-color-rgb: 33, 37, 41;
--gov-secondary-bg: #e9ecef;
--gov-secondary-bg-rgb: 233, 236, 239;
--gov-tertiary-color: rgba(33, 37, 41, 0.5);
--gov-tertiary-color: rgba(33, 37, 41, 50%);
--gov-tertiary-color-rgb: 33, 37, 41;
--gov-tertiary-bg: #f8f9fa;
--gov-tertiary-bg-rgb: 248, 249, 250;
Expand All @@ -142,21 +137,21 @@
--gov-border-width: 1px;
--gov-border-style: solid;
--gov-border-color: #dee2e6;
--gov-border-color-translucent: rgba(0, 0, 0, 0.175);
--gov-border-color-translucent: rgba(0, 0, 0, 17.5%);
--gov-border-radius: 0.375rem;
--gov-border-radius-sm: 0.25rem;
--gov-border-radius-lg: 0.5rem;
--gov-border-radius-xl: 1rem;
--gov-border-radius-xxl: 2rem;
--gov-border-radius-2xl: var(--gov-border-radius-xxl);
--gov-border-radius-pill: 50rem;
--gov-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--gov-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--gov-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
--gov-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
--gov-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 15%);
--gov-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 7.5%);
--gov-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 17.5%);
--gov-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 7.5%);
--gov-focus-ring-width: 0.25rem;
--gov-focus-ring-opacity: 0.25;
--gov-focus-ring-color: rgba(13, 110, 253, 0.25);
--gov-focus-ring-color: rgba(13, 110, 253, 25%);
--gov-form-valid-color: #198754;
--gov-form-valid-border-color: #198754;
--gov-form-invalid-color: #dc3545;
Expand Down
34 changes: 17 additions & 17 deletions assets/css/components/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,35 @@
$accordion-header-bg: var(--backgroundColor);
$accordion-header-active-bg: var(--primaryColor);
$accordion-body-bg: var(--backgroundColor);
$accordion-header-fontColor: var(--textColor);
$accordion-header-active-fontColor: var(--backgroundColor);
$accordion-header-fontcolor: var(--textColor);
$accordion-header-active-fontcolor: var(--backgroundColor);
Comment on lines +5 to +6

@gemini-code-assist gemini-code-assist Bot Jun 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

medium

PR 說明中提到「SCSS 變數改為 kebab-case」，但此處將 fontColor 改為 fontcolor 僅是全小寫，並非標準的 kebab-case。\n\n為了與同檔案中的其他變數（如 $accordion-header-active-bg）保持一致，建議命名為 $accordion-header-font-color 與 $accordion-header-active-font-color。\n\n> ⚠️ 修改後請記得一併更新第 24 行與第 65 行的使用處。

$accordion-header-font-color: var(--textColor); 
$accordion-header-active-font-color: var(--backgroundColor);

$accordion-body-border: var(--borderColor);
$accordion-body-active-border:var(--secondaryTextColor);
$accordion-body-active-border: var(--secondaryTextColor);

/* 相對路徑：部署時 baseURL 含路徑（如 GCS guide-dev/RUN_ID）時，絕對路徑 /svgs/* 會漏掉路徑導致 403 */
$accordion-icon-url: url("svgs/downarrow.svg");
$accordion-icon-active-url: url("svgs/uparrow.svg");

.accordion {
width: 100%;
margin: 0 auto;
width: 100%;

input[type="checkbox"] {
display: none;
}

label {
display: block;
padding: 16px 20px;
background: $accordion-header-bg;
color: $accordion-header-fontColor;
color: $accordion-header-fontcolor;
cursor: pointer;
margin-bottom: 0;
position: relative;

display: block;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.32px;
line-height: 1.4;
margin-bottom: 0;
padding: 16px 20px;
position: relative;
text-align: left;

.main-title {
Expand All @@ -47,36 +47,36 @@ $accordion-icon-active-url: url("svgs/uparrow.svg");
}

&::after {
content: '';
background-image: $accordion-icon-url;
background-repeat: no-repeat;
background-size: 20px;
width: 20px;
content: '';
height: 20px;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 20px;
}
}

input[type="checkbox"]:checked + label {
background: $accordion-header-active-bg;
color: $accordion-header-active-fontColor;
color: $accordion-header-active-fontcolor;

&::after {
background-image: $accordion-icon-active-url;
}
}

.accordion-body {
max-height: 0;
overflow: hidden;
background: $accordion-body-bg;
font-size: 14px;
font-weight: normal;
line-height: 1.4;
letter-spacing: 0.56px;
line-height: 1.4;
max-height: 0;
overflow: hidden;
text-align: left;

input[type="checkbox"]:checked ~ & {
Expand Down
37 changes: 17 additions & 20 deletions assets/css/components/breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
nav.breadcrumb {
padding: 0.8em 1em;
border: 0px solid var(--textColor);
border-radius: 4px;
background: var(--backgroundColor);
border: 0 solid var(--textColor);
border-radius: 4px;
padding: 0.8em 1em;

ol {
list-style: none;
margin: 0;
padding-left: 0;
list-style: none;
}

li {
Expand All @@ -23,18 +23,19 @@ nav.breadcrumb {
// render as slash separator
// use li + li::before to skip the first item
li + li::before {
border-right: 0.1em solid currentcolor;
content: "";
display: inline-block;
height: 0.8em;
margin: 0 0.25em;
transform: rotate(15deg);
border-right: 0.1em solid currentcolor;
height: 0.8em;
content: "";
}

// render as slash separator
&.arrow-separator {
// Size of chevron (excluding border) 7/16 px ≅ 0.4375
$chevron-size: 0.4375em;

// Size of chevron border
$chevron-border-min-width: 1px;
$chevron-border-width: 0.0625em;
Expand All @@ -43,29 +44,25 @@ nav.breadcrumb {
// of length 8 (7px + 1px border):
//
// √(8² + 8²) * 0.5 ≅ 5.655
// 5.655 / 16 ≅ 0.3534375
$chevron-altitude-calculated: 0.3534375em;
// 5.655 / 16 ≅ 0.3534
$chevron-altitude-calculated: 0.3534em;

// use li + li::before to skip the first item
li + li::before {
border: solid;
border-color: var(--textColor);
border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
bottom: 0;

// ref: https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/components/breadcrumbs/_index.scss
// Create a chevron using a box with borders on two sides, rotated 45deg.
content: "";
display: inline-block;

top: 0;
bottom: 0;

width: $chevron-size;
height: $chevron-size;

margin: auto 0.25em;

top: 0;
transform: translateX(-25%) rotate(45deg);

border: solid;
border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
border-color: var(--textColor);
width: $chevron-size;
}
}
}
Loading
Loading