/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */
/* eslint-disable comma-dangle */

"use strict";

/**
 * Snapshot of the Redux state for the Changes panel.
 *
 * It corresponds to the tracking of a single property value change (background-color)
 * within a deeply nested CSS at-rule structure from an inline stylesheet:
 *
 * @media (min-width: 50em) {
 *   @supports (display: grid) {
 *     body {
 *       - background-color: royalblue;
 *       + background-color: red;
 *     }
 *   }
 * }
 */
module.exports.CHANGES_STATE = {
  source1: {
    type: "inline",
    href: "http://localhost:5000/at-rules-nested.html",
    id: "source1",
    index: 0,
    isFramed: false,
    rules: {
      rule1: {
        selectors: ["@media (min-width: 50em)"],
        ruleId: "rule1",
        add: [],
        remove: [],
        children: ["rule2"],
      },
      rule2: {
        selectors: ["@supports (display: grid)"],
        ruleId: "rule2",
        add: [],
        remove: [],
        children: ["rule3"],
        parent: "rule1",
      },
      rule3: {
        selectors: ["body"],
        ruleId: "rule3",
        add: [
          {
            property: "background-color",
            value: "red",
            index: 0,
          },
        ],
        remove: [
          {
            property: "background-color",
            value: "royalblue",
            index: 0,
          },
        ],
        children: [],
        parent: "rule2",
      },
    },
  },
};