[ISSUE-3476] style: narrow css specificity for code elements (#3480)

arno-fukuda · dimaMachina · web-flow · commit 645493851604 · 2024-10-17T16:55:06.000+03:00
* style: narrow css specificity for code elements

* style: apply same css narrowing to  pre&gt;code section

* Create fifty-birds-invite.md

---------

Co-authored-by: Dimitri POSTOLOV &lt;dmytropostolov@gmail.com&gt;
diff --git a/.changeset/fifty-birds-invite.md b/.changeset/fifty-birds-invite.md
@@ -0,0 +1,5 @@
+---
+"nextra": patch
+---
+
+update css selectors for `code`, use `code.nextra-code`
diff --git a/packages/nextra/styles/code-block.css b/packages/nextra/styles/code-block.css
@@ -3,7 +3,7 @@
   @apply dark:_bg-[--shiki-dark-bg] dark:_text-[--shiki-dark];
 }
 
-code:not([class*='twoslash-']) {
+code.nextra-code:not([class*='twoslash-']) {
   box-decoration-break: slice;
   font-feature-settings:
     'rlig' 1,
@@ -16,7 +16,7 @@ code:not([class*='twoslash-']) {
   }
 }
 
-pre code:not([class*='twoslash-']) {
+pre code.nextra-code:not([class*='twoslash-']) {
   @apply _grid _text-sm;
 
   &[data-line-numbers] > span {

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`@apply dark:_bg-[--shiki-dark-bg] dark:_text-[--shiki-dark];`
`4`	`4`	`}`
`5`	`5`
`6`		`-code:not([class*='twoslash-']) {`
	`6`	`+code.nextra-code:not([class*='twoslash-']) {`
`7`	`7`	`box-decoration-break: slice;`
`8`	`8`	`font-feature-settings:`
`9`	`9`	`'rlig' 1,`
`@@ -16,7 +16,7 @@ code:not([class*='twoslash-']) {`
`16`	`16`	`}`
`17`	`17`	`}`
`18`	`18`
`19`		`-pre code:not([class*='twoslash-']) {`
	`19`	`+pre code.nextra-code:not([class*='twoslash-']) {`
`20`	`20`	`@apply _grid _text-sm;`
`21`	`21`
`22`	`22`	`&[data-line-numbers] > span {`