chore: add data-optimizable="true" attribute on optimizable <style>

.github/quickstart/template/image.svg

@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="480" height="99999" class="<%%= !animated ? 'no-animations' : '' %>">
 
   <defs><style><%%= fonts %></style></defs>
-  <style><%%= style %></style>
+  <style data-optimizable="true"><%%= style %></style>
 
   <foreignObject x="0" y="0" width="100%" height="100%">
     <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">

CONTRIBUTING.md

@@ -227,7 +227,7 @@ The base structure for rendering looks like below:
 <svg xmlns="http://www.w3.org/2000/svg" width="480" height="99999" class="<%= !animated ? 'no-animations' : '' %>">
 
   <defs><style><%= fonts %></style></defs>
-  <style><%= style %></style>
+  <style data-optimizable="true"><%= style %></style>
 
   <foreignObject x="0" y="0" width="100%" height="100%">
     <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">

source/templates/classic/image.svg

@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="<%= large ? 960 : columns ? '100%' : 480 %>" height="99999" class="<%= large ? 'large' : columns ? 'columns' : '' %> <%= !animated ? 'no-animations' : '' %>">
 
   <defs><style><%= fonts %></style></defs>
-  <style><%= style %></style>
+  <style data-optimizable="true"><%= style %></style>
 
   <foreignObject x="0" y="0" width="100%" height="100%">
     <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" class="items-wrapper">

source/templates/classic/partials/skyline.ejs

@@ -23,7 +23,7 @@
               </div>
             </div>
             <% { const n = plugins.skyline.animation.length, width = plugins.skyline.width, height = plugins.skyline.height %>
-              <style>
+              <style data-optimizable="true">
                 @keyframes skyline-animation-frame {
                   100% { transform: translateX(-100%); }
                 }

source/templates/classic/partials/stackoverflow.ejs

@@ -41,7 +41,7 @@
         </section>
       </div>
       <% if (plugins.stackoverflow.lines) { %>
-        <style>
+        <style data-optimizable="true">
           .stackoverflow .body {
             display: -webkit-box;
             -webkit-box-orient: vertical;

source/templates/repository/image.svg

@@ -2,7 +2,7 @@
 
   <defs><style><%= fonts %></style></defs>
 
-  <style>
+  <style data-optimizable="true">
     <%= style %>
   </style>
 

source/templates/terminal/image.svg

@@ -6,7 +6,7 @@
 
   <defs><style><%= fonts %></style></defs>
 
-  <style>
+  <style data-optimizable="true">
     <%= style %>
       .stdin, .stdout {
         animation-duration: <%= meta.animations.stdin %>s;