title: postcss is processing /css/app.css and throwing CssSyntaxError after import vue2-daterange-picker
body: <p>I'm writing a SPA with vue in a laravel project, and build assets with laravel mix(<code>npm run watch</code> etc.) 
  Everything is fine before I import <code>vue2-daterange-picker</code> in a vue component.</p>
  
  <pre class="lang-sh prettyprint-override"><code>npm run watch
  </code></pre>
  
  <p>and </p>
  
  <pre class="lang-sh prettyprint-override"><code>npm run develop
  </code></pre>
  
  <p>are good.</p>
  
  <p>But when I run</p>
  
  <pre class="lang-sh prettyprint-override"><code>npm run production
  </code></pre>
  
  <p>It throws an error like this</p>
  
  <pre><code>&gt; @ production /my-project
  &gt; cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
  
  CssSyntaxError: /css/app.css:3:19: Missed semicolon
      at Input.error (/my-project/node_modules/postcss/lib/input.js:130:16)
      at Parser.checkMissedSemicolon (/my-project/node_modules/postcss/lib/parser.js:603:22)
      at Parser.decl (/my-project/node_modules/postcss/lib/parser.js:286:46)
      at Parser.other (/my-project/node_modules/postcss/lib/parser.js:166:12)
      at Parser.parse (/my-project/node_modules/postcss/lib/parser.js:77:16)
      at parse (/my-project/node_modules/postcss/lib/parse.js:17:12)
      at new LazyResult (/my-project/node_modules/postcss/lib/lazy-result.js:60:16)
      at Processor.&lt;anonymous&gt; (/my-project/node_modules/postcss/lib/processor.js:138:12)
      at Processor.process (/my-project/node_modules/postcss/lib/processor.js:117:23)
      at Function.creator.process (/my-project/node_modules/postcss/lib/postcss.js:148:43)
      at OptimizeCssAssetsWebpackPlugin.processCss (/my-project/node_modules/optimize-css-assets-webpack-plugin/src/index.js:73:21)
      at Object.processor (/my-project/node_modules/optimize-css-assets-webpack-plugin/src/index.js:13:18)
      at each (/my-project/node_modules/last-call-webpack-plugin/src/index.js:150:10)
      at arrayEach (/my-project/node_modules/lodash/_arrayEach.js:15:9)
      at forEach (/my-project/node_modules/lodash/forEach.js:38:10)
      at OptimizeCssAssetsWebpackPlugin.process (/my-project/node_modules/last-call-webpack-plugin/src/index.js:147:5)
      at compilation.hooks.optimizeChunkAssets.tapPromise.chunks (/my-project/node_modules/last-call-webpack-plugin/src/index.js:178:28)
      at _next0 (eval at create (/my-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), &lt;anonymous&gt;:9:17)
      at _err0 (eval at create (/my-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), &lt;anonymous&gt;:25:1)
      at taskRunner.run (/my-project/node_modules/terser-webpack-plugin/dist/index.js:321:9)
      at step (/my-project/node_modules/terser-webpack-plugin/dist/TaskRunner.js:87:9)
      at _cacache.default.get.then (/my-project/node_modules/terser-webpack-plugin/dist/TaskRunner.js:111:15)
      at tryCatcher (/my-project/node_modules/bluebird/js/release/util.js:16:23)
      at Promise._settlePromiseFromHandler (/my-project/node_modules/bluebird/js/release/promise.js:547:31)
      at Promise._settlePromise (/my-project/node_modules/bluebird/js/release/promise.js:604:18)
      at Promise._settlePromise0 (/my-project/node_modules/bluebird/js/release/promise.js:649:10)
      at Promise._settlePromises (/my-project/node_modules/bluebird/js/release/promise.js:729:18)
      at Promise._fulfill (/my-project/node_modules/bluebird/js/release/promise.js:673:18)
      at Promise._resolveCallback (/my-project/node_modules/bluebird/js/release/promise.js:466:57)
      at Promise._settlePromiseFromHandler (/my-project/node_modules/bluebird/js/release/promise.js:559:17)
      at Promise._settlePromise (/my-project/node_modules/bluebird/js/release/promise.js:604:18)
      at Promise._settlePromise0 (/my-project/node_modules/bluebird/js/release/promise.js:649:10)
      at Promise._settlePromises (/my-project/node_modules/bluebird/js/release/promise.js:729:18)
      at Promise._fulfill (/my-project/node_modules/bluebird/js/release/promise.js:673:18)
      at Promise._resolveCallback (/my-project/node_modules/bluebird/js/release/promise.js:466:57)
      at Promise._settlePromiseFromHandler (/my-project/node_modules/bluebird/js/release/promise.js:559:17)
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
  npm ERR! Exit status 1
  npm ERR! 
  npm ERR! Failed at the @ production script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  
  npm ERR! A complete log of this run can be found in:
  npm ERR!     /home/user/.npm/_logs/2019-11-09T04_25_23_448Z-debug.log
  </code></pre>
  
  <p>The file <code>/css/app.css</code> mentioned in the error message was generated by laravel mix by the following line in <code>webpack.mix.js</code>.</p>
  
  <pre><code>mix.sass('resources/assets/sass/app.scss', 'public/css');
  </code></pre>
  
  <p>Here's my <code>package.json</code></p>
  
  <pre class="lang-js prettyprint-override"><code>{
      "private": true,
      "scripts": {
          "dev": "npm run development",
          "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
          "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
          "watch-poll": "npm run watch -- --watch-poll",
          "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
          "prod": "npm run production",
          "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
      },
      "devDependencies": {
          "@babel/plugin-syntax-dynamic-import": "^7.2.0",
          "axios": "^0.19.0",
          "bootstrap": "^4.3.1",
          "cross-env": "^6.0.3",
          "dateformat": "^3.0.3",
          "jquery": "^3.4.1",
          "laravel-mix": "^5.0.0",
          "laravel-mix-polyfill": "^1.1.0",
          "lodash": "^4.17.15",
          "popper.js": "^1.16.0",
          "resolve-url-loader": "^3.1.0",
          "sass": "^1.23.3",
          "sass-loader": "^8.0.0",
          "vue": "^2.6.10",
          "vue-i18n": "^8.15.0",
          "vue-router": "^3.1.3",
          "vue-template-compiler": "^2.6.10",
          "vue2-daterange-picker": "^0.3.1",
          "vuex": "^3.1.1"
      },
      "dependencies": {}
  }
  </code></pre>
  
  <p>and my <code>webpack.mix.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>let mix = require('laravel-mix');
  
  require('laravel-mix-polyfill');
  
  /*
   |--------------------------------------------------------------------------
   | Mix Asset Management
   |--------------------------------------------------------------------------
   |
   | Mix provides a clean, fluent API for defining some Webpack build steps
   | for your Laravel application. By default, we are compiling the Sass
   | file for the application as well as bundling up all the JS files.
   |
   */
  
  mix.version();
  
  mix.babelConfig({
     plugins: ['@babel/plugin-syntax-dynamic-import'],
  });
  
  mix.webpackConfig({
     output: {
        chunkFilename: 'js/[name].[chunkhash].js',
     },
  });
  
  mix.polyfill({
     enabled: true,
     targets: [
        'cover 99.5%',
     ],
  });
  
  mix.js('resources/assets/js/app.js', 'public/js');
  mix.sass('resources/assets/sass/app.scss', 'public/css');
  
  </code></pre>
  
  <p>But I can still run</p>
  
  <pre class="lang-sh prettyprint-override"><code>npm run production
  </code></pre>
  
  <p>but build CSS and JavaScript separately</p>
  
  <pre class="lang-js prettyprint-override"><code>// mix.js('resources/assets/js/app.js', 'public/js');
  mix.sass('resources/assets/sass/app.scss', 'public/css');
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>mix.js('resources/assets/js/app.js', 'public/js');
  // mix.sass('resources/assets/sass/app.scss', 'public/css');
  </code></pre>
  
  <p>How can I run</p>
  
  <pre class="lang-sh prettyprint-override"><code>npm run production
  </code></pre>
  
  <p>just once?</p>