Merge branch 'fork_branch'

NikolayRys · Jun 3, 2023 · 6d4aeb7 · 6d4aeb7
2 parents e080782 + af3358f
commit 6d4aeb7
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 12 deletions.
diff --git a/source/index.styl b/source/index.styl
@@ -42,15 +42,16 @@ likely-light-box-shadow = rgba(0,0,0,.2) 0 0 .33em;
     background-image: linear-gradient(to right, rgba(0,0,0,.2) 0, rgba(0,0,0,0) .5px, rgba(0,0,0,0) 100%)
   }
 
-  &__widget {
-    all: initial; // reset all styles
+  &__widget, &__widget:visited {
+    all: initial; // Reset all external styles
+    /* Restore styles after reset */
     display: inline-block;
-
     position: relative;
     white-space: nowrap;
     color: #000;
     background: likely-background;
     transition: widget-transition = background .33s ease-out, color .33s ease-out, fill .33s ease-out;
+    /*** End of restore styles ***/
 
     &:hover, &:active, &:focus {
       transition: none;
@@ -102,6 +103,7 @@ likely-light-box-shadow = rgba(0,0,0,.2) 0 0 .33em;
   }
 
   &__widget,
+  &__widget:visited,
   &__icon,
   &__button,
   &__counter {
@@ -122,7 +124,7 @@ likely-light-counter() {
 }
 
 likely-light-button(button, color) {
-  .likely__widget_{button} {
+  .likely__widget_{button}, .likely__widget_{button}:visited {
     &:hover, &:active, &:focus {
       text-shadow: color 0 0 .25em;
       background: alpha(color, 0.7);
@@ -131,7 +133,7 @@ likely-light-button(button, color) {
 }
 
 likely-light-media-none-button(button, color) {
-  .likely__widget_{button} {
+  .likely__widget_{button}, .likely__widget_{button}:visited {
     &:hover, &:active, &:focus {
       text-shadow: likely-light-box-shadow;
       background: likely-light-background;
@@ -141,7 +143,7 @@ likely-light-media-none-button(button, color) {
 
 
 .likely-light, .likely-dark-theme {
-  .likely__widget {
+  .likely__widget, .likely__widget:visited {
     likely-light-widget()
   }
   .likely__counter {
@@ -151,7 +153,7 @@ likely-light-media-none-button(button, color) {
 
 @media (prefers-color-scheme: dark) {
   .likely-color-theme-based {
-    .likely__widget {
+    .likely__widget, .likely__widget:visited {
       likely-light-widget()
     }
     .likely__counter {
@@ -161,12 +163,21 @@ likely-light-media-none-button(button, color) {
 }
 
 colorize(button, color) {
-  .likely__widget_{button} {
+  .likely__widget_{button}, .likely__widget_{button}:visited {
     fill: color;
     &:hover, &:active, &:focus {
+      all: initial; // Reset all external styles on hover
+      /* Restore styles after reset */
+      fill: color;
+      transition: none;
+      cursor: pointer;
+      /*** End of restore styles ***/
+
       background: alpha(mix(#fff,color,75%),.8);
 
       @media (hover: none) {
+        transition: widget-transition;
+        cursor: unset;
         background: likely-background;
       }
     }
@@ -207,7 +218,7 @@ colorize('whatsapp', #25D366);
 
 .likely {
   gap: 10px;
-  .likely__widget {
+  .likely__widget, .likely__widget:visited {
     line-height: 20px;
     font-size: 14px;
     border-radius: 3px;
@@ -230,7 +241,7 @@ colorize('whatsapp', #25D366);
 
 .likely-big {
   gap: 12px;
-  .likely__widget {
+  .likely__widget, .likely__widget:visited {
     line-height: 28px;
     font-size: 18px;
     border-radius: 4px;
@@ -253,7 +264,7 @@ colorize('whatsapp', #25D366);
 
 .likely-small {
   gap: 8px;
-  .likely__widget {
+  .likely__widget, .likely__widget:visited {
     line-height: 14px;
     font-size: 12px;
     border-radius: 2px;

diff --git a/test/files/manual.html b/test/files/manual.html
@@ -5,7 +5,23 @@
     <title>Likely test page</title>
     <link rel="stylesheet" href="../../release/likely.css"/>
     <script src="../../release/likely.js"></script>
+
+    <!-- Test styles isolation -->
     <style>
+        a:visited {
+            color: #0060a0;
+            border-bottom-color: rgba(0, 96, 160, 0.15);
+            transition-property: border-bottom,border-color,background,color,fill;
+            transition-duration: .2s;
+            transition-timing-function: ease-out;
+        }
+
+        a:hover, a:focus, a:active {
+            color: #a03000;
+            border-color: rgba(160, 48, 0, 0.2);
+            transition: none;
+        }
+
         body {
             text-align: center;
             padding: 0;

diff --git a/webpack.config.js b/webpack.config.js
@@ -35,7 +35,17 @@ module.exports = (env) => {
         let cssName = 'likely.css';
         if (isProduction) {
             cssName = 'likely.min.css';
-            plugins.push(new CssMinimizerPlugin());
+            plugins.push(new CssMinimizerPlugin({
+                            minimizerOptions: {
+                              preset: [
+                                'default',
+                                {
+                                  // Needed to disable it because we use CSS where order matters – "all: initial"
+                                  cssDeclarationSorter: false,
+                                },
+                              ],
+                            },
+                          }));
         }
         plugins.push(new MiniCssExtractPlugin({ filename: cssName }));
     }