Issue with parsing SASS in Vue components - Invalid CSS after ...

[mikkiek]

Hello,

Everything works flawlessly on parcel-bundler 1.7.1 However after update on 1.9.1 it stopped.

I run

cross-env NODE_ENV=development parcel --no-cache src/_index.js

My code very simple _index.js

"use strict";

import Vue from 'vue';

Vue.component(
    'field-switcher',
    () => import('./vue/components/Core/Field/_Switcher.vue')
);

_Switcher.vue

<template>
    <div v-if="mode == 'view'">
        <div
            vuebix-field-type="switcher"
            color="success"
            :label="'field.' + code | translate"
            :hide-details="true"
            :input-value="value"
        ></div>
    </div>
    <div v-else-if="mode == 'edit'">
        <div
            vuebix-field-type="switcher"
            v-model="model"
            color="success"
            :label="'field.' + code | translate"
            :hide-details="true"
            @transitionend="stateChange"
        ></div>
    </div>
</template>

<script>
    export default{
        name: 'FieldSwitcher',
        extends: fieldComponent,
        data(){
            return {
                model: null
            };
        },
        created(){
            this.model = this.getValue;
        },
        methods: {
            stateChange(event){
                // trigger change only after transition\animation
                if(event.propertyName == 'transform' && event.target.tagName.toLowerCase() == 'div'){
                    this.$emit('change', { code: this.code, value: this.model });
                }
            }
        }
    }
</script>

<style lang="sass" type="text/scss">
    [vuebix-field-type="switcher"]{
        .input-group__details{
            display: none;
        }
    }
</style>

Current modules from package.json

{
    "dependencies": {
        "@shopify/draggable": "^1.0.0-beta.7",
        "babel-runtime": "^6.26.0",
        "cordova-android": "^7.1.0",
        "cordova-browser": "^5.0.3",
        "cordova-plugin-camera": "^4.0.3",
        "cordova-plugin-device": "^2.0.2",
        "cordova-plugin-whitelist": "^1.3.3",
        "es7-object-polyfill": "0.0.5",
        "js-md5": "^0.7.3",
        "lodash.clonedeep": "^4.5.0",
        "lodash.difference": "^4.5.0",
        "lodash.get": "^4.4.2",
        "lodash.isboolean": "^3.0.3",
        "lodash.isfunction": "^3.0.9",
        "lodash.isobject": "^3.0.2",
        "lodash.isstring": "^4.0.1",
        "lodash.mapvalues": "^4.6.0",
        "moment": "^2.22.2",
        "vue": "^2.5.16",
        "vue-cordova": "^0.1.2",
        "vue-events": "^3.1.0",
        "vue-hot-reload-api": "^2.3.0",
        "vue-momentjs": "^0.1.2",
        "vue-qrcode-reader": "^0.8.2",
        "vue-resource": "^1.5.1",
        "vue-router": "^3.0.1",
        "vue-router-back-button": "^0.0.1",
        "vuetify": "^1.0.19",
        "vuex": "^3.0.1",
        "vuex-i18n": "^1.10.5"
    },
    "devDependencies": {
        "@vue/component-compiler-utils": "^1.3.1",
        "autoprefixer": "^8.6.2",
        "babel-core": "^6.26.3",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-stage-2": "^6.24.1",
        "babel-preset-vue": "^2.0.1",
        "cross-env": "^5.2.0",
        "css-loader": "^0.28.10",
        "node-sass": "^4.9.0",
        "parcel-bundler": "^1.9.1",
        "vue-template-compiler": "^2.5.16"
    },
}

🤔 Expected Behavior

I hoped it'll complile everything

😯 Current Behavior

cross-env NODE_ENV=development parcel --no-cache src/_index.js

Server running at http://localhost:1234 × D:\docker\xampp.portal.dev.en\www.vuejs\vuebix\mobile\src_Switcher.vue: Invalid CSS after '...pe="switcher"]{': expected "}", was "{" at options.error (D:\repository\vuebix\mobile\node_modules\node-sass\lib\index.js:291:26)

Software	Version(s)
Parcel	1.9.1
Node	9.3.0
npm/Yarn	5.8.0
Operating System	Windows 10

[mikkiek]

Something changed in parcel and it doesn't proccess