diff --git a/package.json b/package.json index 345388f9714b1..9844a0d47d6ee 100644 --- a/package.json +++ b/package.json @@ -16,10 +16,10 @@ "@actions/github": "^4.0.0", "@testing-library/dom": "^7.20.0", "@testing-library/jest-dom": "^5.11.0", + "@uppercod/css-to-object": "^1.1.1", "axios": "^0.24.0", "axios-mock-adapter": "^1.18.1", "color-contrast-checker": "^2.1.0", - "css-to-object": "^1.1.0", "hjson": "^3.2.2", "husky": "^4.2.5", "jest": "^26.1.0", diff --git a/src/common/Card.js b/src/common/Card.js index fd1fa77d09c61..44dec16d1cb3c 100644 --- a/src/common/Card.js +++ b/src/common/Card.js @@ -154,6 +154,10 @@ class Card { fill: ${this.colors.titleColor}; animation: fadeInAnimation 0.8s ease-in-out forwards; } + @supports(-moz-appearance: auto) { + /* Selector detects Firefox */ + .header { font-size: 15.5px; } + } ${this.css} ${process.env.NODE_ENV === "test" ? "" : getAnimations()} diff --git a/src/getStyles.js b/src/getStyles.js index fd70c249865b9..be60b635b3226 100644 --- a/src/getStyles.js +++ b/src/getStyles.js @@ -71,6 +71,10 @@ const getStyles = ({ .stat { font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor}; } + @supports(-moz-appearance: auto) { + /* Selector detects Firefox */ + .stat { font-size:12px; } + } .stagger { opacity: 0; animation: fadeInAnimation 0.3s ease-in-out forwards; diff --git a/tests/__snapshots__/renderWakatimeCard.test.js.snap b/tests/__snapshots__/renderWakatimeCard.test.js.snap index c651c62a69ccd..e21d4223bfbb6 100644 --- a/tests/__snapshots__/renderWakatimeCard.test.js.snap +++ b/tests/__snapshots__/renderWakatimeCard.test.js.snap @@ -15,11 +15,19 @@ exports[`Test Render Wakatime Card should render correctly 1`] = ` fill: #2f80ed; animation: fadeInAnimation 0.8s ease-in-out forwards; } + @supports(-moz-appearance: auto) { + /* Selector detects Firefox */ + .header { font-size: 15.5px; } + } .stat { font: 600 14px 'Segoe UI', Ubuntu, \\"Helvetica Neue\\", Sans-Serif; fill: #333; } + @supports(-moz-appearance: auto) { + /* Selector detects Firefox */ + .stat { font-size:12px; } + } .stagger { opacity: 0; animation: fadeInAnimation 0.3s ease-in-out forwards; @@ -164,11 +172,19 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1 fill: #2f80ed; animation: fadeInAnimation 0.8s ease-in-out forwards; } + @supports(-moz-appearance: auto) { + /* Selector detects Firefox */ + .header { font-size: 15.5px; } + } .stat { font: 600 14px 'Segoe UI', Ubuntu, \\"Helvetica Neue\\", Sans-Serif; fill: #333; } + @supports(-moz-appearance: auto) { + /* Selector detects Firefox */ + .stat { font-size:12px; } + } .stagger { opacity: 0; animation: fadeInAnimation 0.3s ease-in-out forwards; diff --git a/tests/card.test.js b/tests/card.test.js index ac5e043f4ffe0..002d278ae7b4d 100644 --- a/tests/card.test.js +++ b/tests/card.test.js @@ -1,5 +1,5 @@ require("@testing-library/jest-dom"); -const cssToObject = require("css-to-object"); +const cssToObject = require("@uppercod/css-to-object").cssToObject; const Card = require("../src/common/Card"); const icons = require("../src/common/icons"); const { getCardColors } = require("../src/common/utils"); @@ -137,9 +137,9 @@ describe("Card", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.innerHTML); - const headerClassStyles = stylesObject[".header"]; + const headerClassStyles = stylesObject[":host"][".header "]; - expect(headerClassStyles.fill).toBe("#f00"); + expect(headerClassStyles["fill"].trim()).toBe("#f00"); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", "#fff", diff --git a/tests/renderRepoCard.test.js b/tests/renderRepoCard.test.js index 8f1d6ef44a3b4..46df027a400c4 100644 --- a/tests/renderRepoCard.test.js +++ b/tests/renderRepoCard.test.js @@ -1,5 +1,5 @@ require("@testing-library/jest-dom"); -const cssToObject = require("css-to-object"); +const cssToObject = require("@uppercod/css-to-object").cssToObject; const renderRepoCard = require("../src/cards/repo-card"); const { queryByTestId } = require("@testing-library/dom"); @@ -130,13 +130,13 @@ describe("Test renderRepoCard", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.innerHTML); - const headerClassStyles = stylesObject[".header"]; - const descClassStyles = stylesObject[".description"]; - const iconClassStyles = stylesObject[".icon"]; + const headerClassStyles = stylesObject[":host"][".header "]; + const descClassStyles = stylesObject[":host"][".description "]; + const iconClassStyles = stylesObject[":host"][".icon "]; - expect(headerClassStyles.fill).toBe("#2f80ed"); - expect(descClassStyles.fill).toBe("#333"); - expect(iconClassStyles.fill).toBe("#586069"); + expect(headerClassStyles.fill.trim()).toBe("#2f80ed"); + expect(descClassStyles.fill.trim()).toBe("#333"); + expect(iconClassStyles.fill.trim()).toBe("#586069"); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", "#fffefe", @@ -158,13 +158,13 @@ describe("Test renderRepoCard", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.innerHTML); - const headerClassStyles = stylesObject[".header"]; - const descClassStyles = stylesObject[".description"]; - const iconClassStyles = stylesObject[".icon"]; + const headerClassStyles = stylesObject[":host"][".header "]; + const descClassStyles = stylesObject[":host"][".description "]; + const iconClassStyles = stylesObject[":host"][".icon "]; - expect(headerClassStyles.fill).toBe(`#${customColors.title_color}`); - expect(descClassStyles.fill).toBe(`#${customColors.text_color}`); - expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`); + expect(headerClassStyles.fill.trim()).toBe(`#${customColors.title_color}`); + expect(descClassStyles.fill.trim()).toBe(`#${customColors.text_color}`); + expect(iconClassStyles.fill.trim()).toBe(`#${customColors.icon_color}`); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", "#252525", @@ -180,13 +180,15 @@ describe("Test renderRepoCard", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.innerHTML); - const headerClassStyles = stylesObject[".header"]; - const descClassStyles = stylesObject[".description"]; - const iconClassStyles = stylesObject[".icon"]; + const headerClassStyles = stylesObject[":host"][".header "]; + const descClassStyles = stylesObject[":host"][".description "]; + const iconClassStyles = stylesObject[":host"][".icon "]; - expect(headerClassStyles.fill).toBe(`#${themes[name].title_color}`); - expect(descClassStyles.fill).toBe(`#${themes[name].text_color}`); - expect(iconClassStyles.fill).toBe(`#${themes[name].icon_color}`); + expect(headerClassStyles.fill.trim()).toBe( + `#${themes[name].title_color}`, + ); + expect(descClassStyles.fill.trim()).toBe(`#${themes[name].text_color}`); + expect(iconClassStyles.fill.trim()).toBe(`#${themes[name].icon_color}`); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", `#${themes[name].bg_color}`, @@ -203,13 +205,13 @@ describe("Test renderRepoCard", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.innerHTML); - const headerClassStyles = stylesObject[".header"]; - const descClassStyles = stylesObject[".description"]; - const iconClassStyles = stylesObject[".icon"]; + const headerClassStyles = stylesObject[":host"][".header "]; + const descClassStyles = stylesObject[":host"][".description "]; + const iconClassStyles = stylesObject[":host"][".icon "]; - expect(headerClassStyles.fill).toBe("#5a0"); - expect(descClassStyles.fill).toBe(`#${themes.radical.text_color}`); - expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`); + expect(headerClassStyles.fill.trim()).toBe("#5a0"); + expect(descClassStyles.fill.trim()).toBe(`#${themes.radical.text_color}`); + expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", `#${themes.radical.bg_color}`, @@ -226,13 +228,15 @@ describe("Test renderRepoCard", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.innerHTML); - const headerClassStyles = stylesObject[".header"]; - const descClassStyles = stylesObject[".description"]; - const iconClassStyles = stylesObject[".icon"]; + const headerClassStyles = stylesObject[":host"][".header "]; + const descClassStyles = stylesObject[":host"][".description "]; + const iconClassStyles = stylesObject[":host"][".icon "]; - expect(headerClassStyles.fill).toBe(`#${themes.default.title_color}`); - expect(descClassStyles.fill).toBe(`#${themes.default.text_color}`); - expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`); + expect(headerClassStyles.fill.trim()).toBe( + `#${themes.default.title_color}`, + ); + expect(descClassStyles.fill.trim()).toBe(`#${themes.default.text_color}`); + expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", `#${themes.radical.bg_color}`, diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js index 96a48d1a9d7bd..3917857a3a118 100644 --- a/tests/renderStatsCard.test.js +++ b/tests/renderStatsCard.test.js @@ -1,5 +1,5 @@ require("@testing-library/jest-dom"); -const cssToObject = require("css-to-object"); +const cssToObject = require("@uppercod/css-to-object").cssToObject; const renderStatsCard = require("../src/cards/stats-card"); const { @@ -81,13 +81,13 @@ describe("Test renderStatsCard", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.textContent); - const headerClassStyles = stylesObject[".header"]; - const statClassStyles = stylesObject[".stat"]; - const iconClassStyles = stylesObject[".icon"]; + const headerClassStyles = stylesObject[":host"][".header "]; + const statClassStyles = stylesObject[":host"][".stat "]; + const iconClassStyles = stylesObject[":host"][".icon "]; - expect(headerClassStyles.fill).toBe("#2f80ed"); - expect(statClassStyles.fill).toBe("#333"); - expect(iconClassStyles.fill).toBe("#4c71f2"); + expect(headerClassStyles.fill.trim()).toBe("#2f80ed"); + expect(statClassStyles.fill.trim()).toBe("#333"); + expect(iconClassStyles.fill.trim()).toBe("#4c71f2"); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", "#fffefe", @@ -107,13 +107,13 @@ describe("Test renderStatsCard", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.innerHTML); - const headerClassStyles = stylesObject[".header"]; - const statClassStyles = stylesObject[".stat"]; - const iconClassStyles = stylesObject[".icon"]; + const headerClassStyles = stylesObject[":host"][".header "]; + const statClassStyles = stylesObject[":host"][".stat "]; + const iconClassStyles = stylesObject[":host"][".icon "]; - expect(headerClassStyles.fill).toBe(`#${customColors.title_color}`); - expect(statClassStyles.fill).toBe(`#${customColors.text_color}`); - expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`); + expect(headerClassStyles.fill.trim()).toBe(`#${customColors.title_color}`); + expect(statClassStyles.fill.trim()).toBe(`#${customColors.text_color}`); + expect(iconClassStyles.fill.trim()).toBe(`#${customColors.icon_color}`); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", "#252525", @@ -129,13 +129,13 @@ describe("Test renderStatsCard", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.innerHTML); - const headerClassStyles = stylesObject[".header"]; - const statClassStyles = stylesObject[".stat"]; - const iconClassStyles = stylesObject[".icon"]; + const headerClassStyles = stylesObject[":host"][".header "]; + const statClassStyles = stylesObject[":host"][".stat "]; + const iconClassStyles = stylesObject[":host"][".icon "]; - expect(headerClassStyles.fill).toBe("#5a0"); - expect(statClassStyles.fill).toBe(`#${themes.radical.text_color}`); - expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`); + expect(headerClassStyles.fill.trim()).toBe("#5a0"); + expect(statClassStyles.fill.trim()).toBe(`#${themes.radical.text_color}`); + expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", `#${themes.radical.bg_color}`, @@ -151,13 +151,15 @@ describe("Test renderStatsCard", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.innerHTML); - const headerClassStyles = stylesObject[".header"]; - const statClassStyles = stylesObject[".stat"]; - const iconClassStyles = stylesObject[".icon"]; + const headerClassStyles = stylesObject[":host"][".header "]; + const statClassStyles = stylesObject[":host"][".stat "]; + const iconClassStyles = stylesObject[":host"][".icon "]; - expect(headerClassStyles.fill).toBe(`#${themes[name].title_color}`); - expect(statClassStyles.fill).toBe(`#${themes[name].text_color}`); - expect(iconClassStyles.fill).toBe(`#${themes[name].icon_color}`); + expect(headerClassStyles.fill.trim()).toBe( + `#${themes[name].title_color}`, + ); + expect(statClassStyles.fill.trim()).toBe(`#${themes[name].text_color}`); + expect(iconClassStyles.fill.trim()).toBe(`#${themes[name].icon_color}`); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", `#${themes[name].bg_color}`, @@ -175,13 +177,15 @@ describe("Test renderStatsCard", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.innerHTML); - const headerClassStyles = stylesObject[".header"]; - const statClassStyles = stylesObject[".stat"]; - const iconClassStyles = stylesObject[".icon"]; + const headerClassStyles = stylesObject[":host"][".header "]; + const statClassStyles = stylesObject[":host"][".stat "]; + const iconClassStyles = stylesObject[":host"][".icon "]; - expect(headerClassStyles.fill).toBe(`#${themes.default.title_color}`); - expect(statClassStyles.fill).toBe(`#${themes.default.text_color}`); - expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`); + expect(headerClassStyles.fill.trim()).toBe( + `#${themes.default.title_color}`, + ); + expect(statClassStyles.fill.trim()).toBe(`#${themes.default.text_color}`); + expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", `#${themes.radical.bg_color}`, diff --git a/tests/renderTopLanguages.test.js b/tests/renderTopLanguages.test.js index 3591bc504a8af..7828c3748b303 100644 --- a/tests/renderTopLanguages.test.js +++ b/tests/renderTopLanguages.test.js @@ -1,5 +1,5 @@ require("@testing-library/jest-dom"); -const cssToObject = require("css-to-object"); +const cssToObject = require("@uppercod/css-to-object").cssToObject; const renderTopLanguages = require("../src/cards/top-languages-card"); const { queryByTestId, queryAllByTestId } = require("@testing-library/dom"); @@ -109,11 +109,11 @@ describe("Test renderTopLanguages", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.textContent); - const headerStyles = stylesObject[".header"]; - const langNameStyles = stylesObject[".lang-name"]; + const headerStyles = stylesObject[":host"][".header "]; + const langNameStyles = stylesObject[":host"][".lang-name "]; - expect(headerStyles.fill).toBe("#2f80ed"); - expect(langNameStyles.fill).toBe("#333"); + expect(headerStyles.fill.trim()).toBe("#2f80ed"); + expect(langNameStyles.fill.trim()).toBe("#333"); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", "#fffefe", @@ -133,11 +133,11 @@ describe("Test renderTopLanguages", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.innerHTML); - const headerStyles = stylesObject[".header"]; - const langNameStyles = stylesObject[".lang-name"]; + const headerStyles = stylesObject[":host"][".header "]; + const langNameStyles = stylesObject[":host"][".lang-name "]; - expect(headerStyles.fill).toBe(`#${customColors.title_color}`); - expect(langNameStyles.fill).toBe(`#${customColors.text_color}`); + expect(headerStyles.fill.trim()).toBe(`#${customColors.title_color}`); + expect(langNameStyles.fill.trim()).toBe(`#${customColors.text_color}`); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", "#252525", @@ -153,11 +153,11 @@ describe("Test renderTopLanguages", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.innerHTML); - const headerStyles = stylesObject[".header"]; - const langNameStyles = stylesObject[".lang-name"]; + const headerStyles = stylesObject[":host"][".header "]; + const langNameStyles = stylesObject[":host"][".lang-name "]; - expect(headerStyles.fill).toBe("#5a0"); - expect(langNameStyles.fill).toBe(`#${themes.radical.text_color}`); + expect(headerStyles.fill.trim()).toBe("#5a0"); + expect(langNameStyles.fill.trim()).toBe(`#${themes.radical.text_color}`); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", `#${themes.radical.bg_color}`, @@ -173,11 +173,11 @@ describe("Test renderTopLanguages", () => { const styleTag = document.querySelector("style"); const stylesObject = cssToObject(styleTag.innerHTML); - const headerStyles = stylesObject[".header"]; - const langNameStyles = stylesObject[".lang-name"]; + const headerStyles = stylesObject[":host"][".header "]; + const langNameStyles = stylesObject[":host"][".lang-name "]; - expect(headerStyles.fill).toBe(`#${themes[name].title_color}`); - expect(langNameStyles.fill).toBe(`#${themes[name].text_color}`); + expect(headerStyles.fill.trim()).toBe(`#${themes[name].title_color}`); + expect(langNameStyles.fill.trim()).toBe(`#${themes[name].text_color}`); expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( "fill", `#${themes[name].bg_color}`,