If used with N-Vue, components not receiving platform class

[maxorlovsky]

Thank you for this awesome plugin.

There is a problem if you code in NativeScript-Vue. While .android / .ios class are added to <Page> element, when you create component, you can use StackLayout or every other parent element for it. That, of course, won't receive platform class. Is there a way around it?

As an example this component in Vue:

<template>
    <FlexboxLayout orientation="horizontal"
        class="navigation"
    >
            <StackLayout v-for="item in navigation"
                :key="item.name"
            >
                <Label :text="item.name" />
        </template>
    </FlexboxLayout>
</template>

<style lang="scss" scoped>
.navigation {
    align-items: center;
    text-align: center;
    border-top-width: 1;
    background-color: $white-color;
    height: 50;

    .android & {
        height: 70;
    }
}
</style>

<script>
export default {
    name: 'navigation',
    data() {
        return {
            navigation: [
                {
                    name: 'Home page'
                },
                {
                    name: 'Test page'
                },
            ]
        }
    }
};
</script>

[grgur]

This happens with scoped CSS because vue-loader "scoped" the rules under a hashed parent selector. That isolates platform-specific rules from being observed inside the scoped style tag.

You could remove scoped but make sure you're using unique class names.

[maxorlovsky]

Thank you for your answer @grgur Actually I just found it easier to use tns-core-modules/platform and use isIOS or isAndroid to do the same stuff as this plugin, but where I need it, either page or component. So I'll close down this issue.