commit 9d7920d565f5b935bd800ac3cb9a6f0261d2a97f
parent 432e5962a34131ee26e079956b5535ba32add02a
Author: Atila Butkovits <abutkovits@mozilla.com>
Date: Tue, 4 Nov 2025 02:28:55 +0200
Revert "Bug 1988860 - stylelint rule to enforce using size design tokens r=frontend-codestyle-reviewers,akulyk,Gijs" for causing stylelint failures.
This reverts commit 2b75d601c974ea55bfdad6d92438784745c35839.
Diffstat:
7 files changed, 4 insertions(+), 880 deletions(-)
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -279,7 +279,6 @@ module.exports = {
"stylelint-plugin-mozilla/use-text-color-tokens": true,
"stylelint-plugin-mozilla/use-box-shadow-tokens": true,
"stylelint-plugin-mozilla/no-non-semantic-token-usage": true,
- "stylelint-plugin-mozilla/use-size-tokens": true,
},
overrides: [
@@ -428,7 +427,6 @@ module.exports = {
"stylelint-plugin-mozilla/use-text-color-tokens": null,
"stylelint-plugin-mozilla/use-box-shadow-tokens": null,
"stylelint-plugin-mozilla/no-non-semantic-token-usage": null,
- "stylelint-plugin-mozilla/use-size-tokens": null,
},
},
{
@@ -444,7 +442,6 @@ module.exports = {
"stylelint-plugin-mozilla/use-space-tokens": true,
"stylelint-plugin-mozilla/use-text-color-tokens": true,
"stylelint-plugin-mozilla/no-non-semantic-token-usage": true,
- "stylelint-plugin-mozilla/use-size-tokens": true,
},
},
{
diff --git a/docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-size-tokens.rst b/docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-size-tokens.rst
@@ -1,111 +0,0 @@
-===============
-use-size-tokens
-===============
-
-This rule checks that CSS declarations use size design token variables
-instead of hardcoded values.
-
-Examples of incorrect token usage for this rule:
-------------------------------------------------
-
-.. code-block:: css
-
- .card {
- min-width: 48px;
- }
-
-.. code-block:: css
-
- .button {
- height: 0.75rem;
- }
-
-.. code-block:: css
-
- .icon {
- width: 20px;
- }
-
-
-.. code-block:: css
-
- .icon {
- width: calc(2 * 16px);
- }
-
-.. code-block:: css
-
- :root {
- --local-size: 24px;
- }
-
- .button {
- min-height: var(--local-size);
- }
-
-Examples of correct code for this rule:
----------------------------------------
-
-.. code-block:: css
-
- .card {
- min-width: var(--size-item-large);
- }
-
-.. code-block:: css
-
- .button {
- height: var(--button-min-height);
- }
-
-.. code-block:: css
-
- .icon {
- width: var(--icon-size-medium);
- }
-
-.. code-block:: css
-
- .icon {
- width: var(--icon-size-medium, 28px);
- }
-
-.. code-block:: css
-
- .icon {
- width: calc(2 * var(--icon-size-medium));
- }
-
-.. code-block:: css
-
- .icon {
- width: calc(2 * var(--icon-size-medium, 28px));
- }
-
-.. code-block:: css
-
- :root {
- --local-size: var(--size-item-small);
- }
-
- .button {
- min-height: var(--local-size);
- }
-
-.. code-block:: css
-
- .button {
- width: 100%;
- }
-
-.. code-block:: css
-
- .button {
- width: auto;
- }
-
-.. code-block:: css
-
- .icon {
- max-height: 2em;
- }
diff --git a/stylelint-rollouts.config.js b/stylelint-rollouts.config.js
@@ -1507,7 +1507,7 @@ module.exports = [
// stylelint fixes for this rule will be addressed in Bug 1992749
name: "rollout-no-non-semantic-token-usage",
rules: {
- "stylelint-plugin-mozilla/no-non-semantic-token-usage": null,
+ "stylelint-plugin-mozilla/no-non-semantic-token-usage": "null",
},
files: [
"browser/components/aboutlogins/content/components/input-field/input-field.css",
@@ -1587,311 +1587,4 @@ module.exports = [
"toolkit/themes/shared/menulist.css",
],
},
- {
- // stylelint fixes for this rule will be addressed in Bug 1995685
- name: "rollout-use-size-tokens",
- rules: {
- "stylelint-plugin-mozilla/use-size-tokens": null,
- },
- files: [
- "browser/base/content/aboutDialog.css",
- "browser/base/content/pageinfo/pageInfo.css",
- "browser/branding/aurora/stubinstaller/installing_page.css",
- "browser/branding/aurora/stubinstaller/profile_cleanup_page.css",
- "browser/branding/nightly/stubinstaller/installing_page.css",
- "browser/branding/nightly/stubinstaller/profile_cleanup_page.css",
- "browser/branding/official/stubinstaller/installing_page.css",
- "browser/branding/official/stubinstaller/profile_cleanup_page.css",
- "browser/branding/unofficial/content/aboutDialog.css",
- "browser/branding/unofficial/stubinstaller/installing_page.css",
- "browser/branding/unofficial/stubinstaller/profile_cleanup_page.css",
- "browser/components/aboutlogins/content/aboutLogins.css",
- "browser/components/aboutlogins/content/aboutLoginsImportReport.css",
- "browser/components/aboutlogins/content/components/confirmation-dialog.css",
- "browser/components/aboutlogins/content/components/fxaccounts-button.css",
- "browser/components/aboutlogins/content/components/generic-dialog.css",
- "browser/components/aboutlogins/content/components/login-alert.css",
- "browser/components/aboutlogins/content/components/login-filter.css",
- "browser/components/aboutlogins/content/components/login-intro.css",
- "browser/components/aboutlogins/content/components/login-item.css",
- "browser/components/aboutlogins/content/components/login-list-lit-item.css",
- "browser/components/aboutlogins/content/components/login-list.css",
- "browser/components/aboutlogins/content/components/login-message-popup.css",
- "browser/components/aboutlogins/content/components/login-timeline.css",
- "browser/components/aboutlogins/content/components/menu-button.css",
- "browser/components/aboutlogins/content/components/remove-logins-dialog.css",
- "browser/components/aboutwelcome/content-src/aboutwelcome.scss",
- "browser/components/asrouter/content-src/components/ASRouterAdmin/ASRouterAdmin.scss",
- "browser/components/asrouter/content-src/styles/_feature-callout.scss",
- "browser/components/backup/content/backup-settings.css",
- "browser/components/backup/content/password-rules-tooltip.css",
- "browser/components/backup/content/password-validation-inputs.css",
- "browser/components/backup/content/restore-from-backup.css",
- "browser/components/backup/content/turn-on-scheduled-backups.css",
- "browser/components/contextualidentity/content/usercontext.css",
- "browser/components/enterprisepolicies/content/aboutPolicies.css",
- "browser/components/firefoxview/card-container.css",
- "browser/components/firefoxview/firefoxview.css",
- "browser/components/firefoxview/fxview-empty-state.css",
- "browser/components/firefoxview/fxview-tab-row.css",
- "browser/components/firefoxview/opentabs-tab-row.css",
- "browser/components/firefoxview/view-syncedtabs.css",
- "browser/components/genai/chat.css",
- "browser/components/genai/content/link-preview-card.css",
- "browser/components/genai/content/model-optin.css",
- "browser/components/messagepreview/messagepreview.css",
- "browser/components/places/content/clearDataForSite.css",
- "browser/components/places/metadataViewer/interactionsViewer.css",
- "browser/components/preferences/dialogs/sitePermissions.css",
- "browser/components/preferences/widgets/placeholder-message/placeholder-message.css",
- "browser/components/profiles/content/avatar.css",
- "browser/components/profiles/content/edit-profile-card.css",
- "browser/components/profiles/content/profile-avatar-selector.css",
- "browser/components/profiles/content/profile-card.css",
- "browser/components/profiles/content/profile-selector.css",
- "browser/components/profiles/content/profiles-pages.css",
- "browser/components/profiles/content/profiles-theme-card.css",
- "browser/components/protections/content/protections.css",
- "browser/components/screenshots/overlay/overlay.css",
- "browser/components/screenshots/screenshots-buttons.css",
- "browser/components/search/content/contentSearchUI.css",
- "browser/components/search/test/browser/telemetry/serp.css",
- "browser/components/sidebar/sidebar-main.css",
- "browser/components/sidebar/sidebar-pins-promo.css",
- "browser/components/sidebar/sidebar.css",
- "browser/components/textrecognition/textrecognition.css",
- "browser/components/urlbar/tests/browser/dynamicResult0.css",
- "browser/components/urlbar/tests/browser/dynamicResult1.css",
- "browser/components/webrtc/content/webrtc-preview/webrtc-preview.css",
- "browser/extensions/formautofill/content/formautofill.css",
- "browser/extensions/formautofill/content/manageDialog.css",
- "browser/extensions/formautofill/skin/shared/editAddress.css",
- "browser/extensions/formautofill/skin/shared/editDialog-shared.css",
- "browser/extensions/newtab/content-src/components/Base/_Base.scss",
- "browser/extensions/newtab/content-src/components/Card/_Card.scss",
- "browser/extensions/newtab/content-src/components/CollapsibleSection/_CollapsibleSection.scss",
- "browser/extensions/newtab/content-src/components/ConfirmDialog/_ConfirmDialog.scss",
- "browser/extensions/newtab/content-src/components/ContextMenu/_ContextMenu.scss",
- "browser/extensions/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamAdmin/DiscoveryStreamAdmin.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/AdBanner/_AdBanner.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/AdBannerContextMenu/AdBannerContextMenu.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSContextFooter/_DSContextFooter.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSDismiss/_DSDismiss.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSEmptyState/_DSEmptyState.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSImage/_DSImage.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSSignup/DSSignup.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_DownloadMobilePromoHighlight.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_FeatureHighlight.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_FollowSectionButtonHighlight.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_ShortcutFeatureHighlight.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_WallpaperFeatureHighlight.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/Highlights/_Highlights.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PersonalizedCard/_PersonalizedCard.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PromoCard/_PromoCard.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/ReportContent/ReportContent.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/SectionContextMenu/_SectionContextMenu.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicsWidget/_TopicsWidget.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopSites/_TopSites.scss",
- "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TrendingSearches/_TrendingSearches.scss",
- "browser/extensions/newtab/content-src/components/DownloadModalToggle/_DownloadModalToggle.scss",
- "browser/extensions/newtab/content-src/components/Logo/_Logo.scss",
- "browser/extensions/newtab/content-src/components/ModalOverlay/_ModalOverlay.scss",
- "browser/extensions/newtab/content-src/components/MoreRecommendations/_MoreRecommendations.scss",
- "browser/extensions/newtab/content-src/components/Notifications/_Notifications.scss",
- "browser/extensions/newtab/content-src/components/Search/_Search.scss",
- "browser/extensions/newtab/content-src/components/Sections/_Sections.scss",
- "browser/extensions/newtab/content-src/components/TopSites/_TopSites.scss",
- "browser/extensions/newtab/content-src/components/WallpaperCategories/_WallpaperCategories.scss",
- "browser/extensions/newtab/content-src/components/Weather/_Weather.scss",
- "browser/extensions/newtab/content-src/components/Widgets/_Widgets.scss",
- "browser/extensions/newtab/content-src/components/Widgets/FocusTimer/_FocusTimer.scss",
- "browser/extensions/newtab/content-src/components/Widgets/Lists/_Lists.scss",
- "browser/extensions/newtab/content-src/styles/_icons.scss",
- "browser/extensions/newtab/content-src/styles/_mixins.scss",
- "browser/extensions/newtab/content-src/styles/_variables.scss",
- "browser/extensions/newtab/content-src/styles/activity-stream.scss",
- "browser/themes/linux/browser.css",
- "browser/themes/linux/places/organizer.css",
- "browser/themes/osx/browser.css",
- "browser/themes/osx/places/organizer.css",
- "browser/themes/shared/aboutSessionRestore.css",
- "browser/themes/shared/addon-notification.css",
- "browser/themes/shared/addons/extension-controlled.css",
- "browser/themes/shared/addons/unified-extensions.css",
- "browser/themes/shared/autocomplete.css",
- "browser/themes/shared/blockedSite.css",
- "browser/themes/shared/browser-shared.css",
- "browser/themes/shared/controlcenter/panel.css",
- "browser/themes/shared/customizableui/customizeMode.css",
- "browser/themes/shared/customizableui/panelUI-shared.css",
- "browser/themes/shared/downloads/allDownloadsView.inc.css",
- "browser/themes/shared/downloads/download-blockedStates.css",
- "browser/themes/shared/downloads/downloads.inc.css",
- "browser/themes/shared/downloads/indicator.css",
- "browser/themes/shared/downloads/progressmeter.css",
- "browser/themes/shared/formautofill-notification.css",
- "browser/themes/shared/identity-block/identity-block.css",
- "browser/themes/shared/identity-credential-notification.css",
- "browser/themes/shared/migration/migration-wizard.css",
- "browser/themes/shared/notification-icons.css",
- "browser/themes/shared/pageInfo.css",
- "browser/themes/shared/places/editBookmark.css",
- "browser/themes/shared/places/editBookmarkPanel.css",
- "browser/themes/shared/places/organizer-shared.css",
- "browser/themes/shared/places/sidebar.css",
- "browser/themes/shared/places/tree-icons.css",
- "browser/themes/shared/preferences/applications.css",
- "browser/themes/shared/preferences/containers-dialog.css",
- "browser/themes/shared/preferences/containers.css",
- "browser/themes/shared/preferences/fxaPairDevice.css",
- "browser/themes/shared/preferences/preferences.css",
- "browser/themes/shared/preferences/privacy.css",
- "browser/themes/shared/preferences/search.css",
- "browser/themes/shared/preferences/siteDataSettings.css",
- "browser/themes/shared/preferences/translations.css",
- "browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css",
- "browser/themes/shared/search/searchbar.css",
- "browser/themes/shared/sidebar.css",
- "browser/themes/shared/syncedtabs/sidebar.css",
- "browser/themes/shared/tab-list-tree.css",
- "browser/themes/shared/tabbrowser/content-area.css",
- "browser/themes/shared/tabbrowser/ctrlTab.css",
- "browser/themes/shared/tabbrowser/fullscreen-and-pointerlock.css",
- "browser/themes/shared/tabbrowser/tab-hover-preview.css",
- "browser/themes/shared/tabbrowser/tabs.css",
- "browser/themes/shared/toolbarbuttons.css",
- "browser/themes/shared/translations/panel.css",
- "browser/themes/shared/UITour.css",
- "browser/themes/shared/urlbar-dynamic-results.css",
- "browser/themes/shared/urlbar-searchbar.css",
- "browser/themes/shared/urlbarView.css",
- "browser/themes/shared/webRTC-indicator.css",
- "browser/themes/windows/places/organizer.css",
- "dom/events/test/pointerevents/wpt/pointerevent_styles.css",
- "devtools/client/aboutdebugging/src/base.css",
- "devtools/client/aboutdebugging/src/components/App.css",
- "devtools/client/aboutdebugging/src/components/debugtarget/ExtensionDetail.css",
- "devtools/client/aboutdebugging/src/components/debugtarget/ServiceWorkerAction.css",
- "devtools/client/aboutdebugging/src/components/ProfilerDialog.css",
- "devtools/client/aboutdebugging/src/components/shared/IconLabel.css",
- "devtools/client/aboutdebugging/src/components/sidebar/Sidebar.css",
- "devtools/client/aboutdebugging/src/components/sidebar/SidebarFixedItem.css",
- "devtools/client/aboutdebugging/src/components/sidebar/SidebarItem.css",
- "devtools/client/aboutdebugging/src/components/sidebar/SidebarRuntimeItem.css",
- "dom/xml/test/old/books/classic.css",
- "dom/xml/test/old/books/common.css",
- "gfx/layers/apz/test/mochitest/helper_subframe_style.css",
- "layout/generic/test/frame_selection_underline.css",
- "layout/style/res/forms.css",
- "layout/style/res/html.css",
- "layout/style/res/scrollbars.css",
- "security/manager/pki/resources/content/certManager.css",
- "testing/marionette/harness/marionette_harness/tests/unit/assets/chrome/style.css",
- "testing/mochitest/static/harness.css",
- "testing/mozbase/mozlog/mozlog/formatters/html/style.css",
- "testing/talos/talos/tests/scroll/reader.css",
- "testing/talos/talos/tests/tart/addon/content/tab-min-width-1px.css",
- "toolkit/components/aboutcheckerboard/content/aboutCheckerboard.css",
- "toolkit/components/aboutconfig/content/aboutconfig.css",
- "toolkit/components/aboutinference/content/aboutInference.css",
- "toolkit/components/aboutinference/content/model-files-view.css",
- "toolkit/components/aboutprocesses/content/aboutProcesses.css",
- "toolkit/components/aboutthirdparty/content/aboutThirdParty.css",
- "toolkit/components/certviewer/content/certviewer.css",
- "toolkit/components/certviewer/content/components/error-section.css",
- "toolkit/components/certviewer/content/components/info-group.css",
- "toolkit/components/normandy/content/about-studies/about-studies.css",
- "toolkit/components/printing/content/print.css",
- "toolkit/components/printing/content/printPagination.css",
- "toolkit/components/printing/content/printPreview.css",
- "toolkit/components/printing/content/toggle-group.css",
- "toolkit/components/reader/moz-slider.css",
- "toolkit/components/resistfingerprinting/content/letterboxing.css",
- "toolkit/components/satchel/megalist/content/components/login-line/login-line.css",
- "toolkit/components/satchel/megalist/content/components/password-card/password-card.css",
- "toolkit/components/satchel/megalist/content/megalist.css",
- "toolkit/components/translations/content/about-translations.css",
- "toolkit/content/aboutGlean.css",
- "toolkit/content/aboutLogging/aboutLogging.css",
- "toolkit/content/aboutTelemetry.css",
- "toolkit/content/aboutwebrtc/aboutWebrtc.css",
- "toolkit/content/tests/widgets/videomask.css",
- "toolkit/content/widgets/infobar.css",
- "toolkit/content/widgets/moz-button/moz-button.css",
- "toolkit/content/widgets/moz-input-color/moz-input-color.css",
- "toolkit/content/widgets/moz-input-folder/moz-input-folder.css",
- "toolkit/content/widgets/moz-input-text/moz-input-text.css",
- "toolkit/content/widgets/moz-message-bar/moz-message-bar.css",
- "toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css",
- "toolkit/content/widgets/moz-page-nav/moz-page-nav.css",
- "toolkit/content/widgets/moz-promo/moz-promo.css",
- "toolkit/content/widgets/moz-reorderable-list/moz-reorderable-list.css",
- "toolkit/content/widgets/moz-select/moz-select.css",
- "toolkit/content/widgets/moz-toggle/moz-toggle.css",
- "toolkit/content/widgets/panel-list/panel-item.css",
- "toolkit/content/widgets/panel-list/panel-list.css",
- "toolkit/content/xul.css",
- "toolkit/crashreporter/content/crashes.css",
- "toolkit/mozapps/extensions/content/aboutaddons.css",
- "toolkit/mozapps/extensions/content/components/mlmodel-card-header-additions.css",
- "toolkit/mozapps/extensions/content/shortcuts.css",
- "toolkit/themes/linux/global/autocomplete.css",
- "toolkit/themes/linux/mozapps/update/updates.css",
- "toolkit/themes/osx/global/autocomplete.css",
- "toolkit/themes/osx/global/button.css",
- "toolkit/themes/osx/global/global.css",
- "toolkit/themes/osx/global/in-content/common.css",
- "toolkit/themes/osx/global/wizard.css",
- "toolkit/themes/osx/mozapps/handling/handling.css",
- "toolkit/themes/osx/mozapps/update/updates.css",
- "toolkit/themes/shared/aboutHttpsOnlyError.css",
- "toolkit/themes/shared/aboutLicense.css",
- "toolkit/themes/shared/aboutNetError.css",
- "toolkit/themes/shared/aboutReader.css",
- "toolkit/themes/shared/aboutServiceWorkers.css",
- "toolkit/themes/shared/aboutSupport.css",
- "toolkit/themes/shared/alert.css",
- "toolkit/themes/shared/appPicker.css",
- "toolkit/themes/shared/checkbox.css",
- "toolkit/themes/shared/close-icon.css",
- "toolkit/themes/shared/commonDialog.css",
- "toolkit/themes/shared/datetimeinputpickers.css",
- "toolkit/themes/shared/design-system/tokens-table.css",
- "toolkit/themes/shared/dirListing/dirListing.css",
- "toolkit/themes/shared/downloads/unknownContentType.css",
- "toolkit/themes/shared/error-pages.css",
- "toolkit/themes/shared/findbar.css",
- "toolkit/themes/shared/global-shared.css",
- "toolkit/themes/shared/in-content/common-shared.css",
- "toolkit/themes/shared/in-content/info-pages.css",
- "toolkit/themes/shared/menu.css",
- "toolkit/themes/shared/menulist.css",
- "toolkit/themes/shared/narrate.css",
- "toolkit/themes/shared/offlineSupportPages.css",
- "toolkit/themes/shared/pictureinpicture/player.css",
- "toolkit/themes/shared/pictureinpicture/texttracks.css",
- "toolkit/themes/shared/popup.css",
- "toolkit/themes/shared/popupnotification.css",
- "toolkit/themes/shared/profileDowngrade.css",
- "toolkit/themes/shared/radio.css",
- "toolkit/themes/shared/splitter.css",
- "toolkit/themes/shared/toolbar.css",
- "toolkit/themes/shared/toolbarbutton.css",
- "toolkit/themes/shared/tree/tree.css",
- "toolkit/themes/windows/global/autocomplete.css",
- "toolkit/themes/windows/global/global.css",
- "toolkit/themes/windows/global/wizard.css",
- "toolkit/themes/windows/mozapps/handling/handling.css",
- "toolkit/themes/windows/mozapps/update/updates.css",
- "tools/tryselect/selectors/chooser/static/style.css",
- ],
- },
];
diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/helpers.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/helpers.mjs
@@ -47,11 +47,6 @@ export const ALLOW_LIST = [
];
/**
- * Regex capturing numeric values, em values, ch values, and percentage values
- */
-export const FIXED_UNITS = /^\d*\.?\d*(em|ch|%)?$/;
-
-/**
* Extends our base ALLOW_LIST with additional allowed values.
*
* @param {string[]} additionalAllows to be appended to our list
@@ -171,9 +166,6 @@ export const isFunction = node => node.type === "function";
export const isVariableFunction = node =>
isFunction(node) && node.value === "var";
-// checks if a node is a `calc()` function
-export const isCalcFunction = node => isFunction(node) && node.value === "calc";
-
// checks if a node is a url() function
export const isUrlFunction = node => isFunction(node) && node.value === "url";
@@ -234,19 +226,6 @@ export const containsColorFunction = value => {
};
/**
- * Checks if a node contains a value using vw/vh units
- * e.g., `100vh`.
- *
- * @param {string} value some CSS declaration to match
- * @returns {boolean}
- */
-export const containsViewportUnit = value => {
- return valueParser(String(value)).nodes.some(
- node => node.type === "word" && /^(0|[\d.]+)(vh|vw)$/.test(node.value)
- );
-};
-
-/**
* Returns only the properties in the declaration that are colors, or at least likely to be colors.
* This allows for ignoring properties in shorthand that are not relevant to color rules.
*
@@ -283,20 +262,15 @@ export const getColorProperties = value => {
export const isToken = (value, tokenCSS) => tokenCSS.includes(value);
/**
- * Checks if a CSS value is allowed, given exact strings or a
- * regex pattern in an allowList.
+ * Checks if a CSS value is allowed.
*
* @param {string} value some CSS declaration to match
* @param {string[]} allowList
* @returns {boolean}
*/
export const isAllowed = (value, allowList) => {
- const allowListPattern = pattern => {
- pattern instanceof RegExp ? pattern.test(value) : pattern === value;
- };
-
// If the value is in the allowList
- if (allowList.some(allowListPattern)) {
+ if (allowList.includes(value)) {
return true;
}
@@ -307,13 +281,7 @@ export const isAllowed = (value, allowList) => {
// If the value is in the allowList but the string is CSS shorthand, e.g. `border` properties
return valueParser(value).nodes.some(
- node =>
- isWord(node) &&
- allowList.some(pattern =>
- pattern instanceof RegExp
- ? pattern.test(node.value)
- : pattern === node.value
- )
+ node => isWord(node) && allowList.includes(node.value)
);
};
@@ -464,63 +432,6 @@ export const isValidTokenUsage = (
};
/**
- * Checks if a calc() function contains valid token usage.
- *
- * @param {string} value - CSS declaration to match
- * @param {string[]} tokenCSS
- * @param {object} cssCustomProperties
- * @param {string[]} allowList
- * @returns {boolean}
- */
-export const isValidTokenUsageInCalc = (
- value,
- tokenCSS,
- cssCustomProperties,
- allowList = ALLOW_LIST
-) => {
- const parsed = valueParser(String(value));
- let isEveryChildValid = true;
-
- parsed.walk(node => {
- if (!isEveryChildValid || !isCalcFunction(node)) {
- return;
- }
-
- isEveryChildValid = node.nodes.every(child => {
- if (
- child.type === "space" ||
- (child.type === "word" && /^[+\-*/]$/.test(child.value))
- ) {
- return true;
- }
-
- if (child.type === "word") {
- if (
- isAllowed(child.value, allowList) ||
- /^\d*\.?\d*(vh|vw|em|%)?$/.test(child.value)
- ) {
- return true;
- }
- }
-
- if (isVariableFunction(child)) {
- const variableNode = `var(${child.nodes[0].value})`;
- if (
- isToken(variableNode, tokenCSS) ||
- isValidLocalProperty(variableNode, cssCustomProperties, tokenCSS)
- ) {
- return true;
- }
- }
-
- return false;
- });
- });
-
- return isEveryChildValid;
-};
-
-/**
* Checks if CSS value uses color tokens correctly.
*
* @param {string} value some CSS declaration to match
diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/rules/index.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/rules/index.mjs
@@ -15,7 +15,6 @@ import useBackgroundColorTokens from "./use-background-color-tokens.mjs";
import useTextColorTokens from "./use-text-color-tokens.mjs";
import useBoxShadowTokens from "./use-box-shadow-tokens.mjs";
import noNonSemanticTokenUsage from "./no-non-semantic-token-usage.mjs";
-import useSizeTokens from "./use-size-tokens.mjs";
export default {
"no-base-design-tokens": noBaseDesignTokens,
@@ -29,5 +28,4 @@ export default {
"use-text-color-tokens": useTextColorTokens,
"use-box-shadow-tokens": useBoxShadowTokens,
"no-non-semantic-token-usage": noNonSemanticTokenUsage,
- "use-size-tokens": useSizeTokens,
};
diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/rules/use-size-tokens.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/rules/use-size-tokens.mjs
@@ -1,172 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import stylelint from "stylelint";
-import valueParser from "postcss-value-parser";
-import {
- namespace,
- createTokenNamesArray,
- createRawValuesObject,
- isValidTokenUsage,
- isValidTokenUsageInCalc,
- containsViewportUnit,
- getLocalCustomProperties,
- usesRawFallbackValues,
- usesRawShorthandValues,
- createAllowList,
- FIXED_UNITS,
-} from "../helpers.mjs";
-
-const {
- utils: { report, ruleMessages, validateOptions },
-} = stylelint;
-
-const ruleName = namespace("use-size-tokens");
-
-const messages = ruleMessages(ruleName, {
- rejected: value =>
- `Consider using a size design token instead of ${value}. This may be fixable by running the same command again with --fix.`,
-});
-
-const meta = {
- url: "https://firefox-source-docs.mozilla.org/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-size-tokens.html",
- fixable: true,
-};
-
-// Bug 1979978 moves this object to ../data.mjs
-const SIZE = {
- CATEGORIES: ["size", "icon-size"],
- PROPERTIES: [
- "width",
- "min-width",
- "max-width",
- "height",
- "min-height",
- "max-height",
- "inline-size",
- "min-inline-size",
- "max-inline-size",
- "block-size",
- "min-block-size",
- "max-block-size",
- "inset",
- "inset-block",
- "inset-block-end",
- "inset-block-start",
- "inset-inline",
- "inset-inline-end",
- "inset-inline-start",
- "left",
- "right",
- "top",
- "bottom",
- "background-size",
- ],
-};
-
-const tokenCSS = createTokenNamesArray(SIZE.CATEGORIES);
-
-// Allowed size values in CSS
-const SIZE_TOKENS_ALLOW_LIST = createAllowList([
- FIXED_UNITS,
- "0",
- "auto",
- "none",
- "fit-content",
- "min-content",
- "max-content",
-]);
-
-const RAW_VALUE_TO_TOKEN_VALUE = {
- ...createRawValuesObject(SIZE.CATEGORIES),
- "0.75rem": "var(--size-item-xsmall)",
- "1rem": "var(--size-item-small)",
- "1.5rem": "var(--size-item-medium)",
- "2rem": "var(--size-item-large)",
- "3rem": "var(--size-item-xlarge)",
-};
-
-const ruleFunction = primaryOption => {
- return (root, result) => {
- const validOptions = validateOptions(result, ruleName, {
- actual: primaryOption,
- possible: [true],
- });
-
- if (!validOptions) {
- return;
- }
-
- // Walk declarations once to generate a lookup table of variables.
- const cssCustomProperties = getLocalCustomProperties(root);
-
- // Walk declarations again to detect non-token values.
- root.walkDecls(declarations => {
- if (!SIZE.PROPERTIES.includes(declarations.prop)) {
- return;
- }
-
- // Allows values using `vh` or `vw` units
- if (containsViewportUnit(declarations.value)) {
- return;
- }
-
- // Otherwise, see if we are using the tokens correctly
- if (
- isValidTokenUsage(
- declarations.value,
- tokenCSS,
- cssCustomProperties,
- SIZE_TOKENS_ALLOW_LIST
- ) &&
- isValidTokenUsageInCalc(
- declarations.value,
- tokenCSS,
- cssCustomProperties,
- SIZE_TOKENS_ALLOW_LIST
- ) &&
- !usesRawFallbackValues(declarations.value, RAW_VALUE_TO_TOKEN_VALUE) &&
- !usesRawShorthandValues(
- declarations.value,
- tokenCSS,
- cssCustomProperties,
- SIZE_TOKENS_ALLOW_LIST
- )
- ) {
- return;
- }
-
- report({
- message: messages.rejected(declarations.value),
- node: declarations,
- result,
- ruleName,
- fix: () => {
- const val = valueParser(declarations.value);
- let hasFixes = false;
-
- val.walk(node => {
- if (node.type === "word") {
- const token = RAW_VALUE_TO_TOKEN_VALUE[node.value.trim()];
- if (token) {
- hasFixes = true;
- node.value = token;
- }
- }
- });
-
- if (hasFixes) {
- declarations.value = val.toString();
- }
- },
- });
- });
- };
-};
-
-ruleFunction.ruleName = ruleName;
-ruleFunction.messages = messages;
-ruleFunction.meta = meta;
-
-export default ruleFunction;
diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-size-tokens.tests.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-size-tokens.tests.mjs
@@ -1,192 +0,0 @@
-/**
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
-// eslint-disable-next-line import/no-unresolved
-import { testRule } from "stylelint-test-rule-node";
-import stylelint from "stylelint";
-import useSizeTokens from "../rules/use-size-tokens.mjs";
-
-let plugin = stylelint.createPlugin(useSizeTokens.ruleName, useSizeTokens);
-let {
- ruleName,
- rule: { messages },
-} = plugin;
-
-testRule({
- plugins: [plugin],
- ruleName,
- config: true,
- fix: true,
- accept: [
- {
- code: ".a { max-height: var(--size-item-medium); }",
- description:
- "Using the medium item size token with the max-height property is valid.",
- },
- {
- code: ".a { min-height: var(--size-item-large); }",
- description:
- "Using the large item size token with the min-height property is valid.",
- },
- {
- code: ".a { max-width: var(--size-item-xlarge); }",
- description:
- "Using the xlarge item size token with the max-width property is valid.",
- },
- {
- code: ".a { min-width: var(--size-item-medium); }",
- description:
- "Using the medium item size token with the min-width property is valid.",
- },
- {
- code: ".a { min-width: var(--size-item-medium); }",
- description:
- "Using the medium item size token with the min-width property is valid.",
- },
- {
- code: ".a { inline-size: 50%; }",
- description:
- "Using a percentage value with the inline-size property is valid.",
- },
- {
- code: ".a { inline-size: var(--size-item-xlarge); }",
- description:
- "Using the xlarge item size token with the inline-size property is valid.",
- },
- {
- code: `
- @media (min-width: 768px) {
- a. { color: var(--text-color); }
- }
- `,
- description:
- "Using a pixel value with a size property within an atrule is valid.",
- },
- {
- code: ".a { width: calc(var(--size-item-small) * 2); }",
- description:
- "Using the small item size token in a `calc()` declaration with the width property is valid.",
- },
- {
- code: ".a { width: calc(2 * var(--size-item-small)); }",
- description:
- "Using the small item size token in a `calc()` declaration with the width property is valid.",
- },
- {
- code: ".a { width: calc(2 * var(--size-item-small, 14px)); }",
- description:
- "Using the small item size token with a fallback value in a `calc()` declaration with the width property is valid.",
- },
- {
- code: ".a { width: calc(var(--size-item-small, 14px) * 2); }",
- description:
- "Using the small item size token with a fallback value in a `calc()` declaration with the width property is valid.",
- },
- {
- code: ".a { height: 100vh; }",
- description:
- "Using a value using the `vh` unit in the height property is valid.",
- },
- {
- code: ".a { height: calc(100vh - 2em); }",
- description:
- "Using a value using the `vh` unit and a percentage value in a `calc()` function in the height property is valid.",
- },
- {
- code: ".a { height: calc(100% - 2em); }",
- description:
- "Using a percentage value and a value using the `em` unit in a `calc()` function in the height property is valid.",
- },
- {
- code: ".a { width: calc(100vw - 10%); }",
- description:
- "Using a percentage value and a value using the `em` unit in a `calc()` function in the height property is valid.",
- },
- {
- code: ".a { min-block-size: 8em; }",
- description:
- "Using a value using the `em` unit in the min-block-size property is valid.",
- },
- {
- code: ".a { max-block-size: 75%; }",
- description:
- "Using a percentage value in the min-block-size property is valid.",
- },
- {
- code: ".a { max-height: var(--size-item-medium, 50%); }",
- description:
- "Using a size design token with a fallback value in the max-height property is valid.",
- },
- {
- code: ".a { min-block-size: fit-content; }",
- description:
- "Using the fit-content value in the min-block-size property is valid.",
- },
- {
- code: ".a { background-size: var(--icon-size-medium) auto; }",
- description:
- "Using the medium icon size token and the auto value in the background-size property is valid.",
- },
- {
- code: ".a { background-size: calc(100vh * 0.8); }",
- description:
- "Using the medium icon size token and the auto value in the background-size property is valid.",
- },
- ],
- reject: [
- {
- code: ".a { max-height: 500px; }",
- unfixable: true,
- message: messages.rejected("500px"),
- description:
- "Consider using a size design token instead of using a pixel value. This may be fixable by running the same command again with --fix.",
- },
- {
- code: ".a { height: 0.75rem; }",
- fixed: ".a { height: var(--size-item-xsmall); }",
- message: messages.rejected("0.75rem"),
- description:
- "Consider using a size design token instead of using a rem value. This may be fixable by running the same command again with --fix.",
- },
- {
- code: `
- :root { --local-size: 24px; }
- .a { min-height: var(--local-size); }
- `,
- unfixable: true,
- message: messages.rejected("var(--local-size)"),
- description:
- "Consider using a size design token instead of using a pixel value. This may be fixable by running the same command again with --fix.",
- },
- {
- code: `.a { max-inline-size: calc(16px + 32px); }`,
- fixed: `.a { max-inline-size: calc(var(--size-item-small) + var(--size-item-large)); }`,
- message: messages.rejected("calc(16px + 32px)"),
- description:
- "Consider using a size design token instead of using a pixel value. This may be fixable by running the same command again with --fix.",
- },
- {
- code: `.a { max-inline-size: calc(16px + var(--size-item-xlarge)); }`,
- fixed: `.a { max-inline-size: calc(var(--size-item-small) + var(--size-item-xlarge)); }`,
- message: messages.rejected("calc(16px + var(--size-item-xlarge))"),
- description:
- "Consider using a size design token instead of using a pixel value. This may be fixable by running the same command again with --fix.",
- },
- {
- code: `.a { max-inline-size: calc(var(--size-item-small) + 32px); }`,
- fixed: `.a { max-inline-size: calc(var(--size-item-small) + var(--size-item-large)); }`,
- message: messages.rejected("calc(var(--size-item-small) + 32px)"),
- description:
- "Consider using a size design token instead of using a pixel value. This may be fixable by running the same command again with --fix.",
- },
- {
- code: `.a { max-block-size: calc(100vh + 32px); }`,
- fixed: `.a { max-block-size: calc(100vh + var(--size-item-large)); }`,
- message: messages.rejected("calc(100vh + 32px)"),
- description:
- "Consider using a size design token instead of using a pixel value. This may be fixable by running the same command again with --fix.",
- },
- ],
-});
