index.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. const postcss = require('postcss')
  2. const loaderUtils = require('loader-utils')
  3. const loadPostcssConfig = require('./load-postcss-config')
  4. const trim = require('./plugins/trim')
  5. const scopeId = require('./plugins/scope-id')
  6. module.exports = function (css, map) {
  7. this.cacheable()
  8. const cb = this.async()
  9. const query = loaderUtils.getOptions(this) || {}
  10. let vueOptions = this.options.__vueOptions__
  11. if (!vueOptions) {
  12. if (query.hasInlineConfig) {
  13. this.emitError(
  14. `\n [vue-loader] It seems you are using HappyPack with inline postcss ` +
  15. `options for vue-loader. This is not supported because loaders running ` +
  16. `in different threads cannot share non-serializable options. ` +
  17. `It is recommended to use a postcss config file instead.\n` +
  18. `\n See http://vue-loader.vuejs.org/en/features/postcss.html#using-a-config-file for more details.\n`
  19. )
  20. }
  21. vueOptions = Object.assign({}, this.options.vue, this.vue)
  22. }
  23. loadPostcssConfig(this, vueOptions.postcss)
  24. .then(config => {
  25. const plugins = config.plugins.concat(trim)
  26. const options = Object.assign(
  27. {
  28. to: this.resourcePath,
  29. from: this.resourcePath,
  30. map: false
  31. },
  32. config.options
  33. )
  34. // add plugin for vue-loader scoped css rewrite
  35. if (query.scoped) {
  36. plugins.push(scopeId({ id: query.id }))
  37. }
  38. // source map
  39. if (
  40. this.sourceMap &&
  41. !this.minimize &&
  42. vueOptions.cssSourceMap !== false &&
  43. process.env.NODE_ENV !== 'production' &&
  44. !options.map
  45. ) {
  46. options.map = {
  47. inline: false,
  48. annotation: false,
  49. prev: map
  50. }
  51. }
  52. return postcss(plugins)
  53. .process(css, options)
  54. .then(result => {
  55. if (result.messages) {
  56. result.messages.forEach(({ type, file }) => {
  57. if (type === 'dependency') {
  58. this.addDependency(file)
  59. }
  60. })
  61. }
  62. const map = result.map && result.map.toJSON()
  63. cb(null, result.css, map)
  64. return null // silence bluebird warning
  65. })
  66. })
  67. .catch(e => {
  68. console.error(e)
  69. cb(e)
  70. })
  71. }