Package Control install doesn't work

[rob-mcdonald]

When adding this repository via Package Control, the default settings file is empty. Possible naming confliction due to sublime-text repo name? When clicking on the chrome toolbar, it says something like Cannot find editor

[sergeche]

LiveStyle Alpha isn’t under Package Control (there’s old LiveStyle plugin), you should install it manually as described here: http://livestyle.emmet.io/alpha/

[rob-mcdonald]

Ah, ok cool. But perhaps you should change the docs as this line seems to indicate you can add the repository via Package Control:

You can also checkout git repo to get automatic updates if your have Package Control installed

Now I just have to get my head around how it works, but looks impressive ;)

[sergeche]

It’s just a temporary solution for hackers, final version will have automatic installers

[rob-mcdonald]

That's not me then! Really glad to see this is in active development, my current use-case is ridiculously slow with Parallels virtual disk. Hopefully this will save me having to wait for Gulp processing!

[sergeche]

Looking forward for your feedback :)

[rob-mcdonald]

Yeah I guess I'm just wondering the best way to set up. As I'd never be touching the styles.css you have this structure:

main.less
  @import "base.less"
  @import "layout.less"
  @import "variables.less"
  @import "mixins.less"
  @import "styles.less"

I'm not sure the optimal way to notify LiveStyle to use the correct files:

• styles.css should be mapped to ... ?
• then just add all of the less files?

And if you want to make sure that LiveStyle picks up all the correct variables, as in when I change variables.less all the instances of that variable change, would I need to set the globals like so?

"livestyle": {
  "globals": ["./less/variables.less", "/path/to/global/mixins.less"]
}

There's a couple of issues I'm seeing already but I want to make sure I'm using the plugin as intended first. If anything is repeatable I'll add it to the issues (is this for Alpha only or just for general issue tracking?)

[sergeche]

styles.css should be mapped to ... ?

You map files that should exchange updates. For example, if your main.less (with all those imports) is compiled to main.css and you’re editing styles.less, then your should map styles.less with main.css. In this case all updates from editor’s styles.less will be applied to browser’s main.css and vice versa.

You can also create a new CSS file in browser and map it with editor file to see how your changes affect browser.

And if you want to make sure that LiveStyle picks up all the correct variables, as in when I change variables.less all the instances of that variable change, would I need to set the globals like so?

Currently, LiveStyle won’t update anything if you just change variables.less because LiveStyle maps changes from currently editing file to browser’s one. E.g. it’s doesn’t recompile all files that depend on current one, it simply transmits changes between two files. If your variables.less doesn’t produce any CSS when compiled then no changes will be transmitted. In future, it might be possible to detect all variable references in project and update other files accordingly.

[rob-mcdonald]

Ah, I see. So ...

• You can only exchange updates between existing files (however many) that are actually linked within the current page on dev tools. So if I had 3 files included on index.html I could map 3 less files.
• But you can add as many less/css files as required, only there won't be any updates exchanged, just rendering on the browser.

So the globals config could be used to add variables.less file as a dependency? i.e. access the variable @color: red from variables.less within the file you're currently editing styles.less?

I'd love to see a Codekit style feature to detect all the references, I might move to Linux soon and this would help massively!

[sergeche]

So if I had 3 files included on index.html I could map 3 less files.

You can map as much files as you want if you’re interested in editor→browser updates only (e.g. map base.less, layout.less, styles.less to main.css).However, if you edit main.css in DevTools (and allow browser→editor updates) these updates will be spreaded across all mapped LESS files.

You can also create temporary files in browser via Add stylesheet button and use them to play around with new editor stylesheets.

BTW, it’s not necessary to have a physical file in editor: you can create a new, untitled file or open it via FTP/SSH/whatever and use it for live updates.

So the globals config could be used to add variables.less file as a dependency? i.e. access the variable @color: red from variables.less within the file you're currently editing styles.less?

Exactly!

I'd love to see a Codekit style feature to detect all the references

AFAIK Codekit simply recompiles all files upon save, it doesn’t detect any variable references. While LiveStyle compiles on-the-fly currently edited file and transmits updated CSS selectors only. So you don’t have to wait until full (unnecessary) CSS is compiled and you don’t depend on specific build tools.

[rob-mcdonald]

Ah I see, the UI doesn't make that immediately clear. Perhaps a tree-style layout might make this a little more obvious:

Current UI

Suggested UI

// Setting: editor ⇄ browser

main.css // When changed edits all files in the tree
 \___ layout.less // Edit changes browser only
 \___ header.less  // Edit changes browser only
 \___ typography.less  // Edit changes browser only

other.less // Browser only changes

Whether that's better or worse I'm not sure, but it's clearer in my mind. Everything under main.css would be linked, and everything else is tests that could be merged into the file structure eventually.

As you mention Codekit recompiles upon save, in most circumstances we'd be compiling once we've used the above process. So often, there'd not be much point in editing main.css.

Other things

Add stylesheet I can see the Add stylesheet adds a file like blob:null/7b445b63-6cb8-46f4-9f7f-f565748cf98e which can be edited in Source. I'd expect that to generate a new untitled file tab in Sublime if the editor→browser does a similar job.

Globals config I think a little more info on variables in the docs would be helpful. Currently it seems the Chrome plugin caches old variables so if I change @color: red to @color: blue in variables.less (the file linked via project config globals) — regardless of how many times I refresh or "turn it off and on again" it won't display. I'd have to set it once and not change it (or remove and re-add variable in all the places it's referenced in the mapped .less file). So in this sense, the dependencies doesn't work quite as expected (from the explanation in the docs).

Does @import work better? If the variable is within the actual mapped file it seems to refresh live without an issue so far.

It would be nice to see globals refresh somehow, if possible in future.

Refresh HTML

LiveStyle keeps styles on page refresh (sometimes it seems a little buggy though). It'd be nice if HTML was refreshed similar to CSS.

Other suggestions? Is there a suggestions box somewhere, or shall I add them to the issues on this repository? Appreciate your comments!

[rob-mcdonald]

Quick update: If I redeclare the @color variable within the mapped .less file, it's still cached. Regardless of whether it's @import or global:

@import 'variables.less'

@variable: blue;
@color: pink;

html {
  // background: @color;
  background: @color;
}
h1 {
  color: @color;
  display: display;
}
.wrapper {
  background: black;
  border: 1px solid black;
  color: blue;
}

[sergeche]

Thanks fir your feedback!

Suggested UI

Looks pretty complex for me. I want to get rid of complex UI as much as possible. The idea is to see how changes in file you’re editing in browser and use DevTools powers to tweak styles and get those changes back to editor. Providing complex mappings will obscure users.

I'd expect that to generate a new untitled file tab in Sublime if the editor→browser does a similar job.

Adding a stylesheet doesn’t mean you have to create a new file. You can use existing file just to check how your changes are reflected in browser.

I think a little more info on variables in the docs would be helpful

There isn’t much docs know, because I’m testing LiveStyle engine for live bi-directional editing (that’s why it’s in alpha stage). Final release will have docs and tutorials.

It would be nice to see globals refresh somehow, if possible in future.

OK, I’ll think about it

LiveStyle keeps styles on page refresh (sometimes it seems a little buggy though).

It automatically applies unsaved changes upon page refresh. If you experience issues with it, you can open background page of LiveStyle extension see in logs what updates are applied

Is there a suggestions box somewhere

https://github.com/livestyle/issues/issues

[rob-mcdonald]

No problem! It's a great plugin, I'll be giving it a whirl for a fairly large project so any suggestions I can give I will.

Suggested UI

Totally understand, perhaps you could just make this clearer in the docs when it comes out of Alpha, as it's a little difficult to wrap your head around — although, I'll personally be more likely to work editor→browser anyway!

I'd expect ...

Yes, I understand this — you can easily copy and paste styles from the DevTools with a "live" generated stylesheet. But it'd might be handy to generate the css in Sublime Text too (perhaps an advanced option?). But as above, I don't think I'll be using that feature too often.

Docs

Understood, I don't expect there to be — but it seems some of the "How to use" are for the old version, so making it clearer or keeping Alpha self-contained might avoid confusion!

Globals

Great!

Page refresh

Will do.

Suggestion box

Ah, right so it's an "all comments" kinda thing. Good stuff.

Thanks again, I think you can close this out for now :+1:

[rob-mcdonald]

I should make it clear that in the redeclare cache issue, I've declared @color already in @import (or global).

That's all for now!! :)