Source code
Revision control
Copy as Markdown
Other Tools
/* Any copyright is dedicated to the Public Domain.
/* 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",
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",
},
},
},
};