PhpStorm CSS code completion does not work on Twig extended templates

Question

I'm using PhpStorm 2016.1. I have these files and the situation is described below:

@mycss
.style {color : red}

@base.html.twig
[...]
<link rel="stylesheet" href="/vendor/mycss.css" />
<!--HERE AUTOCOMPLETE OF style WORKS-->
{%block test%}{%endblock%}


@page.html.twig
{% extends "MyController::base.html.twig" %}
<!--HERE AUTOCOMPLETE OF style NOT WORKS-->
{%block test%}{%endblock%}

How to fix that in order to have autocomplete on all files?

EDIT

It's not a TWIG problem. I don't create new styles in children templates.

I use symlinks (es. /main.css -> /vendor/css/main.css) and that should cause a problem (don't know why). If I for example write small- (foundation grid) + ctrl + space (ask for code completation) the IDE seems to go in some kind of loop, the CPU go to 100% and it keep "loading" while it throw a memory error...

vbsessa · Accepted Answer · 2016-07-11 19:40:32Z

1

It happens to me either.
When you have a base template with some kind of placeholder for inner stylesheets, declaring inner rules disable the autocomplete of the outter ones.

base.html.twig

<link type="text/stylesheet" rel="stylesheet" href="bootstrap.css" />
{% block css %}
{% endblock %}

inner_view.html.twig

{% extends 'base.html.twig' %}

{% block css %}
    <style>
        .test {
            color: red;
        }
    </style>
{% endblock %}

Doing that, bootstrap classes autocomplete gets disabled in inner_view.html.twig.

edited Jul 11, 2016 at 19:40

answered Jul 11, 2016 at 12:08

vbsessa

3393 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Francesco Over a year ago

It's not the same issue, I don't create new styles in children templates. But I use symlinks, and that should cause a problem (don't know why). If I for example write small- + ctrl + space (ask for code completation) the IDE seems to go in some kind of loop, the CPU go to 100% and it keep "loading" while it throw a memory error

Jeremy Belolo Over a year ago

I have this issue now, it's very frustrating ! I think putting the css block on the bottom solve the case but still need to test this a little more

lena · Accepted Answer · 2016-06-13 17:14:02Z

0

Works for me:

do you have any embedded <style> blocks in child template? They will prevent classes from linked .css files to appear

answered Jun 13, 2016 at 17:14

lena

94.4k11 gold badges155 silver badges160 bronze badges

2 Comments

Francesco Over a year ago

To me it not work, no I have not <style> in child template. If for example I copy to child template <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css"> then I immediately see code completion for font awesome. It seems like PhpStorm don't understand twig extends (I have no suggestions of block names too..) (I'm on mac, using symfony framework with the notation Bundle::template.html.twig);

lena Over a year ago

I'd suggest creating a support ticket, attaching a sample project that can be used to recreate it

Collectives™ on Stack Overflow

PhpStorm CSS code completion does not work on Twig extended templates

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related