Skip to content

Stylelint: configure wp theme style tokens build & linting #111395

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

Closed
simison wants to merge 3 commits into from
Closed

Stylelint: configure wp theme style tokens build & linting #111395

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
f406971
Add WPDS design token linting and build-time fallbacks.
simison Jun 5, 2026
12bf79f
Fix WPDS design token stylelint violations.
simison Jun 5, 2026
0d15038
^0.13.0
simison Jun 5, 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
8 changes: 5 additions & 3 deletions .stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,17 @@
"plugins": [
"@signal-noise/stylelint-scales",
"@wordpress/theme/stylelint-plugins/no-unknown-ds-tokens",
"@wordpress/theme/stylelint-plugins/no-setting-wpds-custom-properties"
"@wordpress/theme/stylelint-plugins/no-setting-wpds-custom-properties",
"@wordpress/theme/stylelint-plugins/no-token-fallback-values"
],
"reportInvalidScopeDisables": true,
"reportNeedlessDisables": true,
"rules": {
"at-rule-empty-line-before": null,
"at-rule-no-unknown": null,
"plugin-wpds/no-unknown-ds-tokens": null,
"plugin-wpds/no-setting-wpds-custom-properties": null,
"plugin-wpds/no-unknown-ds-tokens": true,
"plugin-wpds/no-setting-wpds-custom-properties": true,
"plugin-wpds/no-token-fallback-values": true,
"comment-empty-line-before": null,
"font-weight-notation": null,
"no-descending-specificity": null,
Expand Down
4 changes: 2 additions & 2 deletions apps/blaze-dashboard/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const path = require( 'path' );
const process = require( 'process' ); // eslint-disable-line
const { getPostCssPlugins } = require( '@automattic/calypso-build/postcss-plugins' );
const FileConfig = require( '@automattic/calypso-build/webpack/file-loader' );
const Minify = require( '@automattic/calypso-build/webpack/minify' );
const SassConfig = require( '@automattic/calypso-build/webpack/sass' );
Expand All @@ -12,7 +13,6 @@ const {
defaultRequestToExternal,
defaultRequestToHandle,
} = require( '@wordpress/dependency-extraction-webpack-plugin/lib/util' );
const autoprefixerPlugin = require( 'autoprefixer' );
const webpack = require( 'webpack' );
const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
const cacheIdentifier = require( '../../build-tools/babel/babel-loader-cache-identifier' );
Expand Down Expand Up @@ -95,7 +95,7 @@ module.exports = {
// This is required because Calypso imports `@automattic/notifications` and that package defines its
// own `postcss.config.js` that they use for their webpack bundling process.
config: false,
plugins: [ autoprefixerPlugin() ],
plugins: getPostCssPlugins(),
},
prelude: `@use '${ require.resolve(
'calypso/assets/stylesheets/shared/_utils.scss'
Expand Down
4 changes: 2 additions & 2 deletions apps/odyssey-stats/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const path = require( 'path' );
const process = require( 'process' ); // eslint-disable-line
const { getPostCssPlugins } = require( '@automattic/calypso-build/postcss-plugins' );
const FileConfig = require( '@automattic/calypso-build/webpack/file-loader' );
const Minify = require( '@automattic/calypso-build/webpack/minify' );
const SassConfig = require( '@automattic/calypso-build/webpack/sass' );
Expand All @@ -12,7 +13,6 @@ const {
defaultRequestToExternal,
defaultRequestToHandle,
} = require( '@wordpress/dependency-extraction-webpack-plugin/lib/util' );
const autoprefixerPlugin = require( 'autoprefixer' );
const webpack = require( 'webpack' );
const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
const cacheIdentifier = require( '../../build-tools/babel/babel-loader-cache-identifier' );
Expand Down Expand Up @@ -99,7 +99,7 @@ module.exports = {
// This is required because Calypso imports `@automattic/notifications` and that package defines its
// own `postcss.config.js` that they use for their webpack bundling process.
config: false,
plugins: [ autoprefixerPlugin() ],
plugins: getPostCssPlugins(),
},
prelude: `@use '${ require.resolve(
'calypso/assets/stylesheets/shared/_utils.scss'
Expand Down
22 changes: 11 additions & 11 deletions client/components/jetpack/jetpack-footer/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@

.jetpack-footer {
display: flex;
border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
border-top: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
box-sizing: border-box;
color: var(--wpds-color-fg-content-neutral, #1e1e1e);
font-size: var(--wpds-font-size-md, 13px);
color: var(--wpds-color-fg-content-neutral);
font-size: var(--wpds-typography-font-size-md);
padding: var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
width: 100%;

.jetpack-footer__menu-item {
font-family: var(--wpds-font-family-body);
font-size: var(--wpds-font-size-sm, 12px);
font-weight: var(--wpds-font-weight-regular, 400);
line-height: var(--wpds-font-line-height-xs, 16px);
font-family: var(--wpds-typography-font-family-body);
font-size: var(--wpds-typography-font-size-sm);
font-weight: var(--wpds-typography-font-weight-regular);
line-height: var(--wpds-typography-line-height-xs);
Comment on lines -13 to +16

@ciampo ciampo Jun 8, 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.

Same here re. Text component

text-underline-offset: 0.2em;

&:any-link,
Expand Down Expand Up @@ -44,10 +44,10 @@
}

.jetpack-footer__logo-text {

@ciampo ciampo Jun 8, 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.

Is this an opportunity to use the Text component from @wordpress/ui?

font-family: var(--wpds-font-family-body);
font-size: var(--wpds-font-size-md);
font-weight: var(--wpds-font-weight-regular);
line-height: var(--wpds-font-line-height-sm);
font-family: var(--wpds-typography-font-family-body);
font-size: var(--wpds-typography-font-size-md);
font-weight: var(--wpds-typography-font-weight-regular);
line-height: var(--wpds-typography-line-height-sm);
}

a.jetpack-footer__a8c {
Expand Down
2 changes: 2 additions & 0 deletions client/lib/color-scheme/dark-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,11 @@ This mixin generates alias variables for a color palette. For example, the
--wp-components-color-accent-darker-10: var( --studio-blue-90 );
--wp-components-color-accent-darker-20: var( --studio-blue-100 );
--wp-components-color-accent-inverted: #fff;
/* stylelint-disable plugin-wpds/no-setting-wpds-custom-properties -- Dark theme maps WPDS brand tokens to the Calypso accent palette. */
--wpds-color-fg-interactive-brand: var( --wp-components-color-accent );
--wpds-color-fg-interactive-brand-active: var( --wp-components-color-accent-darker-20 );
--wpds-color-stroke-focus-brand: var( --wp-components-color-accent );
/* stylelint-enable plugin-wpds/no-setting-wpds-custom-properties */
--wp-components-color-gray-800: #e0e0e0;
--wp-components-color-gray-700: #bdbdbd;
--wp-components-color-gray-600: #8a8a8a;
Expand Down
4 changes: 2 additions & 2 deletions client/my-sites/earn/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ body.is-section-jetpack-monetize {
.section-nav {
background: none;
box-shadow: none;
padding: 0 var(--wpds-dimension-padding-2xl, 24px);
border-bottom: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
padding: 0 var(--wpds-dimension-padding-2xl);
border-bottom: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
}
}

Expand Down
42 changes: 21 additions & 21 deletions client/my-sites/podcast/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ body.is-section-podcasting {
// which Calypso's unlayered button reset overrides. Restore the package
// defaults (16px horizontal padding) and add a separator under the tab bar.
.podcast__tabs-bar {
border-block-end: 1px solid var( --wpds-color-stroke-base-tertiary, #dcdcde );
border-block-end: 1px solid var( --wpds-color-stroke-surface-neutral );
margin-block-end: 24px;
}

.podcast__tabs [role='tab'] {
padding-inline: var( --wpds-dimension-padding-lg, 16px );
padding-inline: var( --wpds-dimension-padding-lg );
}

.podcast__section-header {
Expand All @@ -29,14 +29,14 @@ body.is-section-podcasting {
font-size: 28px;
font-weight: 400;
line-height: 1.2;
color: var( --wpds-color-fg-content-neutral, #1e1e1e );
color: var( --wpds-color-fg-content-neutral );
}

.podcast__section-description {
margin: 0;
font-size: 13px;
line-height: 1.4;
color: var( --wpds-color-fg-content-neutral-weak, #757575 );
color: var( --wpds-color-fg-content-neutral-weak );
}

.podcast__directory-list {
Expand All @@ -47,7 +47,7 @@ body.is-section-podcasting {

.podcast__directory-row {
padding-block: 12px;
border-block-end: 1px solid var( --wpds-color-stroke-base-tertiary, #dcdcde );
border-block-end: 1px solid var( --wpds-color-stroke-surface-neutral );

&:last-child {
border-block-end: none;
Expand Down Expand Up @@ -109,30 +109,30 @@ body.is-section-podcasting {
justify-content: center;
flex-direction: column;
gap: 4px;
border: 2px dashed var( --wpds-color-stroke-base-tertiary, #c3c4c7 );
background: var( --wpds-color-bg-surface-base-secondary, #f6f7f7 );
border: 2px dashed var( --wpds-color-stroke-surface-neutral );
background: var( --wpds-color-bg-surface-neutral-weak );
transition: border-color 0.15s ease, background-color 0.15s ease;

&::before {
content: '+';
font-size: 28px;
font-weight: 400;
line-height: 1;
color: var( --wpds-color-fg-content-neutral-weak, #757575 );
color: var( --wpds-color-fg-content-neutral-weak );
}

&:hover:not( :disabled ),
&:focus-visible {
border-color: var( --wpds-color-stroke-status-info-strong, #007cba );
background: var( --wpds-color-bg-surface-base, #fff );
border-color: var( --wpds-color-stroke-surface-info-strong );
background: var( --wpds-color-bg-surface-neutral-strong );
}
}

.podcast__settings-cover .podcast-cover-image-setting__preview.is-blank
.podcast-cover-image-setting__placeholder {
font-style: normal;
font-size: 12px;
color: var( --wpds-color-fg-content-neutral-weak, #757575 );
color: var( --wpds-color-fg-content-neutral-weak );
}

.podcast__settings-cover
Expand Down Expand Up @@ -205,7 +205,7 @@ body.is-section-podcasting {
inset-block-start: 0;
inset-inline-end: 16px;
padding: 4px 10px;
background: var( --wpds-color-bg-content-neutral-medium, #50575e );
background: var( --wpds-color-bg-interactive-neutral-strong );

@ciampo ciampo Jun 8, 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.

Looks like we're using a interactive DS token for non-interactive UI (badge)

color: #fff;
font-size: 10px;
font-weight: 600;
Expand All @@ -216,7 +216,7 @@ body.is-section-podcasting {
z-index: 1;

&.is-recommended {
background: var( --wpds-color-bg-status-success-strong, #1a8d36 );
background: var( --wpds-color-stroke-surface-success-strong );

@ciampo ciampo Jun 8, 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.

We shouldn't be using a stroke DS token for a background color

}
}

Expand Down Expand Up @@ -249,7 +249,7 @@ body.is-section-podcasting {
background:
radial-gradient( circle at 0% 0%, var( --studio-blue-0, #f0f6fc ) 0%, transparent 50% ),
radial-gradient( circle at 100% 100%, var( --studio-purple-0, #fdf3fc ) 0%, transparent 50% ),
var( --wpds-color-bg-surface-base, #fff );
var( --wpds-color-bg-surface-neutral-strong );

@media ( max-width: 900px ) {
grid-template-columns: 1fr;
Expand Down Expand Up @@ -298,7 +298,7 @@ body.is-section-podcasting {
.podcast__welcome-benefit-icon {
display: inline-flex;
align-items: center;
color: var( --wpds-color-fg-content-neutral, #1e1e1e );
color: var( --wpds-color-fg-content-neutral );

svg {
inline-size: 24px;
Expand Down Expand Up @@ -331,7 +331,7 @@ body.is-section-podcasting {
inline-size: 32px;
block-size: 32px;
border-radius: 50%;
background: var( --wpds-color-bg-content-neutral-strong, #2c3338 );
background: var( --wpds-color-bg-interactive-neutral-strong );

@ciampo ciampo Jun 8, 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.

Same here — we shoulnd't use interactive DS tokens for non=interactive UI

color: #fff;
font-size: 14px;
font-weight: 600;
Expand All @@ -349,15 +349,15 @@ body.is-section-podcasting {

.podcast__submit-step {
padding: 16px;
background: var( --wpds-color-bg-surface-tertiary, #f6f7f7 );
background: var( --wpds-color-bg-surface-neutral-weak );
border-radius: 8px;
}

.podcast__submit-step-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var( --wpds-color-fg-content-neutral, #1e1e1e );
color: var( --wpds-color-fg-content-neutral );
}

.podcast__submit-step-row {
Expand Down Expand Up @@ -387,14 +387,14 @@ body.is-section-podcasting {
flex: 1;
min-width: 0;
padding: 8px 12px;
background: var( --wpds-color-bg-surface, #fff );
border: 1px solid var( --wpds-color-border-neutral, #ddd );
background: var( --wpds-color-bg-surface-neutral-strong );
border: 1px solid var( --wpds-color-stroke-surface-neutral );
border-radius: 4px;
}

.podcast__submit-step-saved-icon {
flex-shrink: 0;
color: var( --wpds-color-fg-content-success, #007a3d );
color: var( --wpds-color-fg-content-success );

// Gutenberg's Icon paths use fill="currentColor"; force any stray fill="none"
// or hard-coded colors to inherit so the success token actually wins.
Expand Down
2 changes: 1 addition & 1 deletion client/my-sites/stats/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ $font-sf-pro-display: "SF Pro Display", $sans;
// `@media (max-width: $break-small)` rule.
@media (min-width: ($break-small + 1px)) {
background: var(--wpds-color-bg-surface-neutral-strong);
padding-inline: var(--wpds-dimension-padding-2xl, 24px);
padding-inline: var(--wpds-dimension-padding-2xl);
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions client/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/

const path = require( 'path' );
const { getPostCssPlugins } = require( '@automattic/calypso-build/postcss-plugins' );
const FileConfig = require( '@automattic/calypso-build/webpack/file-loader' );
const Minify = require( '@automattic/calypso-build/webpack/minify' );
const SassConfig = require( '@automattic/calypso-build/webpack/sass' );
Expand All @@ -15,7 +16,6 @@ const ExtensiveLodashReplacementPlugin = require( '@automattic/webpack-extensive
const InlineConstantExportsPlugin = require( '@automattic/webpack-inline-constant-exports-plugin' );
const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' );
const SentryCliPlugin = require( '@sentry/webpack-plugin' );
const autoprefixerPlugin = require( 'autoprefixer' );
const CircularDependencyPlugin = require( 'circular-dependency-plugin' );
const Dotenv = require( 'dotenv-webpack' );
const DuplicatePackageCheckerPlugin = require( 'duplicate-package-checker-webpack-plugin' );
Expand Down Expand Up @@ -296,7 +296,7 @@ const webpackConfig = {
// This is required because Calypso imports `@automattic/notifications` and that package defines its
// own `postcss.config.js` that they use for their webpack bundling process.
config: false,
plugins: [ autoprefixerPlugin() ],
plugins: getPostCssPlugins(),
},
prelude: `@use 'calypso/assets/stylesheets/shared/_utils.scss' as *;`,
} ),
Expand Down
1 change: 1 addition & 0 deletions packages/calypso-build/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"@swc/core": "^1.11.24",
"@types/webpack-env": "^1.18.8",
"@wordpress/browserslist-config": "^6.46.0",
"@wordpress/theme": "^0.13.0",

@ciampo ciampo Jun 8, 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.

Nit: not in alphabetical order

"@wordpress/dependency-extraction-webpack-plugin": "^6.24.0",
"autoprefixer": "^10.4.21",
"babel-loader": "^8.2.3",
Expand Down
25 changes: 25 additions & 0 deletions packages/calypso-build/postcss-plugins.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
const dsTokenFallbacks =
require( '@wordpress/theme/postcss-plugins/postcss-ds-token-fallbacks' ).default;
const autoprefixer = require( 'autoprefixer' );
const postcssCustomProperties = require( 'postcss-custom-properties' );

/**
* Returns the PostCSS plugins used across Calypso style builds.
*
* @param {Object} options
* @param {boolean} options.customProperties Whether to include `postcss-custom-properties`.
* @returns {import('postcss').AcceptedPlugin[]}
*/
function getPostCssPlugins( { customProperties = false } = {} ) {
const plugins = [];

if ( customProperties ) {
plugins.push( postcssCustomProperties() );
}

plugins.push( dsTokenFallbacks(), autoprefixer() );

return plugins;
}

module.exports = { getPostCssPlugins };
7 changes: 3 additions & 4 deletions packages/calypso-build/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
const { getPostCssPlugins } = require( './postcss-plugins' );

module.exports = () => ( {
plugins: {
'postcss-custom-properties': {},
autoprefixer: {},
},
plugins: getPostCssPlugins( { customProperties: true } ),
} );
Loading