Skip to content

Commit bfedef1

Browse files
author
Krasimir Tsonev
committed
Playground improvements + covering multiple cssx definitions
1 parent 67b38cc commit bfedef1

File tree

11 files changed

+136
-58
lines changed

11 files changed

+136
-58
lines changed

‎lib/cssxler.js

+34-34
Original file line numberDiff line numberDiff line change
@@ -57,24 +57,24 @@ return /******/ (function(modules) { // webpackBootstrap
5757
var AST = __webpack_require__(1);
5858
var traverse = __webpack_require__(3);
5959
var generate = __webpack_require__(5).default;
60-
var merge = __webpack_require__(393);
60+
var merge = __webpack_require__(386);
6161

6262
var visitors = {
63-
CSSXDefinition: __webpack_require__(386),
64-
CSSXElement: __webpack_require__(387),
65-
CSSXProperty: __webpack_require__(388),
66-
CSSXRule: __webpack_require__(389),
67-
CSSXRules: __webpack_require__(390),
68-
CSSXSelector: __webpack_require__(391),
69-
CSSXValue: __webpack_require__(392)
63+
CSSXDefinition: __webpack_require__(387),
64+
CSSXElement: __webpack_require__(388),
65+
CSSXProperty: __webpack_require__(389),
66+
CSSXRule: __webpack_require__(390),
67+
CSSXRules: __webpack_require__(391),
68+
CSSXSelector: __webpack_require__(392),
69+
CSSXValue: __webpack_require__(393)
7070
};
7171

7272
module.exports = function (code, generateOptions) {
7373
var ast = AST(code);
7474

7575
traverse(ast.program, visitors);
7676
return generate(
77-
ast,
77+
ast,
7878
merge({
7979
minified: false,
8080
compact: false,
@@ -41894,18 +41894,35 @@ return /******/ (function(modules) { // webpackBootstrap
4189441894
/* 386 */
4189541895
/***/ function(module, exports) {
4189641896

41897-
// var t = require('babel-types');
41897+
module.exports = function extend(target, source) {
41898+
var prop;
4189841899

41900+
target = target || {};
41901+
for (prop in source) {
41902+
if (typeof source[prop] === 'object') {
41903+
target[prop] = extend(target[prop], source[prop]);
41904+
} else {
41905+
target[prop] = source[prop];
41906+
}
41907+
}
41908+
return target;
41909+
};
41910+
41911+
41912+
/***/ },
41913+
/* 387 */
41914+
/***/ function(module, exports) {
41915+
4189941916
module.exports = {
4190041917
enter: function (node, parent, index) {},
4190141918
exit: function (node, parent, index) {
41902-
parent[index] = node.body[0];
41919+
parent.splice.apply(parent, [index, 1].concat(node.body));
4190341920
}
4190441921
};
4190541922

4190641923

4190741924
/***/ },
41908-
/* 387 */
41925+
/* 388 */
4190941926
/***/ function(module, exports, __webpack_require__) {
4191041927

4191141928
var t = __webpack_require__(41);
@@ -41933,7 +41950,7 @@ return /******/ (function(modules) { // webpackBootstrap
4193341950

4193441951

4193541952
/***/ },
41936-
/* 388 */
41953+
/* 389 */
4193741954
/***/ function(module, exports, __webpack_require__) {
4193841955

4193941956
var t = __webpack_require__(41);
@@ -41947,7 +41964,7 @@ return /******/ (function(modules) { // webpackBootstrap
4194741964

4194841965

4194941966
/***/ },
41950-
/* 389 */
41967+
/* 390 */
4195141968
/***/ function(module, exports, __webpack_require__) {
4195241969

4195341970
var t = __webpack_require__(41);
@@ -41961,7 +41978,7 @@ return /******/ (function(modules) { // webpackBootstrap
4196141978

4196241979

4196341980
/***/ },
41964-
/* 390 */
41981+
/* 391 */
4196541982
/***/ function(module, exports, __webpack_require__) {
4196641983

4196741984
var t = __webpack_require__(41);
@@ -41975,7 +41992,7 @@ return /******/ (function(modules) { // webpackBootstrap
4197541992

4197641993

4197741994
/***/ },
41978-
/* 391 */
41995+
/* 392 */
4197941996
/***/ function(module, exports, __webpack_require__) {
4198041997

4198141998
var t = __webpack_require__(41);
@@ -41989,7 +42006,7 @@ return /******/ (function(modules) { // webpackBootstrap
4198942006

4199042007

4199142008
/***/ },
41992-
/* 392 */
42009+
/* 393 */
4199342010
/***/ function(module, exports, __webpack_require__) {
4199442011

4199542012
var t = __webpack_require__(41);
@@ -42002,23 +42019,6 @@ return /******/ (function(modules) { // webpackBootstrap
4200242019
};
4200342020

4200442021

42005-
/***/ },
42006-
/* 393 */
42007-
/***/ function(module, exports) {
42008-
42009-
module.exports = function extend(target, source) {
42010-
target = target || {};
42011-
for (var prop in source) {
42012-
if (typeof source[prop] === 'object') {
42013-
target[prop] = extend(target[prop], source[prop]);
42014-
} else {
42015-
target[prop] = source[prop];
42016-
}
42017-
}
42018-
return target;
42019-
};
42020-
42021-
4202242022
/***/ }
4202342023
/******/ ])
4202442024
});

‎lib/cssxler.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎playground/try-it-out/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@
1212
<div class="left js-code-editor"></div>
1313
<div class="right">
1414
<div class="output js-output-editor"></div>
15-
<div class="nav-output">
15+
<div class="nav-output js-nav-output">
1616
<a href="javascript: void(0);" class="js-view-ast"></a>
1717
<a href="javascript: void(0);" class="js-minify"></a>
1818
</div>
1919
</div>
2020
</div>
21+
<div class="message js-message">dsadsa</div>
2122
<script src="../../lib/cssx.js"></script>
2223
<script src="../../lib/cssxler.js"></script>
2324
<script src="./vendor/codemirror/codemirror.js"></script>

‎playground/try-it-out/script.js

+61-16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
var el = function (sel) { return document.querySelector(sel); };
2-
var clone = function (o) { return JSON.parse(JSON.stringify(o)); };
1+
// ********************************************************************
2+
// Settings
33

44
var CODEMIRROR_SETTINGS = {
55
value: '',
@@ -11,13 +11,48 @@ var CODEMIRROR_SETTINGS = {
1111
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
1212
};
1313

14+
// ********************************************************************
15+
// Helpers
16+
17+
var toggling = function (container, label, callback) {
18+
var storageKey = 'cssx-' + label;
19+
var is = localStorage && localStorage.getItem(storageKey) === 'true';
20+
var render = function () {
21+
container.innerHTML = (is ? '&#x2714;' : '&#x2718;') + ' ' + label;
22+
callback(is);
23+
};
24+
25+
container.addEventListener('click', function () {
26+
localStorage && localStorage.setItem(storageKey, is = !is);
27+
render();
28+
});
29+
render();
30+
};
31+
var el = function (sel) { return document.querySelector(sel); };
32+
var clone = function (o) { return JSON.parse(JSON.stringify(o)); };
33+
var saveCode = function (code) {
34+
if (typeof localStorage !== 'undefined') {
35+
localStorage.setItem('cssx-playground-code', code);
36+
}
37+
return code;
38+
};
39+
var getCode = function () {
40+
if (typeof localStorage !== 'undefined') {
41+
return localStorage.getItem('cssx-playground-code') || '';
42+
}
43+
};
44+
45+
// ********************************************************************
46+
// Renders
47+
1448
var renderEditor = function (onChange) {
1549
var container = el('.js-code-editor');
1650
var editor = CodeMirror(container, CODEMIRROR_SETTINGS);
1751

1852
editor.on('change', function () {
19-
onChange(editor.getValue());
53+
onChange(saveCode(editor.getValue()));
2054
});
55+
editor.setValue(getCode());
2156

2257
container.addEventListener('click', function () {
2358
editor.focus();
@@ -32,20 +67,29 @@ var renderOutput = function () {
3267
output = CodeMirror(el('.js-output-editor'), settings);
3368
return output;
3469
};
35-
var toggling = function (container, label, callback) {
36-
var storageKey = 'cssx-' + label;
37-
var is = localStorage && localStorage.getItem(storageKey) === 'true';
38-
var render = function () {
39-
container.innerHTML = (is ? '&#x2714;' : '&#x2718;') + ' ' + label;
40-
callback(is);
41-
};
70+
var renderMessage = function (message) {
71+
var container = el('.js-message');
4272

43-
container.addEventListener('click', function () {
44-
localStorage && localStorage.setItem(storageKey, is = !is);
45-
render();
46-
});
47-
render();
73+
container.style.display = 'block';
74+
container.innerHTML = message;
4875
};
76+
var renderOutMessage = function () {
77+
var container = el('.js-message');
78+
79+
container.style.display = 'none';
80+
container.innerHTML = '';
81+
};
82+
var renderError = function (message) {
83+
el('.js-output-editor').setAttribute('data-status', 'error');
84+
renderMessage('<span style="color:#F00">Error: ' + message + '</span>');
85+
};
86+
var renderOutError = function () {
87+
el('.js-output-editor').setAttribute('data-status', '');
88+
renderOutMessage();
89+
};
90+
91+
// ********************************************************************
92+
// Boot
4993

5094
var init = function () {
5195
var ast, transpiled;
@@ -63,9 +107,10 @@ var init = function () {
63107
ast = cssxler.ast(value);
64108
transpiled = cssxler(value, transpilerOpts);
65109
print();
110+
renderOutError();
66111
} catch(err) {
67112
// console.log(err);
68-
printText(err.message);
113+
renderError(err.message);
69114
}
70115
};
71116
var editor = renderEditor(render);

‎playground/try-it-out/styles.css

+15
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,12 @@ body {
4444
.CodeMirror {
4545
height: auto;
4646
}
47+
.output[data-status="error"] {
48+
border: 1px solid #F00;
49+
}
50+
.output[data-status="error"] .CodeMirror{
51+
opacity: 0.3;
52+
}
4753

4854
/* output navigation */
4955
.nav-output {
@@ -60,4 +66,13 @@ body {
6066
}
6167
.nav-output a:hover {
6268
text-decoration: underline;
69+
}
70+
71+
/* message */
72+
.message {
73+
position: absolute;
74+
bottom: 10px;
75+
left: 10px;
76+
max-width: 50%;
77+
background: #FFF;
6378
}

‎src/transpiler/helpers/merge.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
module.exports = function extend(target, source) {
2+
var prop;
3+
24
target = target || {};
3-
for (var prop in source) {
5+
for (prop in source) {
46
if (typeof source[prop] === 'object') {
57
target[prop] = extend(target[prop], source[prop]);
68
} else {

‎src/transpiler/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ module.exports = function (code, generateOptions) {
1818

1919
traverse(ast.program, visitors);
2020
return generate(
21-
ast,
21+
ast,
2222
merge({
2323
minified: false,
2424
compact: false,

‎src/transpiler/visitors/CSSXDefinition.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
// var t = require('babel-types');
2-
31
module.exports = {
42
enter: function (node, parent, index) {},
53
exit: function (node, parent, index) {
6-
parent[index] = node.body[0];
4+
parent.splice.apply(parent, [index, 1].concat(node.body));
75
}
86
};

‎test/fixtures/transpiler/3/actual.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
cssx(
2+
body {
3+
margin: 10px;
4+
font-size: 20px;
5+
}
6+
.header p > span {
7+
padding-top: 1em;
8+
}
9+
);

‎test/fixtures/transpiler/3/expected.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
cssx.add('body', {
2+
'margin': '10px',
3+
'font-size': '20px'
4+
})
5+
cssx.add('.header p > span', {
6+
'padding-top': '1em'
7+
})
8+
;

‎test/transpiler.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ var chai = require('chai');
77
var expect = chai.expect;
88

99
var tests = [];
10-
// var only = '1,2'.split(',');
10+
var only = '3'.split(',');
1111

1212
glob.sync(__dirname + '/fixtures/transpiler/**/actual.js').forEach(function (actual) {
1313
var testDir = path.dirname(actual), testDirParts = testDir.split('/');

0 commit comments

Comments
 (0)