forked from vitejs/vite
-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
155 lines (130 loc) · 4.83 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<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 class="import-with-space">
@import from file with space: This should be green and have a background
image
</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>
<div class="form-box-data-uri">
tests Less's `data-uri()` function with relative image paths
</div>
<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>Inline CSS module:</p>
<pre class="modules-inline"></pre>
<p>CSS with @charset:</p>
<pre class="charset-css"></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="css-js-dep">
import dependency includes 'import "./foo.css"': this should be green
</p>
<p class="css-js-dep-module">
import dependency includes 'import "./bar.module.css"': this should be green
</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>
<div class="css-in-less">
test import css in less, this color will be yellow
</div>
<div class="css-in-less-2">
test for import less in less, this color will be blue
</div>
<div class="css-in-scss">
test import css in scss, this color will be orange
</div>
<pre class="inlined-code"></pre>
<p>Raw Support</p>
<pre class="raw-imported-css"></pre>
<p>PostCSS source.input.from. Should include query</p>
<pre class="postcss-source-input"></pre>
<p>Aliased</p>
<p class="aliased">import '#alias': this should be blue</p>
<pre class="aliased-content"></pre>
<p class="aliased-module">import '#alias-module': this should be blue</p>
</div>
<script type="module" src="./main.js"></script>