/
index.html
111 lines (96 loc) · 3.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<link rel="stylesheet" href="./linked.css" />
<div class="wrapper">
<h1>CSS</h1>
<p class="linked"><link>: This should be blue</p>
<p class="linked-at-import">@import in <link>: This should be red</p>
<p class="imported">import from js: This should be green</p>
<p class="imported-at-import">
@import in import from js: This should be purple
</p>
<p>Imported css string:</p>
<pre class="imported-css"></pre>
<pre class="imported-css-glob"></pre>
<pre class="imported-css-globEager"></pre>
<p class="postcss">
<span class="nesting">PostCSS nesting plugin: this should be pink</span>
</p>
<p class="sass">SASS: This should be orange</p>
<p class="sass-at-import">
@import from SASS _index: This should be olive and have bg image
</p>
<p class="sass-at-import-alias">
@import from SASS _index: This should be olive and have bg image which url
contains alias
</p>
<p class="sass-partial">@import from SASS _partial: This should be orchid</p>
<p>Imported SASS string:</p>
<pre class="imported-sass"></pre>
<p class="sass-dep">
@import dependency w/ no scss entrypoint: this should be lavender
</p>
<p class="less">Less: This should be blue</p>
<p class="less-at-import">
@import from Less: This should be darkslateblue and have bg image
</p>
<p class="less-at-import-alias">
@import from Less: This should be darkslateblue and have bg image which url
contains alias
</p>
<p>Imported Less string:</p>
<pre class="imported-less"></pre>
<p class="stylus">Stylus: This should be blue</p>
<p class="stylus-additional-data">
Stylus additionalData: This should be orange
</p>
<p class="stylus-import">@import from Stylus: This should be darkslateblue</p>
<p class="stylus-import-alias">
@import from Stylus: This should be darkslateblue and have bg image which
url contains alias
</p>
<p class="stylus-options-relative-import">
Stylus import (relative path) via vite config preprocessor options: This
should be green
</p>
<p class="stylus-options-absolute-import">
Stylus import (absolute path) via vite config preprocessor options: This
should be red
</p>
<p>Imported Stylus string:</p>
<pre class="imported-stylus"></pre>
<p class="modules">CSS modules: this should be turquoise</p>
<p>Imported CSS module:</p>
<pre class="modules-code"></pre>
<p class="modules-sass">CSS modules w/ SASS: this should be orangered</p>
<p>Imported SASS module:</p>
<pre class="modules-sass-code"></pre>
<p>Imported compose/from CSS/SASS module:</p>
<p class="path-resolved-modules-css">
CSS modules composes path resolving: this should be turquoise
</p>
<p class="path-resolved-modules-sass">
CSS modules composes path resolving: this should be orangered
</p>
<p class="path-resolved-modules-less">
CSS modules composes path resolving: this should be blue
</p>
<pre class="path-resolved-modules-code"></pre>
<p class="css-dep">
@import dependency w/ style enrtrypoints: this should be purple
</p>
<p class="css-dep-sass">
@import dependency w/ sass enrtrypoints: this should be orange
</p>
<p class="css-dep-stylus">
@import dependency w/ styl enrtrypoints: this should be red
</p>
<p class="dir-dep">PostCSS dir-dependency: this should be grey</p>
<p class="dir-dep-2">
PostCSS dir-dependency (file 2): this should be grey too
</p>
<p class="url-separated">
Url separation preservation: should have valid background-image
</p>
<p class="inlined">Inlined import - this should NOT be red.</p>
<pre class="inlined-code"></pre>
</div>
<script type="module" src="./main.js"></script>