[Vite, Vue] SFC style blocks not processed

[martinkruusement]

Issue Description

Using the official https://github.com/NativeScript/ns-vue-vite-demo as proof of concept.

When using Vite, the bundler will not detect <style> sections in Vue components.

• CSS processing itself works.
• Global styles in app.css - works, included in bundle.mjs.
• Inline style="...", tailwind - works
• SFC style tags - not processed, not included in the bundle.

Tested with @nativescript/vite v1, v2 up to 8.0.0-alpha.5.

✔ http://192.168.0.21:5173/ns/sfc/src/components/Home.vue?vue&type=template - works
✔ http://192.168.0.21:5173/ns/sfc/src/components/Home.vue?vue&type=script - works
✖ http://192.168.0.21:5173/ns/sfc/src/components/Home.vue?vue&type=style - returns the error:

// [sfc] transform miss kind=variant path=/src/components/Home.vue?vue&type=style
throw new Error("[ns/sfc] transform failed for variant: /src/components/Home.vue?vue&type=style");
export {}

NativeScript/packages/vite/hmr/server/websocket.ts

Lines 4005 to 4009 in 850eafd

	const payload = {
	path: base,
	hasScript: !!scriptCode,
	hasTemplate: !!templateCode,
	hasStyle: false,

hasStyle: false here hints at this being an unfinished feature.

Reproduction

git clone https://github.com/NativeScript/ns-vue-vite-demo

Add anywhere in src/components/Home.vue:

<StackLayout class="tests" background="white">
  <Label text="Global CSS: expect red"  class="test-global-css" />
  <Label text="Inline CSS: expect blue" style="color: blue"/>
  <Label text="SFC style section: expect green" class="test-sfc-css" />
</StackLayout>

Add to the bottom of src/components/Home.vue:

<style scoped>
.test-sfc-css {
  color: green; /* ignored */
}
</style>

Add to src/app.css

.test-global-css {
  color: red; /* works */
}

Expected 3rd Label to be green.

Relevant log output (if applicable)

[ns]   [hmr][vue-reset][meta] /src/components/Home.vue {
[ns]     "path": "/src/components/Home.vue",
[ns]     "hasScript": true,
[ns]     "hasTemplate": true,
[ns]     "hasStyle": false, <-------------------------------[ should be true if <style> section present ]
[ns]     "scriptExports": [],
[ns]     "scriptHasDefault": false,
[ns]     "templateHasRender": true,
[ns]     "hmrId": "390a8663"
[ns]   }

Environment

✔ Getting environment information

There seem to be issues with your configuration.
✔ Getting NativeScript components versions information...
✔ Component nativescript has 9.0.5 version and is up to date.
✔ Component @nativescript/core has 9.0.18 version and is up to date.
✔ Component @nativescript/ios has 9.0.3 version and is up to date.
✔ Component @nativescript/android has 9.0.3 version and is up to date.
✔ Your ANDROID_HOME environment variable is set and points to correct directory.
✔ Your adb from the Android SDK is correctly installed.
✔ The Android SDK is installed.
✔ A compatible Android SDK for compilation is found.
✔ Javac is installed and is configured properly.
✔ The Java Development Kit (JDK) is installed and is configured properly.
✔ CocoaPods update is not required.
✔ Your current CocoaPods version is newer than 1.0.0.
✔ Python installed and configured correctly.
✖ WARNING: Xcode is not installed or is not configured properly.
You will not be able to build your projects for iOS or run them in the iOS Simulator.
To be able to build for iOS and run apps in the native emulator, verify that you have installed Xcode.

✖ WARNING: xcodeproj is not installed or is not configured properly.
You will not be able to build your projects for iOS.
To be able to build for iOS and run apps in the native emulator, verify that you have installed xcodeproj.

✖ WARNING: CocoaPods is not installed or is not configured properly.
You will not be able to build your projects for iOS if they contain plugin with CocoaPod file.
To be able to build such projects, verify that you have installed CocoaPods (sudo gem install cocoapods).

Your environment is not configured properly and you will not be able to execute local builds.
Verify that your environment is configured according to the system requirements described at
https://docs.nativescript.org/setup/macos.

---

[ ! ] NOTE: testing on Android, iOS setup is not used - related warnings unlikely to be the cause here.

Please accept these terms

• I have searched the existing issues as well as StackOverflow and this has not been posted before
• This is a bug report
• I agree to follow this project's Code of Conduct