@yuebai008/cli/dist/cli-server/client/front_end/panels/elements/CSSRuleValidator.js

Command line interface for rapid qg-minigame development

import*as Host from"../../core/host/host.js";import*as i18n from"../../core/i18n/i18n.js";import*as SDK from"../../core/sdk/sdk.js";import{buildPropertyDefinitionText,buildPropertyName,buildPropertyValue,isFlexContainer,isGridContainer,isInlineElement,isMulticolContainer,isPossiblyReplacedElement}from"./CSSRuleValidatorHelper.js";const UIStrings={ruleViolatedBySameElementRuleReason:"The {REASON_PROPERTY_DECLARATION_CODE} property prevents {AFFECTED_PROPERTY_DECLARATION_CODE} from having an effect.",ruleViolatedBySameElementRuleFix:"Try setting {PROPERTY_NAME} to something other than {PROPERTY_VALUE}.",ruleViolatedBySameElementRuleChangeSuggestion:"Try setting the {EXISTING_PROPERTY_DECLARATION} property to {TARGET_PROPERTY_DECLARATION}.",ruleViolatedByParentElementRuleReason:"The {REASON_PROPERTY_DECLARATION_CODE} property on the parent element prevents {AFFECTED_PROPERTY_DECLARATION_CODE} from having an effect.",ruleViolatedByParentElementRuleFix:"Try setting the {EXISTING_PARENT_ELEMENT_RULE} property on the parent to {TARGET_PARENT_ELEMENT_RULE}.",fontVariationSettingsWarning:"Value for setting “{PH1}” {PH2} is outside the supported range [{PH3}, {PH4}] for font-family “{PH5}”."},str_=i18n.i18n.registerUIStrings("panels/elements/CSSRuleValidator.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class Hint{#e;#t;#i;constructor(e,t,i){this.#e=e,this.#t=t,this.#i=i}getMessage(){return this.#e}getPossibleFixMessage(){return this.#t}getLearnMoreLink(){return this.#i}}export class CSSRuleValidator{getMetricType(){return Host.UserMetrics.CSSHintType.Other}#r;constructor(e){this.#r=e}getApplicableProperties(){return this.#r}}export class AlignContentValidator extends CSSRuleValidator{constructor(){super(["align-content"])}getMetricType(){return Host.UserMetrics.CSSHintType.AlignContent}getHint(e,t){if(!t)return;if(!isFlexContainer(t))return;if("nowrap"!==t.get("flex-wrap"))return;const i=buildPropertyDefinitionText("flex-wrap","nowrap"),r=buildPropertyName("align-content");return new Hint(i18nString(UIStrings.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:r}),i18nString(UIStrings.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:buildPropertyName("flex-wrap"),PROPERTY_VALUE:buildPropertyValue("nowrap")}))}}export class FlexItemValidator extends CSSRuleValidator{constructor(){super(["flex","flex-basis","flex-grow","flex-shrink"])}getMetricType(){return Host.UserMetrics.CSSHintType.FlexItem}getHint(e,t,i){if(!i)return;if(isFlexContainer(i))return;const r=buildPropertyDefinitionText("display",i?.get("display")),n=buildPropertyName(e),o=buildPropertyDefinitionText("display","flex");return new Hint(i18nString(UIStrings.ruleViolatedByParentElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:r,AFFECTED_PROPERTY_DECLARATION_CODE:n}),i18nString(UIStrings.ruleViolatedByParentElementRuleFix,{EXISTING_PARENT_ELEMENT_RULE:r,TARGET_PARENT_ELEMENT_RULE:o}))}}export class FlexContainerValidator extends CSSRuleValidator{constructor(){super(["flex-direction","flex-flow","flex-wrap"])}getMetricType(){return Host.UserMetrics.CSSHintType.FlexContainer}getHint(e,t){if(!t)return;if(isFlexContainer(t))return;const i=buildPropertyDefinitionText("display",t?.get("display")),r=buildPropertyDefinitionText("display","flex"),n=buildPropertyName(e);return new Hint(i18nString(UIStrings.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:n}),i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion,{EXISTING_PROPERTY_DECLARATION:i,TARGET_PROPERTY_DECLARATION:r}))}}export class GridContainerValidator extends CSSRuleValidator{constructor(){super(["grid","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-template","grid-template-areas","grid-template-columns","grid-template-rows"])}getMetricType(){return Host.UserMetrics.CSSHintType.GridContainer}getHint(e,t){if(isGridContainer(t))return;const i=buildPropertyDefinitionText("display",t?.get("display")),r=buildPropertyDefinitionText("display","grid"),n=buildPropertyName(e);return new Hint(i18nString(UIStrings.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:n}),i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion,{EXISTING_PROPERTY_DECLARATION:i,TARGET_PROPERTY_DECLARATION:r}))}}export class GridItemValidator extends CSSRuleValidator{constructor(){super(["grid-area","grid-column","grid-row","grid-row-end","grid-row-start","justify-self"])}getMetricType(){return Host.UserMetrics.CSSHintType.GridItem}getHint(e,t,i){if(!i)return;if(isGridContainer(i))return;const r=buildPropertyDefinitionText("display",i?.get("display")),n=buildPropertyDefinitionText("display","grid"),o=buildPropertyName(e);return new Hint(i18nString(UIStrings.ruleViolatedByParentElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:r,AFFECTED_PROPERTY_DECLARATION_CODE:o}),i18nString(UIStrings.ruleViolatedByParentElementRuleFix,{EXISTING_PARENT_ELEMENT_RULE:r,TARGET_PARENT_ELEMENT_RULE:n}))}}export class FlexOrGridItemValidator extends CSSRuleValidator{constructor(){super(["place-self","align-self","order"])}getMetricType(){return Host.UserMetrics.CSSHintType.FlexOrGridItem}getHint(e,t,i){if(!i)return;if(isFlexContainer(i)||isGridContainer(i))return;const r=buildPropertyDefinitionText("display",i?.get("display")),n=`${buildPropertyDefinitionText("display","flex")} or ${buildPropertyDefinitionText("display","grid")}`,o=buildPropertyName(e);return new Hint(i18nString(UIStrings.ruleViolatedByParentElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:r,AFFECTED_PROPERTY_DECLARATION_CODE:o}),i18nString(UIStrings.ruleViolatedByParentElementRuleFix,{EXISTING_PARENT_ELEMENT_RULE:r,TARGET_PARENT_ELEMENT_RULE:n}))}}export class FlexGridValidator extends CSSRuleValidator{constructor(){super(["justify-content","align-content","place-content","align-items"])}getMetricType(){return Host.UserMetrics.CSSHintType.FlexGrid}getHint(e,t){if(!t)return;if(isFlexContainer(t)||isGridContainer(t))return;const i=buildPropertyDefinitionText("display",t?.get("display")),r=buildPropertyName(e);return new Hint(i18nString(UIStrings.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:r}),i18nString(UIStrings.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:buildPropertyName("display"),PROPERTY_VALUE:buildPropertyValue(t?.get("display"))}))}}export class MulticolFlexGridValidator extends CSSRuleValidator{constructor(){super(["gap","column-gap","row-gap","grid-gap","grid-column-gap","grid-column-end","grid-row-gap"])}getMetricType(){return Host.UserMetrics.CSSHintType.MulticolFlexGrid}getHint(e,t){if(!t)return;if(isMulticolContainer(t)||isFlexContainer(t)||isGridContainer(t))return;const i=buildPropertyDefinitionText("display",t?.get("display")),r=buildPropertyName(e);return new Hint(i18nString(UIStrings.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:r}),i18nString(UIStrings.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:buildPropertyName("display"),PROPERTY_VALUE:buildPropertyValue(t?.get("display"))}))}}export class PaddingValidator extends CSSRuleValidator{constructor(){super(["padding","padding-top","padding-right","padding-bottom","padding-left"])}getMetricType(){return Host.UserMetrics.CSSHintType.Padding}getHint(e,t){const i=t?.get("display");if(!i)return;if(!["table-row-group","table-header-group","table-footer-group","table-row","table-column-group","table-column"].includes(i))return;const r=buildPropertyDefinitionText("display",t?.get("display")),n=buildPropertyName(e);return new Hint(i18nString(UIStrings.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:r,AFFECTED_PROPERTY_DECLARATION_CODE:n}),i18nString(UIStrings.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:buildPropertyName("display"),PROPERTY_VALUE:buildPropertyValue(t?.get("display"))}))}}export class PositionValidator extends CSSRuleValidator{constructor(){super(["top","right","bottom","left"])}getMetricType(){return Host.UserMetrics.CSSHintType.Position}getHint(e,t){const i=t?.get("position");if(!i)return;if("static"!==i)return;const r=buildPropertyDefinitionText("position",t?.get("position")),n=buildPropertyName(e);return new Hint(i18nString(UIStrings.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:r,AFFECTED_PROPERTY_DECLARATION_CODE:n}),i18nString(UIStrings.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:buildPropertyName("position"),PROPERTY_VALUE:buildPropertyValue(t?.get("position"))}))}}export class ZIndexValidator extends CSSRuleValidator{constructor(){super(["z-index"])}getMetricType(){return Host.UserMetrics.CSSHintType.ZIndex}getHint(e,t,i){const r=t?.get("position");if(!r)return;if(["absolute","relative","fixed","sticky"].includes(r)||isFlexContainer(i)||isGridContainer(i))return;const n=buildPropertyDefinitionText("position",t?.get("position")),o=buildPropertyName(e);return new Hint(i18nString(UIStrings.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:n,AFFECTED_PROPERTY_DECLARATION_CODE:o}),i18nString(UIStrings.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:buildPropertyName("position"),PROPERTY_VALUE:buildPropertyValue(t?.get("position"))}))}}export class SizingValidator extends CSSRuleValidator{constructor(){super(["width","height"])}getMetricType(){return Host.UserMetrics.CSSHintType.Sizing}getHint(e,t,i,r){if(!t||!r)return;if(!isInlineElement(t))return;if(isPossiblyReplacedElement(r))return;const n=buildPropertyDefinitionText("display",t?.get("display")),o=buildPropertyName(e);return new Hint(i18nString(UIStrings.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:n,AFFECTED_PROPERTY_DECLARATION_CODE:o}),i18nString(UIStrings.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:buildPropertyName("display"),PROPERTY_VALUE:buildPropertyValue(t?.get("display"))}))}}export class FontVariationSettingsValidator extends CSSRuleValidator{constructor(){super(["font-variation-settings"])}getMetricType(){return Host.UserMetrics.CSSHintType.FontVariationSettings}getHint(e,t,i,r,n){if(!t)return;const o=t.get("font-variation-settings");if(!o)return;const l=t.get("font-family");if(!l)return;const a=new Set(SDK.CSSPropertyParser.parseFontFamily(l)),s=(n||[]).filter((e=>a.has(e.getFontFamily()))),u=SDK.CSSPropertyParser.parseFontVariationSettings(o),E=[];for(const e of u)for(const t of s){const i=t.getVariationAxisByTag(e.tag);i&&((e.value<i.minValue||e.value>i.maxValue)&&E.push(i18nString(UIStrings.fontVariationSettingsWarning,{PH1:e.tag,PH2:e.value,PH3:i.minValue,PH4:i.maxValue,PH5:t.getFontFamily()})))}return E.length?new Hint(E.join(" "),""):void 0}}const CSS_RULE_VALIDATORS=[AlignContentValidator,FlexContainerValidator,FlexGridValidator,FlexItemValidator,FlexOrGridItemValidator,FontVariationSettingsValidator,GridContainerValidator,GridItemValidator,MulticolFlexGridValidator,PaddingValidator,PositionValidator,SizingValidator,ZIndexValidator],setupCSSRulesValidators=()=>{const e=new Map;for(const t of CSS_RULE_VALIDATORS){const i=new t,r=i.getApplicableProperties();for(const t of r){let r=e.get(t);void 0===r&&(r=[]),r.push(i),e.set(t,r)}}return e};export const cssRuleValidatorsMap=setupCSSRulesValidators();