@elastic/eslint-plugin-eui 0.2.0 → 1.0.0

package/README.md

@@ -148,13 +148,27 @@ will raise an ESLint report and suggest replacing the `style` attribute with `cs
 
 ## Testing
 
+### Running unit tests
+
+Run unit tests using the following command:
+
+```bash
+yarn test
+```
+
+Unit tests are written using `RuleTester` from `@typescript-eslint/rule-tester`.
+
 ### Against an existing package
 
 To test the local changes to the plugin, you must:
 
-1. Run `yarn pack` in the directory.
-2. In your project's `package.json`, point `@elastic/eslint-plugin-eui` to `file:/path/to/package.tgz`.
-3. Install dependencies: `yarn kbn bootstrap --no-validate`.
+1. Install `yalc` globally if you haven't already: `npm install -g yalc`.
+2. Open a terminal and navigate to this folder: `cd packages/eslint-plugin`
+3. Build the package: `yarn build`
+4. Run `yalc publish` in the plugin's directory to publish it locally.
+5. In your project's directory, run `yalc add @elastic/eslint-plugin-eui` to link the locally published package.
+6. Install dependencies: `yarn` (if you're a Kibana contributor, run `yarn kbn bootstrap --no-validate`).
+7. After making further changes to the plugin, repeat the steps from 3.
 
 ## Publishing
 

package/lib/cjs/index.js

@@ -3,7 +3,7 @@
 var _href_or_on_click = require("./rules/href_or_on_click");
 var _no_restricted_eui_imports = require("./rules/no_restricted_eui_imports");
 var _no_css_color = require("./rules/no_css_color");
-var _prefer_css_attribute_for_eui_components = require("./rules/prefer_css_attribute_for_eui_components");
+var _prefer_css_prop_for_static_styles = require("./rules/prefer_css_prop_for_static_styles");
 /*
  * Licensed to Elasticsearch B.V. under one or more contributor
  * license agreements. See the NOTICE file distributed with
@@ -28,7 +28,7 @@ const config = {
     'href-or-on-click': _href_or_on_click.HrefOnClick,
     'no-restricted-eui-imports': _no_restricted_eui_imports.NoRestrictedEuiImports,
     'no-css-color': _no_css_color.NoCssColor,
-    'prefer-css-attributes-for-eui-components': _prefer_css_attribute_for_eui_components.PreferCSSAttributeForEuiComponents
+    'prefer-css-prop-for-static-styles': _prefer_css_prop_for_static_styles.PreferCSSPropForStaticStyles
   },
   configs: {
     recommended: {
@@ -37,7 +37,7 @@ const config = {
         '@elastic/eui/href-or-on-click': 'warn',
         '@elastic/eui/no-restricted-eui-imports': 'warn',
         '@elastic/eui/no-css-color': 'warn',
-        '@elastic/eui/prefer-css-attributes-for-eui-components': 'warn'
+        '@elastic/eui/prefer-css-prop-for-static-styles': 'warn'
       }
     }
   }

package/lib/cjs/rules/prefer_css_prop_for_static_styles.d.ts

@@ -0,0 +1,3 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+export declare const PreferCSSPropForStaticStyles: ESLintUtils.RuleModule<"preferCSSPropForStaticStyles", [], unknown, ESLintUtils.RuleListener>;
+//# sourceMappingURL=prefer_css_prop_for_static_styles.d.ts.map

package/lib/cjs/rules/prefer_css_prop_for_static_styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefer_css_prop_for_static_styles.d.ts","sourceRoot":"","sources":["../../../src/rules/prefer_css_prop_for_static_styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAY,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,4BAA4B,+FA8DxC,CAAC"}

package/lib/cjs/rules/{prefer_css_attribute_for_eui_components.js → prefer_css_prop_for_static_styles.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PreferCSSAttributeForEuiComponents = void 0;
+exports.PreferCSSPropForStaticStyles = void 0;
 var _utils = require("@typescript-eslint/utils");
 /*
  * Licensed to Elasticsearch B.V. under one or more contributor
@@ -24,7 +24,7 @@ var _utils = require("@typescript-eslint/utils");
  * under the License.
  */
 
-const PreferCSSAttributeForEuiComponents = exports.PreferCSSAttributeForEuiComponents = _utils.ESLintUtils.RuleCreator.withoutDocs({
+const PreferCSSPropForStaticStyles = exports.PreferCSSPropForStaticStyles = _utils.ESLintUtils.RuleCreator.withoutDocs({
   create(context) {
     const isNamedEuiComponentRegex = /^Eui[A-Z]*/;
     return {
@@ -34,13 +34,17 @@ const PreferCSSAttributeForEuiComponents = exports.PreferCSSAttributeForEuiCompo
           if (styleAttrNode = node.attributes.filter(attr => attr.type === 'JSXAttribute').find(attr => attr.name.name === 'style')) {
             context.report({
               node: styleAttrNode?.parent,
-              messageId: 'preferCSSAttributeForEuiComponents',
+              messageId: 'preferCSSPropForStaticStyles',
               fix(fixer) {
                 const cssAttr = node.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'css');
                 if (cssAttr) {
                   return null;
                 }
-                return fixer.replaceTextRange(styleAttrNode?.name?.range, 'css');
+                const range = styleAttrNode?.name?.range;
+                if (!range) {
+                  return null;
+                }
+                return fixer.replaceTextRange(range, 'css');
               }
             });
           }
@@ -51,10 +55,10 @@ const PreferCSSAttributeForEuiComponents = exports.PreferCSSAttributeForEuiCompo
   meta: {
     type: 'suggestion',
     docs: {
-      description: 'Prefer the JSX css attribute for EUI components'
+      description: 'Prefer the `css` prop for static styles in EUI components'
     },
     messages: {
-      preferCSSAttributeForEuiComponents: 'Prefer the css attribute for EUI components'
+      preferCSSPropForStaticStyles: 'Use the `css` prop instead of `style` for static styles in EUI components to ensure better performance and consistency with EUI’s styling approach. Read more: https://emotion.sh/docs/best-practices#use-the-style-prop-for-dynamic-styles'
     },
     fixable: 'code',
     schema: []

package/lib/cjs/utils/resolve_member_expression_root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolve_member_expression_root.d.ts","sourceRoot":"","sources":["../../../src/utils/resolve_member_expression_root.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAEhE,eAAO,MAAM,2BAA2B,SAChC,QAAQ,CAAC,gBAAgB,KAC9B,QAAQ,CAAC,UAMX,CAAC"}
+{"version":3,"file":"resolve_member_expression_root.d.ts","sourceRoot":"","sources":["../../../src/utils/resolve_member_expression_root.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAEhE,eAAO,MAAM,2BAA2B,GACtC,MAAM,QAAQ,CAAC,gBAAgB,KAC9B,QAAQ,CAAC,UAMX,CAAC"}

package/lib/esm/index.js

@@ -21,13 +21,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const href_or_on_click_1 = require("./rules/href_or_on_click");
 const no_restricted_eui_imports_1 = require("./rules/no_restricted_eui_imports");
 const no_css_color_1 = require("./rules/no_css_color");
-const prefer_css_attribute_for_eui_components_1 = require("./rules/prefer_css_attribute_for_eui_components");
+const prefer_css_prop_for_static_styles_1 = require("./rules/prefer_css_prop_for_static_styles");
 const config = {
     rules: {
         'href-or-on-click': href_or_on_click_1.HrefOnClick,
         'no-restricted-eui-imports': no_restricted_eui_imports_1.NoRestrictedEuiImports,
         'no-css-color': no_css_color_1.NoCssColor,
-        'prefer-css-attributes-for-eui-components': prefer_css_attribute_for_eui_components_1.PreferCSSAttributeForEuiComponents,
+        'prefer-css-prop-for-static-styles': prefer_css_prop_for_static_styles_1.PreferCSSPropForStaticStyles,
     },
     configs: {
         recommended: {
@@ -36,7 +36,7 @@ const config = {
                 '@elastic/eui/href-or-on-click': 'warn',
                 '@elastic/eui/no-restricted-eui-imports': 'warn',
                 '@elastic/eui/no-css-color': 'warn',
-                '@elastic/eui/prefer-css-attributes-for-eui-components': 'warn',
+                '@elastic/eui/prefer-css-prop-for-static-styles': 'warn',
             },
         },
     },

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;AAEH,+DAAuD;AACvD,iFAA2E;AAC3E,uDAAkD;AAClD,6GAAqG;AAErG,MAAM,MAAM,GAAG;IACb,KAAK,EAAE;QACL,kBAAkB,EAAE,8BAAW;QAC/B,2BAA2B,EAAE,kDAAsB;QACnD,cAAc,EAAE,yBAAU;QAC1B,0CAA0C,EACxC,4EAAkC;KACrC;IACD,OAAO,EAAE;QACP,WAAW,EAAE;YACX,OAAO,EAAE,CAAC,4BAA4B,CAAC;YACvC,KAAK,EAAE;gBACL,+BAA+B,EAAE,MAAM;gBACvC,wCAAwC,EAAE,MAAM;gBAChD,2BAA2B,EAAE,MAAM;gBACnC,uDAAuD,EAAE,MAAM;aAChE;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;AAEH,+DAAuD;AACvD,iFAA2E;AAC3E,uDAAkD;AAClD,iGAAyF;AAEzF,MAAM,MAAM,GAAG;IACb,KAAK,EAAE;QACL,kBAAkB,EAAE,8BAAW;QAC/B,2BAA2B,EAAE,kDAAsB;QACnD,cAAc,EAAE,yBAAU;QAC1B,mCAAmC,EAAE,gEAA4B;KAClE;IACD,OAAO,EAAE;QACP,WAAW,EAAE;YACX,OAAO,EAAE,CAAC,4BAA4B,CAAC;YACvC,KAAK,EAAE;gBACL,+BAA+B,EAAE,MAAM;gBACvC,wCAAwC,EAAE,MAAM;gBAChD,2BAA2B,EAAE,MAAM;gBACnC,gDAAgD,EAAE,MAAM;aACzD;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC"}

package/lib/esm/rules/prefer_css_prop_for_static_styles.d.ts

@@ -0,0 +1,2 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+export declare const PreferCSSPropForStaticStyles: ESLintUtils.RuleModule<"preferCSSPropForStaticStyles", [], unknown, ESLintUtils.RuleListener>;

package/lib/esm/rules/{prefer_css_attribute_for_eui_components.js → prefer_css_prop_for_static_styles.js}

@@ -18,9 +18,9 @@
  * under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreferCSSAttributeForEuiComponents = void 0;
+exports.PreferCSSPropForStaticStyles = void 0;
 const utils_1 = require("@typescript-eslint/utils");
-exports.PreferCSSAttributeForEuiComponents = utils_1.ESLintUtils.RuleCreator.withoutDocs({
+exports.PreferCSSPropForStaticStyles = utils_1.ESLintUtils.RuleCreator.withoutDocs({
     create(context) {
         const isNamedEuiComponentRegex = /^Eui[A-Z]*/;
         return {
@@ -33,13 +33,17 @@ exports.PreferCSSAttributeForEuiComponents = utils_1.ESLintUtils.RuleCreator.wit
                         .find((attr) => attr.name.name === 'style'))) {
                         context.report({
                             node: styleAttrNode?.parent,
-                            messageId: 'preferCSSAttributeForEuiComponents',
+                            messageId: 'preferCSSPropForStaticStyles',
                             fix(fixer) {
                                 const cssAttr = node.attributes.find((attr) => attr.type === 'JSXAttribute' && attr.name.name === 'css');
                                 if (cssAttr) {
                                     return null;
                                 }
-                                return fixer.replaceTextRange(styleAttrNode?.name?.range, 'css');
+                                const range = styleAttrNode?.name?.range;
+                                if (!range) {
+                                    return null;
+                                }
+                                return fixer.replaceTextRange(range, 'css');
                             },
                         });
                     }
@@ -50,14 +54,14 @@ exports.PreferCSSAttributeForEuiComponents = utils_1.ESLintUtils.RuleCreator.wit
     meta: {
         type: 'suggestion',
         docs: {
-            description: 'Prefer the JSX css attribute for EUI components',
+            description: 'Prefer the `css` prop for static styles in EUI components',
         },
         messages: {
-            preferCSSAttributeForEuiComponents: 'Prefer the css attribute for EUI components',
+            preferCSSPropForStaticStyles: 'Use the `css` prop instead of `style` for static styles in EUI components to ensure better performance and consistency with EUI’s styling approach. Read more: https://emotion.sh/docs/best-practices#use-the-style-prop-for-dynamic-styles',
         },
         fixable: 'code',
         schema: [],
     },
     defaultOptions: [],
 });
-//# sourceMappingURL=prefer_css_attribute_for_eui_components.js.map
+//# sourceMappingURL=prefer_css_prop_for_static_styles.js.map

package/lib/esm/rules/prefer_css_prop_for_static_styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefer_css_prop_for_static_styles.js","sourceRoot":"","sources":["../../../src/rules/prefer_css_prop_for_static_styles.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,oDAAiE;AAEpD,QAAA,4BAA4B,GAAG,mBAAW,CAAC,WAAW,CAAC,WAAW,CAC7E;IACE,MAAM,CAAC,OAAO;QACZ,MAAM,wBAAwB,GAAG,YAAY,CAAC;QAE9C,OAAO;YACL,iBAAiB,CAAC,IAAgC;gBAChD,IACE,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,eAAe;oBAClC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAC7C,CAAC;oBACD,IAAI,aAAgD,CAAC;oBAErD,IACE,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU;yBAC7B,MAAM,CACL,CAAC,IAAI,EAAiC,EAAE,CACtC,IAAI,CAAC,IAAI,KAAK,cAAc,CAC/B;yBACA,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,EAC9C,CAAC;wBACD,OAAO,CAAC,MAAM,CAAC;4BACb,IAAI,EAAE,aAAa,EAAE,MAAM;4BAC3B,SAAS,EAAE,8BAA8B;4BACzC,GAAG,CAAC,KAAK;gCACP,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAClC,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,KAAK,CAC3D,CAAC;gCAEF,IAAI,OAAO,EAAE,CAAC;oCACZ,OAAO,IAAI,CAAC;gCACd,CAAC;gCAED,MAAM,KAAK,GAAG,aAAa,EAAE,IAAI,EAAE,KAAK,CAAC;gCACzC,IAAI,CAAC,KAAK,EAAE,CAAC;oCACX,OAAO,IAAI,CAAC;gCACd,CAAC;gCAED,OAAO,KAAK,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;4BAC9C,CAAC;yBACF,CAAC,CAAC;oBACL,CAAC;gBACH,CAAC;YACH,CAAC;SACF,CAAC;IACJ,CAAC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE;YACJ,WAAW,EACT,2DAA2D;SAC9D;QACD,QAAQ,EAAE;YACR,4BAA4B,EAC1B,6OAA6O;SAChP;QACD,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,EAAE;KACX;IACD,cAAc,EAAE,EAAE;CACnB,CACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eslint-plugin-eui",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -27,11 +27,11 @@
     "@types/dedent": "^0.7.2",
     "@types/jest": "^29.5.14",
     "@types/micromatch": "^4.0.9",
-    "@typescript-eslint/eslint-plugin": "^8.22.0",
-    "@typescript-eslint/parser": "^8.22.0",
-    "@typescript-eslint/rule-tester": "^8.22.0",
-    "@typescript-eslint/typescript-estree": "^8.22.0",
-    "@typescript-eslint/utils": "^8.22.0",
+    "@typescript-eslint/eslint-plugin": "^8.31.1",
+    "@typescript-eslint/parser": "^8.31.1",
+    "@typescript-eslint/rule-tester": "^8.31.1",
+    "@typescript-eslint/typescript-estree": "^8.31.1",
+    "@typescript-eslint/utils": "^8.31.1",
     "cssstyle": "^4.2.1",
     "dedent": "^1.5.3",
     "eslint": "^8.57.0",
@@ -40,7 +40,7 @@
     "rimraf": "^6.0.1",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "typescript": "^5.7.3"
+    "typescript": "^5.8.3"
   },
   "scripts": {
     "test": "jest src",
@@ -48,8 +48,7 @@
     "build:clean": "rimraf lib/",
     "build:compile:esm": "tsc --project ./tsconfig.esm.json",
     "build:compile": "NODE_ENV=production babel src --out-dir=lib/cjs --extensions .js,.ts,.tsx",
-    "build:types": "NODE_ENV=production tsc --project tsconfig.types.json",
-    "build:pack": "yarn build && npm pack"
+    "build:types": "NODE_ENV=production tsc --project tsconfig.types.json"
   },
   "files": [
     "lib",

package/lib/cjs/rules/prefer_css_attribute_for_eui_components.d.ts

@@ -1,3 +0,0 @@
-import { ESLintUtils } from '@typescript-eslint/utils';
-export declare const PreferCSSAttributeForEuiComponents: ESLintUtils.RuleModule<"preferCSSAttributeForEuiComponents", [], unknown, ESLintUtils.RuleListener>;
-//# sourceMappingURL=prefer_css_attribute_for_eui_components.d.ts.map

package/lib/cjs/rules/prefer_css_attribute_for_eui_components.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"prefer_css_attribute_for_eui_components.d.ts","sourceRoot":"","sources":["../../../src/rules/prefer_css_attribute_for_eui_components.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAY,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,kCAAkC,qGA0D3C,CAAC"}

package/lib/esm/rules/prefer_css_attribute_for_eui_components.d.ts

@@ -1,2 +0,0 @@
-import { ESLintUtils } from '@typescript-eslint/utils';
-export declare const PreferCSSAttributeForEuiComponents: ESLintUtils.RuleModule<"preferCSSAttributeForEuiComponents", [], unknown, ESLintUtils.RuleListener>;

package/lib/esm/rules/prefer_css_attribute_for_eui_components.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"prefer_css_attribute_for_eui_components.js","sourceRoot":"","sources":["../../../src/rules/prefer_css_attribute_for_eui_components.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,oDAAiE;AAEpD,QAAA,kCAAkC,GAC7C,mBAAW,CAAC,WAAW,CAAC,WAAW,CAAC;IAClC,MAAM,CAAC,OAAO;QACZ,MAAM,wBAAwB,GAAG,YAAY,CAAC;QAE9C,OAAO;YACL,iBAAiB,CAAC,IAAgC;gBAChD,IACE,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,eAAe;oBAClC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAC7C,CAAC;oBACD,IAAI,aAAgD,CAAC;oBAErD,IACE,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU;yBAC7B,MAAM,CACL,CAAC,IAAI,EAAiC,EAAE,CACtC,IAAI,CAAC,IAAI,KAAK,cAAc,CAC/B;yBACA,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,EAC9C,CAAC;wBACD,OAAO,CAAC,MAAM,CAAC;4BACb,IAAI,EAAE,aAAa,EAAE,MAAM;4BAC3B,SAAS,EAAE,oCAAoC;4BAC/C,GAAG,CAAC,KAAK;gCACP,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAClC,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,KAAK,CAC3D,CAAC;gCAEF,IAAI,OAAO,EAAE,CAAC;oCACZ,OAAO,IAAI,CAAC;gCACd,CAAC;gCAED,OAAO,KAAK,CAAC,gBAAgB,CAC3B,aAAa,EAAE,IAAI,EAAE,KAAM,EAC3B,KAAK,CACN,CAAC;4BACJ,CAAC;yBACF,CAAC,CAAC;oBACL,CAAC;gBACH,CAAC;YACH,CAAC;SACF,CAAC;IACJ,CAAC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE;YACJ,WAAW,EAAE,iDAAiD;SAC/D;QACD,QAAQ,EAAE;YACR,kCAAkC,EAChC,6CAA6C;SAChD;QACD,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,EAAE;KACX;IACD,cAAc,EAAE,EAAE;CACnB,CAAC,CAAC"}