Moving list styles complete to use @apply

src/components/Footer/__snapshots__/test.js.snap

@@ -2,9 +2,7 @@
 
 exports[`Footer rendering 1`] = `
 <footer>
-  <ul
-    className="inline with-separator"
-  >
+  <ul>
     <li>
       <Trans>
         Created by 

src/components/Footer/index.js

@@ -5,7 +5,7 @@ import './style.css';
 
 const Footer = () => (
   <footer>
-    <ul className="inline with-separator">
+    <ul>
       <li>
         <Trans>Created by <a href="mailto:jeff.avallone@gmail.com">Jeff Avallone</a></Trans>
       </li>

src/components/Footer/style.css

@@ -3,6 +3,11 @@
 footer {
   margin: var(--spacing-margin) 0;
 
+  & ul {
+    @apply --inline-list;
+    @apply --with-separator;
+  }
+
   & img {
     vertical-align: text-top;
     width: 80px;

src/components/Header/__snapshots__/test.js.snap

@@ -12,9 +12,7 @@ exports[`Header rendering 1`] = `
       Regexper
     </a>
   </h1>
-  <ul
-    className="inline"
-  >
+  <ul>
     <li>
       <a
         href="https://github.com/javallone/regexper-static"

src/components/Header/index.js

@@ -10,7 +10,7 @@ const Header = () => (
       <a href="/">Regexper</a>
     </h1>
 
-    <ul className="inline">
+    <ul>
       <li><a href="https://github.com/javallone/regexper-static">
         <GithubIcon/><Trans>Source on GitHub</Trans>
       </a></li>

src/components/Header/style.css

@@ -38,6 +38,7 @@
   }
 
   & ul {
+    @apply --inline-list;
     line-height: var(--header-height);
     position: absolute;
     top: 0;

src/site.css

@@ -16,26 +16,3 @@ body {
 a {
   color: inherit;
 }
-
-ul:global(.inline) {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  & li {
-    list-style-type: none;
-    display: inline-block;
-    white-space: nowrap;
-  }
-
-  &:global(.with-separator) {
-    & li:after {
-      content: '//';
-      padding: 0 0.5rem;
-    }
-
-    & li:last-child:after {
-      content: '';
-    }
-  }
-}