feat: allow lang="postcss" in Vue SFCs (#4417)

* fix: allow postcss lang as tag

* refactor: own postcss rule

packages/webpack/src/config/base.js

@@ -198,6 +198,10 @@ export default class WebpackBaseConfig {
         test: /\.css$/,
         oneOf: styleLoader.apply('css')
       },
+      {
+        test: /\.postcss$/,
+        oneOf: styleLoader.apply('postcss')
+      },
       {
         test: /\.less$/,
         oneOf: styleLoader.apply('less', {

test/fixtures/basic/pages/postcss.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="red">
+    This is red
+  </div>
+</template>
+
+<style lang="postcss">
+@custom-selector :--red div.red;
+:--red {
+  background-color: blue;
+}
+.red {
+  color: red;
+}
+</style>

test/unit/basic.ssr.test.js

@@ -40,6 +40,19 @@ describe('basic ssr', () => {
     // t.is(window.getComputedStyle(element).color, 'red')
   })
 
+  test('/postcss', async () => {
+    const window = await nuxt.server.renderAndGetWindow(url('/css'))
+
+    const headHtml = window.document.head.innerHTML
+    expect(headHtml).toContain('color:red')
+
+    const element = window.document.querySelector('.red')
+    expect(element).not.toBe(null)
+    expect(element.textContent).toContain('This is red')
+    expect(element.className).toBe('red')
+    // t.is(window.getComputedStyle(element).color, 'red')
+  })
+
   test('/postcss', async () => {
     const window = await nuxt.server.renderAndGetWindow(url('/css'))