eslint-plugin-css-custom-properties/tests/lib/rules/no-unknown.js

lint css custom properties in javascript strings

/**
 * @fileoverview disallow usage of unknown css custom property strings
 * @author no-unknown-custom-properties
 */
"use strict";

//------------------------------------------------------------------------------
// Requirements
//------------------------------------------------------------------------------

const rule = require("../../../lib/rules/no-unknown"),
  RuleTester = require("eslint").RuleTester;

//------------------------------------------------------------------------------
// Tests
//------------------------------------------------------------------------------

const ruleTester = new RuleTester({
  parserOptions: {
    ecmaVersion: 2021,
    ecmaFeatures: {
      jsx: true,
    },
  },
});
ruleTester.run("no-unknown-custom-properties", rule, {
  valid: [
    /* -- is optional in allow */
    { code: "const t = 'var(--test)'", options: [{ allow: ["--test"] }] },
    { code: "yee('var(--test)')", options: [{ allow: ["--test"] }] },
    { code: "test(`\n \\n var(--test)`)", options: [{ allow: ["--test"] }] },
    {
      code: 'const ui = <div className="bg-[var(--test)]" />',
      options: [{ allow: ["--test"] }],
    },
    { code: "const t = 'var(--test)'", options: [{ allow: ["test"] }] },
    {
      code: "const t = 'var(--test-2, var(--test))'",
      options: [{ allow: ["test"] }],
    },
    {
      code: "const t = 'var(--test-2)'",
      options: [{ allowUnlessPrefixed: ["y"] }],
    },
    {
      code: "const t = 'var(--test-2)'",
      options: [{ allowUnlessPrefixed: ["test-"], allow: ["test-2"] }],
    },
    {
      code: "const t = 'var(--test-2)'",
      options: [{ allowUnknownWithPrefix: ["test-"] }],
    },
    {
      code: "const t = 'var(--test2-test)'",
      options: [{ allowUnknownWithPrefix: ["test-"], allow: ["test2-test"] }],
    },
  ],
  invalid: [
    {
      code: "const t = 'var(--test-2)'",
      options: [{ allow: ["test"] }],
      errors: [
        {
          message: "Unknown custom property name '--test-2'",
          line: 1,
          column: 16,
          endColumn: 24,
        },
      ],
    },
    {
      code: "const hello = '\\nvar(--yoo)';",
      options: [{ allow: ["test"] }],
      errors: [
        {
          message: "Unknown custom property name '--yoo'",
          line: 1,
          column: 22,
          endColumn: 27,
        },
      ],
    },
    {
      code: 'const ui = <div className="bg-[var(--yoo)]" />',
      options: [{ allow: ["--test"] }],
      errors: [
        {
          message: "Unknown custom property name '--yoo'",
          line: 1,
          column: 36,
          endColumn: 41,
        },
      ],
    },
    {
      code: "const t = 'var(--test-2, var(--test-3))'",
      options: [{ allow: ["test"] }],
      errors: [
        {
          message: "Unknown custom property name '--test-3'",
          line: 1,
          column: 30,
          endColumn: 38,
        },
      ],
    },
    {
      code: "const t = 'var(--test-2, var(--test-3))'",
      options: [{ allow: ["test"], allowUnknownWithFallback: false }],
      errors: [
        {
          message: "Unknown custom property name '--test-2'",
          line: 1,
          column: 16,
          endColumn: 24,
        },
        {
          message: "Unknown custom property name '--test-3'",
          line: 1,
          column: 30,
          endColumn: 38,
        },
      ],
    },
    {
      code: "test(`\n \\n var(--test-2)`)",
      options: [{ allow: ["test"] }],
      errors: [
        {
          message: "Unknown custom property name '--test-2'",
          line: 2,
          column: 9,
          endColumn: 17,
        },
      ],
    },
    {
      code: "const t = 'var(--test-2)'",
      options: [{ allowUnlessPrefixed: ["test-"] }],
      errors: [
        {
          message: "Unknown custom property name '--test-2'",
          line: 1,
          column: 16,
          endColumn: 24,
        },
      ],
    },
    {
      code: "const t = 'var(--test2-test)'",
      options: [{ allowUnknownWithPrefix: ["test-"] }],
      errors: [
        {
          message: "Unknown custom property name '--test2-test'",
          line: 1,
          column: 16,
          endColumn: 28,
        },
      ],
    },
    {
      code: "styled.button`\n  background: var(--test-2)`",
      options: [{ allow: ["test"] }],
      errors: [
        {
          message: "Unknown custom property name '--test-2'",
          line: 2,
          column: 19,
          endColumn: 27,
        },
      ],
    },
  ],
});