@atlaskit/eslint-plugin-design-system 10.8.2 → 10.9.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 10.9.0
+
+### Minor Changes
+
+- [#116062](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116062)
+  [`2959497ccf910`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2959497ccf910) -
+  Adds `shouldAlwaysCheckXcss` config option to `consistent-css-prop-usage` to lint the `xcss` prop
+  even when `excludeReactComponents` is enabled.
+
 ## 10.8.2
 
 ### Patch Changes

package/constellation/consistent-css-prop-usage/usage.mdx

@@ -193,6 +193,15 @@ assume that an element is a React component if its name starts with a capital le
 
 This is `false` by default.
 
+### shouldAlwaysCheckXcss
+
+Overrides `excludeReactComponents` specifically for the `xcss` prop.
+
+This means that even if `excludeReactComponents` is `true`, you can still lint the `xcss` prop by
+setting `shouldAlwaysCheckXcss` to `true`.
+
+This is `false` by default.
+
 ### autoFix
 
 When set to `true`, this rule will turn on the autofixer. Set this to `false` if you do not want the

package/dist/cjs/rules/consistent-css-prop-usage/index.js

@@ -497,7 +497,8 @@ var defaultConfig = {
   cssImportSource: _isSupportedImport.CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: _isSupportedImport.CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  autoFix: true
+  autoFix: true,
+  shouldAlwaysCheckXcss: false
 };
 var rule = (0, _createRule.createLintRule)({
   meta: {
@@ -540,6 +541,9 @@ var rule = (0, _createRule.createLintRule)({
         excludeReactComponents: {
           type: 'boolean'
         },
+        shouldAlwaysCheckXcss: {
+          type: 'boolean'
+        },
         autoFix: {
           type: 'boolean'
         }
@@ -554,7 +558,20 @@ var rule = (0, _createRule.createLintRule)({
         var node = nodeOriginal;
         var name = node.name,
           value = node.value;
-        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
+
+        /**
+         * We skip linting `xcss` attributes if:
+         *
+         * - excludeReactComponents === true
+         * - shouldAlwaysCheckXcss === false
+         *
+         * In the future we may want to remove `shouldAlwaysCheckXcss`
+         * and just always lint `xcss`, regardless of `excludeReactComponents`
+         */
+        if (mergedConfig.excludeReactComponents && name.name === 'xcss' && !mergedConfig.shouldAlwaysCheckXcss) {
+          return;
+        }
+        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement' && name.name === 'css') {
           // e.g. <item.before />
           if (node.parent.name.type === 'JSXMemberExpression') {
             return;

package/dist/es2019/rules/consistent-css-prop-usage/index.js

@@ -449,7 +449,8 @@ const defaultConfig = {
   cssImportSource: CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  autoFix: true
+  autoFix: true,
+  shouldAlwaysCheckXcss: false
 };
 const rule = createLintRule({
   meta: {
@@ -492,6 +493,9 @@ const rule = createLintRule({
         excludeReactComponents: {
           type: 'boolean'
         },
+        shouldAlwaysCheckXcss: {
+          type: 'boolean'
+        },
         autoFix: {
           type: 'boolean'
         }
@@ -508,7 +512,20 @@ const rule = createLintRule({
           name,
           value
         } = node;
-        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
+
+        /**
+         * We skip linting `xcss` attributes if:
+         *
+         * - excludeReactComponents === true
+         * - shouldAlwaysCheckXcss === false
+         *
+         * In the future we may want to remove `shouldAlwaysCheckXcss`
+         * and just always lint `xcss`, regardless of `excludeReactComponents`
+         */
+        if (mergedConfig.excludeReactComponents && name.name === 'xcss' && !mergedConfig.shouldAlwaysCheckXcss) {
+          return;
+        }
+        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement' && name.name === 'css') {
           // e.g. <item.before />
           if (node.parent.name.type === 'JSXMemberExpression') {
             return;

package/dist/esm/rules/consistent-css-prop-usage/index.js

@@ -490,7 +490,8 @@ var defaultConfig = {
   cssImportSource: CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  autoFix: true
+  autoFix: true,
+  shouldAlwaysCheckXcss: false
 };
 var rule = createLintRule({
   meta: {
@@ -533,6 +534,9 @@ var rule = createLintRule({
         excludeReactComponents: {
           type: 'boolean'
         },
+        shouldAlwaysCheckXcss: {
+          type: 'boolean'
+        },
         autoFix: {
           type: 'boolean'
         }
@@ -547,7 +551,20 @@ var rule = createLintRule({
         var node = nodeOriginal;
         var name = node.name,
           value = node.value;
-        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
+
+        /**
+         * We skip linting `xcss` attributes if:
+         *
+         * - excludeReactComponents === true
+         * - shouldAlwaysCheckXcss === false
+         *
+         * In the future we may want to remove `shouldAlwaysCheckXcss`
+         * and just always lint `xcss`, regardless of `excludeReactComponents`
+         */
+        if (mergedConfig.excludeReactComponents && name.name === 'xcss' && !mergedConfig.shouldAlwaysCheckXcss) {
+          return;
+        }
+        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement' && name.name === 'css') {
           // e.g. <item.before />
           if (node.parent.name.type === 'JSXMemberExpression') {
             return;

package/dist/types/rules/consistent-css-prop-usage/types.d.ts

@@ -6,4 +6,5 @@ export type RuleConfig = {
     xcssImportSource: ImportSource;
     excludeReactComponents: boolean;
     autoFix: boolean;
+    shouldAlwaysCheckXcss: boolean;
 };

package/dist/types-ts4.5/rules/consistent-css-prop-usage/types.d.ts

@@ -6,4 +6,5 @@ export type RuleConfig = {
     xcssImportSource: ImportSource;
     excludeReactComponents: boolean;
     autoFix: boolean;
+    shouldAlwaysCheckXcss: boolean;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
 	"description": "The essential plugin for use with the Atlassian Design System.",
-	"version": "10.8.2",
+	"version": "10.9.0",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {