Vuejs Component styles not compiling correctly when lang is set to "postcss"

[iFaxity]

🐛 bug report

When a Vuejs Component's style tag has the attribute lang="postcss" the styles wont compile at all.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc

{}

package.json

{
  "name": "xxx",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "start": "parcel build index.html --target electron -d .build --public-url ./",
    "poststart": "electron main.js"
  },
  "dependencies": {
    "electron": "^2.0.7",
    "mz": "^2.7.0",
    "vue": "^2.5.17",
    "vue-hot-reload-api": "^2.3.0"
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^2.1.2",
    "autoprefixer": "^9.1.0",
    "parcel-bundler": "^1.9.7",
    "postcss-calc": "^6.0.1",
    "postcss-color-hex-alpha": "^3.0.0",
    "postcss-color-mod-function": "^2.4.3",
    "postcss-custom-media": "^6.0.0",
    "postcss-custom-properties": "^7.0.0",
    "postcss-modules": "^1.3.2",
    "postcss-nesting": "^6.0.0",
    "pug": "^2.0.3",
    "vue-template-compiler": "^2.5.17"
  }
}

.postcssrc

{
  "modules": false,
  "plugins": {
    "autoprefixer": {
      "grid": true
    },
    "postcss-nesting": true,
    "postcss-custom-properties": true,
    "postcss-custom-media": true,
    "postcss-calc": true,
    "postcss-color-mod-function": true,
    "postcss-color-hex-alpha": true
  }
}

🤔 Expected Behavior

Should create a file parsed with postcss.

😯 Current Behavior

No css styles file is produced at all with lang="postcss" but when changed to lang="css" it works. However then the syntax highlighting wont work correctly so seeing errors all over my css code.

No errors are printed and command finishes without a parsed file.

💁 Possible Solution

Change the VueAsset.js to either change lang="postcss" to "css" internally in the generate() function. Or to accknowledge both as postcss parser formats and feed it into the postcss asset.

💻 Code Sample

App.vue

<template lang="pug">
.fx-textfield
  label {{ label }}
  input(:type="type", :value="value")
</template>

<style lang="postcss">
.fx-textfield {
  margin: .5em 0;

  label {
    display: block;
    font-size: 14px;
    opacity: .5;
  }

  input {
    height: 30px;
    background: #e0e0e0;
    border: none;
    border-bottom: 1px solid #e0e0e0;

    &:focus {
      transition: border-color .3s;
      border-bottom: #40bdd2;
    }

    &:focus + label, &:not(:empty) + label {
      font-size: 75%;
      transform: translate(0, -100%);
      opacity: 1;
    }
  }
}

.fx-textfield {
}
.fx-textfield > label {
  display: block;
}
</style>

<script>
export default {
  name: 'FxTextfield',
  props: {
    label: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: 'text',
    },
  value: String,
};
</script>

🌍 Your Environment

Software	Version(s)
Parcel	1.9.7
Node	10.7.0
npm/Yarn	6.1.0/1.9.4
Operating System	Windows 10

[DeMoorJasper]

postcss is just lang="css" or lang="pcss"

[iFaxity]

@DeMoorJasper Yes but the "pcss" and "css" doesn't give the correct syntax highlighting in VSCode. So it throws errors at just about every line i have a nested CSS statement. When i enter "postcss" it shows the correct syntax highlighting. But then again nothing gets compiled because the VueAsset doesnt recognize it as a PostCSS parsable file i guess. It's just annoying to me as errors & syntax highlighting not working correctly really get on my nerves after a while.

Images of the 2 different scenarios in VSCode: https://imgur.com/a/IlJYd2c
(Sorry for the poor image quality....)

[DeMoorJasper]

postcss isn't a valid extension, so parcel doesn't recognise it as a css asset

[DeMoorJasper]

Just add an entry like this to this file and it should work. Do a PR if you want https://github.com/parcel-bundler/parcel/blob/master/src/Parser.js#L30