-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Open
Labels
bug-pending-triageReported bug, pending triage to confirm.Reported bug, pending triage to confirm.
Description
Issue Description
Styles may be applied in the wrong order. In the example below, the button may still remain white, despite the fact that I have specified another class that sets the background color to red.
<!-- CustomButton.vue -->
<template>
<Button class="bg-white" />
</template>
<!-- Home.vue -->
<template>
<CustomButton class="bg-red" text="Hello" />
</template>
I debugged the NativeScript code and found out that the sorting of applying styles changes here:
selectorsMatch.selectors = selectors.filter((sel) => sel.accumulateChanges(node, selectorsMatch)).sort((a, b) => a.specificity - b.specificity || a.pos - b.pos); |
If you remove the sorting step in this line, the styles are applied in the correct order.
Reproduction
Create project using command:
ns create myAwesomeApp --template @nativescript-vue/template-blank@rc
Add the custom color to tailwing.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{css,xml,html,vue,svelte,ts,tsx}'],
// use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.
darkMode: ['class', '.ns-dark'],
theme: {
extend: {
colors: {
primary: "#F4BB46"
}
}
},
plugins: [],
corePlugins: {
preflight: false, // disables browser-specific resets
},
};
Create the custom button component with:
<!-- CustomButton.vue -->
<template>
<Button class="bg-white" >
<slot />
</Button>
</template>
Use a custom button and set a CSS class with an added custom color that overwrites the root style. In the current example "bg-primary"
<!-- Home.vue -->
<script lang="ts" setup>
import CustomButton from './CustomButton.vue';
</script>
<template>
<Frame>
<Page>
<CustomButton
class="rounded-lg p-5 bg-primary align-middle"
horizontalAlignment="center"
>
View Details
</CustomButton>
</Page>
</Frame>
</template>
Relevant log output (if applicable)
No response
Environment
No response
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
Metadata
Metadata
Assignees
Labels
bug-pending-triageReported bug, pending triage to confirm.Reported bug, pending triage to confirm.