Add "vue", "svelte" & "angular" to scope_languages

[ynhhoJ]

Resolves #844

Before:

After:

[lukas-reineke]

Have you read :help ibl.config.scope? I don't believe any of these are scope.

[ynhhoJ]

Have you read :help ibl.config.scope? I don't believe any of these are scope.

Yeah, i think you are right there. Those are indentation from treesitter.

Is there way to configure node_types for languages what are not present in scope_languages.lua?

This code does not has any effect:

require("ibl").setup {
      indent = { char = "▏" },
      scope = {
        include = {
          node_type = {
            css = {
              "block",
              "declaration",
            },
          },
        },
      },
    }

[ynhhoJ]

@lukas-reineke , i updated languages_scope file.
Can you verify if everything is good, please?

CSS

Code

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {}

body {
  .test {
    color: black;
  }
}

SCSS

Code

@use "sass:math";

@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: math.div($value, $ratio);
  }
  @return $value;
}

$normal-font-size: 16px;
sup {
  font-size: scale-below(20px, 16px);
}

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

Vue

Code

<template>
  <div>
    <h1>{{ pageTitle }}</h1>
    <p>{{ description }}</p>

    <!-- Example input field binding -->
    <label for="inputText">Enter text:</label>
    <input id="inputText" v-model="inputText" />

    <!-- Example conditional rendering -->
    <div v-if="showMessage">
      <p>{{ message }}</p>
    </div>

    <!-- Example list rendering -->
    <ul>
      <li v-for="item in itemList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>

    <!-- Example method call on button click -->
    <button @click="handleButtonClick">Click me!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: 'Vue.js Example',
      description: 'A basic Vue.js component example.',
      inputText: '',
      showMessage: false,
      message: 'This is a message!',
      itemList: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    }
  },
  methods: {
    handleButtonClick() {
      // Example method logic
      this.showMessage = true
    },
  },
}
</script>

<style scoped>
/* Example scoped styles */
h1 {
  color: #333;
}

p {
  font-size: 16px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 8px;
  cursor: pointer;
}
</style>

[lukas-reineke]

I still don't think this is right. CSS variable scoping works very differently to normal languages. This is not easy to display with the indentation.

https://blog.logrocket.com/css-variables-scoping/

I don't think adding CSS and SCSS will work.

Vue and Angular are fine.

[ynhhoJ]

I removed SCSS & CSS from language_scope.lua

[lukas-reineke]

🚀