martinandert/babel-plugin-css-in-js

View on GitHub
src/transformObjectExpressionIntoStyleSheetObject.js

Summary

Maintainability
A
2 hrs
Test Coverage

Function processProperty has a Cognitive Complexity of 9 (exceeds 5 allowed). Consider refactoring.
Open

function processProperty(key, value, result, context) {
  const name = keyToName(key);

  if (canEvaluate(value, context)) {
    const val = context.evaluate(value);
Severity: Minor
Found in src/transformObjectExpressionIntoStyleSheetObject.js - About 55 mins to fix

Cognitive Complexity

Cognitive Complexity is a measure of how difficult a unit of code is to intuitively understand. Unlike Cyclomatic Complexity, which determines how difficult your code will be to test, Cognitive Complexity tells you how difficult your code will be to read and comprehend.

A method's cognitive complexity is based on a few simple rules:

  • Code is not considered more complex when it uses shorthand that the language provides for collapsing multiple statements into one
  • Code is considered more complex for each "break in the linear flow of the code"
  • Code is considered more complex when "flow breaking structures are nested"

Further reading

Function canEvaluate has a Cognitive Complexity of 8 (exceeds 5 allowed). Consider refactoring.
Open

function canEvaluate(expr, context) {
  if (t.isLiteral(expr)) {
    return true;
  } else if (t.isIdentifier(expr) && context.hasOwnProperty(expr.name)) {
    return true;
Severity: Minor
Found in src/transformObjectExpressionIntoStyleSheetObject.js - About 45 mins to fix

Cognitive Complexity

Cognitive Complexity is a measure of how difficult a unit of code is to intuitively understand. Unlike Cyclomatic Complexity, which determines how difficult your code will be to test, Cognitive Complexity tells you how difficult your code will be to read and comprehend.

A method's cognitive complexity is based on a few simple rules:

  • Code is not considered more complex when it uses shorthand that the language provides for collapsing multiple statements into one
  • Code is considered more complex for each "break in the linear flow of the code"
  • Code is considered more complex when "flow breaking structures are nested"

Further reading

Avoid too many return statements within this function.
Open

  return false;
Severity: Major
Found in src/transformObjectExpressionIntoStyleSheetObject.js - About 30 mins to fix

    Unexpected mix of '||' and '&&'.
    Open

      assert(t.isIdentifier(key) || t.isLiteral(key) && typeof key.value === 'string', 'key must be a string or identifier');

    Disallow mixes of different operators (no-mixed-operators)

    Enclosing complex expressions by parentheses clarifies the developer's intention, which makes the code more readable. This rule warns when different operators are used consecutively without parentheses in an expression.

    var foo = a && b || c || d;    /*BAD: Unexpected mix of '&&' and '||'.*/
    var foo = (a && b) || c || d;  /*GOOD*/
    var foo = a && (b || c || d);  /*GOOD*/

    Rule Details

    This rule checks BinaryExpression and LogicalExpression.

    This rule may conflict with [no-extra-parens](no-extra-parens.md) rule. If you use both this and [no-extra-parens](no-extra-parens.md) rule together, you need to use the nestedBinaryExpressions option of [no-extra-parens](no-extra-parens.md) rule.

    Examples of incorrect code for this rule:

    /*eslint no-mixed-operators: "error"*/
    
    var foo = a && b < 0 || c > 0 || d + 1 === 0;
    var foo = a + b * c;

    Examples of correct code for this rule:

    /*eslint no-mixed-operators: "error"*/
    
    var foo = a || b || c;
    var foo = a && b && c;
    var foo = (a && b < 0) || c > 0 || d + 1 === 0;
    var foo = a && (b < 0 || c > 0 || d + 1 === 0);
    var foo = a + (b * c);
    var foo = (a + b) * c;

    Options

    {
        "no-mixed-operators": [
            "error",
            {
                "groups": [
                    ["+", "-", "*", "/", "%", "**"],
                    ["&", "|", "^", "~", "<<", ">>", ">>>"],
                    ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
                    ["&&", "||"],
                    ["in", "instanceof"]
                ],
                "allowSamePrecedence": true
            }
        ]
    }

    This rule has 2 options.

    • groups (string[][]) - specifies groups to compare operators. When this rule compares two operators, if both operators are included in a same group, this rule checks it. Otherwise, this rule ignores it. This value is a list of groups. The group is a list of binary operators. Default is the groups for each kind of operators.
    • allowSamePrecedence (boolean) - specifies to allow mix of 2 operators if those have the same precedence. Default is true.

    groups

    The following operators can be used in groups option:

    • Arithmetic Operators: "+", "-", "*", "/", "%", "**"
    • Bitwise Operators: "&", "|", "^", "~", "<<", ">>", ">>>"
    • Comparison Operators: "==", "!=", "===", "!==", ">", ">=", "<", "<="
    • Logical Operators: "&&", "||"
    • Relational Operators: "in", "instanceof"

    Now, considers about {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} configure. This configure has 2 groups: bitwise operators and logical operators. This rule checks only if both operators are included in a same group. So, in this case, this rule comes to check between bitwise operators and between logical operators. This rule ignores other operators.

    Examples of incorrect code for this rule with {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} option:

    /*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/
    
    var foo = a && b < 0 || c > 0 || d + 1 === 0;
    var foo = a & b | c;

    Examples of correct code for this rule with {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} option:

    /*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/
    
    var foo = a || b > 0 || c + 1 === 0;
    var foo = a && b > 0 && c + 1 === 0;
    var foo = (a && b < 0) || c > 0 || d + 1 === 0;
    var foo = a && (b < 0 ||  c > 0 || d + 1 === 0);
    var foo = (a & b) | c;
    var foo = a & (b | c);
    var foo = a + b * c;
    var foo = a + (b * c);
    var foo = (a + b) * c;

    allowSamePrecedence

    Examples of correct code for this rule with {"allowSamePrecedence": true} option:

    /*eslint no-mixed-operators: ["error", {"allowSamePrecedence": true}]*/
    
    // + and - have the same precedence.
    var foo = a + b - c;

    Examples of incorrect code for this rule with {"allowSamePrecedence": false} option:

    /*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/
    
    // + and - have the same precedence.
    var foo = a + b - c;

    When Not To Use It

    If you don't want to be notified about mixed operators, then it's safe to disable this rule.

    Related Rules

    Unexpected mix of '||' and '&&'.
    Open

      assert(t.isIdentifier(key) || t.isLiteral(key) && typeof key.value === 'string', 'key must be a string or identifier');

    Disallow mixes of different operators (no-mixed-operators)

    Enclosing complex expressions by parentheses clarifies the developer's intention, which makes the code more readable. This rule warns when different operators are used consecutively without parentheses in an expression.

    var foo = a && b || c || d;    /*BAD: Unexpected mix of '&&' and '||'.*/
    var foo = (a && b) || c || d;  /*GOOD*/
    var foo = a && (b || c || d);  /*GOOD*/

    Rule Details

    This rule checks BinaryExpression and LogicalExpression.

    This rule may conflict with [no-extra-parens](no-extra-parens.md) rule. If you use both this and [no-extra-parens](no-extra-parens.md) rule together, you need to use the nestedBinaryExpressions option of [no-extra-parens](no-extra-parens.md) rule.

    Examples of incorrect code for this rule:

    /*eslint no-mixed-operators: "error"*/
    
    var foo = a && b < 0 || c > 0 || d + 1 === 0;
    var foo = a + b * c;

    Examples of correct code for this rule:

    /*eslint no-mixed-operators: "error"*/
    
    var foo = a || b || c;
    var foo = a && b && c;
    var foo = (a && b < 0) || c > 0 || d + 1 === 0;
    var foo = a && (b < 0 || c > 0 || d + 1 === 0);
    var foo = a + (b * c);
    var foo = (a + b) * c;

    Options

    {
        "no-mixed-operators": [
            "error",
            {
                "groups": [
                    ["+", "-", "*", "/", "%", "**"],
                    ["&", "|", "^", "~", "<<", ">>", ">>>"],
                    ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
                    ["&&", "||"],
                    ["in", "instanceof"]
                ],
                "allowSamePrecedence": true
            }
        ]
    }

    This rule has 2 options.

    • groups (string[][]) - specifies groups to compare operators. When this rule compares two operators, if both operators are included in a same group, this rule checks it. Otherwise, this rule ignores it. This value is a list of groups. The group is a list of binary operators. Default is the groups for each kind of operators.
    • allowSamePrecedence (boolean) - specifies to allow mix of 2 operators if those have the same precedence. Default is true.

    groups

    The following operators can be used in groups option:

    • Arithmetic Operators: "+", "-", "*", "/", "%", "**"
    • Bitwise Operators: "&", "|", "^", "~", "<<", ">>", ">>>"
    • Comparison Operators: "==", "!=", "===", "!==", ">", ">=", "<", "<="
    • Logical Operators: "&&", "||"
    • Relational Operators: "in", "instanceof"

    Now, considers about {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} configure. This configure has 2 groups: bitwise operators and logical operators. This rule checks only if both operators are included in a same group. So, in this case, this rule comes to check between bitwise operators and between logical operators. This rule ignores other operators.

    Examples of incorrect code for this rule with {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} option:

    /*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/
    
    var foo = a && b < 0 || c > 0 || d + 1 === 0;
    var foo = a & b | c;

    Examples of correct code for this rule with {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} option:

    /*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/
    
    var foo = a || b > 0 || c + 1 === 0;
    var foo = a && b > 0 && c + 1 === 0;
    var foo = (a && b < 0) || c > 0 || d + 1 === 0;
    var foo = a && (b < 0 ||  c > 0 || d + 1 === 0);
    var foo = (a & b) | c;
    var foo = a & (b | c);
    var foo = a + b * c;
    var foo = a + (b * c);
    var foo = (a + b) * c;

    allowSamePrecedence

    Examples of correct code for this rule with {"allowSamePrecedence": true} option:

    /*eslint no-mixed-operators: ["error", {"allowSamePrecedence": true}]*/
    
    // + and - have the same precedence.
    var foo = a + b - c;

    Examples of incorrect code for this rule with {"allowSamePrecedence": false} option:

    /*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/
    
    // + and - have the same precedence.
    var foo = a + b - c;

    When Not To Use It

    If you don't want to be notified about mixed operators, then it's safe to disable this rule.

    Related Rules

    Do not access Object.prototype method 'hasOwnProperty' from target object.
    Open

      } else if (t.isIdentifier(expr) && context.hasOwnProperty(expr.name)) {

    Disallow use of Object.prototypes builtins directly (no-prototype-builtins)

    In ECMAScript 5.1, Object.create was added, which enables the creation of objects with a specified [[Prototype]]. Object.create(null) is a common pattern used to create objects that will be used as a Map. This can lead to errors when it is assumed that objects will have properties from Object.prototype. This rule prevents calling Object.prototype methods directly from an object.

    Rule Details

    This rule disallows calling some Object.prototype methods directly on object instances.

    Examples of incorrect code for this rule:

    /*eslint no-prototype-builtins: "error"*/
    
    var hasBarProperty = foo.hasOwnProperty("bar");
    
    var isPrototypeOfBar = foo.isPrototypeOf(bar);
    
    var barIsEnumerable = foo.propertyIsEnumerable("bar");

    Examples of correct code for this rule:

    /*eslint no-prototype-builtins: "error"*/
    
    var hasBarProperty = Object.prototype.hasOwnProperty.call(foo, "bar");
    
    var isPrototypeOfBar = Object.prototype.isPrototypeOf.call(foo, bar);
    
    var barIsEnumerable = {}.propertyIsEnumerable.call(foo, "bar");

    When Not To Use It

    You may want to turn this rule off if you will never use an object that shadows an Object.prototype method or which does not inherit from Object.prototype. Source: http://eslint.org/docs/rules/

    There are no issues that match your filters.

    Category
    Status