From 15d2b92c122ce353fe531d28b94a5917707f5ab1 Mon Sep 17 00:00:00 2001 From: Federico Sonetti Date: Mon, 27 May 2024 11:28:46 +0200 Subject: [PATCH 1/5] fix printing '\n' in css --- src/Converter/HeadStyle.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Converter/HeadStyle.php b/src/Converter/HeadStyle.php index 6b8d0a8..fc5a5bc 100644 --- a/src/Converter/HeadStyle.php +++ b/src/Converter/HeadStyle.php @@ -32,7 +32,7 @@ public function convert(\DOMDocument $doc) } } - $css = preg_replace('/\n\s*\n+/', '\n', $defaultCss . $customCss); + $css = preg_replace('/\n\s*\n+/', "\n", $defaultCss . $customCss); $html = ''; $doc2 = new \DOMDocument('1.0', 'UTF-8'); From 99216ec294f5349cbb63757b2baad72575e7bde8 Mon Sep 17 00:00:00 2001 From: Federico Sonetti Date: Mon, 27 May 2024 12:57:56 +0200 Subject: [PATCH 2/5] fix purge unused custom css --- src/Converter/HeadStyle.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Converter/HeadStyle.php b/src/Converter/HeadStyle.php index fc5a5bc..31d7160 100644 --- a/src/Converter/HeadStyle.php +++ b/src/Converter/HeadStyle.php @@ -23,7 +23,7 @@ public function convert(\DOMDocument $doc) preg_match_all('/(\.[\w\-]*).*?((,+?)|{+?)/', $customCssGroup, $customCssSelector); $foundOccurence = false; foreach($customCssSelector[1] as $cssSelector) { - if(count($xPath->query("//*[contains(concat(' ', normalize-space(@class), ' '), ' my-class ')]")) > 0) { + if(count($xPath->query("//*[contains(concat(' ', normalize-space(@class), ' '), ' " . trim($cssSelector, '.') . " ')]")) > 0) { $foundOccurence = true; } } From 87f2105fde99ea2d0aa2e11cfe9962857744f252 Mon Sep 17 00:00:00 2001 From: Federico Sonetti Date: Mon, 27 May 2024 13:02:42 +0200 Subject: [PATCH 3/5] convertHtml method not exists --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e883ed5..ecea439 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ $html = $doc->saveHTML(); ```php $scss = new ScssCompiler(); $converter = new Compiler($scss); -$html = $converter->convertHtml(html); +$html = $converter->compileHtml(); ``` ### Use Custom Scss @@ -58,7 +58,7 @@ $scss = new ScssCompiler(); $scss->setScssFile(setScssHeadFile(convertHtml(html); +$html = $converter->compileHtml(); ``` ## Run Unit-Tests From 6fe45b1e888f992030c91720600ffef4e4e2fe46 Mon Sep 17 00:00:00 2001 From: Benedikt Lenzen <36764562+DemigodCode@users.noreply.github.com> Date: Tue, 28 May 2024 09:15:27 +0200 Subject: [PATCH 4/5] Update sizing.html Test fix sizing test --- tests/resources/output/sizing.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/tests/resources/output/sizing.html b/tests/resources/output/sizing.html index 8354100..c4c4eeb 100644 --- a/tests/resources/output/sizing.html +++ b/tests/resources/output/sizing.html @@ -42,11 +42,14 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +} From 0d06dd94eeb8a59c7fbc722a92a19200239bf51b Mon Sep 17 00:00:00 2001 From: DemigodCode Date: Tue, 28 May 2024 09:54:59 +0200 Subject: [PATCH 5/5] Fix unittests --- tests/resources/output/alert.html | 15 +++++++-- tests/resources/output/align.html | 7 +++-- tests/resources/output/background.html | 7 +++-- tests/resources/output/badge.html | 15 +++++++-- tests/resources/output/border-radius.html | 7 +++-- tests/resources/output/button.html | 7 +++-- tests/resources/output/card.html | 7 +++-- tests/resources/output/color.html | 7 +++-- tests/resources/output/container-fluid.html | 7 +++-- tests/resources/output/container.html | 7 +++-- tests/resources/output/display.html | 16 ++++++++-- tests/resources/output/grid.html | 34 +++++++++++++++++++-- tests/resources/output/hr.html | 15 +++++++-- tests/resources/output/image.html | 7 +++-- tests/resources/output/preview.html | 7 +++-- tests/resources/output/sizing.html | 6 ++++ tests/resources/output/table.html | 7 +++-- tests/resources/output/to-table.html | 10 ++++-- 18 files changed, 154 insertions(+), 34 deletions(-) diff --git a/tests/resources/output/alert.html b/tests/resources/output/alert.html index af3861a..7ef9d8d 100644 --- a/tests/resources/output/alert.html +++ b/tests/resources/output/alert.html @@ -42,11 +42,22 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + .w-full, .w-full > tbody > tr > td { + width: 100% !important; + } + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } + .s-5 > tbody > tr > td { + font-size: 20px !important; + line-height: 20px !important; + height: 20px !important; + } +} diff --git a/tests/resources/output/align.html b/tests/resources/output/align.html index 5c08736..0acb18a 100644 --- a/tests/resources/output/align.html +++ b/tests/resources/output/align.html @@ -42,11 +42,14 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +} diff --git a/tests/resources/output/background.html b/tests/resources/output/background.html index de6a360..b064ef7 100644 --- a/tests/resources/output/background.html +++ b/tests/resources/output/background.html @@ -42,11 +42,14 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +} diff --git a/tests/resources/output/badge.html b/tests/resources/output/badge.html index d8a9666..a56517c 100644 --- a/tests/resources/output/badge.html +++ b/tests/resources/output/badge.html @@ -42,11 +42,22 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + .w-full, .w-full > tbody > tr > td { + width: 100% !important; + } + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } + .s-5 > tbody > tr > td { + font-size: 20px !important; + line-height: 20px !important; + height: 20px !important; + } +} diff --git a/tests/resources/output/border-radius.html b/tests/resources/output/border-radius.html index 818fc27..e783fcb 100644 --- a/tests/resources/output/border-radius.html +++ b/tests/resources/output/border-radius.html @@ -42,11 +42,14 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +} diff --git a/tests/resources/output/button.html b/tests/resources/output/button.html index f7e2e75..434ca08 100644 --- a/tests/resources/output/button.html +++ b/tests/resources/output/button.html @@ -42,11 +42,14 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +} diff --git a/tests/resources/output/card.html b/tests/resources/output/card.html index 8799334..bed8b43 100644 --- a/tests/resources/output/card.html +++ b/tests/resources/output/card.html @@ -42,11 +42,14 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +} diff --git a/tests/resources/output/color.html b/tests/resources/output/color.html index 45a0ec3..21022f7 100644 --- a/tests/resources/output/color.html +++ b/tests/resources/output/color.html @@ -42,11 +42,14 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +} diff --git a/tests/resources/output/container-fluid.html b/tests/resources/output/container-fluid.html index 5a8c7ab..1901d64 100644 --- a/tests/resources/output/container-fluid.html +++ b/tests/resources/output/container-fluid.html @@ -42,11 +42,14 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +} diff --git a/tests/resources/output/container.html b/tests/resources/output/container.html index 2f8948a..51a079c 100644 --- a/tests/resources/output/container.html +++ b/tests/resources/output/container.html @@ -42,11 +42,14 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +} diff --git a/tests/resources/output/display.html b/tests/resources/output/display.html index 62ab472..2046888 100644 --- a/tests/resources/output/display.html +++ b/tests/resources/output/display.html @@ -42,11 +42,23 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + .d-lg-inline { + display: unset !important; + } + .d-lg-none { + display: unset !important; + } + .d-none { + display: none !important; + } + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +} diff --git a/tests/resources/output/grid.html b/tests/resources/output/grid.html index 384c816..1b75bc6 100644 --- a/tests/resources/output/grid.html +++ b/tests/resources/output/grid.html @@ -42,11 +42,41 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + .row-responsive.row { + margin-right: 0 !important; + } + td.col-lg-1 { + display: block; + width: 100% !important; + padding-left: 0 !important; + padding-right: 0 !important; + } + td.col-lg-2 { + display: block; + width: 100% !important; + padding-left: 0 !important; + padding-right: 0 !important; + } + td.col-lg-3 { + display: block; + width: 100% !important; + padding-left: 0 !important; + padding-right: 0 !important; + } + td.col-lg-6 { + display: block; + width: 100% !important; + padding-left: 0 !important; + padding-right: 0 !important; + } + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +} diff --git a/tests/resources/output/hr.html b/tests/resources/output/hr.html index b623ca6..3fbbac1 100644 --- a/tests/resources/output/hr.html +++ b/tests/resources/output/hr.html @@ -42,11 +42,22 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + .w-full, .w-full > tbody > tr > td { + width: 100% !important; + } + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } + .s-5 > tbody > tr > td { + font-size: 20px !important; + line-height: 20px !important; + height: 20px !important; + } +} diff --git a/tests/resources/output/image.html b/tests/resources/output/image.html index d503789..7b1abed 100644 --- a/tests/resources/output/image.html +++ b/tests/resources/output/image.html @@ -42,11 +42,14 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +} diff --git a/tests/resources/output/preview.html b/tests/resources/output/preview.html index cbeaf53..80bffa0 100755 --- a/tests/resources/output/preview.html +++ b/tests/resources/output/preview.html @@ -42,11 +42,14 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +} diff --git a/tests/resources/output/sizing.html b/tests/resources/output/sizing.html index c4c4eeb..4d16890 100644 --- a/tests/resources/output/sizing.html +++ b/tests/resources/output/sizing.html @@ -44,6 +44,12 @@ border-collapse: collapse; } @media screen and (max-width: 600px) { + .w-10, .w-10 > tbody > tr > td { + width: 40px !important; + } + .h-10, .h-10 > tbody > tr > td { + height: 40px !important; + } *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; diff --git a/tests/resources/output/table.html b/tests/resources/output/table.html index 51f78de..55cfa9c 100644 --- a/tests/resources/output/table.html +++ b/tests/resources/output/table.html @@ -42,11 +42,14 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +} diff --git a/tests/resources/output/to-table.html b/tests/resources/output/to-table.html index 0bb3bce..71a5ad0 100644 --- a/tests/resources/output/to-table.html +++ b/tests/resources/output/to-table.html @@ -42,11 +42,17 @@ table:not([class^=s-]) td { border-spacing: 0px; border-collapse: collapse; -}\n@media screen and (max-width: 600px) {\n *[class*=s-lg-] > tbody > tr > td { +} +@media screen and (max-width: 600px) { + .w-full, .w-full > tbody > tr > td { + width: 100% !important; + } + *[class*=s-lg-] > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; - }\n} + } +}