sergeche / livestyle Goto Github PK
View Code? Open in Web Editor NEWCSS Live Editing (old version; no longer supported)
CSS Live Editing (old version; no longer supported)
When receiving updates from DevTools, the incoming selection
property is [0, 0]
When accessing properties()
method of tree
, a list of mixin properties of current rule must be returned too, but marked as mixin
and excluded from patching
When multiple windows opened, changing file association in Chrome leads to very high CPU usage
Patching via CSSOM may not work in some cases (local files, CSS from different domain). Patcher would detect such cases and lower debounce time for actual source patching in DevTools
Should cache variable scope for each section and re-use it for each resolve
Selectors with variable references must be resolved to plain CSS selectors
Changing background: red
to background: blue
in browser results background: red + NaN
in editor
The following code:
.lock-mixin(@a) {
.inner-locked-mixin(@x: @a) when (@a = 1) {
a: @a;
x: @x;
}
}
.call-lock-mixin {
.lock-mixin(1);
.call-inner-lock-mixin {
.inner-locked-mixin();
}
}
...should generate
.call-lock-mixin .call-inner-lock-mixin {
a: 1;
x: 1;
}
Add support for formatting and code style detection of @media
rules.
While editing, sometimes document becomes invalid (for example, Invalid CSS structure
error). When this happens, it’s impossible to use live update because invalid document is cached and cannot be diff’ed
Variables are excluded from resolved tree thus can’t trigger updates. Need to compare plain LESS tree as diff, then resolve diff to plain selectors
Recent tests showed that safe patching wasn’t working at all. Need to write unit tests for this feature
Rule types to test:
@font-face
@page
@keyframe
Console says
No "blob:..." resource in styles cache
For deeply nested sections resolving is performed multiple times, e.g. intermediate selectors resolved multiple times but it’s not required.
In LESS (at least), arrays in expression must be concatenated with space, not comma:
.mixin-arguments (@width: 0px, ...) {
border: @arguments;
width: @width;
}
.arguments {
.mixin-arguments(1px, solid, black);
}
...should produce
.arguments {
border: 1px solid #000000;
width: 1px;
}
Add proper, Emmet-based support of vendor-prefixed properties and values
Available only inside guard conditions and returns true
only if no other mixin matches, false
otherwise.
.mixin(1) {x: 11}
.mixin(2) {y: 22}
.mixin(@x) when (default()) {z: @x}
div {
.mixin(3);
}
div.special {
.mixin(1);
}
If file in editor is empty, all incoming changes are omitted
And if it contains comments, it enters into infinite loop
In many cases, LESS resolver might be useless since properties might contain variable that don’t exist in current stylesheet. Need to find a way to include imports into a scope
When expression is evaluated, explicit strings are unquoted automatically:
.example{
@s: "/";
background-image: "@{s}a.png";
}
is transformed into
.example{
background-image: /a.png;
}
The live style should also support for <HTML>
New selectors/sections, created in source code, are lower-cased (normalized). Should use original case.
Every unsaved file is diff’ed against CSS syntax
Mixins can contain sections
Should honour when()
condition when resolving mixins
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.