wpallstars/wp-plugin-starter-template-for-ai-coding
Template
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: address CSS quality-debt from PR #15 review feedback (#55)

Browse Source 
- Convert tab indentation to 4 spaces in admin/css/admin-styles.css
  and admin/css/update-source-selector.css per project coding standards
- Add stylelint and stylelint-config-standard to devDependencies
- Add lint:css npm script to enable CSS quality checking
- Update quality script to include CSS linting

The playground/multisite.html CSS rule-empty-line-before fix was already
applied in commit 3ca2fe5. This PR formally closes the quality-debt
tracking issue by verifying the fix and adding CSS linting tooling to
prevent similar regressions.

Closes #38
This commit is contained in:
Marcus Quinn
2026-03-16 22:44:46 +00:00
committed by GitHub
parent 0e906eb981
commit 5d148f8af9
3 changed files with 148 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
admin/css/admin-styles.css
View File

@@ -6,140 +6,140 @@
/* General Admin Styles */ /* General Admin Styles */
.wpst-admin-page { .wpst-admin-page {
max-width: 1200px; max-width: 1200px;
margin: 20px auto; margin: 20px auto;
padding: 20px; padding: 20px;
background: #fff; background: #fff;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%); box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
} }
.wpst-admin-header { .wpst-admin-header {
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 20px; padding-bottom: 20px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.wpst-admin-header h1 { .wpst-admin-header h1 {
margin-top: 0; margin-top: 0;
color: #23282d; color: #23282d;
} }
/* Admin Form Styles */ /* Admin Form Styles */
.wpst-form-table { .wpst-form-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
} }
.wpst-form-table th { .wpst-form-table th {
text-align: left; text-align: left;
padding: 15px 10px 15px 0; padding: 15px 10px 15px 0;
width: 200px; width: 200px;
vertical-align: top; vertical-align: top;
} }
.wpst-form-table td { .wpst-form-table td {
padding: 15px 0; padding: 15px 0;
vertical-align: middle; vertical-align: middle;
} }
.wpst-form-table input[type="text"], .wpst-form-table input[type="text"],
.wpst-form-table input[type="number"], .wpst-form-table input[type="number"],
.wpst-form-table select, .wpst-form-table select,
.wpst-form-table textarea { .wpst-form-table textarea {
width: 400px; width: 400px;
max-width: 100%; max-width: 100%;
} }
.wpst-form-table textarea { .wpst-form-table textarea {
min-height: 100px; min-height: 100px;
} }
.wpst-form-description { .wpst-form-description {
color: #666; color: #666;
font-style: italic; font-style: italic;
margin-top: 5px; margin-top: 5px;
} }
/* Admin Notices */ /* Admin Notices */
.wpst-notice { .wpst-notice {
padding: 10px 15px; padding: 10px 15px;
margin: 15px 0; margin: 15px 0;
border-radius: 3px; border-radius: 3px;
border-left: 4px solid #00a0d2; border-left: 4px solid #00a0d2;
background: #f7fcff; background: #f7fcff;
} }
.wpst-notice.success { .wpst-notice.success {
border-left-color: #46b450; border-left-color: #46b450;
background: #ecf7ed; background: #ecf7ed;
} }
.wpst-notice.error { .wpst-notice.error {
border-left-color: #dc3232; border-left-color: #dc3232;
background: #fbeaea; background: #fbeaea;
} }
.wpst-notice.warning { .wpst-notice.warning {
border-left-color: #ffb900; border-left-color: #ffb900;
background: #fff8e5; background: #fff8e5;
} }
/* Admin Cards */ /* Admin Cards */
.wpst-card-container { .wpst-card-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -10px; margin: 0 -10px;
} }
.wpst-card { .wpst-card {
flex: 1 0 300px; flex: 1 0 300px;
margin: 10px; margin: 10px;
padding: 20px; padding: 20px;
background: #fff; background: #fff;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%); box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
} }
.wpst-card-header { .wpst-card-header {
margin-bottom: 15px; margin-bottom: 15px;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.wpst-card-title { .wpst-card-title {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
} }
.wpst-card-content { .wpst-card-content {
margin-bottom: 15px; margin-bottom: 15px;
} }
.wpst-card-footer { .wpst-card-footer {
padding-top: 15px; padding-top: 15px;
border-top: 1px solid #eee; border-top: 1px solid #eee;
text-align: right; text-align: right;
} }
/* Responsive Styles */ /* Responsive Styles */
@media screen and (width <= 782px) { @media screen and (width <= 782px) {
.wpst-form-table th { .wpst-form-table th {
width: 100%; width: 100%;
display: block; display: block;
padding-bottom: 0; padding-bottom: 0;
} }
.wpst-form-table td { .wpst-form-table td {
width: 100%; width: 100%;
display: block; display: block;
} }
.wpst-form-table input[type="text"], .wpst-form-table input[type="text"],
.wpst-form-table input[type="number"], .wpst-form-table input[type="number"],
.wpst-form-table select, .wpst-form-table select,
.wpst-form-table textarea { .wpst-form-table textarea {
width: 100%; width: 100%;
} }
} }

146
admin/css/update-source-selector.css
View File

@@ -6,138 +6,138 @@
/* Modal Styles */ /* Modal Styles */
.wpst-modal { .wpst-modal {
display: none; display: none;
position: fixed; position: fixed;
z-index: 100000; z-index: 100000;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
background-color: rgb(0 0 0 / 40%); background-color: rgb(0 0 0 / 40%);
} }
.wpst-modal-content { .wpst-modal-content {
position: relative; position: relative;
background-color: #fefefe; background-color: #fefefe;
margin: 10% auto; margin: 10% auto;
padding: 20px; padding: 20px;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 4px 8px rgb(0 0 0 / 10%); box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
width: 500px; width: 500px;
max-width: 90%; max-width: 90%;
} }
.wpst-modal-header { .wpst-modal-header {
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
margin-bottom: 15px; margin-bottom: 15px;
} }
.wpst-modal-title { .wpst-modal-title {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
} }
.wpst-modal-close { .wpst-modal-close {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 15px; right: 15px;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
} }
.wpst-modal-close:hover, .wpst-modal-close:hover,
.wpst-modal-close:focus { .wpst-modal-close:focus {
color: #000; color: #000;
text-decoration: none; text-decoration: none;
} }
.wpst-modal-body { .wpst-modal-body {
margin-bottom: 20px; margin-bottom: 20px;
} }
.wpst-modal-footer { .wpst-modal-footer {
padding-top: 15px; padding-top: 15px;
border-top: 1px solid #eee; border-top: 1px solid #eee;
text-align: right; text-align: right;
} }
/* Source Selection Styles */ /* Source Selection Styles */
.wpst-source-options { .wpst-source-options {
margin: 15px 0; margin: 15px 0;
} }
.wpst-source-option { .wpst-source-option {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.wpst-source-option:hover { .wpst-source-option:hover {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.wpst-source-option.selected { .wpst-source-option.selected {
border-color: #0073aa; border-color: #0073aa;
background-color: #f0f6fc; background-color: #f0f6fc;
} }
.wpst-source-option input[type="radio"] { .wpst-source-option input[type="radio"] {
margin-right: 10px; margin-right: 10px;
} }
.wpst-source-option-label { .wpst-source-option-label {
font-weight: 600; font-weight: 600;
} }
.wpst-source-option-description { .wpst-source-option-description {
margin-top: 5px; margin-top: 5px;
color: #666; color: #666;
font-size: 13px; font-size: 13px;
} }
/* Loading Indicator */ /* Loading Indicator */
.wpst-loading { .wpst-loading {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
border: 2px solid rgb(0 0 0 / 10%); border: 2px solid rgb(0 0 0 / 10%);
border-radius: 50%; border-radius: 50%;
border-top-color: #0073aa; border-top-color: #0073aa;
animation: wpst-spin 1s ease-in-out infinite; animation: wpst-spin 1s ease-in-out infinite;
margin-right: 10px; margin-right: 10px;
vertical-align: middle; vertical-align: middle;
} }
@keyframes wpst-spin { @keyframes wpst-spin {
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
/* Message Styles */ /* Message Styles */
.wpst-modal-message { .wpst-modal-message {
padding: 10px; padding: 10px;
margin: 10px 0; margin: 10px 0;
border-radius: 3px; border-radius: 3px;
display: none; display: none;
} }
.wpst-modal-message.success { .wpst-modal-message.success {
background-color: #ecf7ed; background-color: #ecf7ed;
border: 1px solid #46b450; border: 1px solid #46b450;
color: #2a6f31; color: #2a6f31;
} }
.wpst-modal-message.error { .wpst-modal-message.error {
background-color: #fbeaea; background-color: #fbeaea;
border: 1px solid #dc3232; border: 1px solid #dc3232;
color: #8a1f1f; color: #8a1f1f;
} }

7
package.json
View File

@@ -29,6 +29,7 @@
"test:phpunit:multisite": "WP_MULTISITE=1 composer test", "test:phpunit:multisite": "WP_MULTISITE=1 composer test",
"build": "./build.sh", "build": "./build.sh",
"lint:js": "eslint cypress/", "lint:js": "eslint cypress/",
"lint:css": "stylelint \"**/*.css\" --allow-empty-input",
"lint:php": "composer run-script phpcs", "lint:php": "composer run-script phpcs",
"lint:php:simple": "composer run-script phpcs:simple", "lint:php:simple": "composer run-script phpcs:simple",
"lint:phpstan": "composer run-script phpstan", "lint:phpstan": "composer run-script phpstan",
@@ -38,7 +39,7 @@
"test:php": "composer run-script test", "test:php": "composer run-script test",
"lint": "composer run-script lint", "lint": "composer run-script lint",
"fix": "composer run-script fix", "fix": "composer run-script fix",
"quality": "npm run lint && npm run test:php" "quality": "npm run lint && npm run lint:css && npm run test:php"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@@ -64,6 +65,8 @@
"@wp-playground/cli": "^3.0.22", "@wp-playground/cli": "^3.0.22",
"cypress": "^13.17.0", "cypress": "^13.17.0",
"eslint": "^8.57.0", "eslint": "^8.57.0",
"eslint-plugin-cypress": "^2.15.1" "eslint-plugin-cypress": "^2.15.1",
"stylelint": "^16.0.0",
"stylelint-config-standard": "^36.0.0"
} }
} }