@@ -4,6 +4,29 @@ import { createMarkdown } from "./utils/create-markdown";
4
4
import { minifyCss } from "./utils/minify-css" ;
5
5
import { toCamelCase } from "./utils/to-pascal-case" ;
6
6
import { writeTo } from "./utils/write-to" ;
7
+ import postcss from "postcss" ;
8
+
9
+ const createScopedStyles = ( props : { source : string ; moduleName : string } ) => {
10
+ const { source, moduleName } = props ;
11
+
12
+ return postcss ( [
13
+ {
14
+ postcssPlugin : "postcss-plugin:scoped-styles" ,
15
+ Once ( root ) {
16
+ root . walkRules ( ( rule ) => {
17
+ rule . selectors = rule . selectors . map ( ( selector ) => {
18
+ if ( / ^ p r e / . test ( selector ) ) {
19
+ selector = `pre.${ moduleName } ${ selector . replace ( / ^ p r e / , " " ) } ` ;
20
+ } else {
21
+ selector = `.${ moduleName } ${ selector } ` ;
22
+ }
23
+ return selector ;
24
+ } ) ;
25
+ } ) ;
26
+ } ,
27
+ } ,
28
+ ] ) . process ( source ) . css ;
29
+ } ;
7
30
8
31
export type ModuleNames = Array < { name : string ; moduleName : string } > ;
9
32
@@ -60,10 +83,7 @@ export async function buildStyles() {
60
83
) ;
61
84
await writeTo ( `src/styles/${ name } .css` , css_minified ) ;
62
85
63
- const scoped_style = content
64
- . replace ( / \. h l j s / g, `.${ moduleName } .hljs` )
65
- // adjust for first two rules being `code.hljs` not `.hljs`
66
- . replace ( / \s ? c o d e \. [ _ 0 - 9 a - z A - Z ] + \s \. h l j s / g, `.${ moduleName } code.hljs` ) ;
86
+ const scoped_style = createScopedStyles ( { source : content , moduleName } ) ;
67
87
68
88
scoped_styles += scoped_style ;
69
89
} else {
@@ -128,6 +148,6 @@ export async function buildStyles() {
128
148
"www/data/scoped-styles.css" ,
129
149
minifyCss ( scoped_styles , { removeAll : true } ) ,
130
150
) ;
131
-
151
+
132
152
console . timeEnd ( "build styles" ) ;
133
153
}
0 commit comments