From f57125d5f3d62f4c8fe4860ffea3c22aae84ea15 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 28 Dec 2024 15:45:04 +0100 Subject: [PATCH] [code-infra] Lint all CSS --- .../src/app/page.module.css | 2 + .../static/components-gallery/base-theme.css | 54 +++++++++---------- docs/public/static/styles/prism-okaidia.css | 23 ++++---- examples/base-ui-cra-ts/src/index.css | 2 +- examples/base-ui-cra/src/index.css | 2 +- package.json | 2 +- stylelint.config.mjs | 12 ++++- 7 files changed, 53 insertions(+), 44 deletions(-) diff --git a/apps/pigment-css-next-app/src/app/page.module.css b/apps/pigment-css-next-app/src/app/page.module.css index ec57b4167a5203..41d310c878cdd1 100644 --- a/apps/pigment-css-next-app/src/app/page.module.css +++ b/apps/pigment-css-next-app/src/app/page.module.css @@ -73,6 +73,7 @@ .logo { position: relative; } + /* Enable hover only on non-touch devices */ @media (hover: hover) and (pointer: fine) { .card:hover { @@ -143,6 +144,7 @@ from { transform: rotate(360deg); } + to { transform: rotate(0deg); } diff --git a/docs/public/static/components-gallery/base-theme.css b/docs/public/static/components-gallery/base-theme.css index d31371059068ce..bd72928daa1541 100644 --- a/docs/public/static/components-gallery/base-theme.css +++ b/docs/public/static/components-gallery/base-theme.css @@ -83,7 +83,7 @@ --bg-soft: hsla(var(--grey-50), 0.9); --bg-hard: hsla(var(--grey-100), 0.8); --bg-highlight: hsla(var(--primary-600)); - --bg-overlay: hsla(0, 0, 0, 0.3); + --bg-overlay: hsla(0deg 0 0 / 0.3); --bg-button: hsla(var(--primary-500)); --bg-button-hover: hsla(var(--primary-700)); @@ -103,22 +103,23 @@ --border-soft: 1px solid hsla(var(--grey-300), 0.8); --border-hard: 1px solid hsla(var(--grey-500)); --border-interactive: 1px solid hsla(var(--primary-400)); - --border-transparent: 1px solid hsla(0, 0, 0, 0); + --border-transparent: 1px solid hsla(0deg 0 0 / 0); --border-active-switch: 1px solid hsla(var(--primary-100)); - --shadow-elevation-1: 0px 1px 2px 0px hsla(0, 0, 0, 0.15); + --shadow-elevation-1: 0px 1px 2px 0px hsla(0deg 0 0 / 0.15); --shadow-elevation-2: 0px 2px 4px 0px hsla(var(--grey-700), 0.2); --shadow-elevation-3: 0px 4px 16px -4px hsla(var(--grey-700), 0.2), 0px 1px 2px -1px hsla(var(--grey-700), 0.1); - --shadow-elevation-4: 0px 8px 32px -4px hsla(0, 0, 0, 0.25), 0px 1px 2px -1px hsla(0, 0, 0, 0.15); + --shadow-elevation-4: 0px 8px 32px -4px hsla(0deg 0 0 / 0.25), + 0px 1px 2px -1px hsla(0deg 0 0 / 0.15); --shadow-interactive-button: 0 -2px 0.5px 0 hsla(var(--primary-700), 0.4) inset, 0 2px 0.5px 0 hsla(var(--primary-400), 0.6) inset, 0 1px 0.5px 0 hsla(var(--primary-900), 0.3); --shadow-outlined-button: 0 -2px 0.5px 0 hsla(var(--grey-100), 0.5) inset, 0 1px 0.5px 0 hsla(var(--grey-500), 0.2); --shadow-input: 0px 1px 2px hsla(var(--primary-300), 0.2); - --shadow-interactive-switch-track: 0px 1px 1px 0px hsla(0, 0, 0, 0.05) inset; - --shadow-interactive-switch-thumb: 0px 1px 2px 0px hsla(0, 0, 0, 0.3); + --shadow-interactive-switch-track: 0px 1px 1px 0px hsla(0deg 0 0 / 0.05) inset; + --shadow-interactive-switch-thumb: 0px 1px 2px 0px hsla(0deg 0 0 / 0.3); --shadow-interactive-focus-visible: 0 0 0 4px hsla(var(--primary-300), 0.5); --border-radius-sm: 4px; @@ -132,7 +133,6 @@ .GalleryContainer, .GalleryMenu, .GalleryPopup, - .GalleryPopup, .GallerySelect-listbox { --canvas: #0f0f0f; @@ -145,7 +145,7 @@ --bg-soft: hsla(var(--grey-800), 0.6); --bg-hard: hsla(var(--grey-900), 0.8); --bg-highlight: hsla(var(--primary-500)); - --bg-overlay: hsla(0, 0, 0, 0.6); + --bg-overlay: hsla(0deg 0 0 / 0.6); --bg-button-base: hsla(var(--primary-500)); --bg-button-hover: hsla(var(--primary-400)); @@ -168,19 +168,22 @@ --border-transparent: 1px solid transparent; --border-active-switch: 1px solid hsla(var(--primary-400), 0.4); - --shadow-elevation-1: 0px 2px 4px -0.5px hsla(0, 0, 0, 0.4); - --shadow-elevation-2: 0px 2px 8px 0px hsla(0, 0, 0, 0.3), 0px 2px 4px -0.5px hsla(0, 0, 0, 0.4); - --shadow-elevation-3: 0px 4px 8px 0px hsla(0, 0, 0, 0.32), 0px 8px 16px 0px hsla(0, 0, 0, 0.32); - --shadow-elevation-4: 0px 2px 24px 0px hsla(0, 0, 0, 0.32), - 0px 16px 32px 0px hsla(0, 0, 0, 0.32); + --shadow-elevation-1: 0px 2px 4px -0.5px hsla(0deg 0 0 / 0.4); + --shadow-elevation-2: 0px 2px 8px 0px hsla(0deg 0 0 / 0.3), + 0px 2px 4px -0.5px hsla(0deg 0 0 / 0.4); + --shadow-elevation-3: 0px 4px 8px 0px hsla(0deg 0 0 / 0.32), + 0px 8px 16px 0px hsla(0deg 0 0 / 0.32); + --shadow-elevation-4: 0px 2px 24px 0px hsla(0deg 0 0 / 0.32), + 0px 16px 32px 0px hsla(0deg 0 0 / 0.32); --shadow-interactive-button: 0 -2px 0.5px 0 hsla(var(--primary-700), 0.4) inset, - 0 2px 0.5px 0 hsla(var(--primary-400), 0.6) inset, 0 1px 0.5px 0 hsla(var(--primary-900), 0.3); - --shadow-outlined-button: 0 -2px 0.5px 0 hsla(0, 0%, 0%, 0.4) inset, - 0 1px 0.5px 0 hsla(0, 0%, 0%, 0.9); - --shadow-input: 0px 1.5px 0.5px 0px hsla(0, 0%, 0%, 0.9); - --shadow-interactive-switch-track: 0px 1px 1px 0px hsla(0, 0, 0, 0.35) inset; - --shadow-interactive-switch-thumb: 0px 1px 2px 0px hsla(0, 0, 0, 0.3); + 0 2px 0.5px 0 hsla(var(--primary-400) / 0.6) inset, + 0 1px 0.5px 0 hsla(var(--primary-900) / 0.3); + --shadow-outlined-button: 0 -2px 0.5px 0 hsla(0deg 0% 0% / 0.4) inset, + 0 1px 0.5px 0 hsla(0deg 0% 0% / 0.9); + --shadow-input: 0px 1.5px 0.5px 0px hsla(0deg 0% 0% / 0.9); + --shadow-interactive-switch-track: 0px 1px 1px 0px hsla(0deg 0 0 / 0.35) inset; + --shadow-interactive-switch-thumb: 0px 1px 2px 0px hsla(0deg 0 0 / 0.3); } } @@ -472,8 +475,8 @@ } .GalleryNumberInput .input { - font-family: inherit; font: var(--text-body); + font-family: inherit; grid-column: 1/2; grid-row: 1/3; color: var(--font-color-soft); @@ -519,7 +522,6 @@ cursor: pointer; color: var(--font-color-onDark); background: var(--bg-button); - /* border: var(--border-interactive); */ } .GalleryNumberInput .btn.increment:active { @@ -559,7 +561,7 @@ border-radius: var(--border-radius-md); padding: 0.75rem; opacity: 1; - margin: 0.25rem 0px; + margin: 0.25rem 0; color: var(--font-color-soft); background: var(--bg-default); border: var(--border-soft); @@ -610,7 +612,6 @@ } .GallerySelect-listbox { - box-sizing: border-box; width: 300px; font: var(--text-body); line-height: var(--button-line-height); @@ -920,10 +921,6 @@ padding: 16px; } -.GalleryTablePaginationDemo th { - background-color: var(--bg-default); -} - .GalleryTablePagination .base-TablePagination-spacer { display: none; } @@ -1031,8 +1028,8 @@ margin-bottom: 8px; display: flex; align-items: center; - justify-content: center; align-content: space-between; + justify-content: center; } .GalleryTab { @@ -1093,7 +1090,6 @@ min-height: 100px; font: var(--text-body); color: var(--GalleryInput-input-color, var(--font-color-soft)); - /* color: #fff; */ padding: 6px 12px; border-radius: var(--border-radius-md) var(--border-radius-md) 0 var(--border-radius-md); background: var(--bg-input-base); diff --git a/docs/public/static/styles/prism-okaidia.css b/docs/public/static/styles/prism-okaidia.css index f47491ed27ff12..762a2bbeecf956 100644 --- a/docs/public/static/styles/prism-okaidia.css +++ b/docs/public/static/styles/prism-okaidia.css @@ -6,29 +6,28 @@ code[class*='language-'], pre[class*='language-'] { - /* color: #f8f8f2; */ - /* background: none; */ - /* text-shadow: 0 1px rgba(0, 0, 0, 0.3); */ - /* font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; */ - /* font-size: 1em; */ + /* color: #f8f8f2; + background: none; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; */ text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; + /* line-height: 1.5; */ - /* -moz-tab-size: 4; */ - /* -o-tab-size: 4; */ - /* tab-size: 4; */ + /* -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; */ - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; hyphens: none; } /* Code blocks */ + /* pre[class*='language-'] { padding: 1em; @@ -46,6 +45,7 @@ pre[class*='language-'] { */ /* Inline code */ + /* :not(pre) > code[class*='language-'] { padding: 0.1em; @@ -126,6 +126,7 @@ pre[class*='language-'] { .token.bold { font-weight: bold; } + .token.italic { font-style: italic; } diff --git a/examples/base-ui-cra-ts/src/index.css b/examples/base-ui-cra-ts/src/index.css index 5674f7ebddc46a..839bcbea3e083b 100644 --- a/examples/base-ui-cra-ts/src/index.css +++ b/examples/base-ui-cra-ts/src/index.css @@ -1,5 +1,5 @@ .item { - border: 1px solid #000000; + border: 1px solid #000; padding: 20px; border-radius: 4px; margin-bottom: 20px; diff --git a/examples/base-ui-cra/src/index.css b/examples/base-ui-cra/src/index.css index 5674f7ebddc46a..839bcbea3e083b 100644 --- a/examples/base-ui-cra/src/index.css +++ b/examples/base-ui-cra/src/index.css @@ -1,5 +1,5 @@ .item { - border: 1px solid #000000; + border: 1px solid #000; padding: 20px; border-radius: 4px; margin-bottom: 20px; diff --git a/package.json b/package.json index 5064656f224a13..7e57812cf97919 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "jsonlint": "node ./scripts/jsonlint.mjs", "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0", "eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0", - "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"docs/**/*.?(c|m)[jt]s?(x)\" --ignore-path .gitignore", + "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"docs/**/*.?(c|m)[jt]s?(x)\" \"**/*.css\" --ignore-path .gitignore --ignore-path .eslintignore", "markdownlint": "markdownlint-cli2 \"**/*.md\"", "valelint": "git ls-files | grep -h \".md$\" | xargs vale --filter='.Level==\"error\"'", "prettier": "pretty-quick --ignore-path .eslintignore --branch master", diff --git a/stylelint.config.mjs b/stylelint.config.mjs index 4f1a9dc8f793ea..9423c23c30663d 100644 --- a/stylelint.config.mjs +++ b/stylelint.config.mjs @@ -6,8 +6,18 @@ export default { 'media-feature-range-notation': null, 'no-empty-source': null, 'selector-class-pattern': null, - 'string-no-newline': null, // not compatible with prettier + 'string-no-newline': null, // not compatible with Prettier 'value-keyword-case': null, + 'at-rule-no-unknown': [true, { ignoreAtRules: ['tailwind'] }], + 'declaration-block-no-redundant-longhand-properties': [ + true, + { + ignoreShorthands: [ + 'place-content', // Nobody uses this shorthand property. + ], + }, + ], + 'custom-property-empty-line-before': null, // Allow arbitrary grouping of custom properties }, overrides: [ {