[SOLVED] Component scoped style block

1

@nolimits4web A small improvement idea for scoped style blocks inside components. I think you can just modify the regex responsible for modifying the css. Notice the newline after the opening curly brace. I wrapped my head around why it didn’t work and the scope selector wasn’t added, as I’m used to put the curly braces on a newline :slight_smile:

This doesn’t work:
35

But this does:
44

1 Like
2

I think the parsing happens in this part: method parseComponent(componentString)

if (componentString.indexOf('<style>') >= 0) {
  style = componentString.split('<style>')[1].split('</style>')[0];
} else if (componentString.indexOf('<style scoped>') >= 0) {
  styleScoped = true;
  style = componentString.split('<style scoped>')[1].split('</style>')[0];
  style = style.split('\n').map(function (line) {
    var trimmedLine = line.trim();
    if (trimmedLine.indexOf('@') === 0) { return line; }
    if (line.indexOf('{') >= 0) {
      if (line.indexOf('{{this}}') >= 0) {
        return line.replace('{{this}}', ("[data-f7-" + id + "]"));
      }
      return ("[data-f7-" + id + "] " + (line.trim()));
    }
    return line;
  }).join('\n');
}
3

navbar для iOS темы через scope не стилизуется, только navbar-inner.

Скобки ни при чем.

4

@shastox Might be right about iOS theme, but that was not about the point I made but just an example :slight_smile: The parser which adds the scope selector (in my previous post) doesn’t work when the CSS block in a single-file component contains newlines in the selector / curly braces. Although that’s perfectly correct in a regular CSS file.

1 Like
5

Thanks for noting that, already fixed in repo, will be in next update

1 Like
6

Wow, you deserve a really-quick-fix-award! :smiley: Just tested it and works! Now I can put back my newlines and write code without thinking about this.

1 Like