Skip to content

Commit

Permalink
more feedback updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@chloerice
chloerice committed Dec 12, 2022
1 parent f152ccd commit 625db06
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 35 deletions.
32 changes: 18 additions & 14 deletions stylelint-polaris/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const {
} = require('@shopify/polaris-tokens');

/**
* @type {import('./plugins/coverage').CategorizedRules} The stylelint-polaris/coverage rule expects a 3-dimensional rule config that groups Stylelint rules by coverage categories. It reports problems with dynamic rule names by appending the category to the coverage plugin's rule name
* @type {import('./plugins/coverage').PrimaryOptions} The stylelint-polaris/coverage rule expects a 3-dimensional rule config that groups Stylelint rules by coverage categories. It reports problems with dynamic rule names by appending the category to the coverage plugin's rule name
(e.g., Unexpected named color "blue" - Please use a Polaris color token Stylelint(polaris/colors/color-named)")
*/
Expand Down Expand Up @@ -55,7 +55,7 @@ const stylelintPolarisCoverageOptions = {
{
message: 'Please use a Polaris color token',
meta: {
url: 'https://github.com/Shopify/polaris/blob/main/stylelint-polaris/README.md#color',
url: 'https://github.com/Shopify/polaris/tree/main/stylelint-polaris/README.md#colors',
},
},
],
Expand Down Expand Up @@ -91,7 +91,7 @@ const stylelintPolarisCoverageOptions = {
{
message: 'Please use a Polaris motion token',
meta: {
url: 'https://github.com/Shopify/polaris/blob/main/stylelint-polaris/README.md#motion',
url: 'https://github.com/Shopify/polaris/tree/main/stylelint-polaris/README.md#motion',
},
},
],
Expand Down Expand Up @@ -148,7 +148,7 @@ const stylelintPolarisCoverageOptions = {
{
message: 'Please use a Polaris font token',
meta: {
url: 'https://github.com/Shopify/polaris/blob/main/stylelint-polaris/README.md#typography',
url: 'https://github.com/Shopify/polaris/tree/main/stylelint-polaris/README.md#typography',
},
},
],
Expand Down Expand Up @@ -230,7 +230,7 @@ const stylelintPolarisCoverageOptions = {
{
message: 'Please use a Polaris layout component',
meta: {
url: 'https://github.com/Shopify/polaris/blob/main/stylelint-polaris/README.md#layout',
url: 'https://github.com/Shopify/polaris/tree/main/stylelint-polaris/README.md#layout',
},
},
],
Expand Down Expand Up @@ -264,12 +264,17 @@ const stylelintPolarisCoverageOptions = {
{
message: 'Please use a Polaris spacing token',
meta: {
url: 'https://github.com/Shopify/polaris/blob/main/stylelint-polaris/README.md#spacing',
url: 'https://github.com/Shopify/polaris/tree/main/stylelint-polaris/README.md#spacing',
},
},
],
shape: [
{
'function-disallowed-list': [
/([\w-]+\.)?border-radius/,
/([\w-]+\.)?border-width/,
/([\w-]+\.)?border/,
],
'declaration-property-unit-disallowed-list': [
{
'border-width': ['px', 'rem', 'em'],
Expand All @@ -281,9 +286,6 @@ const stylelintPolarisCoverageOptions = {
],
'polaris/at-rule-disallowed-list': {
include: [
/([\w-]+\.)?border-radius/,
/([\w-]+\.)?border-width/,
/([\w-]+\.)?border/,
/([\w-]+\.)?high-contrast-border($|\()/,
/([\w-]+\.)?high-contrast-button-outline($|\()/,
/([\w-]+\.)?high-contrast-outline($|\()/,
Expand Down Expand Up @@ -314,7 +316,7 @@ const stylelintPolarisCoverageOptions = {
{
message: 'Please use a Polaris shape token',
meta: {
url: 'https://github.com/Shopify/polaris/blob/main/stylelint-polaris/README.md#shape',
url: 'https://github.com/Shopify/polaris/tree/main/stylelint-polaris/README.md#shape',
},
},
],
Expand Down Expand Up @@ -345,7 +347,7 @@ const stylelintPolarisCoverageOptions = {
{
message: 'Please use a Polaris depth token',
meta: {
url: 'https://github.com/Shopify/polaris/blob/main/stylelint-polaris/README.md#depth',
url: 'https://github.com/Shopify/polaris/tree/main/stylelint-polaris/README.md#depth',
},
},
],
Expand All @@ -368,7 +370,7 @@ const stylelintPolarisCoverageOptions = {
{
message: 'Please use a Polaris z-index token',
meta: {
url: 'https://github.com/Shopify/polaris/blob/main/stylelint-polaris/README.md#z-index',
url: 'https://github.com/Shopify/polaris/tree/main/stylelint-polaris/README.md#z-index',
},
},
],
Expand All @@ -391,6 +393,7 @@ const stylelintPolarisCoverageOptions = {
},
},
{
message: 'Please use a Polaris token',
meta: {
url: 'https://github.com/Shopify/polaris/blob/main/stylelint-polaris/README.md#conventions',
},
Expand Down Expand Up @@ -449,8 +452,9 @@ const stylelintPolarisCoverageOptions = {
},
},
{
message: 'Please use a Polaris breakpoint token',
meta: {
url: 'https://github.com/Shopify/polaris/blob/main/stylelint-polaris/README.md#media-queries',
url: 'https://github.com/Shopify/polaris/tree/main/stylelint-polaris/README.md#media-queries',
},
},
],
Expand Down Expand Up @@ -497,7 +501,7 @@ const stylelintPolarisCoverageOptions = {
{
message: 'Please use a Polaris token',
meta: {
url: 'https://github.com/Shopify/polaris/blob/main/stylelint-polaris/README.md#legacy',
url: 'https://github.com/Shopify/polaris/tree/main/stylelint-polaris/README.md#legacy',
},
},
],
Expand Down
55 changes: 34 additions & 21 deletions stylelint-polaris/plugins/coverage/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,57 +5,72 @@ const {isPlainObject} = require('../../utils');
const coverageRuleName = 'polaris/coverage';

/**
* @typedef {import('stylelint').ConfigRules} StylelintRuleConfig
* @typedef {import('stylelint').ConfigRules} StylelintConfigRules
* @property {string} message - Message appended to the warning in place of the default category message
*/

/**
* @typedef {object} CategorySettings
* @property {import('stylelint').RuleMessage} [message] - Message appended to the warning if no custom message is set on a rule's secondary options
* @property {import('stylelint').RuleMeta} [meta] - Category documentation URL hyperlinked to the reported rule in the VS Code diagnostic
* @property {(stylelintRuleName: string) => import('stylelint').RuleMeta} [meta] - Category documentation URL hyperlinked to the reported rule in the VS Code diagnostic
*/

/**
* @typedef {{
* [category: string]: StylelintRuleConfig | [
* StylelintRuleConfig, CategorySettings
* [category: string]: StylelintConfigRules | [
* StylelintConfigRules, CategorySettings
* ]
* }} CategorizedRules
* }} PrimaryOptions - Configured Stylelint rules grouped by Polaris coverage category
*/

/**
* @typedef {object} CoverageRule
* @property { string } ruleName - The dynamic coverage rule name
* @property { string } stylelintRuleName - The Stylelint rule name
* @property { import('stylelint').ConfigRuleSettings } ruleSettings - The Stylelint rule settings
* @property { import('stylelint').RuleSeverity } [severity] - The severity of the rule
* @property { boolean } fix - Whether the rule should be autofixed
* @property { string } [appendedMessage] - Message appended to the warning text
* @property { (stylelintRuleName: string) => import('stylelint').RuleMeta } [meta] - Category documentation URL hyperlinked to the reported rule in the VS Code diagnostic
*/

// Setting `line` to an invalid line number forces the warning to be reported
// and the `report({node})` option is used to display the location information:
// https://github.com/stylelint/stylelint/blob/57cbcd4eb0ee809006a1e3d2ccfe73af48744ad5/lib/utils/report.js#L49-L52
const forceReport = {line: -1};

/** @type {import('stylelint').RuleMeta } - Default documentation URL if none is set in the category settings */
const defaultMeta = {
url: 'https://github.com/Shopify/polaris/tree/main/stylelint-polaris/plugins/coverage/README.md#rules',
url: 'https://github.com/Shopify/polaris/tree/main/stylelint-polaris/README.md',
};

module.exports = stylelint.createPlugin(
coverageRuleName,
/**
* @param {CategorizedRules} categorizedRules - Configured Stylelint rules grouped by Polaris coverage category
* @param {PrimaryOptions} categorizedRules
* @param {import('stylelint').RuleContext} context
*/
(categorizedRules, _, context) => {
const isPrimaryOptionsValid = validatePrimaryOptions(categorizedRules);

/** @type {CoverageRule[]} */
const coverageRules = [];

for (const [category, categoryConfig] of Object.entries(categorizedRules)) {
const [stylelintRules, categorySettings] =
normalizeConfig(categoryConfig);

for (const [stylelintRuleName, stylelintRuleConfig] of Object.entries(
for (const [stylelintRuleName, stylelintRuleSettings] of Object.entries(
stylelintRules,
)) {
coverageRules.push({
ruleName: `polaris/${category}/${stylelintRuleName}`,
stylelintRuleName,
ruleSettings: stylelintRuleConfig,
severity: stylelintRuleConfig?.[1]?.severity,
fix: context.fix && !stylelintRuleConfig?.[1]?.disableFix,
ruleSettings: stylelintRuleSettings,
severity: stylelintRuleSettings?.[1]?.severity,
fix: context.fix && !stylelintRuleSettings?.[1]?.disableFix,
appendedMessage:
stylelintRuleConfig?.[1]?.message || categorySettings?.message,
stylelintRuleSettings?.[1]?.message || categorySettings?.message,
meta: categorySettings?.meta || defaultMeta,
});
}
Expand Down Expand Up @@ -119,16 +134,14 @@ module.exports = stylelint.createPlugin(
},
);

/** @typedef
* @param {string} ruleName
/**
* @param {PrimaryOptions} categoryConfigRules
* @returns {[StylelintConfigRules, CategorySettings]}
*/

function deNamespaceRuleName(ruleName) {
return ruleName.substring(ruleName.indexOf('/') + 1);
}

function normalizeConfig(config) {
return Array.isArray(config) ? config : [config, {}];
function normalizeConfig(categoryConfigRules) {
return Array.isArray(categoryConfigRules)
? categoryConfigRules
: [categoryConfigRules, {}];
}

function validatePrimaryOptions(categorizedRules) {
Expand Down

0 comments on commit 625db06

Please sign in to comment.