Structured content style json (#1771)

* Install css

* Remove unnecessary rule

* Create CSS overrides file

* Create script to generate CSS JSON file

* Generate JSON

* Add test

2 files changed, 330 insertions, 3 deletions

diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css
index cff2c83c..ea0bf5cd 100644
--- a/ext/css/structured-content.css
+++ b/ext/css/structured-content.css
@@ -201,9 +201,6 @@
     table-layout: auto;
     border-collapse: collapse;
 }
-.gloss-sc-tbody {
-    background-color: transparent;
-}
 .gloss-sc-thead,
 .gloss-sc-tfoot,
 .gloss-sc-th {
diff --git a/ext/data/structured-content-style.json b/ext/data/structured-content-style.json
new file mode 100644
index 00000000..80a71e1c
--- /dev/null
+++ b/ext/data/structured-content-style.json
@@ -0,0 +1,330 @@
+[
+    {
+        "selectors": [".gloss-image-container"],
+        "styles": [
+            ["display", "inline-block"],
+            ["white-space", "nowrap"],
+            ["max-width", "100%"],
+            ["position", "relative"],
+            ["vertical-align", "top"],
+            ["line-height", "0"],
+            ["overflow", "hidden"],
+            ["font-size", "1px"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link"],
+        "styles": [
+            ["cursor", "inherit"],
+            ["color", "inherit"],
+            ["display", "inline-block"],
+            ["position", "relative"],
+            ["line-height", "1"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link[href]:hover"],
+        "styles": [
+            ["cursor", "pointer"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-container-overlay"],
+        "styles": [
+            ["position", "absolute"],
+            ["left", "0"],
+            ["top", "0"],
+            ["width", "100%"],
+            ["height", "100%"],
+            ["display", "table"],
+            ["table-layout", "fixed"],
+            ["white-space", "normal"],
+            ["font-size", "initial"],
+            ["line-height", "initial"],
+            ["color", "initial"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link[data-has-image=true][data-image-load-state=load-error] .gloss-image-container-overlay::after"],
+        "styles": [
+            ["content", "'Image failed to load'"],
+            ["display", "table-cell"],
+            ["width", "100%"],
+            ["height", "100%"],
+            ["vertical-align", "middle"],
+            ["text-align", "center"],
+            ["padding", "0.25em"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-background"],
+        "styles": [
+            ["--image", "none"],
+            ["position", "absolute"],
+            ["left", "0"],
+            ["top", "0"],
+            ["width", "100%"],
+            ["height", "100%"],
+            ["-webkit-mask-repeat", "no-repeat"],
+            ["-webkit-mask-position", "center center"],
+            ["-webkit-mask-mode", "alpha"],
+            ["-webkit-mask-size", "contain"],
+            ["-webkit-mask-image", "var(--image)"],
+            ["mask-repeat", "no-repeat"],
+            ["mask-position", "center center"],
+            ["mask-mode", "alpha"],
+            ["mask-size", "contain"],
+            ["mask-image", "var(--image)"],
+            ["background-color", "currentColor"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image"],
+        "styles": [
+            ["display", "inline-block"],
+            ["vertical-align", "top"],
+            ["object-fit", "contain"],
+            ["border", "none"],
+            ["outline", "none"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link[data-has-aspect-ratio=true] .gloss-image"],
+        "styles": [
+            ["position", "absolute"],
+            ["left", "0"],
+            ["top", "0"],
+            ["width", "100%"],
+            ["height", "100%"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image:not([src])"],
+        "styles": [
+            ["display", "none"]
+        ]
+    },
+    {
+        "selectors": [
+            ".gloss-image-link[data-image-rendering=pixelated] .gloss-image",
+            ".gloss-image-link[data-image-rendering=pixelated] .gloss-image-background"
+        ],
+        "styles": [
+            ["image-rendering", "auto"],
+            ["image-rendering", "-moz-crisp-edges"],
+            ["image-rendering", "-webkit-optimize-contrast"],
+            ["image-rendering", "pixelated"],
+            ["image-rendering", "crisp-edges"]
+        ]
+    },
+    {
+        "selectors": [
+            ".gloss-image-link[data-image-rendering=crisp-edges] .gloss-image",
+            ".gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background"
+        ],
+        "styles": [
+            ["image-rendering", "auto"],
+            ["image-rendering", "-moz-crisp-edges"],
+            ["image-rendering", "-webkit-optimize-contrast"],
+            ["image-rendering", "crisp-edges"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link[data-has-aspect-ratio=true] .gloss-image-aspect-ratio-sizer"],
+        "styles": [
+            ["display", "inline-block"],
+            ["width", "0"],
+            ["vertical-align", "top"],
+            ["font-size", "0"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link-text"],
+        "styles": [
+            ["display", "none"],
+            ["line-height", "initial"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link-text::before"],
+        "styles": [
+            ["content", "'['"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link-text::after"],
+        "styles": [
+            ["content", "']'"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-description"],
+        "styles": [
+            ["display", "block"],
+            ["white-space", "pre-line"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link[data-appearance=monochrome] .gloss-image"],
+        "styles": [
+            ["visibility", "hidden"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link:not([data-appearance=monochrome]) .gloss-image-background"],
+        "styles": [
+            ["display", "none"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link[data-size-units=em] .gloss-image-container"],
+        "styles": [
+            ["font-size", "1em"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link[data-vertical-align=baseline]"],
+        "styles": [
+            ["vertical-align", "baseline"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link[data-vertical-align=sub]"],
+        "styles": [
+            ["vertical-align", "sub"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link[data-vertical-align=super]"],
+        "styles": [
+            ["vertical-align", "super"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link[data-vertical-align=text-top]"],
+        "styles": [
+            ["vertical-align", "top"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link[data-vertical-align=text-bottom]"],
+        "styles": [
+            ["vertical-align", "bottom"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link[data-vertical-align=middle]"],
+        "styles": [
+            ["vertical-align", "middle"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link[data-vertical-align=top]"],
+        "styles": [
+            ["vertical-align", "top"]
+        ]
+    },
+    {
+        "selectors": [".gloss-image-link[data-vertical-align=bottom]"],
+        "styles": [
+            ["vertical-align", "bottom"]
+        ]
+    },
+    {
+        "selectors": [
+            ".gloss-image-link[data-collapsed=true]",
+            ":root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true]"
+        ],
+        "styles": [
+            ["vertical-align", "baseline"]
+        ]
+    },
+    {
+        "selectors": [
+            ".gloss-image-link[data-collapsed=true] .gloss-image-container",
+            ":root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true] .gloss-image-container"
+        ],
+        "styles": [
+            ["display", "none"],
+            ["position", "absolute"],
+            ["left", "0"],
+            ["top", "100%"],
+            ["z-index", "1"]
+        ]
+    },
+    {
+        "selectors": [
+            ".entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsed=true] .gloss-image-container",
+            ":root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsible=true] .gloss-image-container"
+        ],
+        "styles": [
+            ["bottom", "100%"],
+            ["top", "auto"]
+        ]
+    },
+    {
+        "selectors": [
+            ".gloss-image-link[data-collapsed=true]:hover .gloss-image-container",
+            ".gloss-image-link[data-collapsed=true]:focus .gloss-image-container",
+            ":root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true]:hover .gloss-image-container",
+            ":root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true]:focus .gloss-image-container"
+        ],
+        "styles": [
+            ["display", "block"]
+        ]
+    },
+    {
+        "selectors": [
+            ".gloss-image-link[data-collapsed=true] .gloss-image-link-text",
+            ":root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true] .gloss-image-link-text"
+        ],
+        "styles": [
+            ["display", "inline"]
+        ]
+    },
+    {
+        "selectors": [
+            ".gloss-image-link[data-collapsed=true]~.gloss-image-description",
+            ":root[data-glossary-layout-mode=compact] .gloss-image-description"
+        ],
+        "styles": [
+            ["display", "inline"]
+        ]
+    },
+    {
+        "selectors": [".gloss-sc-table-container"],
+        "styles": [
+            ["display", "block"]
+        ]
+    },
+    {
+        "selectors": [".gloss-sc-table"],
+        "styles": [
+            ["table-layout", "auto"],
+            ["border-collapse", "collapse"]
+        ]
+    },
+    {
+        "selectors": [
+            ".gloss-sc-thead",
+            ".gloss-sc-tfoot",
+            ".gloss-sc-th"
+        ],
+        "styles": [
+            ["font-weight", "bold"]
+        ]
+    },
+    {
+        "selectors": [
+            ".gloss-sc-th",
+            ".gloss-sc-td"
+        ],
+        "styles": [
+            ["border-style", "solid"],
+            ["padding", "0.25em"],
+            ["vertical-align", "top"],
+            ["border-width", "1px"],
+            ["border-color", "currentColor"]
+        ]
+    }
+]
\ No newline at end of file