test: postcss integration

Author: yyx990803

package.json

@@ -44,10 +44,12 @@
     "lint-staged": "^7.0.0",
     "node-sass": "^4.7.2",
     "normalize-newline": "^3.0.0",
+    "postcss-loader": "^2.1.2",
     "pug": "^2.0.1",
     "sass-loader": "^6.0.7",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
+    "sugarss": "^1.0.1",
     "vue": "^2.5.16",
     "vue-template-compiler": "^2.5.16",
     "webpack": "^4.1.0",

test/fixtures/postcss-lang.vue

@@ -1,4 +1,4 @@
-<style>
+<style lang="postcss" scoped>
 h1
   color: red
   font-size: 14px

test/fixtures/postcss.vue

@@ -76,3 +76,78 @@ test('supports-query', done => {
     done()
   })
 })
+
+test('postcss', done => {
+  mockBundleAndRun({
+    entry: 'postcss.vue',
+    module: {
+      rules: [
+        {
+          test: /\.postcss$/,
+          use: [
+            'vue-style-loader',
+            'css-loader',
+            {
+              loader: 'postcss-loader',
+              options: {
+                parser: require('sugarss')
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }, ({ window }) => {
+    const id = 'data-v-' + genId('postcss.vue')
+    let style = window.document.querySelector('style').textContent
+    style = normalizeNewline(style)
+    expect(style).toContain(`h1[${id}] {\n  color: red;\n  font-size: 14px\n}`)
+    done()
+  })
+})
+
+// test('css-modules', done => {
+//   function testWithIdent (localIdentName, regexToMatch, cb) {
+//     mockBundleAndRun({
+//       entry: 'css-modules.vue',
+//       vue: {
+//         cssModules: localIdentName && {
+//           localIdentName: localIdentName
+//         }
+//       }
+//     }, (window, module, raw, instance) => {
+//       // get local class name
+//       const className = instance.style.red
+//       expect(className).toMatch(regexToMatch)
+
+//       // class name in style
+//       let style = [].slice.call(window.document.querySelectorAll('style')).map((style) => {
+//         return style.textContent
+//       }).join('\n')
+//       style = normalizeNewline(style)
+//       expect(style).toContain('.' + className + ' {\n  color: red;\n}')
+
+//       // animation name
+//       const match = style.match(/@keyframes\s+(\S+)\s+{/)
+//       expect(match).toHaveLength(2)
+//       const animationName = match[1]
+//       expect(animationName).not.toBe('fade')
+//       expect(style).toContain('animation: ' + animationName + ' 1s;')
+
+//       // default module + pre-processor + scoped
+//       const anotherClassName = instance.$style.red
+//       expect(anotherClassName).to.match(regexToMatch).not.toBe(className)
+//       const id = 'data-v-' + genId('css-modules.vue')
+//       expect(style).toContain('.' + anotherClassName + '[' + id + ']')
+
+//       cb()
+//     })
+//   }
+//   // default localIdentName
+//   testWithIdent(undefined, /^red_\w{8}/, () => {
+//     // specified localIdentName
+//     const ident = '[path][name]---[local]---[hash:base64:5]'
+//     const regex = /css-modules---red---\w{5}/
+//     testWithIdent(ident, regex, done)
+//   })
+// })

test/fixtures/sub/.postcssrc.js

@@ -1706,6 +1706,18 @@ [email protected], core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
+cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.1.0"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    require-from-string "^1.1.0"
+
 cosmiconfig@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-4.0.0.tgz#760391549580bbd2df1e562bc177b13c290972dc"
@@ -4090,7 +4102,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-yaml@^3.7.0, js-yaml@^3.9.0, js-yaml@^3.9.1:
+js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.0, js-yaml@^3.9.1:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
   dependencies:
@@ -5107,7 +5119,7 @@ os-browserify@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
 
-os-homedir@^1.0.0:
+os-homedir@^1.0.0, os-homedir@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
 
@@ -5421,6 +5433,38 @@ postcss-filter-plugins@^2.0.0:
     postcss "^5.0.4"
     uniqid "^4.0.0"
 
+postcss-load-config@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+    postcss-load-options "^1.2.0"
+    postcss-load-plugins "^2.3.0"
+
+postcss-load-options@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-load-plugins@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92"
+  dependencies:
+    cosmiconfig "^2.1.1"
+    object-assign "^4.1.0"
+
+postcss-loader@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.1.2.tgz#03f54e23be736c9ea4f610e17d2a299254c05130"
+  dependencies:
+    loader-utils "^1.1.0"
+    postcss "^6.0.0"
+    postcss-load-config "^1.2.0"
+    schema-utils "^0.4.0"
+
 postcss-merge-idents@^2.1.5:
   version "2.1.7"
   resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
@@ -5617,7 +5661,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.1, postcss@^6.0.12, postcss@^6.0.20:
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.12, postcss@^6.0.14, postcss@^6.0.20:
   version "6.0.20"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.20.tgz#686107e743a12d5530cb68438c590d5b2bf72c3c"
   dependencies:
@@ -6192,6 +6236,10 @@ require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
 
+require-from-string@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
+
 require-from-string@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.1.tgz#c545233e9d7da6616e9d59adfb39fc9f588676ff"
@@ -6372,7 +6420,7 @@ sax@^1.2.4, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
-schema-utils@^0.4.2:
+schema-utils@^0.4.0, schema-utils@^0.4.2:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
   dependencies:
@@ -6852,6 +6900,12 @@ stylus@^0.54.5:
     sax "0.5.x"
     source-map "0.1.x"
 
+sugarss@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-1.0.1.tgz#be826d9003e0f247735f92365dc3fd7f1bae9e44"
+  dependencies:
+    postcss "^6.0.14"
+
 superstruct@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/superstruct/-/superstruct-0.5.1.tgz#cd6ddd7e5ad453440b14c60b9f8264b17fc88e75"