Skip to content

Stylelint: no WPDS token fallback values for WP Build routes #50502

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

Merged
simison merged 3 commits into from
Jul 14, 2026
Merged

Stylelint: no WPDS token fallback values for WP Build routes #50502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9bf88d6
Stylelint: no token fallback values for WP Build dashboards
simison Jul 14, 2026
fc5ed1d
Remove manual WPDS token fallbacks
simison Jul 14, 2026
c9137da
Changelogs
simison Jul 14, 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
4 changes: 4 additions & 0 deletions projects/packages/forms/changelog/update-stylelint-wp-build-no-token-fallback-values
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Comment: Remove manual WPDS token fallbacks from wp-build route styles so build-time PostCSS injects canonical design-token fallbacks.
14 changes: 7 additions & 7 deletions projects/packages/forms/routes/response/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@
flex-wrap: wrap;

&__link {
font-size: var(--wpds-typography-font-size-lg, 15px);
line-height: var(--wpds-typography-line-height-md, 24px);
font-size: var(--wpds-typography-font-size-lg);
line-height: var(--wpds-typography-line-height-md);
}

&__sep {
Expand All @@ -45,12 +45,12 @@

&__current {
margin: 0;
font-family: var(--wpds-typography-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", sans-serif);
font-size: var(--wpds-typography-font-size-lg, 15px);
font-weight: var(--wpds-typography-font-weight-medium, 499);
line-height: var(--wpds-typography-line-height-sm, 20px);
font-family: var(--wpds-typography-font-family-heading);
font-size: var(--wpds-typography-font-size-lg);
font-weight: var(--wpds-typography-font-weight-medium);
line-height: var(--wpds-typography-line-height-sm);
// Match the page-title color used on the other dashboard headers.
color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
color: var(--wpds-color-foreground-content-neutral);
}
}

Expand Down
4 changes: 2 additions & 2 deletions projects/packages/forms/routes/responses/response/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ $inspector-padding: 16px;

.jp-forms-response-header {
padding: 8px;
border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #e0e0e0);
border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral);
}

.jp-forms-response-header-actions {
gap: 0 !important;
}

.jp-forms__inbox__tip-container {
border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #e0e0e0);
border-top: 1px solid var(--wpds-color-stroke-surface-neutral);
margin: auto 0 0 0;
padding: $inspector-padding;
text-wrap: pretty;
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/dashboard/wp-build/components/dataviews-header-row/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use "@wordpress/base-styles/variables";

.jp-forms-dataviews__view-actions {
border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #e0e0e0);
border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral);
padding-inline: 20px;
overflow-x: auto;
width: 100%;
Expand Down
4 changes: 4 additions & 0 deletions projects/packages/newsletter/changelog/update-stylelint-wp-build-no-token-fallback-values
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Comment: Remove manual WPDS token fallbacks from wp-build route styles so build-time PostCSS injects canonical design-token fallbacks.
18 changes: 9 additions & 9 deletions projects/packages/newsletter/routes/dashboard/route.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
// TODO: drop the manual color override once a design-system "muted text" tone
// lands on `Text` (see https://github.com/WordPress/gutenberg/issues/77391).
.jetpack-newsletter__identity-email {
color: var(--wpds-color-foreground-content-neutral-weak, #50575e);
color: var(--wpds-color-foreground-content-neutral-weak);
}

// Inline avatar in the identity cell — keep it circular and prevent the
Expand All @@ -16,14 +16,14 @@

// Inspector panel chrome.
.jetpack-newsletter__panel-header {
border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #f0f0f1);
padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-lg, 16px);
border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral);
padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-lg);
}

.jetpack-newsletter__panel-body {
flex-grow: 1;
overflow-y: auto;
padding: var(--wpds-dimension-padding-2xl, 24px);
padding: var(--wpds-dimension-padding-2xl);
}

// Subscriber detail layout.
Expand All @@ -40,7 +40,7 @@
// TODO: replace with `Text` "muted" tone once available
// (see https://github.com/WordPress/gutenberg/issues/77391).
.jetpack-newsletter__detail-email {
color: var(--wpds-color-foreground-content-neutral-weak, #50575e);
color: var(--wpds-color-foreground-content-neutral-weak);
}

// Stat row — Emails sent / Open rate / Click rate.
Expand All @@ -54,18 +54,18 @@
// padding-lg (16px).
.jetpack-newsletter__detail-stat,
.jetpack-newsletter__detail-section {
--wp-ui-card-padding: var(--wpds-dimension-padding-lg, 16px);
--wp-ui-card-padding: var(--wpds-dimension-padding-lg);
}

.jetpack-newsletter__detail-stat-value {
display: block;
margin-top: var(--wpds-dimension-gap-sm, 8px);
margin-top: var(--wpds-dimension-gap-sm);
}

// Grouped sections — Card already provides the outer border, so rows just sit
// in a column with the design-system gap.
.jetpack-newsletter__detail-row-label {
color: var(--wpds-color-foreground-content-neutral-weak, #50575e);
color: var(--wpds-color-foreground-content-neutral-weak);
}

.jetpack-newsletter__detail-link {
Expand All @@ -77,5 +77,5 @@
// checkbox — as it sits flush against the bottom edge. Reserve a little space
// so the ring renders in full.
.jetpack-newsletter__comp-modal-body {
padding-bottom: var(--wpds-dimension-padding-xs, 4px);
padding-bottom: var(--wpds-dimension-padding-xs);
}
4 changes: 2 additions & 2 deletions projects/packages/newsletter/routes/subscribers-announcement/route.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@ body.admin_page_jetpack-subscribers {

&__inner {
align-items: flex-start;
padding: 48px var(--wpds-dimension-padding-2xl, 24px) 64px;
padding: 48px var(--wpds-dimension-padding-2xl) 64px;
}

&__subtitle {
margin-block: 12px 0;
color: var(--wpds-color-foreground-content-neutral-weak, #3c434a);
color: var(--wpds-color-foreground-content-neutral-weak);
}

&__cta {
Expand Down
4 changes: 4 additions & 0 deletions ...s/packages/premium-analytics/changelog/update-stylelint-wp-build-no-token-fallback-values
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Comment: Remove manual WPDS token fallbacks from wp-build route styles so build-time PostCSS injects canonical design-token fallbacks.
2 changes: 1 addition & 1 deletion ...m-analytics/routes/dashboard/components/dashboard-sections/dashboard-sections.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@
}

.tabList {
padding-inline: var(--wpds-dimension-padding-2xl, 24px);
padding-inline: var(--wpds-dimension-padding-2xl);
}
8 changes: 4 additions & 4 deletions projects/packages/premium-analytics/routes/dashboard/stage.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@
min-block-size: 0;
overflow-y: auto;
// Reserve paint space for the widget host's outer focus outline.
padding-block-start: calc(var(--wpds-border-width-focus, 2px) + 2px);
padding-block-start: calc(var(--wpds-border-width-focus) + 2px);
// Match the horizontal padding of the page header and the section tabs so the
// widget grid lines up with them instead of sitting flush to the edge.
padding-block-end: 24px;
padding-inline: var(--wpds-dimension-padding-2xl, 24px);
padding-inline: var(--wpds-dimension-padding-2xl);
}

.dateFilters {
// Sits below the section tabs and above the widgets. The tab list already
// adds a bottom margin, so only pad below here to keep the spacing even.
// Inline padding matches the tabs and widget grid so it lines up.
padding-block-end: var(--wpds-dimension-gap-lg, 16px);
padding-inline: var(--wpds-dimension-padding-2xl, 24px);
padding-block-end: var(--wpds-dimension-gap-lg);
padding-inline: var(--wpds-dimension-padding-2xl);
}
2 changes: 1 addition & 1 deletion ...ium-analytics/routes/post-detail/components/post-detail-tabs/post-detail-tabs.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.tabList {
padding-inline: var(--wpds-dimension-padding-2xl, 24px);
padding-inline: var(--wpds-dimension-padding-2xl);
}
20 changes: 10 additions & 10 deletions ...m-analytics/routes/post-detail/components/post-summary-card/post-summary-card.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,37 @@
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--wpds-dimension-gap-lg, 16px);
gap: var(--wpds-dimension-gap-lg);
border:
var(--wpds-border-width-xs, 1px) solid
var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
border-radius: var(--wpds-border-radius-md, 8px);
padding: var(--wpds-dimension-padding-2xl, 24px);
var(--wpds-border-width-xs) solid
var(--wpds-color-stroke-surface-neutral-weak);
border-radius: var(--wpds-border-radius-md);
padding: var(--wpds-dimension-padding-2xl);
}

.details {
display: flex;
flex-direction: column;
gap: var(--wpds-dimension-gap-xs, 4px);
gap: var(--wpds-dimension-gap-xs);
min-inline-size: 0;
}

.type {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--wpds-dimension-gap-xs, 4px);
color: var(--wpds-color-foreground-content-neutral-weak, #757575);
gap: var(--wpds-dimension-gap-xs);
color: var(--wpds-color-foreground-content-neutral-weak);
}

.published {
color: var(--wpds-color-foreground-content-neutral-weak, #757575);
color: var(--wpds-color-foreground-content-neutral-weak);
}

.image {
flex: 0 0 auto;
inline-size: 72px;
block-size: 72px;
object-fit: cover;
border-radius: var(--wpds-border-radius-sm, 6px);
border-radius: var(--wpds-border-radius-sm);
}
12 changes: 6 additions & 6 deletions projects/packages/premium-analytics/routes/post-detail/stage.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,23 @@
min-block-size: 0;
overflow-y: auto;
// Reserve paint space for the widget host's outer focus outline.
padding-block-start: calc(var(--wpds-border-width-focus, 2px) + 2px);
padding-block-start: calc(var(--wpds-border-width-focus) + 2px);
// Match the horizontal padding of the tab bar and header so the widget grid
// lines up with them instead of sitting flush to the edge.
padding-block-end: 24px;
padding-inline: var(--wpds-dimension-padding-2xl, 24px);
padding-inline: var(--wpds-dimension-padding-2xl);
}

.summary {
// Sits below the tab bar and above the date filters, aligned with the tabs
// and widget grid.
padding-block-end: var(--wpds-dimension-gap-lg, 16px);
padding-inline: var(--wpds-dimension-padding-2xl, 24px);
padding-block-end: var(--wpds-dimension-gap-lg);
padding-inline: var(--wpds-dimension-padding-2xl);
}

.dateFilters {
// Sits below the summary card and above the widgets. Only pad below to keep
// the spacing even; inline padding matches the tabs and widget grid.
padding-block-end: var(--wpds-dimension-gap-lg, 16px);
padding-inline: var(--wpds-dimension-padding-2xl, 24px);
padding-block-end: var(--wpds-dimension-gap-lg);
padding-inline: var(--wpds-dimension-padding-2xl);
}
2 changes: 1 addition & 1 deletion projects/packages/premium-analytics/routes/reports/posts/config/fields.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.homepageLink {
display: inline-flex;
align-items: center;
gap: var(--wpds-dimension-gap-xs, 4px);
gap: var(--wpds-dimension-gap-xs);

@anomiex anomiex Jul 14, 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.

It seems the plugin didn't add a fallback for this one for some reason.

@simison simison Jul 14, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

🤔 Just checked it's a real valid token.

https://wordpress.github.io/gutenberg/?path=/docs/design-system-tokens-introduction--docs#dimension

}

.externalIcon {
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/premium-analytics/routes/reports/posts/page.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
* with it instead of sitting flush to the edge.
*/
padding-block-end: 24px;
padding-inline: var(--wpds-dimension-padding-2xl, 24px);
padding-inline: var(--wpds-dimension-padding-2xl);

@anomiex anomiex Jul 14, 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.

It seems the plugin didn't add a fallback for this one for some reason.

}

.dateFilters {
Expand Down
4 changes: 4 additions & 0 deletions projects/packages/videopress/changelog/update-stylelint-wp-build-no-token-fallback-values
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Comment: Remove manual WPDS token fallbacks from wp-build route styles so build-time PostCSS injects canonical design-token fallbacks.
20 changes: 10 additions & 10 deletions projects/packages/videopress/routes/overview/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
inset-inline: 0;
bottom: 0;
height: 3px;
background: var(--wpds-color-stroke-interactive-neutral-strong, #1d35b4);
background: var(--wpds-color-stroke-interactive-neutral-strong);
border-end-start-radius: inherit;
border-end-end-radius: inherit;
opacity: 0;
Expand All @@ -50,7 +50,7 @@
}

&:focus-visible {
outline: 2px solid var(--wpds-color-stroke-focus, #1d35b4);
outline: 2px solid var(--wpds-color-stroke-focus);
outline-offset: -2px;
}
}
Expand Down Expand Up @@ -210,26 +210,26 @@
// than the LineChart's default light card. The chart's visx-tooltip
// system handles positioning; we only style the inner content.
&__chart-tooltip {
padding: var(--wpds-dimension-padding-sm, 8px);
padding: var(--wpds-dimension-padding-sm);
background-color: rgba(0, 0, 0, 0.85);
color: #fff;
border-radius: var(--wpds-border-radius-md, 4px);
font-size: var(--wpds-typography-font-size-md, 13px);
border-radius: var(--wpds-border-radius-md);
font-size: var(--wpds-typography-font-size-md);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

&__chart-tooltip-date {
font-weight: var(--wpds-typography-font-weight-medium, 499);
padding-bottom: var(--wpds-dimension-padding-md, 12px);
font-weight: var(--wpds-typography-font-weight-medium);
padding-bottom: var(--wpds-dimension-padding-md);
}

&__chart-tooltip-row {
padding: var(--wpds-dimension-padding-xs, 4px) 0;
padding: var(--wpds-dimension-padding-xs) 0;
}

&__chart-tooltip-label {
font-weight: var(--wpds-typography-font-weight-medium, 499);
padding-right: var(--wpds-dimension-padding-lg, 16px);
font-weight: var(--wpds-typography-font-weight-medium);
padding-right: var(--wpds-dimension-padding-lg);
}

&__storage-meter {
Expand Down
25 changes: 24 additions & 1 deletion tools/js-tools/stylelint.config.base.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ const baseConfig = {
rules: {
'plugin-wpds/no-unknown-ds-tokens': true,
'plugin-wpds/no-setting-wpds-custom-properties': true,
'plugin-wpds/no-token-fallback-values': null, // Disabled because `@wordpress/theme/postcss-plugins/postcss-ds-token-fallbacks` is not configured yet.
// Disabled globally: only wp-build dashboards configure `@wordpress/theme/postcss-plugins/postcss-ds-token-fallbacks`
// which adds fallbacks at build time.
'plugin-wpds/no-token-fallback-values': null,
// In addition to what `@wordpress/stylelint-config/scss-stylistic` does by default, also ignore comments containing /stylelint-disable/.
'@stylistic/max-line-length': [
80,
Expand Down Expand Up @@ -84,6 +86,27 @@ const baseConfig = {
},
],
},
overrides: [

@anomiex anomiex Jul 14, 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.

I'd really rather we don't have a big list of permanent overrides in this global configuration file, that people will have to know to maintain. Are these meant to be temporary? If not, please move these into stylelint config files in each project.

@simison simison Jul 14, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I agree and they're indeed meant to be temporary and going away as soon as everything can be linted with the same rule across the repo. It's just easier to migrate in smaller chunks, and this was most pragmatic temporary solution.

Hopefully no longer than just this week!

@anomiex anomiex Jul 14, 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.

ok, thanks! 🙂

@simison simison Jul 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Aight, got pretty far!

Among files with --wpds-* the linter + build time fallbacks now cover:

Covered Total %
Files 147 173 85.0%
Packages 16 21 76.2%

Not on the rule: charts, components, base-styles, social-previews, plugins/jetpack

I might flip the rule the other way around; ignore those and apply everywhere else.

Those others are pretty complicated:

  • charts and social-previews use LightningCSS, not PostCSS
  • Jetpack plugin still relies on old Calypso colour schemes a little too much
  • components and base-styles are just unique cases otherwise

I will continue after short vacation. :-)

@simison simison Jul 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I might flip the rule the other way around; ignore those and apply everywhere else.

{
// Packages with `build:wp-build` in package.json.
files: [
'projects/packages/backup/routes/**/*.{css,scss,sass}',
'projects/packages/forms/routes/**/*.{css,scss,sass}',
'projects/packages/forms/src/dashboard/wp-build/**/*.{css,scss,sass}',
'projects/packages/jetpack-mu-wpcom/routes/**/*.{css,scss,sass}',
'projects/packages/newsletter/routes/**/*.{css,scss,sass}',
'projects/packages/podcast/routes/**/*.{css,scss,sass}',
'projects/packages/premium-analytics/routes/**/*.{css,scss,sass}',
'projects/packages/publicize/routes/**/*.{css,scss,sass}',
'projects/packages/scan/routes/**/*.{css,scss,sass}',
'projects/packages/seo/routes/**/*.{css,scss,sass}',
'projects/packages/videopress/routes/**/*.{css,scss,sass}',
],
rules: {
'plugin-wpds/no-token-fallback-values': true,
},
},
],
};

export default baseConfig;
Loading