Skip to content

Styles are applied in the wrong order #10606

Open
@PackagedCat

Description

@PackagedCat

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug-pending-triageReported bug, pending triage to confirm.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions