Formatting CSS properties in a single line (compact format)

[ricardozea]

Although not an issue per se, I wasn't able to see where I could modify Emmet's default CSS formatting from "expanded" (properties+values each in a single line) to compact (all properties+values in a single line).

For example, Emmet's current CSS default formatting (expanded):

header {
       width:960px;
       height:120px;
}

To this style (compact):
header { width:960px; height:120px; }

Any idea how to accomplish this?

Thanks.

[sergeche]

OK, I’ll add a preference for this

[ricardozea]

Awesome, Tnx!

[sergeche]

You can make Emmet output chained CSS properties with s (single line) filter. In syntaxProfiles.json, add the following section:

{
    "css": {
        "filters": "s"
    }
}

[ricardozea]

Where do I find syntaxProfiles.json?

I looked into ...\AppData\Roaming\Sublime Text 2\Packages\Emmet\ folder and didn't find that file.

Thanks.

[sergeche]

https://github.com/sergeche/emmet-sublime#extensions-support

You have to create this file

[ricardozea]

Leaving old steps at the bottom for reference.

Steps to get this working in Windows 7, you may have to interpret folder paths if you're in WinXP or something else:

1. Go to c:\Users\your-user\ folder

2. Create the folder emmet. You'll end up with this folder path: c:\Users\your-user\emmet

3. Create a file named: syntaxProfiles.json

4. In that file paste the following code:

   {
     "css": {
     "filters": "s"
      }
   }
   

5. Save the file in the folder path you created in Step 2

6. In ST2 type the following abbreviation: div { bdrs2 } and the expanded CSS properties should appear compacted/chained in a single line, like so: div { -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; }

A million Thanks to Sergeche for his dedication to make this feature available.

Oh wow, after a while got it to work, but this is not an intuitive process.

For others interested in this feature here's what I did to get it to work win Windows 7, you may have to interpret folder paths if you're in WinXP or something else:

1. Got this folder path: c:\Users\your-user\AppData\Roaming\Sublime Text 2\Packages\Emmet\
~~2. Create a folder named: extensions. ~~
Final folder path structure: c:\Users\your-user\AppData\Roaming\Sublime Text 2\Packages\Emmet\extensions\
3. Create a file named: syntaxProfiles.json
4. In that file paste the following code:

   {
      "css": {
      "filters": "s"
       }
    }

5. Save that file inside the folder \extensions
6. Close the syntaxProfiles.json file
7. Now open the Emmet.sublime-settings file: Preferences » Package Settings » Emmet. Find the line "extensions_path": "~/emmet", and replace the word emmet with extensions. (To be honest with you, this is what the Extension Support and syntaxProfiles.json say you should do, but if I leave it with the default name "emmet" it still works for me).
8. Close the file and you should be good to go

Usage:

In ST2 type div { bdrs2|s } and press TAB, it will expand and you should end up with a compact/chained CSS properties, like so:

div { -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; }

Notes:

A. Notice the "|" (pipe) character, this is necessary when using "filters"
B. Notice the "s" after the |, this is the type of filter you're applying, which is the filter you created on step 4 above

It would be nice to have this format be the default format when expanding the selectors, not sure if there's an easy way to do it, but it certainly would be nice.

Nonetheless, the feature is now in place using filters and it the output is perfect.

Thanks a million to Sergeche for implementing.

PS. I would be nice to have the list of available default filters listed in the Cheat Sheet

[sergeche]

In this case, you don’t need to add |s at the end of abbreviation because you defined s filter as default for CSS syntax in step 4.

[ricardozea]

Sergeche, if I don't add |s and press TAB the selectors will expand to be in different lines.

Doing this: div { bdrs2|s } results in this: div { -webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; }

Doing this: div { bdrs2 } results in this:

div { -webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; }

(See also my PS in my post above)

[sergeche]

Looks like it was a bug in profile handler. I’ve just pushed update, check if default filters for CSS syntax works for you (e.g. add "filters": "s" to syntax profiles and use abbreviations without filters)

[ricardozea]

It still doesn't work if I don't use the filter |s.

Not sure if your update has anything to do with this:

In my home PC I removed ZenCoding and made a fresh install of Emmet (I was posting/working from my work laptop in the above posts). I decided to keep it simple and not do any of the steps above and test: first without the |s filter and then with the filter.

Doing this: div { bdrs2 } results in this:

div { -webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; }

As expected, I haven't done any changes to any files yet.

Howver, doing this: div { bdrs2|s } results in this: div { -webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; }. Funny, I haven't made any of the changes needed for this to 'work'.

So, it does work but only if I use the filter |s AND without doing any changes.

Then I went ahead and did all the steps above, created the syntaxProfiles.json file, added "filters": "s" to it... everything, and tested again.

Same case as above: without the filter CSS properties expand to multiple lines. With filter, CSS properties expand to compact/chained rules.

Thanks.

[sergeche]

Oh, looks like you’ve placed syntaxProfiles.json file in invalid folder.
By default, Emmet extensions path (extensions_path setting) points to ~/emmet, which is c:\Users\your-user\emmet. You can either change the extensions_path setting to location of your choice, or put syntaxProfiles.json into default extensions path.

[ricardozea]

I placed the syntaxProfiles.json in: c:\Users\my-user\AppData\Roaming\Sublime Text 2\Packages\Emmet\syntaxProfiles.json, and abbreviations still need the filter to work.

Even restarted ST2. Actually, I always restart it just in case, I know some plugins don't require you to restart ST2.

Thanks.

[sergeche]

Please read my previous comment carefully: this path is invalid. You should either place syntaxProfiles.json file into c:\Users\your-user\emmet folder or change extensions_path preference path. But don’t point it to Emmet plugin folder because Package Control will wipe out everything from it with next update.

[ricardozea]

Got it, I thought you had made a mistake typing the folder path.

Compact/chained properties format works perfect! Thank You!

For anyone else reading this issue:

The folder \emmet doesn't exist in this path c:\Users\your-user... so you'll need to create it. Once you've done that, save the syntaxProfiles.json file in there and voilá!

Just type bdrs and you'll see the properties all one single line, like so: -webkit-border-radius:; -moz-border-radius:; border-radius:;

Thanks a million to Sergeche, his dedication to have this working was exemplary.

Steps above for getting this option working are updated.

[pietvanzoen]

After a lot of trying I'm still not able to produce the automatic single line functionality. I've tried adding the setting to my Emmet.sublime-settings in the Packages/User folder and I've tried adding it to syntaxProfiles.json under ~/emmet with no change in results.

Any suggestions?

I'm running ST2 in OSX.

[sergeche]

@pietvanzoen can you show me your Emmet.sublime-settings config?

[pietvanzoen]

{
    // Copy any modified settings to `User/Emmet.sublime-settings`
    // otherwise modifications will not survive updates.

    // Path to folder where Emmet should look for extensions
    // http://docs.emmet.io/customization/
    "extensions_path": "~/emmet",

    // Disable completions of HTML attributes
    // with this option disabled, you can get attribute list completions
    // inside opening HTML tags.
    // WARNING: with this option disabled, Tab key expander will not
    // work inside opening HTML attributes
    "disable_completions": false,

    // With this option enabled, all Emmet's CSS snippets
    // will be available in standard auto-complete popup
    "show_css_completions": true,

    // List of scopes where Emmet CSS completions should be available
    "css_completions_scope": "source.css - meta.selector.css - meta.property-value.css, source.scss - meta.selector.scss - meta.property-value.scss",

    // Remove default HTML tag completions on plugin start
    // You should restart editor after changing this option
    "remove_html_completions": false,

    // A comma-separated list of scopes where Emmet’s Tab key
    // abbreviation expander should be disabled  
    "disable_tab_abbreviations_for_scopes": "",

    // A regexp for scope name: if it matches, Tab handler won’t work
    // The reason to use this preference is that ST2 has buggy scope matcher
    // which may still trigger Tab handler even if it's restricted by context
    "disable_tab_abbreviations_for_regexp": "source\\.(?!css).+?\\stext\\.html",

    // Exit tabstop mode when enter key is pressed
    "clear_fields_on_enter_key": true,

    // A comma-separated list of disabled action names.
    // Listed action will not be triggered by default keyboard
    // shortcut.
    // Use "all" value to disable all shortcuts at once
    "disabled_keymap_actions": "",

    // By default, Emmet overrides Tab key to effectively expand abbreviations.
    // The downside of this approach is that you can’t expand regular ST2
    // snippets (like `php`). Since it’s not currently possible to get a list
    // of ST2 snippets via API, you can provide a list of scopes where Emmet’s
    // Tab trigger should be disabled when expanding simple abbreviation.
    // If entered abbreviation (like `php`) wasn’t found in Emmet snippets list
    // or "known_html_tags" preference, Tab handler will not be triggered.
    // Leave this setting blank to disable this feature
    "disabled_single_snippet_for_scopes": "text.html",

    // A space separated list of all known HTML tags,
    // used together with "disabled_on_single_snippets" option
    "known_html_tags": "html head title base link meta style script noscript body section nav article aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr pre blockquote ol ul li dl dt dd figure figcaption div a em strong small s cite q dfn abbr data time code var samp kbd sub sup i b u mark ruby rt rp bdi bdo span br wbr ins del img iframe embed object param video audio source track canvas map area svg math table caption colgroup col tbody thead tfoot tr td th form fieldset legend label input button select datalist optgroup option textarea keygen output progress meter details summary command menu",

    "empty_elements": "area base basefont br col frame hr img input isindex link meta param embed",

    // If set to `true`, Emmet will automatically insert final tabstop
    // at the end of expanded abbreviation
    "insert_final_tabstop": false,

    // Try to automatically detect XHTML dialect in HTML documents.
    // With this option enabled, your custom profile for HTML documents may not work.
    "autodetect_xhtml": true,

    ///////////////////////////////
    // Emmet customization
    // Each section has the same meaning as the same-named JSON file 
    // described here:
    // http://docs.emmet.io/customization/
    ///////////////////////////////


    // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
    "snippets": {
        // "html": {
        //  "abbreviations": {
        //      "example": "<div class='example' title='Custom element example'>"
        //  }
        // }
    },

    // Emmet preferences
    // List of all available preferences:
    // http://docs.emmet.io/customization/preferences/
    "preferences": {
        // "css.valueSeparator": ": ",
        "css.propertyEnd": "; "
    },

    // Output profiles for syntaxes
    // http://docs.emmet.io/customization/syntax-profiles/
    "syntaxProfiles": {
        "css": {
            "filters": "s"
        }
    }
}

[sergeche]

Try this:

{
    "snippets": {
        "css": {
            "filters": "html, s"
        }
    }
}

[pietvanzoen]

That worked. Thanks!

[tysonforhire]

Hello @sergeche. Thanks for a great plugin! I'm also having trouble getting the single line css to work. It doesn't work if I type, for example, "trs" and then hit tab. It displays the transition properties on multiple lines. However, if I then hit ctrl + z to undo and hit tab again it correctly displays it all on a single line.

I have created the syntaxProfiles.json in my c:\users\user\emmet directory, which has the following:

{
    "css": {
        "filters": "s"
    }
}

I have also created Emmet.sublime-settings and have the same settings as the ones pietvanzoen pasted earlier, though I did add:

{
    "snippets": {
        "css": {
            "filters": "html, s"
        }
    }
}

as you instructed. However, single line only works when I tab, undo, then tab a second time. Any ideas what I can do to get it to work on the first tab?

Thanks so much for a wonderful plugin!

[sergeche]

By default, Tab handle is disabled when autocomplete popup is visible. You can:

1. Hide popup with Esc key and then expand abbreviation with Tab
2. Use Ctrl-E
3. Set "disable_tab_abbreviations_on_auto_complete": false preference in user’s Preferences.sublime-settings. It will force Emmet Tab handler to work even if autocomplete is visible.

[tysonforhire]

Perfect, thanks for the help! Awesome work!

[Esvalirion]

Добрый день!
Работало, работало, а потом вдруг перестало.
syntaxProfiles лежит где надо, в папке C:\Users\user\emmet
в Emmet.sublime-settings тоже пробовал написать всё, что выше, не помогает, строка экспандится в -webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;
Спасибо

[sergeche]

@Esvalirion не понял, в чём проблема

[Esvalirion]

После ":" стоит пробел, а после ";" пробела нет

[sergeche]

А почему после ; должен быть пробел? Если применяется фильтр s, который просто склеивает строки.

[Esvalirion]

Аа, вот оно что!
Простите, сглупил, нашёл нужные вещи css.valueSeparator и css.propertyEnd

[thezimmee]

When I have single line formatting for CSS enabled, it strips \n new lines from my snippets. Is there a way around this?