refactor: decrease langtag CSS specificity (#211)

* chore(deps-dev): bump deps

* Run "yarn format"

* refactor: decrease langtag CSS specificity

* Run "yarn test -u"

Author: metonym

demo/hooks.js

@@ -4,4 +4,4 @@ export async function handle({ event, resolve }) {
     ssr: false,
   });
   return response;
-}
+}

demo/routes/index.svelte

@@ -309,9 +309,7 @@
       Svelte version 3.31 or greater is required to use this library with
       TypeScript.
     </p>
-    <p class="mb-5">
-      TypeScript definitions are auto-generated by SvelteKit.
-    </p>
+    <p class="mb-5">TypeScript definitions are auto-generated by SvelteKit.</p>
   </Column>
 </Row>
 

package.json

@@ -26,11 +26,11 @@
     "@testing-library/svelte": "^3.1.3",
     "@testing-library/user-event": "^14.2.0",
     "@types/prettier": "^2.6.3",
-    "carbon-components-svelte": "^0.65.0",
+    "carbon-components-svelte": "^0.65.2",
     "carbon-icons-svelte": "^11.1.0",
     "carbon-preprocess-svelte": "^0.9.0",
     "jsdom": "^19.0.0",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.0",
     "prettier-plugin-svelte": "^2.7.0",
     "svelte": "^3.48.0",
     "svelte-check": "^2.7.2",
@@ -39,7 +39,7 @@
     "svelte2tsx": "^0.5.10",
     "totalist": "^3.0.0",
     "typescript": "^4.7.3",
-    "vitest": "^0.14.1"
+    "vitest": "^0.14.2"
   },
   "repository": {
     "type": "git",

src/Highlight.svelte

@@ -76,11 +76,11 @@
 </slot>
 
 <style>
-  pre.langtag {
+  .langtag {
     position: relative;
   }
 
-  pre.langtag::after {
+  .langtag::after {
     content: attr(data-language);
     position: absolute;
     top: 0;

src/HighlightAuto.svelte

@@ -58,11 +58,11 @@
 </slot>
 
 <style>
-  pre.langtag {
+  .langtag {
     position: relative;
   }
 
-  pre.langtag::after {
+  .langtag::after {
     content: attr(data-language);
     position: absolute;
     top: 0;

src/HighlightSvelte.svelte

@@ -51,11 +51,11 @@
 </slot>
 
 <style>
-  pre.langtag {
+  .langtag {
     position: relative;
   }
 
-  pre.langtag::after {
+  .langtag::after {
     content: attr(data-language);
     position: absolute;
     top: 0;

svelte.config.js

@@ -1,6 +1,6 @@
 import adapter from "@sveltejs/adapter-static";
 import fs from "fs";
-import preprocess from "svelte-preprocess"
+import preprocess from "svelte-preprocess";
 import { optimizeImports } from "carbon-preprocess-svelte";
 
 const pkg = JSON.parse(

tests/SvelteHighlight.test.ts

@@ -42,11 +42,11 @@ describe("SvelteHighlight", () => {
 
     expect(target.querySelector("#highlight-auto-css")?.outerHTML)
       .toMatchInlineSnapshot(`
-      "<pre data-language=\\"css\\" id=\\"highlight-auto-css\\" class=\\"langtag svelte-1xjucv4\\"><code class=\\"hljs\\"><span class=\\"hljs-selector-tag\\">body</span> {
-        <span class=\\"hljs-attribute\\">padding</span>: <span class=\\"hljs-number\\">0</span>;
-        <span class=\\"hljs-attribute\\">color</span>: red;
-      }</code></pre>"
-    `);
+        "<pre data-language=\\"css\\" id=\\"highlight-auto-css\\" class=\\"langtag svelte-4cqgwq\\"><code class=\\"hljs\\"><span class=\\"hljs-selector-tag\\">body</span> {
+          <span class=\\"hljs-attribute\\">padding</span>: <span class=\\"hljs-number\\">0</span>;
+          <span class=\\"hljs-attribute\\">color</span>: red;
+        }</code></pre>"
+      `);
 
     await userEvent.click(target.querySelector("button")!);
     await tick();

yarn.lock

@@ -303,10 +303,10 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-carbon-components-svelte@^0.65.0:
-  version "0.65.0"
-  resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.65.0.tgz#ddac7b7487cc2d496c05bc047fcdc0ab61108bc6"
-  integrity sha512-6/9o9FXxZrMr35B9Y/i5ZaoGWWbqsaEedxOB0WYEy9ae+d2UPwQFOkYevC4YoCOKpt8VE4AG32FNo4UkxhwhxA==
+carbon-components-svelte@^0.65.2:
+  version "0.65.2"
+  resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.65.2.tgz#f382d1a0befdf2129e6cc8222e7815a09dc66302"
+  integrity sha512-EkkL4d2aHdl/y7EJiivjPJ3kULvJhpDByuRPgXvSyoZslrqOrhsZMptfMsG0V7+GjntPxDocXv47iHMH6V7JSg==
   dependencies:
     flatpickr "4.6.9"
 
@@ -1154,10 +1154,10 @@ prettier-plugin-svelte@^2.7.0:
   resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.7.0.tgz#ecfa4fe824238a4466a3497df1a96d15cf43cabb"
   integrity sha512-fQhhZICprZot2IqEyoiUYLTRdumULGRvw0o4dzl5jt0jfzVWdGqeYW27QTWAeXhoupEZJULmNoH3ueJwUWFLIA==
 
-prettier@^2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"
-  integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
+prettier@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.0.tgz#a4fdae07e5596c51c9857ea676cd41a0163879d6"
+  integrity sha512-nwoX4GMFgxoPC6diHvSwmK/4yU8FFH3V8XWtLQrbj4IBsK2pkYhG4kf/ljF/haaZ/aii+wNJqISrCDPgxGWDVQ==
 
 pretty-format@^27.0.2:
   version "27.5.1"
@@ -1515,10 +1515,10 @@ vite@^2.9.9:
   optionalDependencies:
     fsevents "~2.3.2"
 
-vitest@^0.14.1:
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/vitest/-/vitest-0.14.1.tgz#f2fd8b31abdbbadb9ee895f8fde35a068ea2a5f5"
-  integrity sha512-2UUm6jYgkwh7Y3VKSRR8OuaNCm+iA5LPDnal7jyITN39maZK9L+JVxqjtQ39PSFo5Fl3/BgaJvER6GGHX9JLxg==
+vitest@^0.14.2:
+  version "0.14.2"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-0.14.2.tgz#ac07b46d3cd3b5667d2bb803962f759a1b8f3f89"
+  integrity sha512-vXQUl8OUCqHmxKWscMGL+6Xl1pBJmYHZ8N85iNpLGrirAC2vhspu7b73ShRcLonmZT44BYZW+LBAVvn0L4jyVA==
   dependencies:
     "@types/chai" "^4.3.1"
     "@types/chai-subset" "^1.3.3"