refactor: eliminate is:inline by using :global() (#23)

package-lock.json

@@ -1,16 +1,18 @@
 {
-  "name": "@ayoayco/cozy",
+  "name": "@ayco/cozy",
   "version": "0.1.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
+      "name": "@ayco/cozy",
       "version": "0.1.4",
       "dependencies": {
         "@astro-reactive/form": "^0.8.1",
         "@astro-reactive/validator": "^0.3.4",
         "@astrojs/netlify": "^2.2.2",
-        "@extractus/article-extractor": "^7.2.15"
+        "@extractus/article-extractor": "^7.2.15",
+        "sass": "^1.62.1"
       },
       "devDependencies": {
         "astro": "^2.5.7"
@@ -2901,6 +2903,11 @@
         }
       ]
     },
+    "node_modules/immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+    },
     "node_modules/import-meta-resolve": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-2.2.2.tgz",
@@ -5052,6 +5059,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sass": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
+      "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sass-formatter": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.6.tgz",

package.json

@@ -12,6 +12,7 @@
     "@astro-reactive/form": "^0.8.1",
     "@astro-reactive/validator": "^0.3.4",
     "@astrojs/netlify": "^2.2.2",
-    "@extractus/article-extractor": "^7.2.15"
+    "@extractus/article-extractor": "^7.2.15",
+    "sass": "^1.62.1"
   }
 }

src/components/AddressBar.astro

@@ -40,43 +40,45 @@ const form = new FormGroup([
   </nav>
 </div>
 
-<style is:inline>
+<style lang="scss">
   .address-bar {
     background-color:antiquewhite;
     text-align: center;
     padding: 0.5em;
     width: 100%;
   }
-  input {
+
+  nav {
+    margin: 0.5em 0;
+
+    a:hover {
+      text-decoration: underline;
+    }
+    a {
+      color: brown;
+      text-decoration: none;
+    }
+    img {
+      display: inline;
+      vertical-align: middle;
+    }
+  }
+
+  :global(input) {
     width: 100%;
     text-align: center;
     border: 0px;
     border-radius: 5px;
     padding: 0.5rem;
   }
-  input[type="text"] {
+  :global(input[type="text"]) {
     border: 2px solid brown;
   }
-  input[type="submit"] {
+  :global(input[type="submit"]) {
     width: 150px;
     margin-top: 0.5em;
     background-color: brown;
     color: white;
     font-weight: bolder;
   }
-  nav {
-    margin: 0.5em 0;
-  }
-
-  nav a:hover {
-    text-decoration: underline;
-  }
-  nav a {
-    color: brown;
-    text-decoration: none;
-  }
-  nav img {
-    display: inline;
-    vertical-align: middle;
-  }
 </style>

src/components/Post.astro

@@ -24,45 +24,51 @@ const datePublished =
   )
 }
 
-<style is:inline>
+<style lang="scss">
   @counter-style publish-icons {
     system: cyclic;
     symbols: "️✍️" "🗓️";
     suffix: " ";
   }
-  ul.publish-info {
-    margin: 0.3em -0.7em 1em;
-    list-style: publish-icons;
-  }
-  h1.title {
-    font-size: xx-large;
-  }
-  span.source {
-    font-weight: bolder;
-    color: #555;
-  }
 
-  ul.publish-info li {
+  #post {
-    color: #555;
+    h1.title {
-    font-size: small;
+      font-size: xx-large;
-  }
+    }
-  p,
-  table,
-  ul {
-    margin: 1em 0;
-    font-size: 20px;
-  }
 
-  table {
+    span.source {
-    border-collapse: collapse;
+      font-weight: bolder;
-  }
+      color: #555;
-  table td,
+    }
-  table th {
-    border: 1px solid #ccc;
-    padding: 0.5em;
-  }
 
-  pre {
+    ul.publish-info {
-    white-space: pre-wrap;
+      margin: 0.3em -0.7em 1em;
+      list-style: publish-icons;
+
+      li {
+        color: #555;
+        font-size: small;
+      }
+    }
+
+    content {
+        :global(p, table, ul) {
+          margin: 1em 0;
+          font-size: 20px;
+        }
+
+        :global(table) {
+          border-collapse: collapse;
+          
+          :global(td, th) {
+            border: 1px solid #ccc;
+            padding: 0.5em;
+          }
+        }
+
+        :global(pre) {
+          white-space: pre-wrap;
+        }
+    }
   }
 </style>