Commit 21d8cecc3c6 for woocommerce
commit 21d8cecc3c664721d4656b8d5fd0a7f0e89f2da4
Author: Mikael Korpela <mikael@ihminen.org>
Date: Tue Oct 6 15:54:28 2026 +0300
Stylelint: use shared config and autofix issues (#69371)
diff --git a/.syncpackrc b/.syncpackrc
index 8f7b46fe7e2..598115c71a3 100644
--- a/.syncpackrc
+++ b/.syncpackrc
@@ -378,7 +378,6 @@
},
{
"dependencies": [
- "@wordpress/stylelint-config",
"@wordpress/scripts",
"@wordpress/jest-console",
"@wordpress/e2e-test-utils"
@@ -600,13 +599,18 @@
"pinVersion": "^3.21.0"
},
{
+ "dependencyTypes": [
+ "prod",
+ "dev"
+ ],
"dependencies": [
+ "@wordpress/stylelint-config",
"stylelint"
],
"packages": [
"**"
],
- "pinVersion": "^16.9.0"
+ "policy": "catalog"
},
{
"dependencies": [
diff --git a/package.json b/package.json
index 1aa4f6e8fa7..ccaa9a81793 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
"@woocommerce/eslint-plugin": "workspace:*",
"@woocommerce/monorepo-utils": "workspace:*",
"@wordpress/prettier-config": "4.49.0",
+ "@wordpress/stylelint-config": "catalog:tooling",
"babel-loader": "9.2.x",
"chalk": "^4.1.2",
"copy-webpack-plugin": "13.0.x",
@@ -67,6 +68,7 @@
"rimraf": "5.0.5",
"sass": "^1.69.5",
"sass-loader": "10.5.x",
+ "stylelint": "catalog:tooling",
"syncpack": "15.3.3",
"typescript": "5.7.x",
"webpack": "catalog:tooling"
diff --git a/packages/js/admin-layout/changelog/add-shared-stylelint-config b/packages/js/admin-layout/changelog/add-shared-stylelint-config
new file mode 100644
index 00000000000..56c6a25a923
--- /dev/null
+++ b/packages/js/admin-layout/changelog/add-shared-stylelint-config
@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Lint styles with the shared stylelint config and apply its autofixes; no visual change.
diff --git a/packages/js/admin-layout/package.json b/packages/js/admin-layout/package.json
index 89c38faa0ac..79383891c0e 100644
--- a/packages/js/admin-layout/package.json
+++ b/packages/js/admin-layout/package.json
@@ -61,7 +61,9 @@
"lint": "pnpm --if-present '/^lint:lang:.*$/'",
"lint:fix": "pnpm --if-present '/^lint:fix:lang:.*$/'",
"lint:fix:lang:js": "eslint src --fix",
+ "lint:fix:lang:style": "stylelint 'src/**/*.scss' --fix",
"lint:lang:js": "eslint src",
+ "lint:lang:style": "stylelint 'src/**/*.scss'",
"lint:lang:types": "tsc --build --emitDeclarationOnly",
"prepack": "pnpm build:publish:project",
"update:php": "XDEBUG_MODE=off composer update --quiet",
@@ -83,6 +85,7 @@
"@wordpress/browserslist-config": "next",
"css-loader": "6.11.x",
"eslint": "^10.0.0",
+ "stylelint": "catalog:tooling",
"jest": "29.5.x",
"jest-cli": "29.5.x",
"postcss-loader": "4.3.x",
@@ -104,7 +107,7 @@
"ci": {
"lint": {
"command": "lint",
- "changes": "src/**/*.{js,jsx,ts,tsx}"
+ "changes": "src/**/*.{js,jsx,ts,tsx,scss}"
}
}
}
diff --git a/packages/js/admin-layout/src/style.scss b/packages/js/admin-layout/src/style.scss
index e69de29bb2d..021e3b1edcc 100644
--- a/packages/js/admin-layout/src/style.scss
+++ b/packages/js/admin-layout/src/style.scss
@@ -0,0 +1,2 @@
+// Intentionally empty. The package ships a stylesheet entry so it follows the same build and
+// asset registration pipeline (wc-admin-layout style handle) as the other @woocommerce/* packages.
diff --git a/packages/js/components/changelog/add-shared-stylelint-config b/packages/js/components/changelog/add-shared-stylelint-config
new file mode 100644
index 00000000000..56c6a25a923
--- /dev/null
+++ b/packages/js/components/changelog/add-shared-stylelint-config
@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Lint styles with the shared stylelint config and apply its autofixes; no visual change.
diff --git a/packages/js/components/package.json b/packages/js/components/package.json
index 135fd049ee9..e5004835c12 100644
--- a/packages/js/components/package.json
+++ b/packages/js/components/package.json
@@ -55,7 +55,9 @@
"lint": "pnpm --if-present '/^lint:lang:.*$/'",
"lint:fix": "pnpm --if-present '/^lint:fix:lang:.*$/'",
"lint:fix:lang:js": "eslint src --fix",
+ "lint:fix:lang:style": "stylelint 'src/**/*.scss' --fix",
"lint:lang:js": "eslint src",
+ "lint:lang:style": "stylelint 'src/**/*.scss'",
"lint:lang:types": "tsc --build --emitDeclarationOnly",
"prepack": "pnpm build:publish:project",
"test:js": "jest --config ./jest.config.json --passWithNoTests",
@@ -172,6 +174,7 @@
"@wordpress/browserslist-config": "next",
"css-loader": "6.11.x",
"eslint": "^10.0.0",
+ "stylelint": "catalog:tooling",
"jest": "29.5.x",
"jest-cli": "29.5.x",
"jest-environment-jsdom": "29.5.x",
@@ -193,7 +196,7 @@
"ci": {
"lint": {
"command": "lint",
- "changes": "src/**/*.{js,ts,tsx}"
+ "changes": "src/**/*.{js,ts,tsx,scss}"
},
"tests": [
{
diff --git a/packages/js/components/src/advanced-filters/style.scss b/packages/js/components/src/advanced-filters/style.scss
index 302fd8ffc59..7ca99feeb5a 100644
--- a/packages/js/components/src/advanced-filters/style.scss
+++ b/packages/js/components/src/advanced-filters/style.scss
@@ -31,11 +31,11 @@
}
}
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
margin: $gap 0;
border: 1px solid $gray-400;
}
- @include breakpoint( '<400px' ) {
+ @include breakpoint( "<400px" ) {
margin: $gap-small 0;
}
@@ -76,7 +76,7 @@
color: $gray-700;
padding: $gap-smaller;
- @include breakpoint( '<400px' ) {
+ @include breakpoint( "<400px" ) {
position: absolute;
top: 0;
right: $gap-smallest;
@@ -87,7 +87,7 @@
border-radius: 4px;
}
- @include breakpoint( '<400px' ) {
+ @include breakpoint( "<400px" ) {
display: block;
position: relative;
padding: $gap-smaller $gap-smaller 0 0;
@@ -115,12 +115,12 @@
& > div {
padding: 0 $gap-smallest;
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
width: 100%;
padding: $gap-smallest 0;
}
- @include breakpoint( '<400px' ) {
+ @include breakpoint( "<400px" ) {
//display: block;
//margin: 0;
}
@@ -129,7 +129,7 @@
display: flex;
align-items: center;
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
display: block;
}
@@ -150,7 +150,7 @@
}
}
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
display: block;
}
}
@@ -208,7 +208,7 @@
background-color: $gray-200;
}
- &:not(:disabled):not([aria-disabled='true']):focus {
+ &:not(:disabled):not([aria-disabled="true"]):focus {
background-color: $gray-100;
box-shadow: none;
}
diff --git a/packages/js/components/src/calendar/style.scss b/packages/js/components/src/calendar/style.scss
index 186094f05a8..fbaa74fa8ee 100644
--- a/packages/js/components/src/calendar/style.scss
+++ b/packages/js/components/src/calendar/style.scss
@@ -4,9 +4,9 @@
* We have to include the RTL-ignore directives via imports because of the ordering of how
* @imports are included in the output (see https://github.com/MohammadYounes/rtlcss/issues/113).
**/
-@import './calendar/begin-rtl-ignore.css';
-@import '../node_modules/react-dates/lib/css/_datepicker.css';
-@import './calendar/end-rtl-ignore.css';
+@import "./calendar/begin-rtl-ignore.css";
+@import "../node_modules/react-dates/lib/css/_datepicker.css";
+@import "./calendar/end-rtl-ignore.css";
.woocommerce-calendar {
diff --git a/packages/js/components/src/chart/d3chart/legend.scss b/packages/js/components/src/chart/d3chart/legend.scss
index 03be297b911..6d4dd199aeb 100644
--- a/packages/js/components/src/chart/d3chart/legend.scss
+++ b/packages/js/components/src/chart/d3chart/legend.scss
@@ -57,8 +57,6 @@
.woocommerce-legend__item {
& > button {
- display: flex;
- justify-content: center;
align-items: center;
background-color: $studio-white;
color: $gray-700;
@@ -99,7 +97,7 @@
background-color: $studio-white;
&::after {
- content: '';
+ content: "";
position: absolute;
display: none;
}
@@ -162,7 +160,7 @@
}
&:last-child::after {
- content: '';
+ content: "";
display: block;
height: $gap-small;
width: 100%;
@@ -211,7 +209,7 @@
&::before {
background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
bottom: 100%;
- content: '';
+ content: "";
height: 20px;
left: 0;
opacity: 0;
diff --git a/packages/js/components/src/chart/d3chart/style.scss b/packages/js/components/src/chart/d3chart/style.scss
index 4eb8d42451f..0815a38fef8 100644
--- a/packages/js/components/src/chart/d3chart/style.scss
+++ b/packages/js/components/src/chart/d3chart/style.scss
@@ -1,7 +1,7 @@
/**
* Internal Dependencies
*/
-@import './legend.scss';
+@import "./legend.scss";
.woocommerce-chart__body-row .d3-chart__container {
width: calc(100% - 320px);
@@ -34,7 +34,7 @@
top: 0;
text-align: center;
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
@include font-size( 13 );
}
}
@@ -57,7 +57,7 @@
visibility: hidden;
z-index: 1;
- @include breakpoint( '<600px' ) {
+ @include breakpoint( "<600px" ) {
min-width: auto;
width: calc(100% - #{$gap-large * 2});
}
diff --git a/packages/js/components/src/chart/style.scss b/packages/js/components/src/chart/style.scss
index be8ad7ab566..29f7cb9ab8d 100644
--- a/packages/js/components/src/chart/style.scss
+++ b/packages/js/components/src/chart/style.scss
@@ -4,7 +4,7 @@
background: $studio-white;
border: 1px solid $table-border;
border-top: 0;
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
margin-left: -16px;
margin-right: -16px;
margin-bottom: $gap-small;
@@ -67,7 +67,7 @@
min-height: 50px;
padding: 0 $gap;
- @include breakpoint( '<960px' ) {
+ @include breakpoint( "<960px" ) {
width: 100%;
order: 1;
margin-left: 0;
@@ -85,7 +85,7 @@
display: none;
}
- &:not(:disabled):not([aria-disabled='true']):focus {
+ &:not(:disabled):not([aria-disabled="true"]):focus {
@include button-style__focus-active();
& ~ .components-input-control__backdrop {
@@ -120,7 +120,7 @@
}
}
-@include breakpoint( '<960px' ) {
+@include breakpoint( "<960px" ) {
.woocommerce-summary + .woocommerce-chart {
.woocommerce-chart__title {
display: none;
diff --git a/packages/js/components/src/dropdown-button/style.scss b/packages/js/components/src/dropdown-button/style.scss
index 938215c2712..cc57a5e17b9 100644
--- a/packages/js/components/src/dropdown-button/style.scss
+++ b/packages/js/components/src/dropdown-button/style.scss
@@ -9,7 +9,7 @@
height: auto;
&::after {
- content: '';
+ content: "";
background: $gray-900;
mask: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20%2F%3E%3C%2Fsvg%3E)
no-repeat right 0 top 55%;
@@ -57,7 +57,7 @@
width: 100%;
justify-content: space-around;
- @include breakpoint( '<400px' ) {
+ @include breakpoint( "<400px" ) {
min-height: 46px;
}
@@ -75,7 +75,7 @@
font-weight: 600;
}
- @include breakpoint( '<400px' ) {
+ @include breakpoint( "<400px" ) {
&:last-child {
@include font-size( 10 );
}
diff --git a/packages/js/components/src/experimental-select-control/combo-box.scss b/packages/js/components/src/experimental-select-control/combo-box.scss
index c2939880c6b..22fe91f623c 100644
--- a/packages/js/components/src/experimental-select-control/combo-box.scss
+++ b/packages/js/components/src/experimental-select-control/combo-box.scss
@@ -13,7 +13,7 @@
&--disabled {
background-color: $gray-100;
border-color: $gray-400;
- opacity: 1.0;
+ opacity: 1;
.woocommerce-experimental-select-control {
&__items-wrapper {
opacity: 0.5;
@@ -65,6 +65,6 @@
}
}
-.woocommerce-experimental-select-control:not( .is-focused ) .woocommerce-experimental-select-control__combox-box-toggle-button {
+.woocommerce-experimental-select-control:not(.is-focused) .woocommerce-experimental-select-control__combox-box-toggle-button {
pointer-events: none; // Prevents the icon from being clickable when the combobox is not focused, because otherwise we get a race condition when clicking on the icon, because focussing the combobox opens the menu, then sequentially the icon toggles it back closed
}
diff --git a/packages/js/components/src/experimental-select-control/select-control.scss b/packages/js/components/src/experimental-select-control/select-control.scss
index 0ec18150b59..dc67c33251f 100644
--- a/packages/js/components/src/experimental-select-control/select-control.scss
+++ b/packages/js/components/src/experimental-select-control/select-control.scss
@@ -1,8 +1,8 @@
-@import './combo-box.scss';
-@import './menu.scss';
-@import './menu-item.scss';
-@import './selected-items.scss';
-@import './suffix-icon.scss';
+@import "./combo-box.scss";
+@import "./menu.scss";
+@import "./menu-item.scss";
+@import "./selected-items.scss";
+@import "./suffix-icon.scss";
.woocommerce-experimental-select-control {
position: relative;
diff --git a/packages/js/components/src/experimental-select-tree-control/select-tree.scss b/packages/js/components/src/experimental-select-tree-control/select-tree.scss
index db46edcf22b..1834d8167fd 100644
--- a/packages/js/components/src/experimental-select-tree-control/select-tree.scss
+++ b/packages/js/components/src/experimental-select-tree-control/select-tree.scss
@@ -9,7 +9,8 @@
&__input:disabled {
background-color: $gray-100;
}
- &__suffix, &__suffix-items {
+ &__suffix,
+ &__suffix-items {
display: flex;
align-items: center;
button {
diff --git a/packages/js/components/src/experimental-tree-control/tree-item.scss b/packages/js/components/src/experimental-tree-control/tree-item.scss
index 8e5f7a95e83..9a04c77a182 100644
--- a/packages/js/components/src/experimental-tree-control/tree-item.scss
+++ b/packages/js/components/src/experimental-tree-control/tree-item.scss
@@ -45,7 +45,7 @@ $control-size: $gap-large;
svg.components-checkbox-control__checked,
svg.components-checkbox-control__indeterminate,
- .components-checkbox-control__input[type='checkbox'] {
+ .components-checkbox-control__input[type="checkbox"] {
cursor: default;
&:focus {
outline: none;
diff --git a/packages/js/components/src/experimental-tree-control/tree.scss b/packages/js/components/src/experimental-tree-control/tree.scss
index 341d3a225ab..5f910e94b09 100644
--- a/packages/js/components/src/experimental-tree-control/tree.scss
+++ b/packages/js/components/src/experimental-tree-control/tree.scss
@@ -1,4 +1,4 @@
-@import './tree-item.scss';
+@import "./tree-item.scss";
.experimental-woocommerce-tree {
list-style: none;
diff --git a/packages/js/components/src/filter-picker/style.scss b/packages/js/components/src/filter-picker/style.scss
index 1b34bd36205..ffbe180cb66 100644
--- a/packages/js/components/src/filter-picker/style.scss
+++ b/packages/js/components/src/filter-picker/style.scss
@@ -33,12 +33,12 @@
.woocommerce-filters-filter__button {
background-color: $studio-white;
- &.components-button:not(:disabled):not([aria-disabled='true']):focus {
+ &.components-button:not(:disabled):not([aria-disabled="true"]):focus {
background-color: $studio-white;
}
&::before {
- content: '';
+ content: "";
width: 8px;
height: 8px;
background-color: $studio-woocommerce-purple;
@@ -68,7 +68,7 @@
color: $gray-700;
}
- &.components-button:not(:disabled):not([aria-disabled='true']):focus {
+ &.components-button:not(:disabled):not([aria-disabled="true"]):focus {
background-color: $gray-100;
}
diff --git a/packages/js/components/src/filters/style.scss b/packages/js/components/src/filters/style.scss
index cb98f3579aa..a48c9869aba 100644
--- a/packages/js/components/src/filters/style.scss
+++ b/packages/js/components/src/filters/style.scss
@@ -3,7 +3,7 @@
margin-bottom: 0;
}
- @include breakpoint( '<400px' ) {
+ @include breakpoint( "<400px" ) {
margin-left: -8px;
margin-right: -8px;
}
@@ -13,11 +13,11 @@
display: flex;
margin-bottom: $gap-large;
- @include breakpoint( '<1280px' ) {
+ @include breakpoint( "<1280px" ) {
flex-direction: column;
}
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
margin-bottom: $gap;
}
}
@@ -50,17 +50,17 @@
padding-right: 0;
}
- @include breakpoint( '<1440px' ) {
+ @include breakpoint( "<1440px" ) {
width: 33.3%;
}
- @include breakpoint( '<1280px' ) {
+ @include breakpoint( "<1280px" ) {
width: 50%;
padding: 0;
min-height: 78px;
}
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
width: 100%;
}
}
@@ -69,7 +69,7 @@
margin: 7px 0;
display: block;
- @include breakpoint( '<1280px' ) {
+ @include breakpoint( "<1280px" ) {
margin: 5px 0;
}
}
diff --git a/packages/js/components/src/form-section/form-section.scss b/packages/js/components/src/form-section/form-section.scss
index 5e9d0d5fbb6..14491a82bd4 100644
--- a/packages/js/components/src/form-section/form-section.scss
+++ b/packages/js/components/src/form-section/form-section.scss
@@ -10,7 +10,7 @@
}
&__description {
- &>*:first-child {
+ & > *:first-child {
margin-top: 0;
}
}
diff --git a/packages/js/components/src/image-gallery/image-gallery-toolbar.scss b/packages/js/components/src/image-gallery/image-gallery-toolbar.scss
index 5417bc48489..192e909d0d1 100644
--- a/packages/js/components/src/image-gallery/image-gallery-toolbar.scss
+++ b/packages/js/components/src/image-gallery/image-gallery-toolbar.scss
@@ -5,5 +5,5 @@
left: 50%;
transform: translateX(-50%);
z-index: 1000;
- background-color: white;
+ background-color: #fff;
}
diff --git a/packages/js/components/src/image-gallery/image-gallery.scss b/packages/js/components/src/image-gallery/image-gallery.scss
index fc4929baa77..740f7467252 100644
--- a/packages/js/components/src/image-gallery/image-gallery.scss
+++ b/packages/js/components/src/image-gallery/image-gallery.scss
@@ -3,7 +3,8 @@
display: block;
}
- .woocommerce-sortable, &__wrapper {
+ .woocommerce-sortable,
+ &__wrapper {
display: grid;
grid-template-columns: inherit;
grid-gap: $gap;
@@ -19,11 +20,11 @@
position: absolute;
}
- &.is-dragging-over-before:before {
+ &.is-dragging-over-before::before {
left: calc( $gap / -2 - 1px );
}
- &.is-dragging-over-after:after {
+ &.is-dragging-over-after::after {
right: calc( $gap / -2 - 1px );
}
}
diff --git a/packages/js/components/src/list-item/list-item.scss b/packages/js/components/src/list-item/list-item.scss
index ae8c2a354f6..c9fd5ef6d71 100644
--- a/packages/js/components/src/list-item/list-item.scss
+++ b/packages/js/components/src/list-item/list-item.scss
@@ -5,4 +5,4 @@
padding: $gap;
display: flex;
align-items: center;
-}
\ No newline at end of file
+}
diff --git a/packages/js/components/src/list-item/style.scss b/packages/js/components/src/list-item/style.scss
index 26c9740c9ea..14240678fa0 100644
--- a/packages/js/components/src/list-item/style.scss
+++ b/packages/js/components/src/list-item/style.scss
@@ -1 +1 @@
-@import './list-item.scss';
+@import "./list-item.scss";
diff --git a/packages/js/components/src/list/style.scss b/packages/js/components/src/list/style.scss
index 44a33b125f1..3f7a68fb7a6 100644
--- a/packages/js/components/src/list/style.scss
+++ b/packages/js/components/src/list/style.scss
@@ -91,7 +91,6 @@ a.woocommerce-list__item {
}
.woocommerce-list__item-after {
- margin-left: $gap;
display: flex;
align-items: center;
margin-left: auto;
diff --git a/packages/js/components/src/pill/style.scss b/packages/js/components/src/pill/style.scss
index 15b129336a4..04759c5d48a 100644
--- a/packages/js/components/src/pill/style.scss
+++ b/packages/js/components/src/pill/style.scss
@@ -5,7 +5,7 @@
display: inline-block;
padding: $gap-smallest $gap-smaller;
- @include breakpoint( '<320px' ) {
+ @include breakpoint( "<320px" ) {
font-size: 11px;
}
}
diff --git a/packages/js/components/src/search-list-control/style.scss b/packages/js/components/src/search-list-control/style.scss
index ff285096b0b..94e9bf72b2c 100644
--- a/packages/js/components/src/search-list-control/style.scss
+++ b/packages/js/components/src/search-list-control/style.scss
@@ -88,7 +88,7 @@
@include visually-hidden;
}
- & > [role='menu'] {
+ & > [role="menu"] {
border: 1px solid $gray-100;
border-bottom: none;
}
@@ -135,19 +135,19 @@
}
// Anything deeper than 5 levels will use this fallback depth
- &[class*='depth-'] .woocommerce-search-list__item-label::before {
+ &[class*="depth-"] .woocommerce-search-list__item-label::before {
margin-right: $gap-smallest;
- content: str-repeat('— ', 5);
+ content: str-repeat("— ", 5);
}
&.depth-0 .woocommerce-search-list__item-label::before {
margin-right: 0;
- content: '';
+ content: "";
}
@for $i from 1 to 5 {
&.depth-#{$i} .woocommerce-search-list__item-label::before {
- content: str-repeat('— ', $i);
+ content: str-repeat("— ", $i);
}
}
@@ -172,7 +172,7 @@
&::after {
margin-right: $gap-smallest;
- content: ' ›';
+ content: " ›";
}
}
}
diff --git a/packages/js/components/src/search/style.scss b/packages/js/components/src/search/style.scss
index b62cb5a3a8c..7c918d81218 100644
--- a/packages/js/components/src/search/style.scss
+++ b/packages/js/components/src/search/style.scss
@@ -36,8 +36,8 @@
font-size: 13px;
min-height: auto;
- &[type='number']::-webkit-outer-spin-button,
- &[type='number']::-webkit-inner-spin-button {
+ &[type="number"]::-webkit-outer-spin-button,
+ &[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
diff --git a/packages/js/components/src/section-header/style.scss b/packages/js/components/src/section-header/style.scss
index 0af35648e64..923f554b513 100644
--- a/packages/js/components/src/section-header/style.scss
+++ b/packages/js/components/src/section-header/style.scss
@@ -6,7 +6,7 @@
display: flex;
justify-content: space-between;
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
margin-left: -16px;
margin-right: -16px;
margin-bottom: $gap-small;
@@ -22,7 +22,7 @@
margin: 0 10px;
}
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
&.has-interval-select {
position: relative;
padding-bottom: 30px;
diff --git a/packages/js/components/src/segmented-selection/style.scss b/packages/js/components/src/segmented-selection/style.scss
index f6f62c0125c..d107a59eb1f 100644
--- a/packages/js/components/src/segmented-selection/style.scss
+++ b/packages/js/components/src/segmented-selection/style.scss
@@ -57,7 +57,7 @@
font-weight: 600;
&::before {
- content: '';
+ content: "";
width: 8px;
height: 8px;
background-color: var(--wp-admin-theme-color);
diff --git a/packages/js/components/src/select-control/style.scss b/packages/js/components/src/select-control/style.scss
index f982a38555c..9e110f531c0 100644
--- a/packages/js/components/src/select-control/style.scss
+++ b/packages/js/components/src/select-control/style.scss
@@ -34,6 +34,7 @@
transform: translateY(-50%);
color: $studio-gray-50;
font-size: 16px;
+ /* stylelint-disable-next-line declaration-property-unit-allowed-list */
line-height: 1.5em;
}
diff --git a/packages/js/components/src/sortable/sortable-item.scss b/packages/js/components/src/sortable/sortable-item.scss
index aa88408f55b..0aa5e4b38ac 100644
--- a/packages/js/components/src/sortable/sortable-item.scss
+++ b/packages/js/components/src/sortable/sortable-item.scss
@@ -14,9 +14,9 @@ $place-holder-size: 3px;
width: 0;
}
- &:before,
- &:after {
- content: '';
+ &::before,
+ &::after {
+ content: "";
display: none;
height: $place-holder-size;
width: 100%;
@@ -26,35 +26,35 @@ $place-holder-size: 3px;
top: calc( $place-holder-size / -2 );
}
- &:after {
+ &::after {
top: auto;
bottom: calc( $place-holder-size / -2 );
}
.is-horizontal & {
- &:before,
- &:after {
+ &::before,
+ &::after {
height: 100%;
width: $place-holder-size;
}
- &:before {
+ &::before {
top: 0;
left: calc( $place-holder-size / -2 );
}
- &:after {
+ &::after {
top: 0;
bottom: auto;
right: calc( $place-holder-size / -2 );
}
}
- &.is-dragging-over-before:before {
+ &.is-dragging-over-before::before {
display: block;
}
- &.is-dragging-over-after.is-last-droppable:after {
+ &.is-dragging-over-after.is-last-droppable::after {
display: block;
}
}
diff --git a/packages/js/components/src/sortable/style.scss b/packages/js/components/src/sortable/style.scss
index a5efd179b76..526c5a9b33f 100644
--- a/packages/js/components/src/sortable/style.scss
+++ b/packages/js/components/src/sortable/style.scss
@@ -1,2 +1,2 @@
-@import './sortable-item.scss';
-@import './sortable-handle.scss';
+@import "./sortable-item.scss";
+@import "./sortable-handle.scss";
diff --git a/packages/js/components/src/spinner/style.scss b/packages/js/components/src/spinner/style.scss
index 31e37988890..07c60dc512f 100644
--- a/packages/js/components/src/spinner/style.scss
+++ b/packages/js/components/src/spinner/style.scss
@@ -16,6 +16,7 @@
stroke-dashoffset: 50;
transform: rotate(135deg);
}
+ /* stylelint-disable-next-line keyframe-block-no-duplicate-selectors */
100% {
transform: rotate(450deg);
}
diff --git a/packages/js/components/src/stepper/style.scss b/packages/js/components/src/stepper/style.scss
index 739cb1587de..c87f865eea2 100644
--- a/packages/js/components/src/stepper/style.scss
+++ b/packages/js/components/src/stepper/style.scss
@@ -122,7 +122,7 @@
}
}
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
.woocommerce-stepper__step-label {
display: none;
padding-top: 24px;
@@ -144,7 +144,7 @@
}
.woocommerce-stepper__step::after {
- content: '';
+ content: "";
position: absolute;
left: math.div($step-icon-size, 2) + $gap-smaller;
top: $step-icon-size + ( $gap-smaller * 2 );
diff --git a/packages/js/components/src/style.scss b/packages/js/components/src/style.scss
index 786d33dfbbb..d43ebc885c9 100644
--- a/packages/js/components/src/style.scss
+++ b/packages/js/components/src/style.scss
@@ -1,62 +1,62 @@
/**
* External Dependencies
*/
-@import '@automattic/tour-kit/dist/esm/styles.scss';
+@import "@automattic/tour-kit/dist/esm/styles.scss";
/**
* Internal Dependencies
*/
-@import 'abbreviated-card/style.scss';
-@import 'calendar/style.scss';
-@import 'chart/style.scss';
-@import 'chart/d3chart/style.scss';
-@import 'chart/d3chart/d3base/style.scss';
-@import 'dropdown-button/style.scss';
-@import 'ellipsis-menu/style.scss';
-@import 'empty-content/style.scss';
-@import 'experimental-select-control/select-control.scss';
-@import 'advanced-filters/style.scss';
-@import 'date-range-filter-picker/style.scss';
-@import 'date-time-picker-control/date-time-picker-control.scss';
-@import 'filter-picker/style.scss';
-@import 'filters/style.scss';
-@import 'flag/style.scss';
-@import 'form-section/form-section.scss';
-@import 'image-upload/style.scss';
-@import 'image-gallery/style.scss';
-@import 'list/style.scss';
-@import 'list-item/style.scss';
-@import 'media-uploader/style.scss';
-@import 'order-status/style.scss';
-@import 'pagination/style.scss';
-@import 'pill/style.scss';
-@import 'product-image/style.scss';
-@import 'rating/style.scss';
-@import 'search/style.scss';
-@import 'search-list-control/style.scss';
-@import 'section-header/style.scss';
-@import 'segmented-selection/style.scss';
-@import 'select-control/style.scss';
-@import 'sortable/style.scss';
-@import 'stepper/style.scss';
-@import 'spinner/style.scss';
-@import 'summary/style.scss';
-@import 'table/style.scss';
-@import 'tag/style.scss';
-@import 'text-control/style.scss';
-@import 'text-control-with-affixes/style.scss';
-@import 'tooltip/style.scss';
-@import 'timeline/style.scss';
-@import 'view-more-list/style.scss';
-@import 'web-preview/style.scss';
-@import 'badge/style.scss';
-@import 'dynamic-form/style.scss';
-@import 'tour-kit/style.scss';
-@import 'collapsible-content/style.scss';
-@import 'form/style.scss';
-@import 'experimental-tree-control/tree.scss';
-@import 'experimental-select-tree-control/select-tree.scss';
-@import 'tree-select-control/index.scss';
-@import 'progress-bar/style.scss';
-@import 'phone-number-input/style.scss';
-@import 'error-boundary/style.scss';
+@import "abbreviated-card/style.scss";
+@import "calendar/style.scss";
+@import "chart/style.scss";
+@import "chart/d3chart/style.scss";
+@import "chart/d3chart/d3base/style.scss";
+@import "dropdown-button/style.scss";
+@import "ellipsis-menu/style.scss";
+@import "empty-content/style.scss";
+@import "experimental-select-control/select-control.scss";
+@import "advanced-filters/style.scss";
+@import "date-range-filter-picker/style.scss";
+@import "date-time-picker-control/date-time-picker-control.scss";
+@import "filter-picker/style.scss";
+@import "filters/style.scss";
+@import "flag/style.scss";
+@import "form-section/form-section.scss";
+@import "image-upload/style.scss";
+@import "image-gallery/style.scss";
+@import "list/style.scss";
+@import "list-item/style.scss";
+@import "media-uploader/style.scss";
+@import "order-status/style.scss";
+@import "pagination/style.scss";
+@import "pill/style.scss";
+@import "product-image/style.scss";
+@import "rating/style.scss";
+@import "search/style.scss";
+@import "search-list-control/style.scss";
+@import "section-header/style.scss";
+@import "segmented-selection/style.scss";
+@import "select-control/style.scss";
+@import "sortable/style.scss";
+@import "stepper/style.scss";
+@import "spinner/style.scss";
+@import "summary/style.scss";
+@import "table/style.scss";
+@import "tag/style.scss";
+@import "text-control/style.scss";
+@import "text-control-with-affixes/style.scss";
+@import "tooltip/style.scss";
+@import "timeline/style.scss";
+@import "view-more-list/style.scss";
+@import "web-preview/style.scss";
+@import "badge/style.scss";
+@import "dynamic-form/style.scss";
+@import "tour-kit/style.scss";
+@import "collapsible-content/style.scss";
+@import "form/style.scss";
+@import "experimental-tree-control/tree.scss";
+@import "experimental-select-tree-control/select-tree.scss";
+@import "tree-select-control/index.scss";
+@import "progress-bar/style.scss";
+@import "phone-number-input/style.scss";
+@import "error-boundary/style.scss";
diff --git a/packages/js/components/src/summary/style.scss b/packages/js/components/src/summary/style.scss
index a0b532019e3..4919b97adf8 100644
--- a/packages/js/components/src/summary/style.scss
+++ b/packages/js/components/src/summary/style.scss
@@ -38,7 +38,7 @@ $border: $gray-200;
box-shadow: inset -1px -1px 0 $border;
width: 100%;
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
& {
border-width: 0;
}
@@ -128,7 +128,7 @@ $border: $gray-200;
@include wrap-contents;
}
- @include breakpoint( '>1440px' ) {
+ @include breakpoint( ">1440px" ) {
&.has-6-items {
@include make-cols( 6 );
@include wrap-contents;
@@ -141,7 +141,7 @@ $border: $gray-200;
}
}
- @include breakpoint( '<1440px' ) {
+ @include breakpoint( "<1440px" ) {
&.has-4-items,
&.has-7-items,
&.has-8-items {
@@ -167,14 +167,14 @@ $border: $gray-200;
}
}
- @include breakpoint( '<960px' ) {
+ @include breakpoint( "<960px" ) {
.woocommerce-summary__item {
// One-col layout for all items means right border is always "outer"
border-right-color: $border;
}
}
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
.woocommerce-summary__item-container {
margin-left: -16px;
margin-right: -16px;
@@ -216,7 +216,7 @@ $border: $gray-200;
display: block;
}
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
border-right: none;
}
}
@@ -263,6 +263,7 @@ $border: $gray-200;
background-color: #f8f9fa;
border-bottom: 1px solid $border;
border-right: 1px solid $border;
+ /* stylelint-disable-next-line declaration-property-unit-allowed-list */
line-height: 1.4em;
text-decoration: none;
color: $gray-900;
@@ -294,7 +295,8 @@ $border: $gray-200;
&.is-selected {
&:focus {
// !important to override button styles
- box-shadow: inset -1px -1px 0 $gray-700, inset 1px 0 0 $gray-700,
+ box-shadow: inset -1px -1px 0 $gray-700,
+ inset 1px 0 0 $gray-700,
inset 0 4px 0 var(--wp-admin-theme-color) !important;
}
}
@@ -304,7 +306,7 @@ $border: $gray-200;
width: 100%;
padding-right: 2 * $gap + 24px;
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
border-right: none;
}
}
@@ -323,6 +325,7 @@ $border: $gray-200;
.woocommerce-summary__info-tooltip {
color: $gray-600;
+ /* stylelint-disable-next-line declaration-property-unit-allowed-list */
line-height: 1em;
margin-left: $gap-smallest;
diff --git a/packages/js/components/src/table/style.scss b/packages/js/components/src/table/style.scss
index c0d18e5b581..794087b30f3 100644
--- a/packages/js/components/src/table/style.scss
+++ b/packages/js/components/src/table/style.scss
@@ -28,8 +28,8 @@
}
$row-text-height: 1.1375rem;
- $row-height: '#{$gap * 2} + #{$row-text-height} + 1px';
- $header-row-height: '#{$gap-smaller * 2} + #{$row-text-height} + 1px';
+ $row-height: "#{$gap * 2} + #{$row-text-height} + 1px";
+ $header-row-height: "#{$gap-smaller * 2} + #{$row-text-height} + 1px";
&.is-empty {
align-items: center;
background: $gray-100;
@@ -57,7 +57,7 @@
grid-template-columns: auto 1fr auto;
}
- @include breakpoint( '<960px' ) {
+ @include breakpoint( "<960px" ) {
&.has-search {
.woocommerce-table__actions {
grid-gap: $gap-small;
@@ -106,7 +106,7 @@
&::after,
&::before {
- content: '';
+ content: "";
position: absolute;
top: 0;
width: 60px;
@@ -222,7 +222,7 @@
color: $gray-700;
font-weight: bold;
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
@include font-size( 13 );
}
}
diff --git a/packages/js/components/src/text-control-with-affixes/style.scss b/packages/js/components/src/text-control-with-affixes/style.scss
index 86428fc36e5..9af66247654 100644
--- a/packages/js/components/src/text-control-with-affixes/style.scss
+++ b/packages/js/components/src/text-control-with-affixes/style.scss
@@ -3,11 +3,11 @@
flex-direction: row;
width: 100%;
- input[type='email'],
- input[type='password'],
- input[type='url'],
- input[type='text'],
- input[type='number'] {
+ input[type="email"],
+ input[type="password"],
+ input[type="url"],
+ input[type="text"],
+ input[type="number"] {
flex-grow: 1;
margin: 0;
@@ -57,11 +57,11 @@
border-right: none;
border-radius: 4px 0 0 4px;
- & + input[type='email'],
- & + input[type='password'],
- & + input[type='url'],
- & + input[type='text'],
- & + input[type='number'] {
+ & + input[type="email"],
+ & + input[type="password"],
+ & + input[type="url"],
+ & + input[type="text"],
+ & + input[type="number"] {
&:disabled {
border-left-color: $gray-100;
}
diff --git a/packages/js/components/src/text-control/style.scss b/packages/js/components/src/text-control/style.scss
index e942478026e..3b8522a78af 100644
--- a/packages/js/components/src/text-control/style.scss
+++ b/packages/js/components/src/text-control/style.scss
@@ -3,7 +3,6 @@
border: 1px solid $studio-gray-20;
border-radius: 3px;
height: 56px;
- box-shadow: none;
padding: 12px 12px 4px;
position: relative;
box-shadow: $shadow-popover;
@@ -25,19 +24,19 @@
// @wordpress/components styles for text control target all types, so we must also do that
// to increase specificity and override the styles.
.components-text-control__input,
- .components-text-control__input[type='text'],
- .components-text-control__input[type='tel'],
- .components-text-control__input[type='time'],
- .components-text-control__input[type='url'],
- .components-text-control__input[type='week'],
- .components-text-control__input[type='password'],
- .components-text-control__input[type='color'],
- .components-text-control__input[type='date'],
- .components-text-control__input[type='datetime'],
- .components-text-control__input[type='datetime-local'],
- .components-text-control__input[type='email'],
- .components-text-control__input[type='month'],
- .components-text-control__input[type='number'] {
+ .components-text-control__input[type="text"],
+ .components-text-control__input[type="tel"],
+ .components-text-control__input[type="time"],
+ .components-text-control__input[type="url"],
+ .components-text-control__input[type="week"],
+ .components-text-control__input[type="password"],
+ .components-text-control__input[type="color"],
+ .components-text-control__input[type="date"],
+ .components-text-control__input[type="datetime"],
+ .components-text-control__input[type="datetime-local"],
+ .components-text-control__input[type="email"],
+ .components-text-control__input[type="month"],
+ .components-text-control__input[type="number"] {
border: 0;
box-shadow: none;
font-size: 16px;
diff --git a/packages/js/components/src/tour-kit/stories/style.scss b/packages/js/components/src/tour-kit/stories/style.scss
index 54b83c9009f..30e45c7f5db 100644
--- a/packages/js/components/src/tour-kit/stories/style.scss
+++ b/packages/js/components/src/tour-kit/stories/style.scss
@@ -34,10 +34,10 @@
gap: 0 0;
grid-auto-flow: row;
grid-template-areas:
- 'Ref-A Ref-B Ref-B Ref-B Ref-D'
- 'Ref-A Ref-B Ref-B Ref-B Ref-D'
- 'Ref-A Ref-C Ref-C Ref-C Ref-D'
- 'Ref-A Ref-C Ref-C Ref-C Ref-D';
+ "Ref-A Ref-B Ref-B Ref-B Ref-D"
+ "Ref-A Ref-B Ref-B Ref-B Ref-D"
+ "Ref-A Ref-C Ref-C Ref-C Ref-D"
+ "Ref-A Ref-C Ref-C Ref-C Ref-D";
}
.storybook__tourkit-references-a,
@@ -52,22 +52,22 @@
}
.storybook__tourkit-references-a {
- background-color: silver;
+ background-color: #c0c0c0;
grid-area: Ref-A;
}
.storybook__tourkit-references-b {
- background-color: orange;
+ background-color: #ffa500;
grid-area: Ref-B;
}
.storybook__tourkit-references-c {
- background-color: palevioletred;
+ background-color: #db7093;
grid-area: Ref-C;
}
.storybook__tourkit-references-d {
- background-color: gainsboro;
+ background-color: #dcdcdc;
grid-area: Ref-D;
}
}
diff --git a/packages/js/components/src/tour-kit/style.scss b/packages/js/components/src/tour-kit/style.scss
index e2a7bc15da1..43a781c40ad 100644
--- a/packages/js/components/src/tour-kit/style.scss
+++ b/packages/js/components/src/tour-kit/style.scss
@@ -1,4 +1,4 @@
-.woocommerce-tour-kit{
+.woocommerce-tour-kit {
box-shadow: 0 0 8px rgba( 0, 0, 0, 0.15 );
position: absolute;
z-index: 9999;
@@ -66,7 +66,8 @@
line-height: 20px;
}
- .tour-kit-frame__arrow, .tour-kit-frame__arrow::before {
+ .tour-kit-frame__arrow,
+ .tour-kit-frame__arrow::before {
z-index: 1;
}
}
diff --git a/packages/js/components/src/tree-select-control/index.scss b/packages/js/components/src/tree-select-control/index.scss
index a2574fd39d9..84c337d3eb4 100644
--- a/packages/js/components/src/tree-select-control/index.scss
+++ b/packages/js/components/src/tree-select-control/index.scss
@@ -205,7 +205,7 @@ $muriel-box-shadow-8dp: 0 5px 5px -3px rgb(0 0 0 / 20%),
background: var(--wp-admin-theme-color);
border: $gap-smallest solid $white;
box-shadow: 0 0 0 1px #1e1e1e;
-
+
&:focus {
border-color: $white;
box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
@@ -252,32 +252,32 @@ $muriel-box-shadow-8dp: 0 5px 5px -3px rgb(0 0 0 / 20%),
vertical-align: top;
width: $checkbox-input-size-sm;
height: $checkbox-input-size-sm;
-
+
@include break-small() {
height: $checkbox-input-size;
width: $checkbox-input-size;
}
-
+
appearance: none;
@include reduce-motion("transition");
-
+
&:checked,
&:indeterminate {
$components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
background: $components-color-accent;
border-color: $components-color-accent;
-
+
// Hide default checkbox styles in IE.
&::-ms-check {
opacity: 0;
}
}
-
+
&:checked::before {
content: none;
}
-
+
@include break-small {
height: $checkbox-input-size;
width: $checkbox-input-size;
diff --git a/packages/js/customer-effort-score/changelog/add-shared-stylelint-config b/packages/js/customer-effort-score/changelog/add-shared-stylelint-config
new file mode 100644
index 00000000000..56c6a25a923
--- /dev/null
+++ b/packages/js/customer-effort-score/changelog/add-shared-stylelint-config
@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Lint styles with the shared stylelint config and apply its autofixes; no visual change.
diff --git a/packages/js/customer-effort-score/package.json b/packages/js/customer-effort-score/package.json
index 5c089f7dfc0..8affe0aa2d1 100644
--- a/packages/js/customer-effort-score/package.json
+++ b/packages/js/customer-effort-score/package.json
@@ -50,7 +50,9 @@
"lint": "pnpm --if-present '/^lint:lang:.*$/'",
"lint:fix": "pnpm --if-present '/^lint:fix:lang:.*$/'",
"lint:fix:lang:js": "eslint src --fix",
+ "lint:fix:lang:style": "stylelint 'src/**/*.scss' --fix",
"lint:lang:js": "eslint src",
+ "lint:lang:style": "stylelint 'src/**/*.scss'",
"lint:lang:types": "tsc --build --emitDeclarationOnly",
"prepack": "pnpm build:publish:project",
"test:js": "jest --config ./jest.config.json --passWithNoTests",
@@ -104,6 +106,7 @@
"@wordpress/browserslist-config": "next",
"css-loader": "6.11.x",
"eslint": "^10.0.0",
+ "stylelint": "catalog:tooling",
"jest": "29.5.x",
"jest-cli": "29.5.x",
"jest-environment-jsdom": "29.5.x",
@@ -127,7 +130,7 @@
"ci": {
"lint": {
"command": "lint",
- "changes": "src/**/*.{js,jsx,ts,tsx}"
+ "changes": "src/**/*.{js,jsx,ts,tsx,scss}"
},
"tests": [
{
diff --git a/packages/js/customer-effort-score/src/style.scss b/packages/js/customer-effort-score/src/style.scss
index 9dd2219f92a..8bf89c43899 100644
--- a/packages/js/customer-effort-score/src/style.scss
+++ b/packages/js/customer-effort-score/src/style.scss
@@ -1,5 +1,5 @@
-@import 'components/customer-feedback-simple/customer-feedback-simple.scss';
-@import 'components/feedback-modal/feedback-modal.scss';
+@import "components/customer-feedback-simple/customer-feedback-simple.scss";
+@import "components/feedback-modal/feedback-modal.scss";
.woocommerce-customer-effort-score__selection {
margin: 1em 0 1.5em 0;
@@ -20,7 +20,6 @@
}
-
.components-radio-control__option {
column-gap: 0;
@@ -49,13 +48,13 @@
}
}
- input:focus+label {
+ input:focus + label {
outline: 2px solid $studio-wordpress-blue;
background-color: peach;
color: $studio-blue-60;
}
- input:checked+label {
+ input:checked + label {
outline: 2px solid $studio-wordpress-blue;
background-color: $studio-wordpress-blue-0;
}
@@ -69,24 +68,24 @@
color: $studio-wordpress-blue;
}
- input[value='1']+label::before {
- content: '😞';
+ input[value="1"] + label::before {
+ content: "😞";
}
- input[value='2']+label::before {
- content: '🙁';
+ input[value="2"] + label::before {
+ content: "🙁";
}
- input[value='3']+label::before {
- content: '😑';
+ input[value="3"] + label::before {
+ content: "😑";
}
- input[value='4']+label::before {
- content: '🙂';
+ input[value="4"] + label::before {
+ content: "🙂";
}
- input[value='5']+label::before {
- content: '😍';
+ input[value="5"] + label::before {
+ content: "😍";
}
}
}
diff --git a/packages/js/email-editor/.stylelintrc b/packages/js/email-editor/.stylelintrc
deleted file mode 100644
index 992d252e3a5..00000000000
--- a/packages/js/email-editor/.stylelintrc
+++ /dev/null
@@ -1,21 +0,0 @@
-{
- "extends": "@wordpress/stylelint-config/stylistic",
- "reportNeedlessDisables": true,
- "customSyntax": "postcss-scss",
- "rules": {
- "selector-class-pattern": null,
- "at-rule-empty-line-before": null,
- "at-rule-no-unknown": null,
- "comment-empty-line-before": null,
- "@stylistic/declaration-colon-newline-after": null,
- "font-weight-notation": null,
- "@stylistic/function-parentheses-space-inside": null,
- "@stylistic/function-comma-space-after": null,
- "@stylistic/indentation": null,
- "@stylistic/max-line-length": null,
- "no-descending-specificity": null,
- "no-duplicate-selectors": null,
- "rule-empty-line-before": null,
- "value-keyword-case": null
- }
-}
diff --git a/packages/js/email-editor/changelog/add-shared-stylelint-config b/packages/js/email-editor/changelog/add-shared-stylelint-config
new file mode 100644
index 00000000000..56c6a25a923
--- /dev/null
+++ b/packages/js/email-editor/changelog/add-shared-stylelint-config
@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Lint styles with the shared stylelint config and apply its autofixes; no visual change.
diff --git a/packages/js/email-editor/package.json b/packages/js/email-editor/package.json
index 8b3144014b6..84523747a4b 100644
--- a/packages/js/email-editor/package.json
+++ b/packages/js/email-editor/package.json
@@ -144,7 +144,6 @@
"@woocommerce/internal-js-tests": "workspace:*",
"@wordpress/browserslist-config": "next",
"@wordpress/prettier-config": "4.49.0",
- "@wordpress/stylelint-config": "^23.14.0",
"eslint": "^10.0.0",
"jest": "29.5.x",
"jest-cli": "29.5.x",
@@ -153,7 +152,7 @@
"react": "18.3.x",
"react-dom": "18.3.x",
"rimraf": "5.0.5",
- "stylelint": "^16.9.0",
+ "stylelint": "catalog:tooling",
"ts-jest": "29.1.x",
"ts-loader": "9.5.x",
"typescript": "5.7.x",
diff --git a/packages/js/experimental/changelog/add-shared-stylelint-config b/packages/js/experimental/changelog/add-shared-stylelint-config
new file mode 100644
index 00000000000..56c6a25a923
--- /dev/null
+++ b/packages/js/experimental/changelog/add-shared-stylelint-config
@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Lint styles with the shared stylelint config and apply its autofixes; no visual change.
diff --git a/packages/js/experimental/package.json b/packages/js/experimental/package.json
index f8428d1e852..95852f0f185 100644
--- a/packages/js/experimental/package.json
+++ b/packages/js/experimental/package.json
@@ -83,6 +83,7 @@
"@wordpress/browserslist-config": "next",
"css-loader": "6.11.x",
"eslint": "^10.0.0",
+ "stylelint": "catalog:tooling",
"jest": "29.5.x",
"jest-cli": "29.5.x",
"jest-environment-jsdom": "29.5.x",
@@ -114,7 +115,9 @@
"lint": "pnpm --if-present '/^lint:lang:.*$/'",
"lint:fix": "pnpm --if-present '/^lint:fix:lang:.*$/'",
"lint:fix:lang:js": "eslint src --fix",
+ "lint:fix:lang:style": "stylelint 'src/**/*.scss' --fix",
"lint:lang:js": "eslint src",
+ "lint:lang:style": "stylelint 'src/**/*.scss'",
"lint:lang:types": "tsc --build --emitDeclarationOnly",
"prepack": "pnpm build:publish:project",
"test:js": "jest --config ./jest.config.json --passWithNoTests",
@@ -134,7 +137,7 @@
"ci": {
"lint": {
"command": "lint",
- "changes": "src/**/*.{js,jsx,ts,tsx}"
+ "changes": "src/**/*.{js,jsx,ts,tsx,scss}"
},
"tests": [
{
diff --git a/packages/js/experimental/src/experimental-list/style.scss b/packages/js/experimental/src/experimental-list/style.scss
index fad931b944c..d124f5df7e1 100644
--- a/packages/js/experimental/src/experimental-list/style.scss
+++ b/packages/js/experimental/src/experimental-list/style.scss
@@ -91,7 +91,6 @@ a.woocommerce-experimental-list__item {
}
.woocommerce-list__item-after {
- margin-left: $gap;
display: flex;
align-items: center;
margin-left: auto;
diff --git a/packages/js/experimental/src/experimental-list/task-item/style.scss b/packages/js/experimental/src/experimental-list/task-item/style.scss
index b84b9c96586..a991dc6b2a5 100644
--- a/packages/js/experimental/src/experimental-list/task-item/style.scss
+++ b/packages/js/experimental/src/experimental-list/task-item/style.scss
@@ -13,7 +13,7 @@ $task-alert-yellow: #f0b849;
}
&::before {
- content: '';
+ content: "";
position: absolute;
top: 0;
left: 0;
diff --git a/packages/js/experimental/src/inbox-note/style.scss b/packages/js/experimental/src/inbox-note/style.scss
index be29217b3f4..f4f1afe1079 100644
--- a/packages/js/experimental/src/inbox-note/style.scss
+++ b/packages/js/experimental/src/inbox-note/style.scss
@@ -62,6 +62,7 @@
}
a {
+ /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
@extend .woocommerce-inbox-message__title;
color: $gray-900 !important;
text-decoration: none !important;
diff --git a/packages/js/experimental/src/style.scss b/packages/js/experimental/src/style.scss
index 61ad27d6ea6..60426fb62f9 100644
--- a/packages/js/experimental/src/style.scss
+++ b/packages/js/experimental/src/style.scss
@@ -1,7 +1,7 @@
/**
* Internal Dependencies
*/
-@import 'experimental-list/style.scss';
-@import 'experimental-list/collapsible-list/style.scss';
-@import 'experimental-list/task-item/style.scss';
-@import 'inbox-note/style.scss';
+@import "experimental-list/style.scss";
+@import "experimental-list/collapsible-list/style.scss";
+@import "experimental-list/task-item/style.scss";
+@import "inbox-note/style.scss";
diff --git a/packages/js/internal-build/package.json b/packages/js/internal-build/package.json
index 6a1f7d55713..1bd456cadb4 100644
--- a/packages/js/internal-build/package.json
+++ b/packages/js/internal-build/package.json
@@ -51,7 +51,9 @@
"lint": "pnpm --if-present '/^lint:lang:.*$/'",
"lint:fix": "pnpm --if-present '/^lint:fix:lang:.*$/'",
"lint:fix:lang:js": "eslint src --fix",
- "lint:lang:js": "eslint src"
+ "lint:fix:lang:style": "stylelint 'styles/**/*.scss' --fix",
+ "lint:lang:js": "eslint src",
+ "lint:lang:style": "stylelint 'styles/**/*.scss'"
},
"dependencies": {
"@automattic/color-studio": "^4.0.0",
@@ -77,13 +79,14 @@
"@wordpress/editor": "14.33.11",
"@wordpress/notices": "5.33.1",
"eslint": "^10.0.0",
+ "stylelint": "catalog:tooling",
"typescript": "5.7.x"
},
"config": {
"ci": {
"lint": {
"command": "lint",
- "changes": "src/**/*.{js,jsx,ts,tsx,cjs}"
+ "changes": "{src/**/*.{js,jsx,ts,tsx,cjs},styles/**/*.scss}"
}
}
}
diff --git a/packages/js/internal-build/styles/_breakpoints.scss b/packages/js/internal-build/styles/_breakpoints.scss
index 5c5a1984a7b..4bd82d9759a 100644
--- a/packages/js/internal-build/styles/_breakpoints.scss
+++ b/packages/js/internal-build/styles/_breakpoints.scss
@@ -1,7 +1,3 @@
-
-
-/* stylelint-disable block-closing-brace-newline-after */
-
// Breakpoints
// Forked from https://github.com/Automattic/wp-calypso/blob/46ae24d8800fb85da6acf057a640e60dac988a38/assets/stylesheets/shared/mixins/_breakpoints.scss
@@ -14,8 +10,8 @@ $breakpoints: 320px, 400px, 600px, 782px, 960px, 1280px, 1440px;
@if type-of( $size ) == string {
$approved-value: 0;
@each $breakpoint in $breakpoints {
- $and-larger: '>' + $breakpoint;
- $and-smaller: '<' + $breakpoint;
+ $and-larger: ">" + $breakpoint;
+ $and-smaller: "<" + $breakpoint;
@if $size == $and-smaller {
$approved-value: 1;
@@ -30,7 +26,7 @@ $breakpoints: 320px, 400px, 600px, 782px, 960px, 1280px, 1440px;
}
} @else {
@each $breakpoint-end in $breakpoints {
- $range: $breakpoint + '-' + $breakpoint-end;
+ $range: $breakpoint + "-" + $breakpoint-end;
@if $size == $range {
$approved-value: 3;
@media (min-width: $breakpoint + 1) and (max-width: $breakpoint-end) {
@@ -42,20 +38,19 @@ $breakpoints: 320px, 400px, 600px, 782px, 960px, 1280px, 1440px;
}
}
@if $approved-value == 0 {
- $sizes: '';
+ $sizes: "";
@each $breakpoint in $breakpoints {
- $sizes: $sizes + ' ' + $breakpoint;
+ $sizes: $sizes + " " + $breakpoint;
}
- @warn 'ERROR in breakpoint( #{ $size } ) : You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]';
+ @warn "ERROR in breakpoint( #{ $size } ) : You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]";
}
} @else {
- $sizes: '';
+ $sizes: "";
@each $breakpoint in $breakpoints {
- $sizes: $sizes + ' ' + $breakpoint;
+ $sizes: $sizes + " " + $breakpoint;
}
- @error 'ERROR in breakpoint( #{ $size } ) : Please wrap the breakpoint $size in parenthesis. You can use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]';
+ @error "ERROR in breakpoint( #{ $size } ) : Please wrap the breakpoint $size in parenthesis. You can use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]";
}
}
}
-/* stylelint-enable */
diff --git a/packages/js/internal-build/styles/_colors.scss b/packages/js/internal-build/styles/_colors.scss
index f9e6989e6e4..b7fcc527847 100644
--- a/packages/js/internal-build/styles/_colors.scss
+++ b/packages/js/internal-build/styles/_colors.scss
@@ -1,5 +1,5 @@
-@import '@automattic/color-studio/dist/color-variables.scss';
-@import '@wordpress/base-styles/colors.scss';
+@import "@automattic/color-studio/dist/color-variables.scss";
+@import "@wordpress/base-styles/colors.scss";
$transparent: rgba(255, 255, 255, 0);
diff --git a/packages/js/internal-build/styles/_mixins.scss b/packages/js/internal-build/styles/_mixins.scss
index a16f2723613..778595655df 100644
--- a/packages/js/internal-build/styles/_mixins.scss
+++ b/packages/js/internal-build/styles/_mixins.scss
@@ -8,7 +8,7 @@
}
@function url-friendly-colour( $color ) {
- @return '%23' + str-slice( '#{ $color }', 2, -1 );
+ @return "%23" + str-slice( "#{ $color }", 2, -1 );
}
@mixin hover-state {
@@ -26,7 +26,7 @@
color: transparent;
&::after {
- content: '\00a0';
+ content: "\00a0";
}
@media screen and ( prefers-reduced-motion: reduce ) {
@@ -112,13 +112,12 @@
outline-offset: -2px;
}
-/* stylelint-disable block-closing-brace-newline-after */
-@mixin reduce-motion( $property: '' ) {
- @if $property == 'transition' {
+@mixin reduce-motion( $property: "" ) {
+ @if $property == "transition" {
@media ( prefers-reduced-motion: reduce ) {
transition-duration: 0s;
}
- } @else if $property == 'animation' {
+ } @else if $property == "animation" {
@media ( prefers-reduced-motion: reduce ) {
animation-duration: 1ms;
}
@@ -129,7 +128,6 @@
}
}
}
-/* stylelint-enable */
// Gutenberg Switch.
@mixin switch-style__focus-active() {
@@ -203,9 +201,9 @@
// Create a string-repeat function
@function str-repeat( $character, $n ) {
@if $n == 0 {
- @return '';
+ @return "";
}
- $c: '';
+ $c: "";
@for $i from 1 through $n {
$c: $c + $character;
}
diff --git a/packages/js/internal-build/styles/_variables.scss b/packages/js/internal-build/styles/_variables.scss
index 94d32a73441..0aebda83c35 100644
--- a/packages/js/internal-build/styles/_variables.scss
+++ b/packages/js/internal-build/styles/_variables.scss
@@ -1,13 +1,13 @@
-@import '@automattic/color-studio/dist/color-variables.scss';
+@import "@automattic/color-studio/dist/color-variables.scss";
// Import Gutenberg variables
-@import '@wordpress/base-styles/colors.scss';
-@import '@wordpress/base-styles/variables.scss';
-@import '@wordpress/base-styles/mixins.scss';
-@import '@wordpress/base-styles/breakpoints.scss';
-@import '@wordpress/base-styles/animations.scss';
-@import '@wordpress/base-styles/z-index.scss';
-@import '@wordpress/base-styles/default-custom-properties.scss';
+@import "@wordpress/base-styles/colors.scss";
+@import "@wordpress/base-styles/variables.scss";
+@import "@wordpress/base-styles/mixins.scss";
+@import "@wordpress/base-styles/breakpoints.scss";
+@import "@wordpress/base-styles/animations.scss";
+@import "@wordpress/base-styles/z-index.scss";
+@import "@wordpress/base-styles/default-custom-properties.scss";
$fallback-gutter: 24px;
$fallback-gutter-large: 40px;
diff --git a/packages/js/onboarding/changelog/add-shared-stylelint-config b/packages/js/onboarding/changelog/add-shared-stylelint-config
new file mode 100644
index 00000000000..56c6a25a923
--- /dev/null
+++ b/packages/js/onboarding/changelog/add-shared-stylelint-config
@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Lint styles with the shared stylelint config and apply its autofixes; no visual change.
diff --git a/packages/js/onboarding/package.json b/packages/js/onboarding/package.json
index ef035be7cf4..1760ed59c55 100644
--- a/packages/js/onboarding/package.json
+++ b/packages/js/onboarding/package.json
@@ -47,7 +47,9 @@
"lint": "pnpm --if-present '/^lint:lang:.*$/'",
"lint:fix": "pnpm --if-present '/^lint:fix:lang:.*$/'",
"lint:fix:lang:js": "eslint src --fix",
+ "lint:fix:lang:style": "stylelint 'src/**/*.scss' --fix",
"lint:lang:js": "eslint src",
+ "lint:lang:style": "stylelint 'src/**/*.scss'",
"lint:lang:types": "tsc --build --emitDeclarationOnly",
"prepack": "pnpm build:publish:project",
"test:js": "jest --config ./jest.config.json --passWithNoTests",
@@ -90,6 +92,7 @@
"@wordpress/browserslist-config": "next",
"css-loader": "6.11.x",
"eslint": "^10.0.0",
+ "stylelint": "catalog:tooling",
"jest": "29.5.x",
"jest-cli": "29.5.x",
"jest-environment-jsdom": "29.5.x",
@@ -115,7 +118,7 @@
"ci": {
"lint": {
"command": "lint",
- "changes": "src/**/*.{js,jsx,ts,tsx}"
+ "changes": "src/**/*.{js,jsx,ts,tsx,scss}"
},
"tests": [
{
diff --git a/packages/js/onboarding/src/components/Loader/Loader.scss b/packages/js/onboarding/src/components/Loader/Loader.scss
index 862c2e1dbc5..acb6285a07a 100644
--- a/packages/js/onboarding/src/components/Loader/Loader.scss
+++ b/packages/js/onboarding/src/components/Loader/Loader.scss
@@ -16,8 +16,8 @@
justify-content: center;
align-items: center;
flex-direction: column;
- background-color: white;
- @include breakpoint( '<782px' ) {
+ background-color: #fff;
+ @include breakpoint( "<782px" ) {
padding: 0 20px;
}
@@ -26,7 +26,7 @@
margin: 58px 0 0 0;
font-size: 28px;
font-weight: 500;
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
font-size: 20px;
}
}
@@ -40,7 +40,7 @@
.woocommerce-onboarding-progress-bar {
width: 520px;
margin: $gap-large 0 $gap 0;
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
width: 100%;
}
}
@@ -54,9 +54,9 @@
color: #2f2f2f;
opacity: 0.8;
text-align: center;
- @include breakpoint( '<782px' ) {
+ @include breakpoint( "<782px" ) {
font-size: 14px;
line-height: 20px;
}
}
-}
\ No newline at end of file
+}
diff --git a/packages/js/onboarding/src/components/RecommendedRibbon/RecommendedRibbon.scss b/packages/js/onboarding/src/components/RecommendedRibbon/RecommendedRibbon.scss
index 1a820852e4c..b33e3ba8370 100644
--- a/packages/js/onboarding/src/components/RecommendedRibbon/RecommendedRibbon.scss
+++ b/packages/js/onboarding/src/components/RecommendedRibbon/RecommendedRibbon.scss
@@ -1,10 +1,8 @@
.woocommerce-task-payment__recommended-ribbon {
- position: absolute;
transform: rotate(-45deg) translate(-50%, -50%);
background: $studio-gray-80;
color: $studio-white;
font-size: 11px;
- line-height: 20px;
position: absolute;
top: 0;
left: 0;
@@ -19,7 +17,7 @@
}
}
-@include breakpoint( '<600px' ) {
+@include breakpoint( "<600px" ) {
.woocommerce-task-payment__recommended-ribbon {
margin-top: 24px;
margin-left: 24px;
diff --git a/packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.scss b/packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.scss
index f490a0a12e5..e979386dd1d 100644
--- a/packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.scss
+++ b/packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.scss
@@ -14,7 +14,6 @@
display: flex;
align-items: center;
justify-content: center;
- padding-bottom: 0;
padding: 30px 0 0 0;
}
diff --git a/packages/js/onboarding/src/components/WCPayBenefits/WCPayBenefits.scss b/packages/js/onboarding/src/components/WCPayBenefits/WCPayBenefits.scss
index 33fcb51ab31..ccf43d2ba36 100644
--- a/packages/js/onboarding/src/components/WCPayBenefits/WCPayBenefits.scss
+++ b/packages/js/onboarding/src/components/WCPayBenefits/WCPayBenefits.scss
@@ -16,7 +16,7 @@
.woocommerce-wcpay-benefits-benefit-icon-container {
width: 48px;
height: 48px;
- background-color: #F2EDFF;
+ background-color: #f2edff;
border-radius: 12px;
justify-content: center;
}
diff --git a/packages/js/onboarding/src/components/WooPaymentsMethodsLogos/PaymentMethodsLogos.scss b/packages/js/onboarding/src/components/WooPaymentsMethodsLogos/PaymentMethodsLogos.scss
index b50cbbc0a6a..c64cff8cc39 100644
--- a/packages/js/onboarding/src/components/WooPaymentsMethodsLogos/PaymentMethodsLogos.scss
+++ b/packages/js/onboarding/src/components/WooPaymentsMethodsLogos/PaymentMethodsLogos.scss
@@ -25,7 +25,7 @@
// Carries the same 2px as the bordered logos so the badge matches their
// 40x26 footprint, and gives the hover border something to paint on.
border: 1px solid transparent;
- background-color: rgba($gray-700, 0.10);
+ background-color: rgba($gray-700, 0.1);
color: $gray-900;
text-align: center;
line-height: 24px;
@@ -99,6 +99,6 @@
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: $gap-smaller;
- padding: 0px;
+ padding: 0;
}
}
diff --git a/packages/js/onboarding/src/style.scss b/packages/js/onboarding/src/style.scss
index f0b01218e34..f8a0f8c7e19 100644
--- a/packages/js/onboarding/src/style.scss
+++ b/packages/js/onboarding/src/style.scss
@@ -1,5 +1,5 @@
-@import 'components/WCPayBanner/WCPayBanner.scss';
-@import 'components/WCPayBenefits/WCPayBenefits.scss';
-@import 'components/RecommendedRibbon/RecommendedRibbon.scss';
-@import 'components/Loader/Loader.scss';
-@import 'components/WooPaymentsMethodsLogos/PaymentMethodsLogos.scss';
+@import "components/WCPayBanner/WCPayBanner.scss";
+@import "components/WCPayBenefits/WCPayBenefits.scss";
+@import "components/RecommendedRibbon/RecommendedRibbon.scss";
+@import "components/Loader/Loader.scss";
+@import "components/WooPaymentsMethodsLogos/PaymentMethodsLogos.scss";
diff --git a/packages/js/settings-ui/changelog/add-shared-stylelint-config b/packages/js/settings-ui/changelog/add-shared-stylelint-config
new file mode 100644
index 00000000000..56c6a25a923
--- /dev/null
+++ b/packages/js/settings-ui/changelog/add-shared-stylelint-config
@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Lint styles with the shared stylelint config and apply its autofixes; no visual change.
diff --git a/packages/js/settings-ui/package.json b/packages/js/settings-ui/package.json
index 38895c0b66e..aa64e688d0f 100644
--- a/packages/js/settings-ui/package.json
+++ b/packages/js/settings-ui/package.json
@@ -51,6 +51,7 @@
"@woocommerce/internal-build": "workspace:*",
"@woocommerce/internal-js-tests": "workspace:*",
"eslint": "^10.0.0",
+ "stylelint": "catalog:tooling",
"jest": "29.5.x",
"jest-cli": "29.5.x",
"jest-environment-jsdom": "29.5.x",
@@ -86,7 +87,9 @@
"lint": "pnpm --if-present '/^lint:lang:.*$/'",
"lint:fix": "pnpm --if-present '/^lint:fix:lang:.*$/'",
"lint:fix:lang:js": "eslint src --fix",
+ "lint:fix:lang:style": "stylelint 'src/**/*.scss' --fix",
"lint:lang:js": "eslint src",
+ "lint:lang:style": "stylelint 'src/**/*.scss'",
"lint:lang:types": "tsc --build --emitDeclarationOnly",
"prepack": "pnpm build:publish:project",
"test:js": "jest --config ./jest.config.js --passWithNoTests",
@@ -98,7 +101,7 @@
"ci": {
"lint": {
"command": "lint",
- "changes": "src/**/*.{js,jsx,ts,tsx}"
+ "changes": "src/**/*.{js,jsx,ts,tsx,scss}"
},
"tests": [
{
diff --git a/plugins/woocommerce/changelog/add-shared-stylelint-config b/plugins/woocommerce/changelog/add-shared-stylelint-config
new file mode 100644
index 00000000000..189eb161732
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-shared-stylelint-config
@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Share the stylelint config with the JS packages and apply its autofixes to blocks styles; no visual change.
diff --git a/plugins/woocommerce/client/admin/client/guided-tours/report-date-tour.scss b/plugins/woocommerce/client/admin/client/guided-tours/report-date-tour.scss
index c99748afa84..64d5bf3a190 100644
--- a/plugins/woocommerce/client/admin/client/guided-tours/report-date-tour.scss
+++ b/plugins/woocommerce/client/admin/client/guided-tours/report-date-tour.scss
@@ -1,6 +1,7 @@
.woocommerce-revenue-report-date-tour {
h2.woocommerce-tour-kit-step__heading {
font-size: 1.5em;
+ /* stylelint-disable-next-line declaration-property-unit-allowed-list */
line-height: 1.5em;
letter-spacing: 0.4px;
}
diff --git a/plugins/woocommerce/client/admin/client/homescreen/mobile-app-modal/style.scss b/plugins/woocommerce/client/admin/client/homescreen/mobile-app-modal/style.scss
index 5d1cb0507e3..b2f26e5d4b0 100644
--- a/plugins/woocommerce/client/admin/client/homescreen/mobile-app-modal/style.scss
+++ b/plugins/woocommerce/client/admin/client/homescreen/mobile-app-modal/style.scss
@@ -92,6 +92,7 @@
h3 {
font-weight: 400;
color: #757575;
+ /* stylelint-disable-next-line declaration-property-unit-allowed-list */
line-height: 1.6rem;
margin: 0;
}
@@ -239,6 +240,7 @@ button.components-button.send-magic-link-button {
// Shared `<QRDirectLoginCode />` rules live in the partial below. They are
// reused by the standalone wc-admin page (`client/mobile-app-login`) so both
// surfaces render the same QR / number-match / approved / rejected layouts.
+/* stylelint-disable-next-line no-invalid-position-at-import-rule */
@import "./components/qr-direct-login.scss";
// FAQ paragraph that sits below the stepper / QR block. Adds the breathing
@@ -364,6 +366,7 @@ button.components-button.send-magic-link-button {
.email-sent-subheader {
font-weight: 400;
font-size: 16px;
+ /* stylelint-disable-next-line declaration-property-unit-allowed-list */
line-height: 1.5rem;
color: #757575;
text-align: center;
@@ -407,6 +410,7 @@ button.components-button.send-magic-link-button {
.wrong-user-connected-subheader {
font-weight: 400;
font-size: 16px;
+ /* stylelint-disable-next-line declaration-property-unit-allowed-list */
line-height: 1.5rem;
color: #757575;
text-align: center;
diff --git a/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/payments-content.scss b/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/payments-content.scss
index b3ed1f55e87..fb3fed07bc3 100644
--- a/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/payments-content.scss
+++ b/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/payments-content.scss
@@ -1,4 +1,5 @@
.launch-your-store-payments-content {
+ /* stylelint-disable-next-line no-invalid-position-at-import-rule */
@import "../../../../settings-payments/onboarding/components/modal/style.scss";
height: 100%;
diff --git a/plugins/woocommerce/client/admin/client/layout/style.scss b/plugins/woocommerce/client/admin/client/layout/style.scss
index ba89b66bf7f..0b07a92e0a4 100644
--- a/plugins/woocommerce/client/admin/client/layout/style.scss
+++ b/plugins/woocommerce/client/admin/client/layout/style.scss
@@ -78,8 +78,16 @@
.woocommerce-admin-full-screen {
background: $studio-gray-0;
color: $studio-gray-60;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ font-family:
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ Oxygen-Sans,
+ Ubuntu,
+ Cantarell,
+ "Helvetica Neue",
+ sans-serif;
#wpwrap {
top: 0;
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-offline.scss b/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-offline.scss
index a618f87b7f3..8edb4aa923b 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-offline.scss
+++ b/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-offline.scss
@@ -1,6 +1,7 @@
@import "settings-payments-main.scss";
.settings-payments-offline__container {
+ /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
@extend .settings-payments-main__container;
.settings-payment-gateways {
diff --git a/plugins/woocommerce/client/admin/client/stylesheets/shared/_index.scss b/plugins/woocommerce/client/admin/client/stylesheets/shared/_index.scss
index cacb18f71dd..34ca399ae01 100644
--- a/plugins/woocommerce/client/admin/client/stylesheets/shared/_index.scss
+++ b/plugins/woocommerce/client/admin/client/stylesheets/shared/_index.scss
@@ -1,6 +1,7 @@
@include wordpress-admin-schemes;
// Import our wp-admin reset.
+/* stylelint-disable-next-line no-invalid-position-at-import-rule */
@import "./_reset.scss";
// Some WooCommerce Admin page specific resets.
@@ -25,4 +26,5 @@
}
// Import any global styles.
+/* stylelint-disable-next-line no-invalid-position-at-import-rule */
@import "./_global.scss";
diff --git a/plugins/woocommerce/client/admin/client/task-lists/fills/import-products/cards.scss b/plugins/woocommerce/client/admin/client/task-lists/fills/import-products/cards.scss
index 57ce7439267..cc0fa101e1c 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/fills/import-products/cards.scss
+++ b/plugins/woocommerce/client/admin/client/task-lists/fills/import-products/cards.scss
@@ -74,8 +74,6 @@
.woocommerce-list__item-title {
color: $gray-900;
- line-height: 16px;
- font-weight: 600;
text-transform: uppercase;
text-align: center;
font-size: 13px;
@@ -86,8 +84,6 @@
.woocommerce-list__item-content {
margin: 0;
color: $gray-700;
- line-height: 16px;
- font-weight: 400;
text-align: center;
font-size: 13px;
font-weight: 400;
diff --git a/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/style.scss b/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/style.scss
index 45cf147ef94..7430481e5f3 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/style.scss
+++ b/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/style.scss
@@ -228,6 +228,7 @@
@for $i from 1 through 10 {
.woocommerce-task-list__item:not(.in_progress):not(.complete).index-#{$i} .woocommerce-task__icon::after {
content: "#{$i}";
+ /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
@extend .numbered-circle;
color: var(--wp-admin-theme-color);
font-weight: bold;
diff --git a/plugins/woocommerce/client/admin/client/wp-admin-scripts/fulfillments/components/user-interface/fulfillments-card/card.scss b/plugins/woocommerce/client/admin/client/wp-admin-scripts/fulfillments/components/user-interface/fulfillments-card/card.scss
index 4c726abbfc9..9adf06df41f 100644
--- a/plugins/woocommerce/client/admin/client/wp-admin-scripts/fulfillments/components/user-interface/fulfillments-card/card.scss
+++ b/plugins/woocommerce/client/admin/client/wp-admin-scripts/fulfillments/components/user-interface/fulfillments-card/card.scss
@@ -16,7 +16,6 @@
h3 {
display: flex;
- flex: 1;
align-items: center;
gap: 8px;
flex: 1;
diff --git a/plugins/woocommerce/client/admin/package.json b/plugins/woocommerce/client/admin/package.json
index 4cd09c74281..71ec1bc5b39 100644
--- a/plugins/woocommerce/client/admin/package.json
+++ b/plugins/woocommerce/client/admin/package.json
@@ -172,7 +172,6 @@
"@wordpress/postcss-plugins-preset": "next",
"@wordpress/postcss-themes": "next",
"@wordpress/prettier-config": "4.49.0",
- "@wordpress/stylelint-config": "^23.14.0",
"@xstate/inspect": "0.8.0",
"@xstate/test": "0.5.1",
"autoprefixer": "^10.4.16",
@@ -211,7 +210,7 @@
"rtlcss": "4.3.x",
"sass": "^1.69.5",
"sass-loader": "10.5.x",
- "stylelint": "^16.9.0",
+ "stylelint": "catalog:tooling",
"ts-jest": "29.1.x",
"typescript": "5.7.x",
"webpack": "catalog:tooling",
@@ -227,7 +226,10 @@
"ci": {
"lint": {
"command": "lint",
- "changes": "client/**/*.{js,ts,tsx,scss}"
+ "changes": [
+ "client/**/*.{js,ts,tsx,scss}",
+ "stylelint.config.js"
+ ]
},
"tests": [
{
diff --git a/plugins/woocommerce/client/admin/stylelint.config.js b/plugins/woocommerce/client/admin/stylelint.config.js
index e95a547575a..b511266cde6 100644
--- a/plugins/woocommerce/client/admin/stylelint.config.js
+++ b/plugins/woocommerce/client/admin/stylelint.config.js
@@ -1,34 +1,8 @@
module.exports = {
- extends: '@wordpress/stylelint-config/scss-stylistic',
- reportNeedlessDisables: true,
+ extends: '../../../../stylelint.config.cjs',
ignoreFiles: [ './vendor/**/*.scss' ],
rules: {
- 'at-rule-empty-line-before': null,
- 'at-rule-no-unknown': null,
- 'comment-empty-line-before': null,
- 'declaration-block-no-duplicate-properties': null,
- '@stylistic/declaration-colon-newline-after': null,
- 'declaration-property-unit-allowed-list': null,
- 'font-weight-notation': null,
- '@stylistic/max-line-length': null,
- 'no-descending-specificity': null,
- 'no-duplicate-selectors': null,
- 'rule-empty-line-before': null,
- 'selector-class-pattern': null,
- '@stylistic/string-quotes': 'double',
- 'value-keyword-case': null,
- '@stylistic/value-list-comma-newline-after': null,
- // TODO: fix these rules
- // New rules enabled after updating @wordpress/stylelint-config
'scss/load-partial-extension': 'always',
- 'scss/load-no-partial-leading-underscore': null,
- 'scss/no-global-function-names': null,
- 'scss/operator-no-unspaced': null,
- 'scss/at-extend-no-missing-placeholder': null,
- 'scss/selector-no-redundant-nesting-selector': null,
- 'selector-id-pattern': null,
- 'no-invalid-position-at-import-rule': null,
- 'length-zero-no-unit': [ true, { ignoreFunctions: [ 'calc', 'var' ] } ],
// Enabled by the preset since @wordpress/stylelint-config 23.x.
// TODO: re-enable once update-banner.scss uses valid WPDS tokens.
'plugin-wpds/no-unknown-ds-tokens': null,
diff --git a/plugins/woocommerce/client/blocks/.stylelintrc.json b/plugins/woocommerce/client/blocks/.stylelintrc.json
index 6aa674c646e..4bd2e23b83d 100644
--- a/plugins/woocommerce/client/blocks/.stylelintrc.json
+++ b/plugins/woocommerce/client/blocks/.stylelintrc.json
@@ -1,16 +1,21 @@
{
- "extends": "@wordpress/stylelint-config/scss",
+ "extends": "@wordpress/stylelint-config/scss-stylistic",
"reportNeedlessDisables": true,
"rules": {
+ "no-descending-specificity": null,
+ "no-duplicate-selectors": null,
+ "selector-class-pattern": null,
"at-rule-empty-line-before": null,
"at-rule-no-unknown": null,
"comment-empty-line-before": null,
"font-weight-notation": null,
- "no-descending-specificity": null,
- "no-duplicate-selectors": null,
"rule-empty-line-before": null,
- "selector-class-pattern": null,
"value-keyword-case": null,
+ "@stylistic/declaration-colon-newline-after": null,
+ "@stylistic/function-parentheses-space-inside": null,
+ "@stylistic/function-comma-space-after": null,
+ "@stylistic/indentation": null,
+ "@stylistic/max-line-length": null,
"length-zero-no-unit": [
true,
{ "ignoreFunctions": [ "calc", "var" ] }
diff --git a/plugins/woocommerce/client/blocks/assets/css/style.scss b/plugins/woocommerce/client/blocks/assets/css/style.scss
index 0f151fbacae..e62c4574fe2 100644
--- a/plugins/woocommerce/client/blocks/assets/css/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/css/style.scss
@@ -214,9 +214,17 @@ body.wc-block-product-gallery-modal-open {
.wc-block-grid__product-onsale,
.wc-block-components-product-title,
.wc-block-components-product-sale-badge {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
- "Helvetica Neue", sans-serif;
+ font-family: -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ Oxygen,
+ Ubuntu,
+ Cantarell,
+ "Fira Sans",
+ "Droid Sans",
+ "Helvetica Neue",
+ sans-serif;
}
.wc-block-grid__product-title::before {
display: none;
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/password-strength-meter/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/password-strength-meter/style.scss
index 4440fe352de..aa17e62157a 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/password-strength-meter/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/password-strength-meter/style.scss
@@ -60,23 +60,19 @@
}
}
.wc-block-components-password-strength__meter[value="1"],
- .wc-block-components-password-strength__meter[value="1"]
- + .wc-block-components-password-strength__result {
+ .wc-block-components-password-strength__meter[value="1"] + .wc-block-components-password-strength__result {
color: $alert-red;
}
.wc-block-components-password-strength__meter[value="2"],
- .wc-block-components-password-strength__meter[value="2"]
- + .wc-block-components-password-strength__result {
+ .wc-block-components-password-strength__meter[value="2"] + .wc-block-components-password-strength__result {
color: $alert-red;
}
.wc-block-components-password-strength__meter[value="3"],
- .wc-block-components-password-strength__meter[value="3"]
- + .wc-block-components-password-strength__result {
+ .wc-block-components-password-strength__meter[value="3"] + .wc-block-components-password-strength__result {
color: $alert-yellow;
}
.wc-block-components-password-strength__meter[value="4"],
- .wc-block-components-password-strength__meter[value="4"]
- + .wc-block-components-password-strength__result {
+ .wc-block-components-password-strength__meter[value="4"] + .wc-block-components-password-strength__result {
color: $alert-green;
}
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss
index abe7c2b70d9..f75cc2a654d 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss
@@ -135,8 +135,7 @@
}
}
-.wc-block-components-shipping-rates-control__package-item:not(:last-child)
- > div::after {
+.wc-block-components-shipping-rates-control__package-item:not(:last-child) > div::after {
// Usage of RawHTML component from WordPress always adds a div wrapper.
content: ", ";
white-space: pre;
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/form-token-field/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/form-token-field/style.scss
index 441dea3c7f0..cd356297b97 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/form-token-field/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/form-token-field/style.scss
@@ -79,14 +79,12 @@
width: 100%;
}
- .components-form-token-field__token
- + input[type="text"].components-form-token-field__input {
+ .components-form-token-field__token + input[type="text"].components-form-token-field__input {
position: absolute;
}
.is-active
- .components-form-token-field__token
- + input[type="text"].components-form-token-field__input {
+ .components-form-token-field__token + input[type="text"].components-form-token-field__input {
border: 1px solid $gray-600;
margin: 0 2px 4px;
padding: 0 5px;
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/reviews/review-list-item/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/reviews/review-list-item/style.scss
index f5c2bffe7e2..4dc541c7645 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/reviews/review-list-item/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/reviews/review-list-item/style.scss
@@ -142,8 +142,7 @@
margin-right: $gap * 0.5;
}
-.wc-block-components-review-list-item__product
- + .wc-block-components-review-list-item__author {
+.wc-block-components-review-list-item__product + .wc-block-components-review-list-item__author {
font-weight: normal;
order: 4;
}
@@ -152,9 +151,7 @@
order: 5;
}
-.wc-block-components-review-list-item__product
- + .wc-block-components-review-list-item__author
- + .wc-block-components-review-list-item__published-date {
+.wc-block-components-review-list-item__product + .wc-block-components-review-list-item__author + .wc-block-components-review-list-item__published-date {
padding-left: $gap * 0.5;
position: relative;
@@ -172,11 +169,8 @@
}
}
-.wc-block-components-review-list-item__author:first-child
- + .wc-block-components-review-list-item__published-date,
-.wc-block-components-review-list-item__rating
- + .wc-block-components-review-list-item__author
- + .wc-block-components-review-list-item__published-date {
+.wc-block-components-review-list-item__author:first-child + .wc-block-components-review-list-item__published-date,
+.wc-block-components-review-list-item__rating + .wc-block-components-review-list-item__author + .wc-block-components-review-list-item__published-date {
&::before {
display: none;
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss
index f2d56af3943..f643a355ecd 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss
@@ -45,7 +45,7 @@
border-color: currentColor;
border-width: 1.5px;
- padding: $gap $gap-smaller + .5px 0;
+ padding: $gap $gap-smaller + 0.5px 0;
}
.has-dark-controls & {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss
index f41a5ee0635..15b35b36dab 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss
@@ -187,8 +187,7 @@
// For Twenty Twenty we need to increase specificity a bit more.
.theme-twentytwenty .wp-block-woocommerce-checkout.is-loading {
.wp-block-woocommerce-checkout-totals-block
- .wc-block-components-panel
- > h2 {
+ .wc-block-components-panel > h2 {
@include font-size(large);
@include reset-box();
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/coming-soon/entire-site.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/coming-soon/entire-site.scss
index f7ce5606347..f3ace1c0bce 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/coming-soon/entire-site.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/coming-soon/entire-site.scss
@@ -26,8 +26,15 @@
// Minimal left image template styles
.woocommerce-coming-soon-minimal-left-image {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ font-family: -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ Oxygen-Sans,
+ Ubuntu,
+ Cantarell,
+ "Helvetica Neue",
+ sans-serif;
&__content {
.wp-block-columns-is-layout-flex {
@@ -43,8 +50,15 @@
// Split right image template styles
.woocommerce-coming-soon-split-right-image {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ font-family: -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ Oxygen-Sans,
+ Ubuntu,
+ Cantarell,
+ "Helvetica Neue",
+ sans-serif;
.woocommerce-split-right-image-content {
width: 100%;
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/editor.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/editor.scss
index 241ed26c723..76743ebdd13 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/editor.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/editor.scss
@@ -1,20 +1,17 @@
@import "./style";
.editor-styles-wrapper
- .is-layout-constrained
- > .wc-block-editor-customer-account.alignright {
+ .is-layout-constrained > .wc-block-editor-customer-account.alignright {
@include flex-justify-content(flex-end);
}
.editor-styles-wrapper
- .is-layout-constrained
- > .wc-block-editor-customer-account.alignleft {
+ .is-layout-constrained > .wc-block-editor-customer-account.alignleft {
@include flex-justify-content(flex-start);
}
.editor-styles-wrapper
- .is-layout-constrained
- > .wc-block-editor-customer-account.aligncenter {
+ .is-layout-constrained > .wc-block-editor-customer-account.aligncenter {
@include flex-justify-content(center);
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss
index 2b4d2368af8..668dc892b74 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss
@@ -14,9 +14,7 @@
display: none;
}
- .wp-block-woocommerce-filled-mini-cart-contents-block
- > .block-editor-inner-blocks
- > .block-editor-block-list__layout {
+ .wp-block-woocommerce-filled-mini-cart-contents-block > .block-editor-inner-blocks > .block-editor-block-list__layout {
display: flex;
flex-direction: column;
height: 100vh;
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/style.scss
index 66cd430a291..c6168cbe9a1 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/style.scss
@@ -140,9 +140,7 @@ h2.wc-block-mini-cart__title {
// First selector for the frontend, second selector for the editor.
.wc-block-mini-cart__footer-actions,
- .wc-block-mini-cart__footer-actions
- > .block-editor-inner-blocks
- > .block-editor-block-list__layout {
+ .wc-block-mini-cart__footer-actions > .block-editor-inner-blocks > .block-editor-block-list__layout {
display: flex;
gap: $gap;
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-query/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-query/style.scss
index bfc3f26b95e..52130e65ae5 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-query/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-query/style.scss
@@ -26,9 +26,7 @@
margin-top: 0;
}
-:where(.editor-styles-wrapper .products-block-post-template .wp-block-post)
- > *
- > * {
+:where(.editor-styles-wrapper .products-block-post-template .wp-block-post) > * > * {
margin-bottom: 0;
margin-top: 0;
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/reviews-pagination/editor.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/reviews-pagination/editor.scss
index 39122f1e878..0f4e9f714ba 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/reviews-pagination/editor.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-reviews/inner-blocks/reviews-pagination/editor.scss
@@ -1,8 +1,7 @@
$pagination-margin: 0.5em;
// Center flex items. This has an equivalent in style.scss.
-.wp-block[data-align="center"]
- > .wp-block-woocommerce-product-reviews-pagination {
+.wp-block[data-align="center"] > .wp-block-woocommerce-product-reviews-pagination {
justify-content: center;
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/shared/styles/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/shared/styles/style.scss
index 9cbb365cd89..263510228d9 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/shared/styles/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/shared/styles/style.scss
@@ -3,14 +3,12 @@
// Related only to single selection dropdown with already chosen option.
@mixin includeFormTokenFieldFix {
.single-selection {
- .components-form-token-field__token
- + input[type="text"].components-form-token-field__input {
+ .components-form-token-field__token + input[type="text"].components-form-token-field__input {
opacity: 0;
}
.components-form-token-field__input-container.is-active {
- .components-form-token-field__token
- + input[type="text"].components-form-token-field__input {
+ .components-form-token-field__token + input[type="text"].components-form-token-field__input {
opacity: 1;
}
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/style.scss b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/style.scss
index 96468a97e22..6bb6a10a3a6 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/style.scss
@@ -214,7 +214,7 @@
> label:has(.woocommerce-search-list__item-label) {
display: contents;
}
-
+
.woocommerce-search-list__item-label {
display: flex;
flex: 1;
diff --git a/plugins/woocommerce/client/blocks/package.json b/plugins/woocommerce/client/blocks/package.json
index 06c8d7cc4cb..21784600bf3 100644
--- a/plugins/woocommerce/client/blocks/package.json
+++ b/plugins/woocommerce/client/blocks/package.json
@@ -154,7 +154,7 @@
"@wordpress/private-apis": "catalog:wp-min",
"@wordpress/rich-text": "catalog:wp-min",
"@wordpress/scripts": "32.6.0",
- "@wordpress/stylelint-config": "^23.14.0",
+ "@wordpress/stylelint-config": "catalog:tooling",
"ajv-cli": "3.3.x",
"allure-playwright": "^2.9.2",
"autoprefixer": "10.4.14",
@@ -205,7 +205,7 @@
"rtlcss": "4.3.x",
"sass-loader": "10.5.x",
"storybook": "10.5.10",
- "stylelint": "^16.9.0",
+ "stylelint": "catalog:tooling",
"stylelint-scss": "^6.4.0",
"typescript": "5.7.x",
"utility-types": "3.10.0",
@@ -297,7 +297,8 @@
"changes": [
"assets/**/*.{js,ts,tsx,scss}",
"packages/**/*.{js,ts,tsx,scss}",
- "tests/**/*.{js,ts,tsx,scss}"
+ "tests/**/*.{js,ts,tsx,scss}",
+ ".stylelintrc.json"
]
},
"tests": [
diff --git a/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/form-step/style.scss b/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/form-step/style.scss
index 796b01479d2..830ee985095 100644
--- a/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/form-step/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/form-step/style.scss
@@ -37,8 +37,7 @@
}
.wc-block-components-checkout-step--with-step-number
- .wc-block-components-checkout-step__content
- > :last-child {
+ .wc-block-components-checkout-step__content > :last-child {
margin-bottom: 0;
}
@@ -49,8 +48,7 @@
.wc-block-components-checkout-step__heading {
position: relative;
- .wc-block-components-express-payment-continue-rule
- + .wc-block-components-checkout-step
+ .wc-block-components-express-payment-continue-rule + .wc-block-components-checkout-step
& {
margin-top: 0;
}
diff --git a/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/radio-control/style.scss b/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/radio-control/style.scss
index 5c2ce63110a..d9a658616a8 100644
--- a/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/radio-control/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/radio-control/style.scss
@@ -33,8 +33,7 @@ $content-padding-left: calc($gap + 24px + $gap-smaller);
}
// This rule removes the fake border-top from the selected element to prevent a double border.
- &.wc-block-components-radio-control-accordion-option--checked-option-highlighted
- + div.wc-block-components-radio-control-accordion-option::after {
+ &.wc-block-components-radio-control-accordion-option--checked-option-highlighted + div.wc-block-components-radio-control-accordion-option::after {
display: none;
}
}
@@ -80,8 +79,7 @@ $content-padding-left: calc($gap + 24px + $gap-smaller);
// Remove the fake border-top from the item after the selected element, this is to prevent a double border with the
// selected element's box-shadow.
- .wc-block-components-radio-control__option--checked-option-highlighted
- + .wc-block-components-radio-control__option::after {
+ .wc-block-components-radio-control__option--checked-option-highlighted + .wc-block-components-radio-control__option::after {
display: none;
}
diff --git a/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/store-notices-container/style.scss b/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/store-notices-container/style.scss
index dbbdf28bad0..4c7812f6de2 100644
--- a/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/store-notices-container/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/store-notices-container/style.scss
@@ -45,8 +45,7 @@
}
}
}
- .wc-block-components-notices__notice
- + .wc-block-components-notices__notice {
+ .wc-block-components-notices__notice + .wc-block-components-notices__notice {
margin-top: 1em;
}
}
diff --git a/plugins/woocommerce/client/blocks/storybook/style.scss b/plugins/woocommerce/client/blocks/storybook/style.scss
index 7ddf8d7447b..6f6035a8a1f 100644
--- a/plugins/woocommerce/client/blocks/storybook/style.scss
+++ b/plugins/woocommerce/client/blocks/storybook/style.scss
@@ -5,8 +5,15 @@
// Use system font, consistent with WordPress core (wp-admin)
body {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ font-family: -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ Oxygen-Sans,
+ Ubuntu,
+ Cantarell,
+ "Helvetica Neue",
+ sans-serif;
}
// screen-reader-text applied in WP environment
diff --git a/plugins/woocommerce/client/legacy/package.json b/plugins/woocommerce/client/legacy/package.json
index fe58cc78719..679bad91ae2 100644
--- a/plugins/woocommerce/client/legacy/package.json
+++ b/plugins/woocommerce/client/legacy/package.json
@@ -24,7 +24,7 @@
"devDependencies": {
"@types/node": "^24.1.0",
"@wordpress/scripts": "32.6.0",
- "@wordpress/stylelint-config": "^23.14.0",
+ "@wordpress/stylelint-config": "catalog:tooling",
"chokidar": "^3.6.0",
"eslint": "^10.0.0",
"globals": "^16.5.0",
@@ -40,7 +40,7 @@
"grunt-stylelint": "0.20.1",
"jest-fixed-jsdom": "^0.0.10",
"sass": "^1.69.5",
- "stylelint": "^16.9.0"
+ "stylelint": "catalog:tooling"
},
"dependencies": {
"sourcebuster": "github:woocommerce/sourcebuster-js#d7f4616d5a17e17db925ca1842457f309379d861"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 284f52348a1..6d4b3a20712 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,9 +27,15 @@ catalogs:
'@babel/runtime':
specifier: 7.25.7
version: 7.25.7
+ '@wordpress/stylelint-config':
+ specifier: ^23.14.0
+ version: 23.42.0
postcss:
specifier: ^8.5.26
version: 8.5.26
+ stylelint:
+ specifier: ^16.9.0
+ version: 16.26.1
webpack:
specifier: 5.97.x
version: 5.97.1
@@ -260,6 +266,9 @@ importers:
'@wordpress/prettier-config':
specifier: 4.49.0
version: 4.49.0(wp-prettier@3.0.3)
+ '@wordpress/stylelint-config':
+ specifier: catalog:tooling
+ version: 23.42.0(@types/react@18.3.28)(esbuild@0.24.2)(postcss@8.5.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint-scss@6.14.0(stylelint@16.26.1(typescript@5.7.3)))(stylelint@16.26.1(typescript@5.7.3))
babel-loader:
specifier: 9.2.x
version: 9.2.1(@babel/core@7.25.7)(webpack@5.97.1(@swc/core@1.15.24))
@@ -314,6 +323,9 @@ importers:
sass-loader:
specifier: 10.5.x
version: 10.5.2(sass@1.69.5)(webpack@5.97.1(@swc/core@1.15.24))
+ stylelint:
+ specifier: catalog:tooling
+ version: 16.26.1(typescript@5.7.3)
syncpack:
specifier: 15.3.3
version: 15.3.3
@@ -378,6 +390,9 @@ importers:
sass-loader:
specifier: 10.5.x
version: 10.5.2(sass@1.69.5)(webpack@5.97.1(@swc/core@1.15.24))
+ stylelint:
+ specifier: catalog:tooling
+ version: 16.26.1(typescript@5.7.3)
ts-jest:
specifier: 29.1.x
version: 29.1.5(@babel/core@7.25.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.7))(esbuild@0.24.2)(jest@29.5.0(@types/node@24.12.2)(babel-plugin-macros@3.1.0)(node-notifier@8.0.2)(ts-node@10.9.2(@swc/core@1.15.24)(@types/node@24.12.2)(typescript@5.7.3)))(typescript@5.7.3)
@@ -679,6 +694,9 @@ importers:
sass-loader:
specifier: 10.5.x
version: 10.5.2(sass@1.69.5)(webpack@5.97.1(@swc/core@1.15.24))
+ stylelint:
+ specifier: catalog:tooling
+ version: 16.26.1(typescript@5.7.3)
ts-jest:
specifier: 29.1.x
version: 29.1.5(@babel/core@7.25.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.7))(esbuild@0.24.2)(jest@29.5.0(@types/node@24.12.2)(babel-plugin-macros@3.1.0)(node-notifier@8.0.2)(ts-node@10.9.2(@swc/core@1.15.24)(@types/node@24.12.2)(typescript@5.7.3)))(typescript@5.7.3)
@@ -918,6 +936,9 @@ importers:
sass-loader:
specifier: 10.5.x
version: 10.5.2(sass@1.69.5)(webpack@5.97.1(@swc/core@1.15.24))
+ stylelint:
+ specifier: catalog:tooling
+ version: 16.26.1(typescript@5.7.3)
ts-jest:
specifier: 29.1.x
version: 29.1.5(@babel/core@7.25.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.7))(esbuild@0.24.2)(jest@29.5.0(@types/node@24.12.2)(babel-plugin-macros@3.1.0)(node-notifier@8.0.2)(ts-node@10.9.2(@swc/core@1.15.24)(@types/node@24.12.2)(typescript@5.7.3)))(typescript@5.7.3)
@@ -1391,9 +1412,6 @@ importers:
'@wordpress/prettier-config':
specifier: 4.49.0
version: 4.49.0(wp-prettier@3.0.3)
- '@wordpress/stylelint-config':
- specifier: ^23.14.0
- version: 23.42.0(@types/react@18.3.28)(esbuild@0.24.2)(postcss@8.5.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint-scss@6.14.0(stylelint@16.26.1(typescript@5.7.3)))(stylelint@16.26.1(typescript@5.7.3))
eslint:
specifier: ^10.0.0
version: 10.7.0(jiti@2.6.1)
@@ -1419,7 +1437,7 @@ importers:
specifier: 5.0.5
version: 5.0.5
stylelint:
- specifier: ^16.9.0
+ specifier: catalog:tooling
version: 16.26.1(typescript@5.7.3)
ts-jest:
specifier: 29.1.x
@@ -1579,6 +1597,9 @@ importers:
sass-loader:
specifier: 10.5.x
version: 10.5.2(sass@1.69.5)(webpack@5.97.1(@swc/core@1.15.24))
+ stylelint:
+ specifier: catalog:tooling
+ version: 16.26.1(typescript@5.7.3)
ts-jest:
specifier: 29.1.x
version: 29.1.5(@babel/core@7.25.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.7))(esbuild@0.24.2)(jest@29.5.0(@types/node@24.12.2)(babel-plugin-macros@3.1.0)(node-notifier@8.0.2)(ts-node@10.9.2(@swc/core@1.15.24)(@types/node@24.12.2)(typescript@5.7.3)))(typescript@5.7.3)
@@ -1782,6 +1803,9 @@ importers:
eslint:
specifier: ^10.0.0
version: 10.7.0(jiti@2.6.1)
+ stylelint:
+ specifier: catalog:tooling
+ version: 16.26.1(typescript@5.7.3)
typescript:
specifier: 5.7.x
version: 5.7.3
@@ -2159,6 +2183,9 @@ importers:
sass-loader:
specifier: 10.5.x
version: 10.5.2(sass@1.69.5)(webpack@5.97.1(@swc/core@1.15.24))
+ stylelint:
+ specifier: catalog:tooling
+ version: 16.26.1(typescript@5.7.3)
ts-jest:
specifier: 29.1.x
version: 29.1.5(@babel/core@7.25.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.7))(esbuild@0.24.2)(jest@29.5.0(@types/node@24.12.2)(babel-plugin-macros@3.1.0)(node-notifier@8.0.2)(ts-node@10.9.2(@swc/core@1.15.24)(@types/node@24.12.2)(typescript@5.7.3)))(typescript@5.7.3)
@@ -2348,6 +2375,9 @@ importers:
rimraf:
specifier: 5.0.5
version: 5.0.5
+ stylelint:
+ specifier: catalog:tooling
+ version: 16.26.1(typescript@5.7.3)
ts-jest:
specifier: 29.1.x
version: 29.1.5(@babel/core@7.25.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.7))(esbuild@0.24.2)(jest@29.5.0(@types/node@24.12.2)(babel-plugin-macros@3.1.0)(node-notifier@8.0.2)(ts-node@10.9.2(@swc/core@1.15.24)(@types/node@24.12.2)(typescript@5.7.3)))(typescript@5.7.3)
@@ -3091,9 +3121,6 @@ importers:
'@wordpress/prettier-config':
specifier: 4.49.0
version: 4.49.0(wp-prettier@3.0.3)
- '@wordpress/stylelint-config':
- specifier: ^23.14.0
- version: 23.42.0(@types/react@18.3.28)(esbuild@0.24.2)(postcss@8.5.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint-scss@6.14.0(stylelint@16.26.1(typescript@5.7.3)))(stylelint@16.26.1(typescript@5.7.3))
'@xstate/inspect':
specifier: 0.8.0
version: 0.8.0(@types/ws@8.18.1)(ws@8.21.3)(xstate@4.37.1)
@@ -3209,7 +3236,7 @@ importers:
specifier: 10.5.x
version: 10.5.2(sass@1.69.5)(webpack@5.97.1(@swc/core@1.15.24))
stylelint:
- specifier: ^16.9.0
+ specifier: catalog:tooling
version: 16.26.1(typescript@5.7.3)
ts-jest:
specifier: 29.1.x
@@ -3579,7 +3606,7 @@ importers:
specifier: 32.6.0
version: 32.6.0(@playwright/test@1.63.0)(@swc/core@1.15.24)(@types/node@24.12.2)(@types/react@18.3.28)(@types/webpack@4.41.40)(@wordpress/env@11.9.0(patch_hash=4ba152352e5408eabc62f88b83637a382c45c03b267bf8abf8e58fb1663c8cf7)(@types/node@24.12.2))(babel-plugin-macros@3.1.0)(esbuild@0.24.2)(eslint-import-resolver-webpack@0.13.11)(file-loader@6.2.0(webpack@5.97.1))(jiti@2.6.1)(node-notifier@8.0.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass-embedded@1.100.0)(stylelint-scss@6.14.0(stylelint@16.26.1(typescript@5.7.3)))(ts-node@10.9.2(@swc/core@1.15.24)(@types/node@24.12.2)(typescript@5.7.3))(type-fest@4.41.0)(typescript@5.7.3)(webpack-hot-middleware@2.26.1)
'@wordpress/stylelint-config':
- specifier: ^23.14.0
+ specifier: catalog:tooling
version: 23.36.0(postcss@8.5.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint-scss@6.14.0(stylelint@16.26.1(typescript@5.7.3)))(stylelint@16.26.1(typescript@5.7.3))
ajv-cli:
specifier: 3.3.x
@@ -3732,7 +3759,7 @@ importers:
specifier: 10.5.10
version: 10.5.10(@types/react@18.3.28)(react@18.3.1)(wp-prettier@3.0.3)
stylelint:
- specifier: ^16.9.0
+ specifier: catalog:tooling
version: 16.26.1(typescript@5.7.3)
stylelint-scss:
specifier: ^6.4.0
@@ -3773,7 +3800,7 @@ importers:
specifier: 32.6.0
version: 32.6.0(@playwright/test@1.63.0)(@swc/core@1.15.24)(@types/node@24.12.2)(@types/react@18.3.28)(@types/webpack@4.41.40)(@wordpress/env@11.9.0(patch_hash=4ba152352e5408eabc62f88b83637a382c45c03b267bf8abf8e58fb1663c8cf7)(@types/node@24.12.2))(babel-plugin-macros@3.1.0)(file-loader@6.2.0(webpack@5.97.1))(jiti@2.6.1)(node-notifier@8.0.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass-embedded@1.100.0)(stylelint-scss@6.14.0(stylelint@16.26.1(typescript@5.7.3)))(ts-node@10.9.2(@swc/core@1.15.24)(@types/node@24.12.2)(typescript@5.7.3))(type-fest@4.41.0)(typescript@5.7.3)(webpack-hot-middleware@2.26.1)
'@wordpress/stylelint-config':
- specifier: ^23.14.0
+ specifier: catalog:tooling
version: 23.42.0(@types/react@18.3.28)(esbuild@0.24.2)(postcss@8.5.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint-scss@6.14.0(stylelint@16.26.1(typescript@5.7.3)))(stylelint@16.26.1(typescript@5.7.3))
chokidar:
specifier: ^3.6.0
@@ -3821,7 +3848,7 @@ importers:
specifier: 1.69.5
version: 1.69.5
stylelint:
- specifier: ^16.9.0
+ specifier: catalog:tooling
version: 16.26.1(typescript@5.7.3)
tools/code-analyzer:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index e0bfebc1fed..94e0f971443 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -78,7 +78,9 @@ catalogs:
'@babel/preset-react': 7.25.7
'@babel/preset-typescript': 7.25.7
'@babel/runtime': 7.25.7
+ '@wordpress/stylelint-config': ^23.14.0
postcss: ^8.5.26
+ stylelint: ^16.9.0
webpack: 5.97.x
packages:
diff --git a/stylelint.config.cjs b/stylelint.config.cjs
new file mode 100644
index 00000000000..4fbcafcf779
--- /dev/null
+++ b/stylelint.config.cjs
@@ -0,0 +1,52 @@
+/**
+ * Stylelint config for the monorepo's SCSS: the WordPress SCSS preset (with
+ * stylistic rules) plus the relaxations that the existing code relies on.
+ */
+module.exports = {
+ extends: '@wordpress/stylelint-config/scss-stylistic',
+ reportNeedlessDisables: true,
+ ignoreFiles: [
+ 'docs/**',
+ 'packages/php/**',
+ 'plugins/woocommerce-beta-tester/**',
+ 'plugins/woocommerce/tests/**',
+ ],
+ rules: {
+ 'no-descending-specificity': null,
+ 'no-duplicate-selectors': null,
+ 'selector-class-pattern': null,
+ 'at-rule-empty-line-before': null,
+ 'comment-empty-line-before': null,
+ 'font-weight-notation': null,
+ 'rule-empty-line-before': null,
+ 'value-keyword-case': null,
+ '@stylistic/declaration-colon-newline-after': null,
+ '@stylistic/function-parentheses-space-inside': null,
+ '@stylistic/indentation': null,
+ '@stylistic/max-line-length': null,
+ // TODO: fix these rules. They were added to the preset after most of
+ // the existing SCSS was written.
+ 'scss/load-partial-extension': null,
+ 'scss/load-no-partial-leading-underscore': null,
+ 'scss/no-global-function-names': null,
+ 'scss/selector-no-redundant-nesting-selector': null,
+ 'selector-id-pattern': null,
+ 'length-zero-no-unit': [ true, { ignoreFunctions: [ 'calc', 'var' ] } ],
+ },
+ overrides: [
+ {
+ // CSS modules use `:global`/`:local` and the `composes` property.
+ files: [ '**/*.module.css' ],
+ rules: {
+ 'selector-pseudo-class-no-unknown': [
+ true,
+ { ignorePseudoClasses: [ 'global', 'local' ] },
+ ],
+ 'property-no-unknown': [
+ true,
+ { ignoreProperties: [ 'composes' ] },
+ ],
+ },
+ },
+ ],
+};