Inline JS and CSS about craft-twig.tmbundle HOT 6 CLOSED

Nice idea. I'll have to look into it a bit to see if/how it's possible to implement. Or welcome reviewing the pull request if you want to take a shot at it! ;-)

from craft-twig.tmbundle.

@BenParizek Whil I have not yet poked into .tmLanguage files etc, I think this is not so hard from what I can see here: https://github.com/fcgrx/ExpressionEngine2-Sublime-Text-3-Bundle/blob/master/Syntaxes/ExpressionEngine.tmLanguage - basically you would add a block like this I think

        <key>javascript</key>
        <dict>
            <key>begin</key>
            <string>(?:^\s+)?&lt;((?i:script))\b(?![^&gt;]*/&gt;)[^&gt;]*&gt;?</string>
            <key>captures</key>
            <dict>
                <key>1</key>
                <dict>
                    <key>name</key>
                    <string>entity.name.tag.html</string>
                </dict>
            </dict>
            <key>end</key>
            <string>&lt;/((?i:script))&gt;(?:\s*)?</string>
            <key>name</key>
            <string>source.js.embedded.html</string>
            <key>patterns</key>
            <array>
                <dict>
                    <key>include</key>
                    <string>#embedded-code</string>
                </dict>
                <dict>
                    <key>include</key>
                    <string>source.js.jquery</string>
                </dict>
                <dict>
                    <key>include</key>
                    <string>source.js</string>
                </dict>
            </array>
        </dict>

and similarly with the css block in the above link...

...I too would find it very handy :) it's hard on the eyes seeing all that plain text at the bottom of a nice template ;)

from craft-twig.tmbundle.

I think we'll be able to add some support for this in the next release.

I believe this is a bit tricker than the above example leads on. <script> is a predicable pattern for a regex to grab but the {% includeCss anyCustomVariableName %} syntax has a random custom variable in the middle of it. Lookbehinds and lookaheads don't support wildcard selection like .*, or at least I haven't found a way around this yet.

So, currently, it looks like we can at least support a single syntax where we can predict the variable like below (where css and js are the default, supported variable names):
{% set css %}{% endset %}
{% set js %}{% endset %}

from craft-twig.tmbundle.

Well that's certainly a big improvement, I'd think most embedded mini scripts would be done with a set followed by an include anyway? Thanks for looking at it and indeed the work so far - I am finding the shortcuts etc very handy!

(also - while you're at it - highlighting for switch/case/endswitch if you'll accept a cheeky inline feature request!!)

from craft-twig.tmbundle.

Just added these locally. The next release will support:

CSS Syntax Highlighting for a set css tag:
{% set css %}{% endset %}

JS Syntax Highlighting for a set js tag:
{% set js %}{% endset %}

Syntax highlighting for switch/case/endswitch, even though it was a cheeky inline feature request ;-)

from craft-twig.tmbundle.

This is now released: https://github.com/BarrelStrength/Craft-Twig.tmbundle/releases

from craft-twig.tmbundle.