Content-Length: 235889 | pFad | http://github.com/NativeScript/NativeScript/issues/10606

20 Styles are applied in the wrong order · Issue #10606 · NativeScript/NativeScript · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styles are applied in the wrong order #10606

Open
3 tasks done
PackagedCat opened this issue Aug 19, 2024 · 2 comments
Open
3 tasks done

Styles are applied in the wrong order #10606

PackagedCat opened this issue Aug 19, 2024 · 2 comments
Labels
bug-pending-triage Reported bug, pending triage to confirm.

Comments

@PackagedCat
Copy link
Contributor

PackagedCat commented Aug 19, 2024

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

@PackagedCat PackagedCat added the bug-pending-triage Reported bug, pending triage to confirm. label Aug 19, 2024
@CatchABus
Copy link
Contributor

Sorting is intended since selector specificity and order matters in CSS.
This might be a scoped css thing if you declare styles in Vue templates, but this is just a speculation without reproducible information.

@PackagedCat
Copy link
Contributor Author

@CatchABus added steps to reproduce

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug-pending-triage Reported bug, pending triage to confirm.
Projects
None yet
Development

No branches or pull requests

2 participants








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/NativeScript/NativeScript/issues/10606

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy