test: test postcss application on linked css

Author: yyx990803

packages/playground/css/imported.css

@@ -11,6 +11,7 @@ pre {
   border-radius: 10px;
 }
 
+/* test postcss nesting */
 .postcss {
   .nesting {
     color: pink;

packages/playground/css/index.html

@@ -1,32 +1,34 @@
 <link rel="stylesheet" href="./linked.css" />
 
-<h1>CSS</h1>
-
-<p class="linked">&lt;link&gt;: This should be blue</p>
-<p class="linked-at-import">@import in &lt;link&gt;: 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>
-
-<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: This should be olive</p>
-<p>Imported SASS string:</p>
-<pre class="imported-sass"></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>
+<div class="wrapper">
+  <h1>CSS</h1>
+
+  <p class="linked">&lt;link&gt;: This should be blue</p>
+  <p class="linked-at-import">@import in &lt;link&gt;: 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>
+
+  <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: This should be olive</p>
+  <p>Imported SASS string:</p>
+  <pre class="imported-sass"></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>
+</div>
 
 <script type="module" src="./main.js"></script>

packages/playground/css/linked.css

@@ -1,5 +1,8 @@
 @import './linked-at-import.css';
 
-.linked {
-  color: blue;
+/* test postcss nesting */
+.wrapper {
+  .linked {
+    color: blue;
+  }
 }