' + JSON.stringify(styles, null, 2) + '';
5 | }
6 |
7 | init();
--------------------------------------------------------------------------------
/test/fixtures/cssx-complete/11/actual.js:
--------------------------------------------------------------------------------
1 | var stylesheet = cssx();
2 | stylesheet.add();
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/20/actual.js:
--------------------------------------------------------------------------------
1 | var obj = {
2 | styles: ,
9 | color: '#ff2244'
10 | };
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/26/actual.js:
--------------------------------------------------------------------------------
1 | var a =
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/5/expected.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var _1 = {},
3 | _2 = {};
4 | _2['margin'] = '10px';
5 | _1[a + b + "-to-" + (c + d) + "-from-" + (e + f)] = _2;
6 | return _1;
7 | }.apply(this))
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/7/expected.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var _1 = {},
3 | _2 = {};
4 | _2[a + b + "-to-" + (a + b) + "-from-" + (a + b)] = '10px';
5 | _1['body'] = _2;
6 | return _1;
7 | }.apply(this))
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/8/expected.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var _1 = {},
3 | _2 = {};
4 | _2['margin'] = a + b + "-to-" + (a + b) + "-from-" + (a + b);
5 | _1['body'] = _2;
6 | return _1;
7 | }.apply(this))
--------------------------------------------------------------------------------
/test/fixtures/cssx/5/actual.js:
--------------------------------------------------------------------------------
1 | module.exports = function (cssx) {
2 | var media = cssx.add({ 'a': {} });
3 |
4 | media.nested({ 'b': { c: 1 } }).nested({ 'f': { g: 1 } });
5 | media.nested({ 'd': { e: 1 } });
6 | };
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/16/actual.js:
--------------------------------------------------------------------------------
1 | sheet.define('text', function (value) {
2 | var parts = value.split(/, ?/);
3 | return cssx({
4 | font-size: `parts[0]`em;
5 | line-height: `parts[1]`em;
6 | })
7 | });
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/25/expected.js:
--------------------------------------------------------------------------------
1 | var a = (function () {
2 | var _1 = {},
3 | _2 = {};
4 | _2['color'] = 'red';
5 | _2['font-size'] = '12px';
6 | _1['button'] = _2;
7 | return _1;
8 | }.apply(this));
--------------------------------------------------------------------------------
/playground/postcss/dist/styles.css:
--------------------------------------------------------------------------------
1 | p small {
2 | font-size: 10px;
3 | }
4 | p {
5 | background: #F00;
6 | display: -webkit-box;
7 | display: -webkit-flex;
8 | display: -ms-flexbox;
9 | display: flex;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/cssx/src/helpers/goGlobal.js:
--------------------------------------------------------------------------------
1 | module.exports = function (api) {
2 | if (typeof global !== 'undefined') {
3 | global.cssx = api;
4 | }
5 | if (typeof window !== 'undefined') {
6 | window.cssx = api;
7 | }
8 | };
9 |
--------------------------------------------------------------------------------
/packages/cssx/src/helpers/isEmpty.js:
--------------------------------------------------------------------------------
1 | module.exports = function (obj) {
2 | var prop;
3 |
4 | for (prop in obj) {
5 | if (obj.hasOwnProperty(prop)) {
6 | return false;
7 | }
8 | }
9 | return true;
10 | };
11 |
--------------------------------------------------------------------------------
/playground/jss/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CSSX and JSS
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/31/actual.js:
--------------------------------------------------------------------------------
1 | var a = ;
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/22/expected.js:
--------------------------------------------------------------------------------
1 | var getStyles = function () {
2 | return (function () {
3 | var _2 = {},
4 | _3 = {};
5 | _3['margin'] = '10px';
6 | _2['body'] = _3;
7 | return _2;
8 | }.apply(this));
9 | };
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/33/actual.js:
--------------------------------------------------------------------------------
1 | var a =
--------------------------------------------------------------------------------
/packages/cssx-transpiler/src/helpers/isEmpty.js:
--------------------------------------------------------------------------------
1 | module.exports = function (obj) {
2 | var prop;
3 |
4 | for (prop in obj) {
5 | if (obj.hasOwnProperty(prop)) {
6 | return false;
7 | }
8 | }
9 | return true;
10 | };
11 |
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/28/actual.js:
--------------------------------------------------------------------------------
1 | var animName = 'my-animation';
2 | var a = ;
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/30/expected.js:
--------------------------------------------------------------------------------
1 | var a = (function () {
2 | var _1 = {},
3 | _2 = {};
4 | _2['background'] = ['red', 'linear-gradient(to right, red 0%, green 100%)'];
5 | _1['.container'] = _2;
6 | return _1;
7 | }.apply(this));
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/27/actual.js:
--------------------------------------------------------------------------------
1 | var minWidth = 1024;
2 |
3 | var a =
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/6/expected.js:
--------------------------------------------------------------------------------
1 | var getSelector = function () {
2 | return 'omg';
3 | };
4 | (function () {
5 | var _1 = {},
6 | _2 = {};
7 | _2['margin'] = '10px';
8 | _1[getSelector] = _2;
9 | return _1;
10 | }.apply(this))
--------------------------------------------------------------------------------
/test/fixtures/gulp-cssx/2/paragraph.js:
--------------------------------------------------------------------------------
1 | module.exports = function (sheet) {
2 | var p = sheet.add('p', );
5 | p.d();
10 | }
--------------------------------------------------------------------------------
/test/fixtures/cssx/2/expected.css:
--------------------------------------------------------------------------------
1 | body section {
2 | margin: 1em;
3 | }
4 | body p span {
5 | font-size: .9em;
6 | }
7 | body p small {
8 | font-size: .8em;
9 | }
10 | body p {
11 | font-size: 20px;
12 | }
13 | p {
14 | line-height: 20px;
15 | }
16 |
--------------------------------------------------------------------------------
/test/fixtures/cssx-complete/12/actual.js:
--------------------------------------------------------------------------------
1 | var stylesheet = cssx();
2 | stylesheet.add();
--------------------------------------------------------------------------------
/test/fixtures/cssx-complete/13/actual.js:
--------------------------------------------------------------------------------
1 | var stylesheet = cssx();
2 | stylesheet.add();
13 |
--------------------------------------------------------------------------------
/test/fixtures/cssx-complete/15/actual.js:
--------------------------------------------------------------------------------
1 | var a = ;
14 |
15 | var sheet = cssx();
16 | sheet.add(a);
--------------------------------------------------------------------------------
/test/fixtures/cssx/7/actual.js:
--------------------------------------------------------------------------------
1 | module.exports = function (cssx) {
2 | var getSelector = function () {
3 | return 'omg';
4 | };
5 | (function () {
6 | var s = {};
7 | s[getSelector()] = { margin: '10px'};
8 | cssx.add(s);
9 | }).apply(this);
10 | };
--------------------------------------------------------------------------------
/test/fixtures/cssx-complete/4/expected.css:
--------------------------------------------------------------------------------
1 | @keyframes ball-animation {
2 | 0% {
3 | transform: translateX(0);
4 | }
5 | 100% {
6 | transform: translateX(200px);
7 | }
8 | }
9 | .ball {
10 | animation: ball-animation 1s ease infinite alternate;
11 | }
12 |
--------------------------------------------------------------------------------
/test/fixtures/cssx-complete/8/expected.css:
--------------------------------------------------------------------------------
1 | #something p.small {
2 | font-size: 0.6em;
3 | }
4 | #something p {
5 | font-size: 20px;
6 | }
7 | #something {
8 | section {
9 | font-size: 20px;
10 | }
11 | section.small {
12 | font-size: 0.6em;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/15/actual.js:
--------------------------------------------------------------------------------
1 | cssx('selected')
2 | .clear()
3 | .add(cssx(
4 | li:nth-child(`index + 1`) {
5 | padding-left: 2em;
6 | }
7 | li:nth-child(`index + 1`) .btn {
8 | background-color: `this.state.color`;
9 | }
10 | ));
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/29/actual.js:
--------------------------------------------------------------------------------
1 | var a = ;
--------------------------------------------------------------------------------
/playground/postcss/src/paragraph.js:
--------------------------------------------------------------------------------
1 | module.exports = function (sheet) {
2 | var p = sheet.add({ 'p': });
6 |
7 | p.d();
12 | }
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/18/expected.js:
--------------------------------------------------------------------------------
1 | var obj = {
2 | styles: (function () {
3 | var _2 = {},
4 | _3 = {};
5 | _3['color'] = '#FF0';
6 | _3['margin'] = 0;
7 | _3['padding'] = 0;
8 | _2['body'] = _3;
9 | return _2;
10 | }.apply(this))
11 | };
--------------------------------------------------------------------------------
/test/fixtures/cssx/3/actual.js:
--------------------------------------------------------------------------------
1 | module.exports = function (cssx) {
2 | var selector = function (props) {
3 | var r = {};
4 | r['.something' + ' ' + '.else'] = props;
5 | return r;
6 | };
7 |
8 | cssx.add(selector.bind(null, { a: 1 })).descendant(selector.bind(null, { b: 2 }));
9 | };
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/16/expected.js:
--------------------------------------------------------------------------------
1 | sheet.define('text', function (value) {
2 | var parts = value.split(/, ?/);
3 | return (function () {
4 | var _3 = {};
5 | _3['font-size'] = parts[0] + "em";
6 | _3['line-height'] = parts[1] + "em";
7 | return _3;
8 | }.apply(this));
9 | });
--------------------------------------------------------------------------------
/packages/cssx/src/helpers/nextTick.js:
--------------------------------------------------------------------------------
1 | var cache = {};
2 |
3 | require('setimmediate');
4 |
5 | module.exports = function (work, id) {
6 | if (!cache[id]) {
7 | cache[id] = work;
8 | setImmediate(function () {
9 | delete cache[id];
10 | work();
11 | });
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/playground/transpiler-gulp/src/app.js:
--------------------------------------------------------------------------------
1 | var css = ;
13 |
14 | var sheet = cssx();
15 | sheet.add(css);
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/20/expected.js:
--------------------------------------------------------------------------------
1 | var obj = {
2 | styles: (function () {
3 | var _2 = {},
4 | _3 = {};
5 | _3['color'] = '#FFF';
6 | _3['margin'] = 0;
7 | _3['padding'] = 0;
8 | _2['body'] = _3;
9 | return _2;
10 | }.apply(this)),
11 | color: '#ff2244'
12 | };
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/3/expected.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var _1 = {},
3 | _2 = {},
4 | _3 = {};
5 | _2['margin'] = '10px';
6 | _2['font-size'] = '20px';
7 | _3['padding-top'] = '1em';
8 | _1['body'] = _2;
9 | _1['.header p > span'] = _3;
10 | return _1;
11 | }.apply(this))
12 | ;
--------------------------------------------------------------------------------
/test/fixtures/cssx-cli/to-css/src/index.js:
--------------------------------------------------------------------------------
1 | var settings = require('./utils/settings');
2 |
3 | var styles = function (margin) {
4 |
11 | };
12 |
13 | styles(15);
--------------------------------------------------------------------------------
/test/helpers/minifyCSS.js:
--------------------------------------------------------------------------------
1 | module.exports = function (css) {
2 | css = css.replace(/\n/g, '');
3 | css = css.replace(/ {/g, '{');
4 | css = css.replace(/; +/g, ';');
5 | css = css.replace(/{ +/g, '{');
6 | css = css.replace(/: /g, ':');
7 | css = css.replace(/} +}/g, '}}');
8 | return css;
9 | };
10 |
--------------------------------------------------------------------------------
/test/fixtures/cssx-complete/5/expected.css:
--------------------------------------------------------------------------------
1 | @keyframes ball-animation {
2 | 0% {
3 | transform: translateX(0);
4 | }
5 | 100% {
6 | transform: translateX(200px);
7 | }
8 | }
9 | .ball {
10 | animation: ball-animation 1s ease infinite alternate;
11 | .basket {
12 | margin: 10px;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/test/fixtures/cssx-complete/6/actual.js:
--------------------------------------------------------------------------------
1 |
2 | var index = 10;
3 | var color = '#fff';
4 |
5 | cssx('selected')
6 | .clear()
7 | .add(cssx(
8 | li:nth-child(`index + 1`) {
9 | padding-left: 2em;
10 | }
11 | li:nth-child(`index + 1`) .btn {
12 | background-color: `color`;
13 | }
14 | ));
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/24/actual.js:
--------------------------------------------------------------------------------
1 | var func = function () {
2 | return ;
15 | }
--------------------------------------------------------------------------------
/packages/cssx-loader/index.js:
--------------------------------------------------------------------------------
1 | var cssxTranspiler = require('cssx-transpiler');
2 |
3 | module.exports = function(code) {
4 | var CSSXTranspilerOptions = this.options && this.options.cssx ? this.options.cssx : { minify: false };
5 | this.cacheable && this.cacheable();
6 | return cssxTranspiler(code, CSSXTranspilerOptions);
7 | };
8 |
--------------------------------------------------------------------------------
/playground/transpiler/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "transpiler",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "node ./index.js"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "devDependencies": {
12 | "cssx-transpiler": "5.0.0"
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/26/expected.js:
--------------------------------------------------------------------------------
1 | var a = (function () {
2 | var _1 = {},
3 | _2 = {},
4 | _3 = {},
5 | _4 = {};
6 | _2['width'] = '100px';
7 | _3['width'] = '200px';
8 | _4['button'] = _3;
9 | _1['button'] = _2;
10 | _1['@media (min-width: 1024px)'] = _4;
11 | return _1;
12 | }.apply(this));
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/17/actual.js:
--------------------------------------------------------------------------------
1 | cssx(
2 | .left {
3 | margin: `value`px;
4 | background-image: `
5 | showImages.reduce(function(value, image) {
6 | value.push('site/imgs/' + value);
7 | return value;
8 | }, []).join(',')
9 | `;
10 | (wmo)animation: snow 10s linear infinite;
11 | }
12 | )
--------------------------------------------------------------------------------
/playground/transpiler/index.js:
--------------------------------------------------------------------------------
1 | // var cssxTranspiler = require('../../packages/cssx-transpiler/lib/cssx-transpiler');
2 | var cssxTranspiler = require('cssx-transpiler');
3 | var fs = require('fs');
4 |
5 | var code = fs.readFileSync('./file.js', { encoding: 'utf8' }).toString();
6 |
7 | console.log(cssxTranspiler(code, { minified: false, format: 'object' }));
--------------------------------------------------------------------------------
/test/fixtures/cssx-complete/10/expected.css:
--------------------------------------------------------------------------------
1 | #component p {
2 | font-size: 10px;
3 | }
4 | #component b {
5 | margin-top: 10px;
6 | }
7 | #component header a {
8 | display: block;
9 | }
10 | @media (max-width: 600px) {
11 | #component header a {
12 | display: inline;
13 | }
14 | }
15 | #component footer p {
16 | float: left;
17 | }
18 |
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/12/expected.js:
--------------------------------------------------------------------------------
1 | var sheet = (function () {
2 | var _1 = {},
3 | _2 = {};
4 | _2['margin'] = 0;
5 | _2['padding'] = 0;
6 | _1['body'] = _2;
7 | return _1;
8 | }.apply(this));
9 |
10 | sheet.add('p', (function () {
11 | var _4 = {};
12 | _4['font-size'] = '10px';
13 | return _4;
14 | }.apply(this)));
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/28/expected.js:
--------------------------------------------------------------------------------
1 | var animName = 'my-animation';
2 | var a = (function () {
3 | var _1 = {},
4 | _2 = {},
5 | _3 = {},
6 | _4 = {};
7 | _2['opacity'] = 0;
8 | _3['opacity'] = 1;
9 | _4['from'] = _2;
10 | _4['to'] = _3;
11 | _1["@keyframes " + animName] = _4;
12 | return _1;
13 | }.apply(this));
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/29/expected.js:
--------------------------------------------------------------------------------
1 | var a = (function () {
2 | var _1 = {},
3 | _2 = {};
4 | _2['font-family'] = '\'MyWebFont\'';
5 | _2['src'] = ['url(\'webfont.eot\')', 'url(\'webfont.eot?#iefix\') format(\'embedded-opentype\')', 'url(\'webfont.woff2\') format(\'woff2\')'];
6 | _1['@font-face'] = _2;
7 | return _1;
8 | }.apply(this));
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/31/expected.js:
--------------------------------------------------------------------------------
1 | var a = (function () {
2 | var _1 = {},
3 | _2 = {},
4 | _3 = {},
5 | _4 = {};
6 | _2['margin'] = 0;
7 | _3['font-size'] = '20px';
8 | _3['letter-height'] = '10px';
9 | _4['.nav'] = _2;
10 | _4['&:hover'] = _3;
11 | _1['.container'] = _4;
12 | return _1;
13 | }.apply(this));
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/33/expected.js:
--------------------------------------------------------------------------------
1 | var a = (function () {
2 | var _1 = {},
3 | _2 = {},
4 | _3 = {},
5 | _4 = {},
6 | _5 = {};
7 | _2['margin'] = '10px';
8 | _3['padding'] = '10px';
9 | _4['prop'] = 'value';
10 | _5['p'] = [_2, _3];
11 | _5['other'] = _4;
12 | _1['header'] = _5;
13 | return _1;
14 | }.apply(this));
--------------------------------------------------------------------------------
/playground/jspm/build.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["lib/styles.js","lib/index.js"],"names":[],"mappings":"AAAA;AAAA;AACI;AAAY;AAAe;AAD/B;AACE;AACI;AACJ;AACA;AACA;EACF;AANA;AAAkH;AAMpG;;;;;;ACJd,WAAS,IAAI,GAAG;AACd,YAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC;GAChG;;;;;;;AAED,UAAI,EAAE,CAAC","file":"build.js"}
--------------------------------------------------------------------------------
/test/fixtures/cssx-complete/9/actual.js:
--------------------------------------------------------------------------------
1 | var func = function () {
2 | return ;
15 | }
16 |
17 | var sheet = ;
18 | sheet.add(func());
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/15/expected.js:
--------------------------------------------------------------------------------
1 | cssx('selected').clear().add((function () {
2 | var _2 = {},
3 | _3 = {},
4 | _4 = {};
5 | _3['padding-left'] = '2em';
6 | _4['background-color'] = this.state.color;
7 | _2["li:nth-child(" + (index + 1) + ")"] = _3;
8 | _2["li:nth-child(" + (index + 1) + ") .btn"] = _4;
9 | return _2;
10 | }.apply(this)));
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/27/expected.js:
--------------------------------------------------------------------------------
1 | var minWidth = 1024;
2 |
3 | var a = (function () {
4 | var _1 = {},
5 | _2 = {},
6 | _3 = {},
7 | _4 = {};
8 | _2['width'] = '100px';
9 | _3['width'] = '200px';
10 | _4['button'] = _3;
11 | _1['button'] = _2;
12 | _1["@media (min-width: " + minWidth + "px)"] = _4;
13 | return _1;
14 | }.apply(this));
--------------------------------------------------------------------------------
/test/fixtures/cssx/4/actual.js:
--------------------------------------------------------------------------------
1 | module.exports = function (cssx) {
2 | var selector = function (props) {
3 | var r = {};
4 | r['.something' + ' ' + '.else'] = props;
5 | return r;
6 | };
7 | var props = function (value) {
8 | return { p: value };
9 | };
10 |
11 | cssx.add(selector.bind(null, props(1))).descendant(selector.bind(null, props(2)));
12 | };
--------------------------------------------------------------------------------
/test/fixtures/cssx-complete/3/actual.js:
--------------------------------------------------------------------------------
1 | var A = {
2 | size: 20
3 | };
4 | var B = {
5 | size: 30
6 | };
7 | var stylesheet = cssx();
8 |
9 | var generateSize = function (selector) {
10 | stylesheet.add();
15 | };
16 |
17 | generateSize.call(A, 'body');
18 | generateSize.call(B, 'p');
--------------------------------------------------------------------------------
/playground/jspm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | JSPM example
6 |
7 |
8 |
9 |
10 |
11 |
14 |
15 |
--------------------------------------------------------------------------------
/test/fixtures/cssx/2/actual.js:
--------------------------------------------------------------------------------
1 | module.exports = function (styles) {
2 | var b = styles.add({ 'body': {} });
3 | var p = b.descendant({ 'p': { 'font-size': '20px' }});
4 |
5 | b.descendant({ 'section': { 'margin': '1em' }});
6 | p.descendant({ 'small': { 'font-size': '.8em' }});
7 | p.descendant({ 'span': { 'font-size': '.9em' }});
8 | styles.add({ 'p': { 'line-height': '20px' }});
9 | };
--------------------------------------------------------------------------------
/packages/cssx-transpiler/src/helpers/merge.js:
--------------------------------------------------------------------------------
1 | module.exports = function extend(target, source) {
2 | var prop;
3 |
4 | target = target || {};
5 | for (prop in source) {
6 | if (typeof source[prop] === 'object') {
7 | target[prop] = extend(target[prop], source[prop]);
8 | } else {
9 | target[prop] = source[prop];
10 | }
11 | }
12 | return target;
13 | };
14 |
--------------------------------------------------------------------------------
/packages/rollup-plugin-cssx/rollup.config.js:
--------------------------------------------------------------------------------
1 | import buble from 'rollup-plugin-buble';
2 |
3 | export default {
4 | entry: 'src/index.js',
5 | plugins: [ buble() ],
6 | targets: [
7 | {
8 | format: 'cjs',
9 | dest: 'dist/rollup-plugin-cssx.cjs.js'
10 | },
11 | {
12 | format: 'es6',
13 | dest: 'dist/rollup-plugin-cssx.es.js'
14 | }
15 | ]
16 | };
17 |
--------------------------------------------------------------------------------
/playground/transpiler-browserify/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "transpiler",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "node ./index.js"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "devDependencies": {
12 | "browserify": "13.0.0"
13 | },
14 | "scripts": {
15 | "test": "node index.js"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/17/expected.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var _1 = {},
3 | _2 = {};
4 | _2['margin'] = value + "px";
5 | _2['background-image'] = showImages.reduce(function (value, image) {
6 | value.push('site/imgs/' + value);return value;
7 | }, []).join(',');
8 | _2['(wmo)animation'] = 'snow 10s linear infinite';
9 | _1['.left'] = _2;
10 | return _1;
11 | }.apply(this))
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/19/actual.js:
--------------------------------------------------------------------------------
1 | var obj = {
2 | styles: ,
15 | color: '#FF0'
16 | };
--------------------------------------------------------------------------------
/test/fixtures/cssx-complete/7/actual.js:
--------------------------------------------------------------------------------
1 | var ratio = 1.2;
2 | var getStyles = function (size) {
3 | return (
4 |
9 | );
10 | }
11 |
12 | var sheet = cssx();
13 | sheet.add();
19 | sheet.add(getStyles(10));
--------------------------------------------------------------------------------
/playground/transpiler-webpack/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "transpiler",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "webpack -w"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "devDependencies": {
12 | "cssx-loader": "5.0.0",
13 | "webpack": "1.12.9"
14 | },
15 | "scripts": {
16 | "test": "webpack"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/test/fixtures/cssx-complete/4/actual.js:
--------------------------------------------------------------------------------
1 | var stylesheet = cssx();
2 | var animationApply = 'ball-animation 1s ease infinite alternate';
3 | var animation = stylesheet.add();
--------------------------------------------------------------------------------
/playground/postcss/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var rename = require('gulp-rename');
3 | var cssx = require('gulp-cssx');
4 | var postcss = require('gulp-postcss');
5 |
6 | gulp.task('default', function () {
7 | gulp.src('./src/index.js')
8 | .pipe(cssx({ execute: true }))
9 | .pipe(rename('styles.css'))
10 | .pipe( postcss([ require('autoprefixer') ]) )
11 | .pipe(gulp.dest('./dist'));
12 | });
--------------------------------------------------------------------------------
/test/fixtures/cssx-complete/14/expected.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: Dosis;
3 | font-weight: 400;
4 | src: './fonts/Dosis-ExtraLight.ttf';
5 | }
6 | @font-face {
7 | font-family: Lato;
8 | font-weight: 300;
9 | src: './fonts/Lato-Hairline.ttf';
10 | }
11 | @font-face {
12 | font-family: Dato;
13 | font-weight: 500;
14 | src: './fonts/Dato-Hairline.ttf';
15 | }
16 | body {
17 | margin: 10px;
18 | }
19 |
--------------------------------------------------------------------------------
/playground/postcss/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "postcss",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "gulp"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "devDependencies": {
12 | "autoprefixer": "6.3.3",
13 | "gulp": "3.9.1",
14 | "gulp-cssx": "5.0.0",
15 | "gulp-postcss": "6.1.0",
16 | "gulp-rename": "1.2.2"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/playground/try-it-out/default.js:
--------------------------------------------------------------------------------
1 | var DefaultStyles = "var sheet = cssx();\n\nsheet.add();\n\
7 | \n\
8 | var size = 10;\n\
9 | var ratio = 1.5;\n\
10 | \n\
11 | sheet.add();";
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/14/actual.js:
--------------------------------------------------------------------------------
1 | var sheet = cssx();
2 |
3 | cssx(
4 | body {
5 | color: #000;
6 | }
7 | body.error {
8 | color: #F00;
9 | }
10 | );
11 |
12 | sheet.add(cssx(
13 | p {
14 | font-size: 10px;
15 | line-height: 12px;
16 | }
17 | ul > foo {
18 | margin: 0;
19 | padding: 2em;
20 | }
21 | ));
22 |
23 | var test = cssx({
24 | border: solid 1px #000;
25 | background: #F00;
26 | });
--------------------------------------------------------------------------------
/packages/cssx-transpiler/src/visitors/CSSXValue.js:
--------------------------------------------------------------------------------
1 | var t = require('babel-types');
2 | var parseExpressions = require('../core/parseExpressions');
3 |
4 | module.exports = {
5 | enter: function (node, parent, index) {},
6 | exit: function (node, parent, index) {
7 | if (node.expressions) {
8 | parent[index] = parseExpressions(node);
9 | } else {
10 | parent[index] = t.stringLiteral(node.name);
11 | }
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/packages/cssx-transpiler/src/visitors/CSSXProperty.js:
--------------------------------------------------------------------------------
1 | var t = require('babel-types');
2 | var parseExpressions = require('../core/parseExpressions');
3 |
4 | module.exports = {
5 | enter: function (node, parent, index) {},
6 | exit: function (node, parent, index) {
7 | if (node.expressions) {
8 | parent[index] = parseExpressions(node);
9 | } else {
10 | parent[index] = t.stringLiteral(node.name);
11 | }
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/packages/cssx-transpiler/src/visitors/CSSXSelector.js:
--------------------------------------------------------------------------------
1 | var t = require('babel-types');
2 | var parseExpressions = require('../core/parseExpressions');
3 |
4 | module.exports = {
5 | enter: function (node, parent, index) {},
6 | exit: function (node, parent, index) {
7 | if (node.expressions) {
8 | parent[index] = parseExpressions(node);
9 | } else {
10 | parent[index] = t.stringLiteral(node.value);
11 | }
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/playground/react/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Navigation from './Navigation';
4 | import 'cssx';
5 |
6 | const ITEMS = [
7 | 'React',
8 | 'Angular',
9 | 'Vue',
10 | 'Ember',
11 | 'Knockout',
12 | 'Vanilla'
13 | ];
14 |
15 | window.onload = () => {
16 | ReactDOM.render(
17 |
14 |
15 | Grumpy wizards make toxic brew for the evil Queen and Jack.
16 | `;
--------------------------------------------------------------------------------
/playground/jspm/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jspm-examle",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "build": "./node_modules/.bin/jspm bundle lib/index"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "dependencies": {},
12 | "devDependencies": {
13 | "jspm": "0.16.34"
14 | },
15 | "jspm": {
16 | "devDependencies": {
17 | "babel": "npm:babel-core@^5.8.24",
18 | "babel-runtime": "npm:babel-runtime@^5.8.24",
19 | "core-js": "npm:core-js@^1.1.4"
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/playground/try-it-out/vendor/codemirror/addon/fold/foldgutter.css:
--------------------------------------------------------------------------------
1 | .CodeMirror-foldmarker {
2 | color: blue;
3 | text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
4 | font-family: arial;
5 | line-height: .3;
6 | cursor: pointer;
7 | }
8 | .CodeMirror-foldgutter {
9 | width: .7em;
10 | }
11 | .CodeMirror-foldgutter-open,
12 | .CodeMirror-foldgutter-folded {
13 | cursor: pointer;
14 | }
15 | .CodeMirror-foldgutter-open:after {
16 | content: "\25BE";
17 | }
18 | .CodeMirror-foldgutter-folded:after {
19 | content: "\25B8";
20 | }
21 |
--------------------------------------------------------------------------------
/playground/try-it-out-bin/vendor/codemirror/addon/fold/foldgutter.css:
--------------------------------------------------------------------------------
1 | .CodeMirror-foldmarker {
2 | color: blue;
3 | text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
4 | font-family: arial;
5 | line-height: .3;
6 | cursor: pointer;
7 | }
8 | .CodeMirror-foldgutter {
9 | width: .7em;
10 | }
11 | .CodeMirror-foldgutter-open,
12 | .CodeMirror-foldgutter-folded {
13 | cursor: pointer;
14 | }
15 | .CodeMirror-foldgutter-open:after {
16 | content: "\25BE";
17 | }
18 | .CodeMirror-foldgutter-folded:after {
19 | content: "\25B8";
20 | }
21 |
--------------------------------------------------------------------------------
/packages/cssx-transpiler/src/visitors/ReturnStatement.js:
--------------------------------------------------------------------------------
1 | var randomId = require('../helpers/randomId');
2 |
3 | module.exports = {
4 | enter: function (node, parent, index, context) {
5 | if (node.argument && node.argument.type === 'CSSXDefinition') {
6 | node.__id = context.nodeId = randomId();
7 | context.inReturnStatement = true;
8 | }
9 | },
10 | exit: function (node, parent, index, context) {
11 | if (context.nodeId === node.__id) {
12 | context.inReturnStatement = false;
13 | delete context.nodeId;
14 | delete node.__id;
15 | }
16 | }
17 | };
18 |
--------------------------------------------------------------------------------
/packages/browserify-cssx/README.md:
--------------------------------------------------------------------------------
1 | # Browserify transform plugin for CSSX
2 |
3 | ## Installation
4 |
5 | ```
6 | npm i browserify-cssx
7 | ```
8 |
9 | ## Usage
10 |
11 | ```js
12 | var browserify = require('browserify');
13 | var cssxTransform = require('../../packages/browserify-cssx');
14 |
15 | var CSSXTranspilerOptions = {
16 | minify: false
17 | };
18 |
19 | var b = browserify('src/index.js', {
20 | transform: [ cssxTransform ],
21 | cssx: CSSXTranspilerOptions
22 | });
23 | b.bundle(function (err, buff) {
24 | var code = buff.toString('utf8');
25 | console.log(code);
26 | });
27 | ```
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/10/actual.js:
--------------------------------------------------------------------------------
1 | cssx(
2 | @keyframes shake {
3 | 0% {
4 | transform: translateX(0);
5 | }
6 | 12.5% {
7 | transform: translateX(-40px) rotateY(-5deg);
8 | }
9 | 37.5% {
10 | transform: translateX(20px) rotateY(4deg);
11 | }
12 | 62.5% {
13 | transform: translateX(-10px) rotateY(-2deg);
14 | }
15 | 87.5% {
16 | transform: translateX(4px) rotateY(1deg);
17 | }
18 | 100% {
19 | transform: translateX(0);
20 | }
21 | from {
22 | a: 1;
23 | }
24 | to {
25 | b: 2;
26 | }
27 | }
28 | )
--------------------------------------------------------------------------------
/packages/cssx-transpiler/src/visitors/CallExpression.js:
--------------------------------------------------------------------------------
1 | var randomId = require('../helpers/randomId');
2 |
3 | module.exports = {
4 | enter: function (node, parent, index, context) {
5 | if (node.arguments.length === 1 && node.arguments[0].type === 'CSSXDefinition') {
6 | node.__id = context.nodeId = randomId();
7 | context.inCallExpression = true;
8 | }
9 | },
10 | exit: function (node, parent, index, context) {
11 | if (context.nodeId === node.__id) {
12 | context.inCallExpression = false;
13 | delete context.nodeId;
14 | delete node.__id;
15 | }
16 | }
17 | };
18 |
--------------------------------------------------------------------------------
/packages/cssx-transpiler/src/visitors/ObjectProperty.js:
--------------------------------------------------------------------------------
1 | var randomId = require('../helpers/randomId');
2 |
3 | module.exports = {
4 | enter: function (node, parent, index, context) {
5 | if (node.type === 'ObjectProperty' && node.value.type === 'CSSXDefinition') {
6 | node.__id = context.nodeId = randomId();
7 | context.inObjectProperty = true;
8 | }
9 | },
10 | exit: function (node, parent, index, context) {
11 | if (context.nodeId === node.__id) {
12 | context.inObjectProperty = false;
13 | delete context.nodeId;
14 | delete node.__id;
15 | }
16 | }
17 | };
18 |
--------------------------------------------------------------------------------
/playground/transpiler-webpack/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var path = require('path');
3 |
4 | module.exports = {
5 | entry: __dirname + '/src/app.js',
6 | devtool: 'source-map',
7 | output: {
8 | path: __dirname + '/dist',
9 | filename: 'bundle.js',
10 | library: 'MyApp',
11 | libraryTarget: 'umd',
12 | umdNamedDefine: true
13 | },
14 | cssx: {
15 | format: 'array'
16 | },
17 | module: {
18 | loaders: [
19 | {
20 | test: /(\.js)$/,
21 | loader: 'cssx-loader',
22 | exclude: /node_modules/
23 | }
24 | ]
25 | }
26 | };
27 |
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/32/expected.js:
--------------------------------------------------------------------------------
1 | var s = (function () {
2 | var _1 = {},
3 | _2 = {},
4 | _3 = {},
5 | _4 = {},
6 | _5 = {};
7 | _2['font-family'] = 'Dosis';
8 | _2['font-weight'] = 400;
9 | _2['src'] = '\'./fonts/Dosis-ExtraLight.ttf\'';
10 | _3['font-family'] = 'Lato';
11 | _3['font-weight'] = 300;
12 | _3['src'] = '\'./fonts/Lato-Hairline.ttf\'';
13 | _4['font-family'] = 'Dato';
14 | _4['font-weight'] = 500;
15 | _4['src'] = '\'./fonts/Dato-Hairline.ttf\'';
16 | _5['margin'] = '10px';
17 | _1['@font-face'] = [_2, _3, _4];
18 | _1['body'] = _5;
19 | return _1;
20 | }.apply(this));
--------------------------------------------------------------------------------
/site/default.js:
--------------------------------------------------------------------------------
1 | var color = '#004B63';
2 | var sheet = cssx();
3 |
4 | function letItSnow(bgColor) {
5 | sheet.add();
16 | };
17 |
18 | // --------------- the boring part ---------------
19 |
20 | document
21 | .querySelector('button')
22 | .addEventListener('click', function () {
23 | letItSnow(color);
24 | });
--------------------------------------------------------------------------------
/playground/jss/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var path = require('path');
3 |
4 | module.exports = {
5 | entry: __dirname + '/src/index.js',
6 | devtool: 'source-map',
7 | output: {
8 | path: __dirname + '/dist',
9 | filename: 'script.js'
10 | },
11 | cssx: {
12 | format: 'object'
13 | },
14 | module: {
15 | loaders: [
16 | {
17 | test: /(\.js)$/,
18 | loader: 'babel',
19 | exclude: /node_modules/
20 | },
21 | {
22 | test: /(\.js)$/,
23 | loader: 'cssx-loader',
24 | exclude: /node_modules/
25 | }
26 | ]
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/packages/cssx/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
--------------------------------------------------------------------------------
/playground/react/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React cssx example
6 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/cssx-transpiler/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
--------------------------------------------------------------------------------
/packages/cssx/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cssx",
3 | "version": "5.2.1",
4 | "description": "CSS in JavaScript",
5 | "main": "lib/cssx.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/krasimir/cssx/tree/master/packages/cssx"
9 | },
10 | "keywords": [
11 | "css",
12 | "jsx",
13 | "cssx"
14 | ],
15 | "author": {
16 | "name": "Krasimir Tsonev",
17 | "email": "info@krasimirtsonev.com",
18 | "url": "http://krasimirtsonev.com"
19 | },
20 | "license": "MIT",
21 | "bugs": {
22 | "url": "https://github.com/krasimir/cssx/issues"
23 | },
24 | "homepage": "https://github.com/krasimir/cssx"
25 | }
--------------------------------------------------------------------------------
/packages/cssx-cli/README.md:
--------------------------------------------------------------------------------
1 | # Command line tool for CSSX compilation
2 |
3 | Install it globally with `npm install -g cssx-cli`.
4 |
5 | ## Options
6 |
7 | * `-i` (input) - accepts a glob pattern or a single file
8 | * `-o` (output) - output directory
9 | * `-m` (mode) - `css` or `js`. It depends of what you want to produce at the end.
10 |
11 | ## Examples
12 |
13 | ### Transpilation of a single file
14 |
15 | ```
16 | cssx -i ./src/a.js -o ./dist
17 | ```
18 |
19 | ### Transpilation of multiple files
20 |
21 | ```
22 | cssx -i ./src/**/*.js -o ./dist
23 | ```
24 |
25 | ### Bundle to a single CSS file
26 |
27 | ```
28 | cssx -i ./src/index.js -o ./dist -m css
29 | ```
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 |
29 | scripts/*.txt
30 | TODO
--------------------------------------------------------------------------------
/playground/transpiler-webpack/src/app.js:
--------------------------------------------------------------------------------
1 | require('../../../packages/cssx/lib/cssx');
2 |
3 | var buttonStyle = require('./buttonStyle');
4 | var ballAnimation = require('./ballAnimation');
5 |
6 | document.querySelector('.btn1').addEventListener('click', buttonStyle);
7 | document.querySelector('.slider1').addEventListener('input', function (e) {
8 | document.querySelector('.endPointValue').innerHTML = e.target.value;
9 | ballAnimation.updateEndpoint(e.target.value);
10 | });
11 | document.querySelector('.slider2').addEventListener('input', function (e) {
12 | document.querySelector('.colorValue').innerHTML = e.target.value;
13 | ballAnimation.updateColor(e.target.value);
14 | });
--------------------------------------------------------------------------------
/playground/transpiler-gulp/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | // var cssx = require('../../packages/gulp-cssx');
3 | var cssx = require('gulp-cssx');
4 | var plumber = require('gulp-plumber');
5 |
6 | gulp.task('cssx', function() {
7 | gulp.src('src/*.js')
8 | .pipe(plumber())
9 | .pipe(cssx({
10 | format: 'object'
11 | }))
12 | .pipe(gulp.dest('./dist/'));
13 | });
14 |
15 | gulp.task('watch', function () {
16 | gulp.watch('src/*.js', ['cssx'])
17 | });
18 |
19 | gulp.task('tocss', function () {
20 | gulp.src('src/app.js')
21 | .pipe(cssx({
22 | execute: true
23 | }))
24 | .pipe(gulp.dest('./dist'));
25 | })
26 |
27 | gulp.task('default', ['cssx', 'watch']);
--------------------------------------------------------------------------------
/playground/react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-cssx-example",
3 | "version": "0.0.1",
4 | "description": "React example",
5 | "dependencies": {},
6 | "author": {
7 | "name": "Krasimir Tsonev",
8 | "email": "info@krasimirtsonev.com",
9 | "url": "http://krasimirtsonev.com"
10 | },
11 | "scripts": {
12 | "test-watch": "webpack --watch",
13 | "test": "webpack"
14 | },
15 | "devDependencies": {
16 | "babel-core": "6.5.2",
17 | "babel-loader": "6.2.2",
18 | "babel-preset-es2015": "6.5.0",
19 | "babel-preset-react": "6.5.0",
20 | "cssx": "5.0.0",
21 | "cssx-loader": "5.0.0",
22 | "react": "0.14.7",
23 | "react-dom": "0.14.7",
24 | "webpack": "1.12.2"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/packages/cssx-transpiler/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cssx-transpiler",
3 | "version": "5.2.1",
4 | "description": "Transpiler for CSSX syntax",
5 | "main": "lib/cssx-transpiler.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/krasimir/cssx/tree/master/packages/cssx-transpiler"
9 | },
10 | "keywords": [
11 | "css",
12 | "cssx",
13 | "transpiler",
14 | "json"
15 | ],
16 | "author": {
17 | "name": "Krasimir Tsonev",
18 | "email": "info@krasimirtsonev.com",
19 | "url": "http://krasimirtsonev.com"
20 | },
21 | "license": "MIT",
22 | "bugs": {
23 | "url": "https://github.com/krasimir/cssx/issues"
24 | },
25 | "homepage": "https://github.com/krasimir/cssx"
26 | }
--------------------------------------------------------------------------------
/packages/cssx-transpiler/src/core/AST.js:
--------------------------------------------------------------------------------
1 | var babylon = require('../vendor/babylon');
2 | var cssxPlugin = require('babylon-plugin-cssx');
3 |
4 | var BABYLON_PLUGINS = [
5 | 'jsx',
6 | 'flow',
7 | 'asyncFunctions',
8 | 'classConstructorCall',
9 | 'doExpressions',
10 | 'trailingFunctionCommas',
11 | 'objectRestSpread',
12 | 'decorators',
13 | 'classProperties',
14 | 'exportExtensions',
15 | 'exponentiationOperator',
16 | 'asyncGenerators',
17 | 'functionBind',
18 | 'functionSent',
19 | cssxPlugin
20 | ];
21 |
22 | module.exports = function (code, opts) {
23 | if (!opts) opts = {};
24 | return babylon.parse(code, {
25 | plugins: BABYLON_PLUGINS,
26 | sourceType: opts.sourceType || 'module'
27 | });
28 | };
29 |
--------------------------------------------------------------------------------
/packages/gulp-cssx/README.md:
--------------------------------------------------------------------------------
1 | # gulp-cssx
2 |
3 | Gulp plugin for [CSSX](https://github.com/krasimir/cssx) syntax.
4 |
5 | ## Installation
6 |
7 | `npm i gulp-cssx -D`
8 |
9 | ## Usage
10 |
11 | ```js
12 | var gulp = require('gulp');
13 | var cssx = require('gulp-cssx');
14 |
15 | gulp.task('cssx', function() {
16 | gulp.src('src/*.js')
17 | .pipe(cssx({
18 | minify: false
19 | }))
20 | .pipe(gulp.dest('./dist/'));
21 | });
22 |
23 | gulp.task('default', ['cssx']);
24 | ```
25 |
26 | or if you want to produce a CSS file:
27 |
28 | ```js
29 | var rename = require('gulp-rename');
30 |
31 | gulp.src('src/index.js')
32 | .pipe(cssx({ execute: true }))
33 | .pipe(rename('styles.css'))
34 | .pipe(gulp.dest('./dist'));
35 | ```
--------------------------------------------------------------------------------
/packages/rollup-plugin-cssx/README.md:
--------------------------------------------------------------------------------
1 | # Rollup transform plugin for CSSX
2 |
3 | ## Installation
4 |
5 | ```
6 | npm i rollup-plugin-cssx
7 | ```
8 |
9 | ## Usage
10 |
11 | ```js
12 | // rollup.config.js
13 | import cssx from 'rollup-plugin-cssx';
14 |
15 | export default {
16 | entry: 'src/index.js',
17 | dest: 'dist/my-lib.js',
18 | plugins: [
19 | cssx({
20 | // a minimatch pattern or an array of minimatch patterns relative to
21 | // process.cwd() specifying files to include
22 | include: 'src/**/*.js',
23 |
24 | // a minimatch pattern or an array of minimatch patterns relative to
25 | // process.cwd() specifying files to exclude
26 | exclude: 'src/exclude.js'
27 | })
28 | ]
29 | };
30 | ```
31 |
--------------------------------------------------------------------------------
/packages/rollup-plugin-cssx/src/index.js:
--------------------------------------------------------------------------------
1 | import cssxTranspiler from 'cssx-transpiler';
2 | import MagicString from 'magic-string';
3 | import { createFilter } from 'rollup-pluginutils';
4 |
5 | export default function cssx(options = {}) {
6 | const filter = createFilter(options.include, options.exclude);
7 |
8 | return {
9 | name: 'cssx',
10 |
11 | transform(code, id) {
12 | if (!filter(id)) {
13 | return null;
14 | }
15 |
16 | let s = new MagicString(code);
17 | let out = cssxTranspiler(code, options);
18 |
19 | s.overwrite(0, code.length, out.toString());
20 |
21 | return {
22 | code: s.toString(),
23 | map: s.generateMap({ hires: true })
24 | };
25 | }
26 | };
27 | }
28 |
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/4/expected.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var _1 = {},
3 | _2 = {},
4 | _3 = {},
5 | _4 = {},
6 | _5 = {},
7 | _6 = {},
8 | _7 = {};
9 | _2['content'] = '" "';
10 | _2['display'] = 'table';
11 | _2['clear'] = 'both';
12 | _3['font-size'] = '.2em';
13 | _4['font-size'] = '0.8em';
14 | _5['text-decoration'] = 'underline';
15 | _5['color'] = '#000';
16 | _6['p'] = _4;
17 | _6['p > a'] = _5;
18 | _7['text-decoration'] = 'none';
19 | _7['background'] = 'url("../public/bg.jpg") no-repeat';
20 | _1['section::after'] = _2;
21 | _1['section small'] = _3;
22 | _1['@media screen and (max-width: 1000px)'] = _6;
23 | _1['section p > a'] = _7;
24 | return _1;
25 | }.apply(this))
26 | ;
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/14/expected.js:
--------------------------------------------------------------------------------
1 | var sheet = cssx();
2 |
3 | (function () {
4 | var _1 = {},
5 | _2 = {},
6 | _3 = {};
7 | _2['color'] = '#000';
8 | _3['color'] = '#F00';
9 | _1['body'] = _2;
10 | _1['body.error'] = _3;
11 | return _1;
12 | }.apply(this))
13 | ;
14 |
15 | sheet.add((function () {
16 | var _5 = {},
17 | _6 = {},
18 | _7 = {};
19 | _6['font-size'] = '10px';
20 | _6['line-height'] = '12px';
21 | _7['margin'] = 0;
22 | _7['padding'] = '2em';
23 | _5['p'] = _6;
24 | _5['ul > foo'] = _7;
25 | return _5;
26 | }.apply(this)));
27 |
28 | var test = (function () {
29 | var _9 = {};
30 | _9['border'] = 'solid 1px #000';
31 | _9['background'] = '#F00';
32 | return _9;
33 | }.apply(this));
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/21/expected.js:
--------------------------------------------------------------------------------
1 | var sheet = cssx();
2 |
3 | (function () {
4 | var _1 = {},
5 | _2 = {},
6 | _3 = {};
7 | _2['color'] = '#000';
8 | _3['color'] = '#F00';
9 | _1['body'] = _2;
10 | _1['body.error'] = _3;
11 | return _1;
12 | }.apply(this))
13 | ;
14 |
15 | sheet.add((function () {
16 | var _5 = {},
17 | _6 = {},
18 | _7 = {};
19 | _6['font-size'] = '10px';
20 | _6['line-height'] = '12px';
21 | _7['margin'] = 0;
22 | _7['padding'] = '2em';
23 | _5['p'] = _6;
24 | _5['ul > foo'] = _7;
25 | return _5;
26 | }.apply(this)));
27 |
28 | var test = (function () {
29 | var _9 = {};
30 | _9['border'] = 'solid 1px #000';
31 | _9['background'] = '#F00';
32 | return _9;
33 | }.apply(this));
--------------------------------------------------------------------------------
/packages/cssx-loader/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cssx-loader",
3 | "version": "5.2.1",
4 | "description": "Webpack loader for CSSX",
5 | "main": "index.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/krasimir/cssx/tree/master/packages/cssx-loader"
9 | },
10 | "keywords": [
11 | "css",
12 | "cssx",
13 | "transpiler",
14 | "webpack",
15 | "loader"
16 | ],
17 | "author": {
18 | "name": "Krasimir Tsonev",
19 | "email": "info@krasimirtsonev.com",
20 | "url": "http://krasimirtsonev.com"
21 | },
22 | "license": "MIT",
23 | "bugs": {
24 | "url": "https://github.com/krasimir/cssx/issues"
25 | },
26 | "homepage": "https://github.com/krasimir/cssx",
27 | "dependencies": {
28 | "cssx-transpiler": "5.2.1"
29 | }
30 | }
--------------------------------------------------------------------------------
/playground/react/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var path = require('path');
3 |
4 | module.exports = {
5 | entry: './src/index.js',
6 | devtool: 'source-map',
7 | output: {
8 | path: __dirname + '/lib',
9 | filename: 'app.js'
10 | },
11 | module: {
12 | loaders: [
13 | {
14 | test: /(\.jsx|\.js)$/,
15 | loader: 'babel',
16 | exclude: /(node_modules|bower_components)/,
17 | query: {
18 | cacheDirectory: true,
19 | presets: ['es2015', 'react']
20 | }
21 | },
22 | {
23 | test: /(\.jsx|\.js)$/,
24 | loader: 'cssx-loader',
25 | exclude: /node_modules/
26 | }
27 | ]
28 | },
29 | resolve: {
30 | root: path.resolve('./src'),
31 | extensions: ['', '.js', '.jsx']
32 | }
33 | };
34 |
--------------------------------------------------------------------------------
/packages/rollup-plugin-cssx/dist/rollup-plugin-cssx.es.js:
--------------------------------------------------------------------------------
1 | import cssxTranspiler from 'cssx-transpiler';
2 | import MagicString from 'magic-string';
3 | import { createFilter } from 'rollup-pluginutils';
4 |
5 | function cssx(options) {
6 | if ( options === void 0 ) options = {};
7 |
8 | var filter = createFilter(options.include, options.exclude);
9 |
10 | return {
11 | name: 'cssx',
12 |
13 | transform: function transform(code, id) {
14 | if (!filter(id)) {
15 | return null;
16 | }
17 |
18 | var s = new MagicString(code);
19 | var out = cssxTranspiler(code, options);
20 |
21 | s.overwrite(0, code.length, out.toString());
22 |
23 | return {
24 | code: s.toString(),
25 | map: s.generateMap({ hires: true })
26 | };
27 | }
28 | };
29 | }
30 |
31 | export default cssx;
--------------------------------------------------------------------------------
/packages/browserify-cssx/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "browserify-cssx",
3 | "version": "5.2.1",
4 | "description": "Browserify transform plugin that transpiles CSSX",
5 | "main": "index.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/krasimir/cssx/tree/master/packages/browserify-cssx"
9 | },
10 | "keywords": [
11 | "css",
12 | "cssx",
13 | "transpiler",
14 | "browserify"
15 | ],
16 | "author": {
17 | "name": "Krasimir Tsonev",
18 | "email": "info@krasimirtsonev.com",
19 | "url": "http://krasimirtsonev.com"
20 | },
21 | "license": "MIT",
22 | "bugs": {
23 | "url": "https://github.com/krasimir/cssx/issues"
24 | },
25 | "homepage": "https://github.com/krasimir/cssx",
26 | "dependencies": {
27 | "cssx-transpiler": "5.2.1",
28 | "through2": "2.0.1"
29 | }
30 | }
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/10/expected.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var _1 = {},
3 | _2 = {},
4 | _3 = {},
5 | _4 = {},
6 | _5 = {},
7 | _6 = {},
8 | _7 = {},
9 | _8 = {},
10 | _9 = {},
11 | _10 = {};
12 | _2['transform'] = 'translateX(0)';
13 | _3['transform'] = 'translateX(-40px) rotateY(-5deg)';
14 | _4['transform'] = 'translateX(20px) rotateY(4deg)';
15 | _5['transform'] = 'translateX(-10px) rotateY(-2deg)';
16 | _6['transform'] = 'translateX(4px) rotateY(1deg)';
17 | _7['transform'] = 'translateX(0)';
18 | _8['a'] = 1;
19 | _9['b'] = 2;
20 | _10['0%'] = _2;
21 | _10['12.5%'] = _3;
22 | _10['37.5%'] = _4;
23 | _10['62.5%'] = _5;
24 | _10['87.5%'] = _6;
25 | _10['100%'] = _7;
26 | _10['from'] = _8;
27 | _10['to'] = _9;
28 | _1['@keyframes shake'] = _10;
29 | return _1;
30 | }.apply(this))
--------------------------------------------------------------------------------
/playground/transpiler-webpack/src/ballAnimation.js:
--------------------------------------------------------------------------------
1 | var animationApply = 'ball-animation 1s ease infinite alternate';
2 | var animation = cssx();
3 | animation.add();
17 |
18 | module.exports = {
19 | updateEndpoint: function (endPoint) {
20 | animation.update();
27 | },
28 | updateColor: function (color) {
29 | animation.update({
30 | '.ball':
31 |
32 | });
33 | }
34 | };
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/9/actual.js:
--------------------------------------------------------------------------------
1 | var pseudoClass = 'after';
2 | var sectionSmallSize = function () {
3 | return 0.2;
4 | };
5 | var pInMedia = function () {
6 | return 0.8 + 'em';
7 | };
8 | var getSomeProp = function () {
9 | return ['text-decoration'];
10 | };
11 | var data = {
12 | prop: 'background',
13 | sel: ['section', 'p > a']
14 | };
15 | var image = 'bg.jpg';
16 |
17 | cssx(
18 | section::`pseudoClass` {
19 | content: " ";
20 | display: table;
21 | clear: both;
22 | }
23 | section small {
24 | font-size: `sectionSmallSize()`em;
25 | }
26 | @media screen and (max-width: 1000px) {
27 | p {
28 | font-size: `pInMedia`;
29 | }
30 | p > a {
31 | `getSomeProp()[0]`: underline;
32 | color: #000;
33 | }
34 | }
35 | `data.sel.join(', ')` {
36 | text-decoration: none;
37 | `data.prop`: url("../public/`image`.jpg") no-repeat;
38 | }
39 | );
--------------------------------------------------------------------------------
/playground/jspm/build.js:
--------------------------------------------------------------------------------
1 | System.registerDynamic("lib/styles.js!cssx.js", [], true, function($__require, exports, module) {
2 | ;
3 | var define,
4 | global = this,
5 | GLOBAL = this;
6 | module.exports = (function() {
7 | var _1 = {},
8 | _2 = {};
9 | _2['font-size'] = '18px';
10 | _1['body'] = _2;
11 | return _1;
12 | }.apply(this));
13 | return module.exports;
14 | });
15 |
16 | System.register('lib/index.js', ['lib/styles.js!cssx.js'], function (_export) {
17 | 'use strict';
18 |
19 | var styles;
20 |
21 | function init() {
22 | document.querySelector('body').innerHTML = '' + JSON.stringify(styles, null, 2) + '';
23 | }
24 |
25 | return {
26 | setters: [function (_libStylesJsCssxJs) {
27 | styles = _libStylesJsCssxJs['default'];
28 | }],
29 | execute: function () {
30 | init();
31 | }
32 | };
33 | });
34 | //# sourceMappingURL=build.js.map
--------------------------------------------------------------------------------
/packages/gulp-cssx/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gulp-cssx",
3 | "version": "5.2.1",
4 | "description": "Gulp plugin for transpiling CSSX syntax",
5 | "main": "index.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/krasimir/cssx/tree/master/packages/gulp-cssx"
9 | },
10 | "keywords": [
11 | "css",
12 | "cssx",
13 | "transpiler",
14 | "gulp"
15 | ],
16 | "author": {
17 | "name": "Krasimir Tsonev",
18 | "email": "info@krasimirtsonev.com",
19 | "url": "http://krasimirtsonev.com"
20 | },
21 | "license": "MIT",
22 | "bugs": {
23 | "url": "https://github.com/krasimir/cssx/issues"
24 | },
25 | "homepage": "https://github.com/krasimir/cssx",
26 | "dependencies": {
27 | "browserify": "13.0.0",
28 | "browserify-cssx": "5.2.1",
29 | "cssx": "5.2.1",
30 | "cssx-transpiler": "5.2.1",
31 | "gulp": "3.9.0",
32 | "gulp-util": "3.0.7",
33 | "into-stream": "2.0.0",
34 | "map-stream": "0.0.6"
35 | }
36 | }
--------------------------------------------------------------------------------
/packages/cssx-loader/README.md:
--------------------------------------------------------------------------------
1 | # cssx-loader
2 |
3 | A CSSX loader for webpack.
4 |
5 | ## Usage
6 |
7 | Install the loader with `npm i cssx-loader -D` and then add it to your `webpack.config.js` file:
8 |
9 | ```js
10 | var webpack = require('webpack');
11 |
12 | module.exports = {
13 | entry: '...',
14 | devtool: 'source-map',
15 | output: {
16 | path: '...',
17 | filename: 'bundle.js'
18 | },
19 | cssx: {
20 | minify: false
21 | },
22 | module: {
23 | loaders: [
24 | {
25 | test: /(\.js)$/,
26 | loader: 'cssx-loader',
27 | exclude: /node_modules/
28 | }
29 | ]
30 | }
31 | };
32 |
33 | ```
34 |
35 | *If you use `cssx-loader` along with React make sure that you place it at the end of the `loaders` array. It's important that you get the CSSX `;
--------------------------------------------------------------------------------
/packages/cssx-cli/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cssx-cli",
3 | "version": "5.2.1",
4 | "description": "Command line tool for transpiling/preprocessing CSSX",
5 | "main": "index.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/krasimir/cssx/tree/master/packages/cssx-cli"
9 | },
10 | "keywords": [
11 | "css",
12 | "cssx",
13 | "transpiler",
14 | "cli",
15 | "preprocess"
16 | ],
17 | "author": {
18 | "name": "Krasimir Tsonev",
19 | "email": "info@krasimirtsonev.com",
20 | "url": "http://krasimirtsonev.com"
21 | },
22 | "license": "MIT",
23 | "bugs": {
24 | "url": "https://github.com/krasimir/cssx/issues"
25 | },
26 | "homepage": "https://github.com/krasimir/cssx",
27 | "dependencies": {
28 | "browserify": "13.0.0",
29 | "browserify-cssx": "5.2.1",
30 | "cssx": "5.2.1",
31 | "fs-extra": "0.26.7",
32 | "glob": "7.0.3",
33 | "gulp": "3.9.1",
34 | "gulp-callback": "0.0.3",
35 | "gulp-cssx": "5.2.1",
36 | "gulp-plumber": "1.1.0",
37 | "minimist": "1.2.0"
38 | },
39 | "bin": {
40 | "cssx": "./index.js"
41 | }
42 | }
--------------------------------------------------------------------------------
/test/fixtures/cssx-transpiler/9/expected.js:
--------------------------------------------------------------------------------
1 | var pseudoClass = 'after';
2 | var sectionSmallSize = function () {
3 | return 0.2;
4 | };
5 | var pInMedia = function () {
6 | return 0.8 + 'em';
7 | };
8 | var getSomeProp = function () {
9 | return ['text-decoration'];
10 | };
11 | var data = {
12 | prop: 'background',
13 | sel: ['section', 'p > a']
14 | };
15 | var image = 'bg.jpg';
16 |
17 | (function () {
18 | var _1 = {},
19 | _2 = {},
20 | _3 = {},
21 | _4 = {},
22 | _5 = {},
23 | _6 = {},
24 | _7 = {};
25 | _2['content'] = '" "';
26 | _2['display'] = 'table';
27 | _2['clear'] = 'both';
28 | _3['font-size'] = sectionSmallSize() + "em";
29 | _4['font-size'] = pInMedia;
30 | _5[getSomeProp()[0]] = 'underline';
31 | _5['color'] = '#000';
32 | _6['p'] = _4;
33 | _6['p > a'] = _5;
34 | _7['text-decoration'] = 'none';
35 | _7[data.prop] = "url(\"../public/" + image + ".jpg\") no-repeat";
36 | _1["section::" + pseudoClass] = _2;
37 | _1['section small'] = _3;
38 | _1['@media screen and (max-width: 1000px)'] = _6;
39 | _1[data.sel.join(', ')] = _7;
40 | return _1;
41 | }.apply(this))
42 | ;
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Krasimir Tsonev
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/packages/cssx-transpiler/src/visitors/CSSXElement.js:
--------------------------------------------------------------------------------
1 | var t = require('babel-types');
2 |
3 | var formCSSXElement = function (args, options) {
4 | return t.expressionStatement(
5 | t.assignmentExpression(
6 | '=',
7 | t.memberExpression(t.identifier('cssx'), args[0], true),
8 | args[1]
9 | )
10 | );
11 | };
12 |
13 | var formCSSXSheetDefinition = function (selectorNode, options) {
14 | return t.callExpression(
15 | t.identifier('cssx'),
16 | selectorNode ? [ t.identifier(selectorNode.value) ] : []
17 | );
18 | };
19 |
20 | module.exports = {
21 | enter: function (node, parent, index, context) {},
22 | exit: function (node, parent, index, context) {
23 | var args = [], el;
24 |
25 | node.selector ? args.push(node.selector) : null;
26 |
27 | if (node.body) {
28 | args.push(node.body);
29 | el = formCSSXElement(args, this.options);
30 | } else {
31 | el = formCSSXSheetDefinition(node.selector, this.options);
32 | }
33 |
34 | if (typeof parent !== 'undefined' && index !== 'undefined') {
35 | parent[index] = el;
36 | }
37 | return el;
38 | }
39 | };
40 | module.exports.formCSSXElement = formCSSXElement;
41 |
--------------------------------------------------------------------------------
/webpack.client.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
3 | var env = require('yargs').argv.mode;
4 | var path = require('path');
5 |
6 | var appName = 'cssx';
7 |
8 | var plugins = [], outputFile;
9 |
10 | if (env === 'build') {
11 | plugins.push(new UglifyJsPlugin({ minimize: true }));
12 | outputFile = appName + '.min.js';
13 | } else {
14 | outputFile = appName + '.js';
15 | }
16 |
17 | var config = {
18 | entry: __dirname + '/packages/cssx/src/index.js',
19 | devtool: 'source-map',
20 | output: {
21 | path: __dirname + '/packages/cssx/lib',
22 | filename: outputFile,
23 | library: appName,
24 | libraryTarget: 'umd',
25 | umdNamedDefine: true
26 | },
27 | module: {
28 | loaders: [
29 | {
30 | test: /(\.js)$/,
31 | loader: "eslint-loader",
32 | exclude: /node_modules/
33 | },
34 | {
35 | test: /\.json$/,
36 | loader: 'json-loader'
37 | }
38 | ]
39 | },
40 | resolve: {
41 | root: path.resolve('./packages'),
42 | extensions: ['', '.js', '.json']
43 | },
44 | plugins: plugins
45 | };
46 |
47 | module.exports = config;
48 |
--------------------------------------------------------------------------------
/packages/cssx/src/helpers/applyToDOM.js:
--------------------------------------------------------------------------------
1 | var cache = {};
2 |
3 | var qs = function (selector) {
4 | return document.querySelector(selector);
5 | };
6 |
7 | var createNode = function (type, attrs, content) {
8 | var node = document.createElement(type), i, a;
9 |
10 | for (i = 0; i < attrs.length; i++) {
11 | a = attrs[i];
12 | node.setAttribute(a.name, a.value);
13 | }
14 | node.innerHTML = content;
15 | (qs('head') || qs('body')).appendChild(node);
16 | return node;
17 | };
18 |
19 | var remove = function (id) {
20 | return function () {
21 | if (cache[id]) {
22 | cache[id].el.parentNode.removeChild(cache[id].el);
23 | delete cache[id];
24 | }
25 | };
26 | };
27 |
28 | module.exports = function (css, id) {
29 | var el;
30 |
31 | if (!cache[id]) {
32 | el = createNode(
33 | 'style', [
34 | { name: 'id', value: id },
35 | { name: 'type', value: 'text/css'}
36 | ],
37 | css
38 | );
39 | cache[id] = { el: el, css: css, remove: remove(id) };
40 | } else {
41 | if (cache[id].css !== css) {
42 | cache[id].css = css;
43 | cache[id].el.innerHTML = css;
44 | }
45 | }
46 |
47 | return cache[id].remove;
48 | };
49 |
--------------------------------------------------------------------------------
/webpack.transpiler.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
3 | var env = require('yargs').argv.mode;
4 | var path = require('path');
5 |
6 | var appName = 'cssx-transpiler';
7 |
8 | var plugins = [], outputFile;
9 |
10 | if (env === 'build') {
11 | plugins.push(new UglifyJsPlugin({ minimize: true }));
12 | outputFile = appName + '.min.js';
13 | } else {
14 | outputFile = appName + '.js';
15 | }
16 |
17 | var config = {
18 | entry: __dirname + '/packages/cssx-transpiler/src/index.js',
19 | devtool: 'source-map',
20 | output: {
21 | path: __dirname + '/packages/cssx-transpiler/lib',
22 | filename: outputFile,
23 | library: 'CSSXTranspiler',
24 | libraryTarget: 'umd',
25 | umdNamedDefine: true
26 | },
27 | module: {
28 | loaders: [
29 | {
30 | test: /(\.js)$/,
31 | loader: 'eslint-loader',
32 | exclude: /node_modules/
33 | },
34 | {
35 | test: /\.json$/,
36 | loader: 'json-loader'
37 | }
38 | ]
39 | },
40 | resolve: {
41 | root: path.resolve('./packages'),
42 | extensions: ['', '.js', '.json']
43 | },
44 | plugins: plugins
45 | };
46 |
47 | module.exports = config;
48 |
--------------------------------------------------------------------------------
/packages/rollup-plugin-cssx/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "rollup-plugin-cssx",
3 | "version": "5.2.1",
4 | "description": "Rollup transform plugin that transpiles CSSX",
5 | "main": "dist/rollup-plugin-cssx.cjs.js",
6 | "jsnext:main": "dist/rollup-plugin-cssx.es.js",
7 | "scripts": {
8 | "build": "rollup -c",
9 | "lint": "eslint src",
10 | "prepublish": "npm run lint && npm build"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "https://github.com/krasimir/cssx/tree/master/packages/rollup-plugin-cssx"
15 | },
16 | "keywords": [
17 | "css",
18 | "cssx",
19 | "transpiler",
20 | "rollup"
21 | ],
22 | "author": {
23 | "name": "Vincent Wochnik",
24 | "email": "vincent@vincentwochnik.com",
25 | "url": "http://vincentwochnik.com/"
26 | },
27 | "license": "MIT",
28 | "bugs": {
29 | "url": "https://github.com/krasimir/cssx/issues"
30 | },
31 | "homepage": "https://github.com/krasimir/cssx",
32 | "dependencies": {
33 | "cssx-transpiler": "5.2.1",
34 | "magic-string": "^0.15.0",
35 | "rollup-pluginutils": "^1.3.1"
36 | },
37 | "devDependencies": {
38 | "eslint": "1.7.2",
39 | "rollup": "^0.30.0",
40 | "rollup-plugin-buble": "^0.10.0"
41 | },
42 | "files": [
43 | "dist"
44 | ]
45 | }
--------------------------------------------------------------------------------
/packages/cssx-transpiler/src/core/traverse.js:
--------------------------------------------------------------------------------
1 | var isArray = require('../helpers/isArray');
2 |
3 | var IGNORE = 'start,end,loc';
4 | var UNKNOWN_NODE = 'unknown';
5 |
6 | var isIgnored = function (key) {
7 | return IGNORE.indexOf(key) >= 0;
8 | };
9 | var getType = function (node) {
10 | return node && node.type ? node.type : UNKNOWN_NODE;
11 | };
12 |
13 | module.exports = function (tree, visitors, options) {
14 | var context = {};
15 |
16 | var traverse = function (node, parent, index) {
17 | var key, i;
18 | var type = getType(node);
19 | var visitor = visitors[type];
20 | var isVisitorExists = !!visitor;
21 |
22 | if (isVisitorExists) {
23 | visitor.options = options;
24 | visitor.enter ? visitor.enter(node, parent, index, context) : null;
25 | }
26 | if (isArray(node)) {
27 | for (i = 0; i < node.length; i++) {
28 | traverse(node[i], node, i);
29 | }
30 | } else {
31 | for (key in node) {
32 | if (!isIgnored(key)) {
33 | if (typeof node[key] === 'object') {
34 | traverse(node[key], node, key);
35 | }
36 | }
37 | }
38 | }
39 | isVisitorExists && visitor.exit ? visitor.exit(node, parent, index, context) : null;
40 | };
41 |
42 | traverse(tree, null, null);
43 | };
44 |
45 | module.exports.isIgnored = isIgnored;
46 |
--------------------------------------------------------------------------------
/packages/cssx-transpiler/src/index.js:
--------------------------------------------------------------------------------
1 | var AST = require('./core/AST');
2 | var traverse = require('./core/traverse');
3 | var generate = require('babel-generator').default;
4 | var merge = require('./helpers/merge');
5 | var randomId = require('./helpers/randomId');
6 |
7 | var visitors = {
8 | CSSXDefinition: require('./visitors/CSSXDefinition'),
9 | CSSXElement: require('./visitors/CSSXElement'),
10 | CSSXProperty: require('./visitors/CSSXProperty'),
11 | CSSXRule: require('./visitors/CSSXRule'),
12 | CSSXRules: require('./visitors/CSSXRules'),
13 | CSSXSelector: require('./visitors/CSSXSelector'),
14 | CSSXValue: require('./visitors/CSSXValue'),
15 | CallExpression: require('./visitors/CallExpression'),
16 | ReturnStatement: require('./visitors/ReturnStatement'),
17 | ObjectProperty: require('./visitors/ObjectProperty')
18 | };
19 |
20 | module.exports = function (code, options) {
21 | var ast = AST(code);
22 | var opts = merge(
23 | {
24 | minified: false,
25 | compact: false,
26 | concise: false,
27 | quotes: 'single',
28 | sourceMaps: false
29 | },
30 | options || {}
31 | );
32 |
33 | traverse(ast.program, visitors, opts);
34 | return generate(ast, opts, code).code;
35 | };
36 |
37 | module.exports.ast = AST;
38 |
39 | module.exports.reset = function () {
40 | randomId.resetIDs();
41 | };
42 |
--------------------------------------------------------------------------------
/playground/transpiler-webpack/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CSSX
6 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | translateX(60px):
44 |
45 | background-color: rgb(150, 0, 0):
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/playground/try-it-out-bin/styles.css:
--------------------------------------------------------------------------------
1 | html {
2 | box-sizing: border-box;
3 | width: 100%;
4 | height: 100%;
5 | }
6 | *, *:before, *:after {
7 | box-sizing: inherit;
8 | }
9 | body {
10 | margin: 0;
11 | padding: 0;
12 | width: 100%;
13 | height: 100%;
14 | font-family: Arial, Verdana;
15 | color: #000;
16 | background: #fff;
17 | font-size: 16px;
18 | }
19 | .container {
20 | width: 100%;
21 | height: 100%;
22 | position: relative;
23 | }
24 | .left, .right {
25 | width: 50%;
26 | height: 100%;
27 | }
28 | .left {
29 | float: left;
30 | border-right: 1px solid #999;
31 | }
32 | .right {
33 | float: right;
34 | padding: 0.5em;
35 | }
36 | .CodeMirror {
37 | height: auto;
38 | transition: opacity 300ms;
39 | -webkit-transition: opacity 300ms;
40 | opacity: 1;
41 | }
42 | .half {
43 | height: 60%;
44 | border-bottom: 1px solid #FFF;
45 | transition: border-bottom 200ms ease;
46 | -webkit-transition: border-bottom 200ms ease;
47 | }
48 | .half:nth-child(2) {
49 | height: 40%;
50 | border-top: 1px solid #999;
51 | font-size: 0.8em;
52 | }
53 | [data-status="error"] {
54 | border-bottom: 42px solid #F2D8D8;
55 | }
56 | .error {
57 | display: none;
58 | position: absolute;
59 | top: calc(60% - 40px);
60 | left: 0;
61 | z-index: 100;
62 | color: #333;
63 | font-size: 0.8em;
64 | width: 50%;
65 | padding: 0.4em;
66 | }
--------------------------------------------------------------------------------
/packages/cssx/src/index.js:
--------------------------------------------------------------------------------
1 | var factory, goGlobal, stylesheets, api, randomId, plugins = [];
2 |
3 | require('./polyfills');
4 |
5 | factory = require('./CSSStylesheet');
6 | goGlobal = require('./helpers/goGlobal');
7 | randomId = require('./helpers/randomId');
8 |
9 | stylesheets = [];
10 |
11 | function createStyleSheet(id) {
12 | var s, i;
13 |
14 | if (typeof id === 'undefined') {
15 | id = randomId();
16 | }
17 |
18 | for (i = 0; i < stylesheets.length; i++) {
19 | if (stylesheets[i].id() === id) {
20 | return stylesheets[i];
21 | }
22 | }
23 | s = factory.apply(factory, arguments);
24 | stylesheets.push(s);
25 | return s;
26 | };
27 |
28 | api = function (id) { return createStyleSheet(id, plugins); };
29 |
30 | api.domChanges = function (flag) {
31 | factory.disableDOMChanges = !flag;
32 | };
33 | api.minify = function (flag) {
34 | factory.minify = flag;
35 | };
36 | api.nextTick = function (flag) {
37 | factory.useNextTick = flag;
38 | };
39 | api.getStylesheets = function () {
40 | return stylesheets;
41 | };
42 | api.clear = function () {
43 | var i;
44 |
45 | for (i = 0; i < stylesheets.length; i++) {
46 | stylesheets[i].clear();
47 | }
48 | stylesheets = [];
49 | return api;
50 | };
51 | api.getCSS = function () {
52 | var i, css = '';
53 |
54 | for (i = 0; i < stylesheets.length; i++) {
55 | css += stylesheets[i].getCSS();
56 | }
57 | return css;
58 | };
59 | api.plugins = function (arr) {
60 | plugins = plugins.concat(arr);
61 | };
62 |
63 | module.exports = api;
64 |
65 | goGlobal(module.exports);
66 |
--------------------------------------------------------------------------------
/playground/try-it-out-bin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CSSX playground
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | test
dsa
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/playground/try-it-out/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CSSX playground
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/site/vendor/codemirror/addon/fold/indent-fold.js:
--------------------------------------------------------------------------------
1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others
2 | // Distributed under an MIT license: http://codemirror.net/LICENSE
3 |
4 | (function(mod) {
5 | if (typeof exports == "object" && typeof module == "object") // CommonJS
6 | mod(require("../../lib/codemirror"));
7 | else if (typeof define == "function" && define.amd) // AMD
8 | define(["../../lib/codemirror"], mod);
9 | else // Plain browser env
10 | mod(CodeMirror);
11 | })(function(CodeMirror) {
12 | "use strict";
13 |
14 | CodeMirror.registerHelper("fold", "indent", function(cm, start) {
15 | var tabSize = cm.getOption("tabSize"), firstLine = cm.getLine(start.line);
16 | if (!/\S/.test(firstLine)) return;
17 | var getIndent = function(line) {
18 | return CodeMirror.countColumn(line, null, tabSize);
19 | };
20 | var myIndent = getIndent(firstLine);
21 | var lastLineInFold = null;
22 | // Go through lines until we find a line that definitely doesn't belong in
23 | // the block we're folding, or to the end.
24 | for (var i = start.line + 1, end = cm.lastLine(); i <= end; ++i) {
25 | var curLine = cm.getLine(i);
26 | var curIndent = getIndent(curLine);
27 | if (curIndent > myIndent) {
28 | // Lines with a greater indent are considered part of the block.
29 | lastLineInFold = i;
30 | } else if (!/\S/.test(curLine)) {
31 | // Empty lines might be breaks within the block we're trying to fold.
32 | } else {
33 | // A non-empty line at an indent equal to or less than ours marks the
34 | // start of another block.
35 | break;
36 | }
37 | }
38 | if (lastLineInFold) return {
39 | from: CodeMirror.Pos(start.line, firstLine.length),
40 | to: CodeMirror.Pos(lastLineInFold, cm.getLine(lastLineInFold).length)
41 | };
42 | });
43 |
44 | });
45 |
--------------------------------------------------------------------------------
/playground/try-it-out/styles.css:
--------------------------------------------------------------------------------
1 | html {
2 | box-sizing: border-box;
3 | width: 100%;
4 | height: 100%;
5 | }
6 | *, *:before, *:after {
7 | box-sizing: inherit;
8 | }
9 | body {
10 | margin: 0;
11 | padding: 0;
12 | width: 100%;
13 | height: 100%;
14 | font-family: Arial, Verdana;
15 | color: #000;
16 | background: #fff;
17 | font-size: 16px;
18 | }
19 | .container {
20 | width: 100%;
21 | height: 100%;
22 | position: relative;
23 | }
24 | .left, .right {
25 | width: 50%;
26 | height: 100%;
27 | }
28 | .left {
29 | float: left;
30 | border-right: 1px solid #999;
31 | }
32 | .right {
33 | float: right;
34 | }
35 | .output {
36 | height: calc(100% - 30px);
37 | overflow-y: auto;
38 | overflow-x: hidden;
39 | transition: opacity 300ms, border-top 300ms;
40 | -webkit-transition: opacity 300ms, border-top 300ms;
41 | border-top: 0px solid #F00;
42 | }
43 | .error {
44 | color: #9f0000;
45 | font-weight: bold;
46 | }
47 | .output[data-status="error"] {
48 | border-top: 40px solid #F00;
49 | }
50 | .CodeMirror {
51 | height: auto;
52 | transition: opacity 300ms;
53 | -webkit-transition: opacity 300ms;
54 | opacity: 1;
55 | }
56 | .output[data-status="error"] .CodeMirror{
57 | opacity: 0.2;
58 | }
59 |
60 | /* output navigation */
61 | .nav-output {
62 | font-size: 0.7em;
63 | height: 30px;
64 | border-top: 1px solid #ddd;
65 | padding: 9px;
66 | }
67 | .nav-output a {
68 | display: inline-block;
69 | margin-right: 0.6em;
70 | color: #000;
71 | text-decoration: none;
72 | }
73 | .nav-output a:hover {
74 | text-decoration: underline;
75 | }
76 |
77 | /* message */
78 | .message {
79 | display: none;
80 | position: absolute;
81 | top: 4px;
82 | right: 0;
83 | width: 50%;
84 | text-align: center;
85 | padding-left: 10px;
86 | color: #fff;
87 | font-size: 0.8em;
88 | }
--------------------------------------------------------------------------------
/site/vendor/codemirror/addon/fold/markdown-fold.js:
--------------------------------------------------------------------------------
1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others
2 | // Distributed under an MIT license: http://codemirror.net/LICENSE
3 |
4 | (function(mod) {
5 | if (typeof exports == "object" && typeof module == "object") // CommonJS
6 | mod(require("../../lib/codemirror"));
7 | else if (typeof define == "function" && define.amd) // AMD
8 | define(["../../lib/codemirror"], mod);
9 | else // Plain browser env
10 | mod(CodeMirror);
11 | })(function(CodeMirror) {
12 | "use strict";
13 |
14 | CodeMirror.registerHelper("fold", "markdown", function(cm, start) {
15 | var maxDepth = 100;
16 |
17 | function isHeader(lineNo) {
18 | var tokentype = cm.getTokenTypeAt(CodeMirror.Pos(lineNo, 0));
19 | return tokentype && /\bheader\b/.test(tokentype);
20 | }
21 |
22 | function headerLevel(lineNo, line, nextLine) {
23 | var match = line && line.match(/^#+/);
24 | if (match && isHeader(lineNo)) return match[0].length;
25 | match = nextLine && nextLine.match(/^[=\-]+\s*$/);
26 | if (match && isHeader(lineNo + 1)) return nextLine[0] == "=" ? 1 : 2;
27 | return maxDepth;
28 | }
29 |
30 | var firstLine = cm.getLine(start.line), nextLine = cm.getLine(start.line + 1);
31 | var level = headerLevel(start.line, firstLine, nextLine);
32 | if (level === maxDepth) return undefined;
33 |
34 | var lastLineNo = cm.lastLine();
35 | var end = start.line, nextNextLine = cm.getLine(end + 2);
36 | while (end < lastLineNo) {
37 | if (headerLevel(end + 1, nextLine, nextNextLine) <= level) break;
38 | ++end;
39 | nextLine = nextNextLine;
40 | nextNextLine = cm.getLine(end + 2);
41 | }
42 |
43 | return {
44 | from: CodeMirror.Pos(start.line, firstLine.length),
45 | to: CodeMirror.Pos(end, cm.getLine(end).length)
46 | };
47 | });
48 |
49 | });
50 |
--------------------------------------------------------------------------------
/playground/try-it-out/vendor/codemirror/addon/fold/indent-fold.js:
--------------------------------------------------------------------------------
1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others
2 | // Distributed under an MIT license: http://codemirror.net/LICENSE
3 |
4 | (function(mod) {
5 | if (typeof exports == "object" && typeof module == "object") // CommonJS
6 | mod(require("../../lib/codemirror"));
7 | else if (typeof define == "function" && define.amd) // AMD
8 | define(["../../lib/codemirror"], mod);
9 | else // Plain browser env
10 | mod(CodeMirror);
11 | })(function(CodeMirror) {
12 | "use strict";
13 |
14 | CodeMirror.registerHelper("fold", "indent", function(cm, start) {
15 | var tabSize = cm.getOption("tabSize"), firstLine = cm.getLine(start.line);
16 | if (!/\S/.test(firstLine)) return;
17 | var getIndent = function(line) {
18 | return CodeMirror.countColumn(line, null, tabSize);
19 | };
20 | var myIndent = getIndent(firstLine);
21 | var lastLineInFold = null;
22 | // Go through lines until we find a line that definitely doesn't belong in
23 | // the block we're folding, or to the end.
24 | for (var i = start.line + 1, end = cm.lastLine(); i <= end; ++i) {
25 | var curLine = cm.getLine(i);
26 | var curIndent = getIndent(curLine);
27 | if (curIndent > myIndent) {
28 | // Lines with a greater indent are considered part of the block.
29 | lastLineInFold = i;
30 | } else if (!/\S/.test(curLine)) {
31 | // Empty lines might be breaks within the block we're trying to fold.
32 | } else {
33 | // A non-empty line at an indent equal to or less than ours marks the
34 | // start of another block.
35 | break;
36 | }
37 | }
38 | if (lastLineInFold) return {
39 | from: CodeMirror.Pos(start.line, firstLine.length),
40 | to: CodeMirror.Pos(lastLineInFold, cm.getLine(lastLineInFold).length)
41 | };
42 | });
43 |
44 | });
45 |
--------------------------------------------------------------------------------
/playground/try-it-out-bin/vendor/codemirror/addon/fold/indent-fold.js:
--------------------------------------------------------------------------------
1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others
2 | // Distributed under an MIT license: http://codemirror.net/LICENSE
3 |
4 | (function(mod) {
5 | if (typeof exports == "object" && typeof module == "object") // CommonJS
6 | mod(require("../../lib/codemirror"));
7 | else if (typeof define == "function" && define.amd) // AMD
8 | define(["../../lib/codemirror"], mod);
9 | else // Plain browser env
10 | mod(CodeMirror);
11 | })(function(CodeMirror) {
12 | "use strict";
13 |
14 | CodeMirror.registerHelper("fold", "indent", function(cm, start) {
15 | var tabSize = cm.getOption("tabSize"), firstLine = cm.getLine(start.line);
16 | if (!/\S/.test(firstLine)) return;
17 | var getIndent = function(line) {
18 | return CodeMirror.countColumn(line, null, tabSize);
19 | };
20 | var myIndent = getIndent(firstLine);
21 | var lastLineInFold = null;
22 | // Go through lines until we find a line that definitely doesn't belong in
23 | // the block we're folding, or to the end.
24 | for (var i = start.line + 1, end = cm.lastLine(); i <= end; ++i) {
25 | var curLine = cm.getLine(i);
26 | var curIndent = getIndent(curLine);
27 | if (curIndent > myIndent) {
28 | // Lines with a greater indent are considered part of the block.
29 | lastLineInFold = i;
30 | } else if (!/\S/.test(curLine)) {
31 | // Empty lines might be breaks within the block we're trying to fold.
32 | } else {
33 | // A non-empty line at an indent equal to or less than ours marks the
34 | // start of another block.
35 | break;
36 | }
37 | }
38 | if (lastLineInFold) return {
39 | from: CodeMirror.Pos(start.line, firstLine.length),
40 | to: CodeMirror.Pos(lastLineInFold, cm.getLine(lastLineInFold).length)
41 | };
42 | });
43 |
44 | });
45 |
--------------------------------------------------------------------------------
/playground/try-it-out/vendor/codemirror/addon/fold/markdown-fold.js:
--------------------------------------------------------------------------------
1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others
2 | // Distributed under an MIT license: http://codemirror.net/LICENSE
3 |
4 | (function(mod) {
5 | if (typeof exports == "object" && typeof module == "object") // CommonJS
6 | mod(require("../../lib/codemirror"));
7 | else if (typeof define == "function" && define.amd) // AMD
8 | define(["../../lib/codemirror"], mod);
9 | else // Plain browser env
10 | mod(CodeMirror);
11 | })(function(CodeMirror) {
12 | "use strict";
13 |
14 | CodeMirror.registerHelper("fold", "markdown", function(cm, start) {
15 | var maxDepth = 100;
16 |
17 | function isHeader(lineNo) {
18 | var tokentype = cm.getTokenTypeAt(CodeMirror.Pos(lineNo, 0));
19 | return tokentype && /\bheader\b/.test(tokentype);
20 | }
21 |
22 | function headerLevel(lineNo, line, nextLine) {
23 | var match = line && line.match(/^#+/);
24 | if (match && isHeader(lineNo)) return match[0].length;
25 | match = nextLine && nextLine.match(/^[=\-]+\s*$/);
26 | if (match && isHeader(lineNo + 1)) return nextLine[0] == "=" ? 1 : 2;
27 | return maxDepth;
28 | }
29 |
30 | var firstLine = cm.getLine(start.line), nextLine = cm.getLine(start.line + 1);
31 | var level = headerLevel(start.line, firstLine, nextLine);
32 | if (level === maxDepth) return undefined;
33 |
34 | var lastLineNo = cm.lastLine();
35 | var end = start.line, nextNextLine = cm.getLine(end + 2);
36 | while (end < lastLineNo) {
37 | if (headerLevel(end + 1, nextLine, nextNextLine) <= level) break;
38 | ++end;
39 | nextLine = nextNextLine;
40 | nextNextLine = cm.getLine(end + 2);
41 | }
42 |
43 | return {
44 | from: CodeMirror.Pos(start.line, firstLine.length),
45 | to: CodeMirror.Pos(end, cm.getLine(end).length)
46 | };
47 | });
48 |
49 | });
50 |
--------------------------------------------------------------------------------
/playground/try-it-out-bin/vendor/codemirror/addon/fold/markdown-fold.js:
--------------------------------------------------------------------------------
1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others
2 | // Distributed under an MIT license: http://codemirror.net/LICENSE
3 |
4 | (function(mod) {
5 | if (typeof exports == "object" && typeof module == "object") // CommonJS
6 | mod(require("../../lib/codemirror"));
7 | else if (typeof define == "function" && define.amd) // AMD
8 | define(["../../lib/codemirror"], mod);
9 | else // Plain browser env
10 | mod(CodeMirror);
11 | })(function(CodeMirror) {
12 | "use strict";
13 |
14 | CodeMirror.registerHelper("fold", "markdown", function(cm, start) {
15 | var maxDepth = 100;
16 |
17 | function isHeader(lineNo) {
18 | var tokentype = cm.getTokenTypeAt(CodeMirror.Pos(lineNo, 0));
19 | return tokentype && /\bheader\b/.test(tokentype);
20 | }
21 |
22 | function headerLevel(lineNo, line, nextLine) {
23 | var match = line && line.match(/^#+/);
24 | if (match && isHeader(lineNo)) return match[0].length;
25 | match = nextLine && nextLine.match(/^[=\-]+\s*$/);
26 | if (match && isHeader(lineNo + 1)) return nextLine[0] == "=" ? 1 : 2;
27 | return maxDepth;
28 | }
29 |
30 | var firstLine = cm.getLine(start.line), nextLine = cm.getLine(start.line + 1);
31 | var level = headerLevel(start.line, firstLine, nextLine);
32 | if (level === maxDepth) return undefined;
33 |
34 | var lastLineNo = cm.lastLine();
35 | var end = start.line, nextNextLine = cm.getLine(end + 2);
36 | while (end < lastLineNo) {
37 | if (headerLevel(end + 1, nextLine, nextNextLine) <= level) break;
38 | ++end;
39 | nextLine = nextNextLine;
40 | nextNextLine = cm.getLine(end + 2);
41 | }
42 |
43 | return {
44 | from: CodeMirror.Pos(start.line, firstLine.length),
45 | to: CodeMirror.Pos(end, cm.getLine(end).length)
46 | };
47 | });
48 |
49 | });
50 |
--------------------------------------------------------------------------------
/packages/cssx-transpiler/src/core/parseExpressions.js:
--------------------------------------------------------------------------------
1 | var t = require('babel-types');
2 | var AST = require('./AST');
3 |
4 | module.exports = function (node) {
5 | var value = node.value || node.name || node.query;
6 | var expressions = node.expressions || [];
7 | var bit, replaceWith, ast, mutations, i = -1, starts, ends, index, inExpr = false, ch;
8 | var length = value.length;
9 | var code = '';
10 |
11 | mutations = expressions.map(function (expr) {
12 | bit = value.substr(expr.contextLoc.start, expr.contextLoc.end - expr.contextLoc.start);
13 | replaceWith = '(' + bit.replace(/^(`|{{|<%)([\s\S]+)(`|}}|%>)$/mg, '$2') + ')';
14 |
15 | return {
16 | start: expr.contextLoc.start,
17 | end: expr.contextLoc.end,
18 | replaceWith: replaceWith
19 | };
20 | });
21 | starts = mutations.map(function (m) { return m.start; });
22 | ends = mutations.map(function (m) { return m.end; });
23 |
24 | while (++i < length) {
25 | // start
26 | if ((index = starts.indexOf(i)) >= 0) {
27 | code += (i === 0 ? '' : '" + ') + mutations[index].replaceWith;
28 | inExpr = true;
29 | // ends
30 | } else if ((index = ends.indexOf(i)) >= 0) {
31 | code += i === length ? '' : ' + "';
32 | inExpr = false;
33 | }
34 |
35 | if (!inExpr) {
36 | ch = value.charAt(i);
37 | ch = ch === '"' ? '\\"' : ch;
38 | if (i === 0) {
39 | code += '"' + ch;
40 | } else if (i === length - 1) {
41 | code += ch + '"';
42 | } else {
43 | code += ch;
44 | }
45 | }
46 | }
47 |
48 | try {
49 | ast = AST(code);
50 | } catch (err) {
51 | throw new Error('parsing cssx expression: ' + code + ' (' + err.message + ')');
52 | }
53 |
54 | if (ast && ast.program && ast.program.body && ast.program.body[0] && ast.program.body[0].expression) {
55 | return ast.program.body[0].expression;
56 | }
57 | return t.stringLiteral(value);
58 | };
59 |
--------------------------------------------------------------------------------
/playground/basic/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CSSX
6 |
7 |
8 | Hello CSSX world!
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
65 |
66 |
--------------------------------------------------------------------------------
/packages/gulp-cssx/index.js:
--------------------------------------------------------------------------------
1 | var child_process = require('child_process');
2 | var map = require('map-stream');
3 | var gutil = require('gulp-util');
4 | var cssxTranspiler = require('cssx-transpiler');
5 | var browserify = require('browserify');
6 | var cssxTransform = require('browserify-cssx');
7 | var intoStream = require('into-stream');
8 | var cssx = require('cssx');
9 | var path = require('path');
10 |
11 | cssx.domChanges(false);
12 | cssx.minify(false);
13 |
14 | module.exports = function(options) {
15 | var ops = {
16 | execute: options && options.execute ? options.execute : false
17 | };
18 |
19 | return map(function(file, cb) {
20 | var error = null, transpiled;
21 |
22 | // execute to css
23 | if (ops.execute) {
24 | var b = browserify(intoStream(file.contents), {
25 | transform: [ cssxTransform ],
26 | basedir: path.dirname(file.path),
27 | cssx: options
28 | });
29 | b.bundle(function (err, buff) {
30 | var codeToRun = buff.toString('utf8'), func, generatedCSS, css;
31 |
32 | try {
33 | func = new Function('cssx', codeToRun);
34 | func(cssx);
35 | generatedCSS = cssx.getStylesheets().map(function (stylesheet) {
36 | return stylesheet.compileImmediate().getCSS();
37 | });
38 | css = generatedCSS.join('');
39 | } catch (err) {
40 | cb(err); return;
41 | }
42 | file.contents = new Buffer(css);
43 | cb(error, file);
44 | });
45 | // transpile
46 | } else {
47 | try {
48 | transpiled = cssxTranspiler(file.contents.toString('utf8'), options);
49 | } catch (err) {
50 | cb(err);
51 | return;
52 | }
53 | file.contents = new Buffer(transpiled);
54 | cb(error, file);
55 | }
56 |
57 | });
58 | };
59 |
60 | module.exports.transpiler = cssxTranspiler;
--------------------------------------------------------------------------------
/packages/cssx/src/polyfills/forEach.js:
--------------------------------------------------------------------------------
1 | // Production steps of ECMA-262, Edition 5, 15.4.4.18
2 | // Reference: http://es5.github.io/#x15.4.4.18
3 | if (!Array.prototype.forEach) {
4 |
5 | Array.prototype.forEach = function(callback, thisArg) {
6 |
7 | var T, k;
8 |
9 | if (this == null) {
10 | throw new TypeError(' this is null or not defined');
11 | }
12 |
13 | // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
14 | var O = Object(this);
15 |
16 | // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
17 | // 3. Let len be ToUint32(lenValue).
18 | var len = O.length >>> 0;
19 |
20 | // 4. If IsCallable(callback) is false, throw a TypeError exception.
21 | // See: http://es5.github.com/#x9.11
22 | if (typeof callback !== "function") {
23 | throw new TypeError(callback + ' is not a function');
24 | }
25 |
26 | // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
27 | if (arguments.length > 1) {
28 | T = thisArg;
29 | }
30 |
31 | // 6. Let k be 0
32 | k = 0;
33 |
34 | // 7. Repeat, while k < len
35 | while (k < len) {
36 |
37 | var kValue;
38 |
39 | // a. Let Pk be ToString(k).
40 | // This is implicit for LHS operands of the in operator
41 | // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
42 | // This step can be combined with c
43 | // c. If kPresent is true, then
44 | if (k in O) {
45 |
46 | // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
47 | kValue = O[k];
48 |
49 | // ii. Call the Call internal method of callback with T as the this value and
50 | // argument list containing kValue, k, and O.
51 | callback.call(T, kValue, k, O);
52 | }
53 | // d. Increase k by 1.
54 | k++;
55 | }
56 | // 8. return undefined
57 | };
58 | }
--------------------------------------------------------------------------------
/playground/react/src/Navigation.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | class Navigation extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | this.state = {
8 | color: '#2276BF'
9 | };
10 | this.sheet = cssx();
11 | }
12 | componentWillMount() {
13 | var color = this.state.color;
14 | this.sheet.add();
32 | }
33 | render() {
34 | return
' + JSON.stringify(styles, null, 2) + '';
55 | }
56 |
57 | return {
58 | setters: [function (_libStylesJsCssxJs) {
59 | styles = _libStylesJsCssxJs['default'];
60 | }],
61 | execute: function () {
62 | init();
63 | }
64 | };
65 | });
66 | //# sourceMappingURL=build.js.map
67 | ```
68 |
69 | So, every file that contains CSSX code should be processed by a plugin. For example:
70 |
71 | ```
72 | import styles from './styles.js!cssx';
73 | ```
74 | *(Notice the `!cssx` at the end of the import)*
75 |
76 | The plugin is really simple. It's a file in the main project directory
77 |
78 | ```js
79 | // cssx.js
80 | var cssxTranspiler = require('./vendor/cssx-transpiler');
81 |
82 | exports.translate = function (load) {
83 | return cssxTranspiler(load.source);
84 | };
85 | ```
86 |
87 | and `vendor/cssx-transpiler` is a direct copy of [`cssx-transpiler.js`](https://github.com/krasimir/cssx/tree/master/packages/cssx-transpiler) file.
--------------------------------------------------------------------------------
/packages/cssx-transpiler/README.md:
--------------------------------------------------------------------------------
1 | # CSSX-Transpiler
2 |
3 | > Transpile `
28 | };
29 |
30 | */
31 |
32 | var transpiled = cssxTranspiler(code, { minified: false });
33 | console.log(transpiled);
34 | /*
35 |
36 | var styles = function (margin) {
37 | return (function () {
38 | var _2 = {},
39 | _3 = {};
40 | _3['margin'] = margin + "px";
41 | _3['padding'] = '0';
42 | _2['body'] = _3;
43 | return _2;
44 | }.apply(this));
45 | };
46 |
47 | */
48 |
49 | ```
50 |
51 | ---
52 |
53 | ## API
54 |
55 | #### `cssxTranspiler(, )`
56 |
57 | * `code` - string
58 | * `options` - key-value pairs. The available options are: `minified`, `compact`, `concise`, `quotes`. All the options are booleans.
59 |
60 | Returns a transpiled version of the code;
61 |
62 | #### `cssxTranspiler.ast()`
63 |
64 | * `code` - string
65 |
66 | Returns abstract syntax tree.
67 |
68 | #### `cssxTranspiler.reset()`
69 |
70 | While transpiling the module is creating bunch of unique ids in the format of `_`. This method resets the number to 0.
71 |
72 | ---
73 |
74 | ## Transformations
75 |
76 | CSSX transpiler is basically CSS to JSON process:
77 |
78 | ```css
79 | .container {
80 | margin: 10px;
81 | padding: 20px;
82 | }
83 | ```
84 |
85 | is transformed to
86 |
87 | ```json
88 | {
89 | ".container": {
90 | "margin": "10px",
91 | "padding": "20px"
92 | }
93 | }
94 | ```
95 |
96 | Nested styles like media queries:
97 |
98 | ```css
99 | @media (max-width: 450px) {
100 | .container {
101 | width: 100%;
102 | }
103 | }
104 | ```
105 |
106 | results to:
107 |
108 | ```json
109 | {
110 | "@media (max-width: 450px)": {
111 | ".container": {
112 | "width": "100%"
113 | }
114 | }
115 | }
116 | ```
117 |
118 | The libraries deals with same name properties in the following way:
119 |
120 | ```css
121 | body {
122 | background: red;
123 | background: url(../img/image.png);
124 | }
125 | ```
126 |
127 | results to:
128 |
129 | ```json
130 | {
131 | "body": {
132 | "background": [
133 | "red",
134 | "url(../img/image.png)"
135 | ]
136 | }
137 | }
138 | ```
139 |
140 | ---
141 |
142 | # Where to go from here
143 |
144 | * [CSSX *language*](https://github.com/krasimir/cssx/blob/master/docs/cssx-lang.md)
145 | * [CSSX client-side library](https://github.com/krasimir/cssx/tree/master/packages/cssx)
146 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Real, working CSS in JavaScript
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | CSSX
19 |
20 |
21 | CSSX is a set of tools that will help you write vanilla CSS in JavaScript
22 | Check out CSSX in GitHub. It's working well with Webpack and Gulp. There is no new syntax, it's still the good old CSS but it lives in JavaScript. Learn more about that here.
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/site/polyfills/map.js:
--------------------------------------------------------------------------------
1 | // Production steps of ECMA-262, Edition 5, 15.4.4.19
2 | // Reference: http://es5.github.io/#x15.4.4.19
3 | if (!Array.prototype.map) {
4 |
5 | Array.prototype.map = function(callback, thisArg) {
6 |
7 | var T, A, k;
8 |
9 | if (this == null) {
10 | throw new TypeError(' this is null or not defined');
11 | }
12 |
13 | // 1. Let O be the result of calling ToObject passing the |this|
14 | // value as the argument.
15 | var O = Object(this);
16 |
17 | // 2. Let lenValue be the result of calling the Get internal
18 | // method of O with the argument "length".
19 | // 3. Let len be ToUint32(lenValue).
20 | var len = O.length >>> 0;
21 |
22 | // 4. If IsCallable(callback) is false, throw a TypeError exception.
23 | // See: http://es5.github.com/#x9.11
24 | if (typeof callback !== 'function') {
25 | throw new TypeError(callback + ' is not a function');
26 | }
27 |
28 | // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
29 | if (arguments.length > 1) {
30 | T = thisArg;
31 | }
32 |
33 | // 6. Let A be a new array created as if by the expression new Array(len)
34 | // where Array is the standard built-in constructor with that name and
35 | // len is the value of len.
36 | A = new Array(len);
37 |
38 | // 7. Let k be 0
39 | k = 0;
40 |
41 | // 8. Repeat, while k < len
42 | while (k < len) {
43 |
44 | var kValue, mappedValue;
45 |
46 | // a. Let Pk be ToString(k).
47 | // This is implicit for LHS operands of the in operator
48 | // b. Let kPresent be the result of calling the HasProperty internal
49 | // method of O with argument Pk.
50 | // This step can be combined with c
51 | // c. If kPresent is true, then
52 | if (k in O) {
53 |
54 | // i. Let kValue be the result of calling the Get internal
55 | // method of O with argument Pk.
56 | kValue = O[k];
57 |
58 | // ii. Let mappedValue be the result of calling the Call internal
59 | // method of callback with T as the this value and argument
60 | // list containing kValue, k, and O.
61 | mappedValue = callback.call(T, kValue, k, O);
62 |
63 | // iii. Call the DefineOwnProperty internal method of A with arguments
64 | // Pk, Property Descriptor
65 | // { Value: mappedValue,
66 | // Writable: true,
67 | // Enumerable: true,
68 | // Configurable: true },
69 | // and false.
70 |
71 | // In browsers that support Object.defineProperty, use the following:
72 | // Object.defineProperty(A, k, {
73 | // value: mappedValue,
74 | // writable: true,
75 | // enumerable: true,
76 | // configurable: true
77 | // });
78 |
79 | // For best browser support, use the following:
80 | A[k] = mappedValue;
81 | }
82 | // d. Increase k by 1.
83 | k++;
84 | }
85 |
86 | // 9. return A
87 | return A;
88 | };
89 | }
--------------------------------------------------------------------------------
/packages/cssx/src/polyfills/map.js:
--------------------------------------------------------------------------------
1 | // Production steps of ECMA-262, Edition 5, 15.4.4.19
2 | // Reference: http://es5.github.io/#x15.4.4.19
3 | if (!Array.prototype.map) {
4 |
5 | Array.prototype.map = function(callback, thisArg) {
6 |
7 | var T, A, k;
8 |
9 | if (this == null) {
10 | throw new TypeError(' this is null or not defined');
11 | }
12 |
13 | // 1. Let O be the result of calling ToObject passing the |this|
14 | // value as the argument.
15 | var O = Object(this);
16 |
17 | // 2. Let lenValue be the result of calling the Get internal
18 | // method of O with the argument "length".
19 | // 3. Let len be ToUint32(lenValue).
20 | var len = O.length >>> 0;
21 |
22 | // 4. If IsCallable(callback) is false, throw a TypeError exception.
23 | // See: http://es5.github.com/#x9.11
24 | if (typeof callback !== 'function') {
25 | throw new TypeError(callback + ' is not a function');
26 | }
27 |
28 | // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
29 | if (arguments.length > 1) {
30 | T = thisArg;
31 | }
32 |
33 | // 6. Let A be a new array created as if by the expression new Array(len)
34 | // where Array is the standard built-in constructor with that name and
35 | // len is the value of len.
36 | A = new Array(len);
37 |
38 | // 7. Let k be 0
39 | k = 0;
40 |
41 | // 8. Repeat, while k < len
42 | while (k < len) {
43 |
44 | var kValue, mappedValue;
45 |
46 | // a. Let Pk be ToString(k).
47 | // This is implicit for LHS operands of the in operator
48 | // b. Let kPresent be the result of calling the HasProperty internal
49 | // method of O with argument Pk.
50 | // This step can be combined with c
51 | // c. If kPresent is true, then
52 | if (k in O) {
53 |
54 | // i. Let kValue be the result of calling the Get internal
55 | // method of O with argument Pk.
56 | kValue = O[k];
57 |
58 | // ii. Let mappedValue be the result of calling the Call internal
59 | // method of callback with T as the this value and argument
60 | // list containing kValue, k, and O.
61 | mappedValue = callback.call(T, kValue, k, O);
62 |
63 | // iii. Call the DefineOwnProperty internal method of A with arguments
64 | // Pk, Property Descriptor
65 | // { Value: mappedValue,
66 | // Writable: true,
67 | // Enumerable: true,
68 | // Configurable: true },
69 | // and false.
70 |
71 | // In browsers that support Object.defineProperty, use the following:
72 | // Object.defineProperty(A, k, {
73 | // value: mappedValue,
74 | // writable: true,
75 | // enumerable: true,
76 | // configurable: true
77 | // });
78 |
79 | // For best browser support, use the following:
80 | A[k] = mappedValue;
81 | }
82 | // d. Increase k by 1.
83 | k++;
84 | }
85 |
86 | // 9. return A
87 | return A;
88 | };
89 | }
--------------------------------------------------------------------------------
/playground/try-it-out/polyfills/map.js:
--------------------------------------------------------------------------------
1 | // Production steps of ECMA-262, Edition 5, 15.4.4.19
2 | // Reference: http://es5.github.io/#x15.4.4.19
3 | if (!Array.prototype.map) {
4 |
5 | Array.prototype.map = function(callback, thisArg) {
6 |
7 | var T, A, k;
8 |
9 | if (this == null) {
10 | throw new TypeError(' this is null or not defined');
11 | }
12 |
13 | // 1. Let O be the result of calling ToObject passing the |this|
14 | // value as the argument.
15 | var O = Object(this);
16 |
17 | // 2. Let lenValue be the result of calling the Get internal
18 | // method of O with the argument "length".
19 | // 3. Let len be ToUint32(lenValue).
20 | var len = O.length >>> 0;
21 |
22 | // 4. If IsCallable(callback) is false, throw a TypeError exception.
23 | // See: http://es5.github.com/#x9.11
24 | if (typeof callback !== 'function') {
25 | throw new TypeError(callback + ' is not a function');
26 | }
27 |
28 | // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
29 | if (arguments.length > 1) {
30 | T = thisArg;
31 | }
32 |
33 | // 6. Let A be a new array created as if by the expression new Array(len)
34 | // where Array is the standard built-in constructor with that name and
35 | // len is the value of len.
36 | A = new Array(len);
37 |
38 | // 7. Let k be 0
39 | k = 0;
40 |
41 | // 8. Repeat, while k < len
42 | while (k < len) {
43 |
44 | var kValue, mappedValue;
45 |
46 | // a. Let Pk be ToString(k).
47 | // This is implicit for LHS operands of the in operator
48 | // b. Let kPresent be the result of calling the HasProperty internal
49 | // method of O with argument Pk.
50 | // This step can be combined with c
51 | // c. If kPresent is true, then
52 | if (k in O) {
53 |
54 | // i. Let kValue be the result of calling the Get internal
55 | // method of O with argument Pk.
56 | kValue = O[k];
57 |
58 | // ii. Let mappedValue be the result of calling the Call internal
59 | // method of callback with T as the this value and argument
60 | // list containing kValue, k, and O.
61 | mappedValue = callback.call(T, kValue, k, O);
62 |
63 | // iii. Call the DefineOwnProperty internal method of A with arguments
64 | // Pk, Property Descriptor
65 | // { Value: mappedValue,
66 | // Writable: true,
67 | // Enumerable: true,
68 | // Configurable: true },
69 | // and false.
70 |
71 | // In browsers that support Object.defineProperty, use the following:
72 | // Object.defineProperty(A, k, {
73 | // value: mappedValue,
74 | // writable: true,
75 | // enumerable: true,
76 | // configurable: true
77 | // });
78 |
79 | // For best browser support, use the following:
80 | A[k] = mappedValue;
81 | }
82 | // d. Increase k by 1.
83 | k++;
84 | }
85 |
86 | // 9. return A
87 | return A;
88 | };
89 | }
--------------------------------------------------------------------------------
/playground/try-it-out-bin/polyfills/map.js:
--------------------------------------------------------------------------------
1 | // Production steps of ECMA-262, Edition 5, 15.4.4.19
2 | // Reference: http://es5.github.io/#x15.4.4.19
3 | if (!Array.prototype.map) {
4 |
5 | Array.prototype.map = function(callback, thisArg) {
6 |
7 | var T, A, k;
8 |
9 | if (this == null) {
10 | throw new TypeError(' this is null or not defined');
11 | }
12 |
13 | // 1. Let O be the result of calling ToObject passing the |this|
14 | // value as the argument.
15 | var O = Object(this);
16 |
17 | // 2. Let lenValue be the result of calling the Get internal
18 | // method of O with the argument "length".
19 | // 3. Let len be ToUint32(lenValue).
20 | var len = O.length >>> 0;
21 |
22 | // 4. If IsCallable(callback) is false, throw a TypeError exception.
23 | // See: http://es5.github.com/#x9.11
24 | if (typeof callback !== 'function') {
25 | throw new TypeError(callback + ' is not a function');
26 | }
27 |
28 | // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
29 | if (arguments.length > 1) {
30 | T = thisArg;
31 | }
32 |
33 | // 6. Let A be a new array created as if by the expression new Array(len)
34 | // where Array is the standard built-in constructor with that name and
35 | // len is the value of len.
36 | A = new Array(len);
37 |
38 | // 7. Let k be 0
39 | k = 0;
40 |
41 | // 8. Repeat, while k < len
42 | while (k < len) {
43 |
44 | var kValue, mappedValue;
45 |
46 | // a. Let Pk be ToString(k).
47 | // This is implicit for LHS operands of the in operator
48 | // b. Let kPresent be the result of calling the HasProperty internal
49 | // method of O with argument Pk.
50 | // This step can be combined with c
51 | // c. If kPresent is true, then
52 | if (k in O) {
53 |
54 | // i. Let kValue be the result of calling the Get internal
55 | // method of O with argument Pk.
56 | kValue = O[k];
57 |
58 | // ii. Let mappedValue be the result of calling the Call internal
59 | // method of callback with T as the this value and argument
60 | // list containing kValue, k, and O.
61 | mappedValue = callback.call(T, kValue, k, O);
62 |
63 | // iii. Call the DefineOwnProperty internal method of A with arguments
64 | // Pk, Property Descriptor
65 | // { Value: mappedValue,
66 | // Writable: true,
67 | // Enumerable: true,
68 | // Configurable: true },
69 | // and false.
70 |
71 | // In browsers that support Object.defineProperty, use the following:
72 | // Object.defineProperty(A, k, {
73 | // value: mappedValue,
74 | // writable: true,
75 | // enumerable: true,
76 | // configurable: true
77 | // });
78 |
79 | // For best browser support, use the following:
80 | A[k] = mappedValue;
81 | }
82 | // d. Increase k by 1.
83 | k++;
84 | }
85 |
86 | // 9. return A
87 | return A;
88 | };
89 | }
--------------------------------------------------------------------------------
/docs/cssx-lang.md:
--------------------------------------------------------------------------------
1 | # CSSX language
2 |
3 | CSSX is not a new language. It's still the CSS that we know and use every day. The difference is that we write it inside a JavaScript context. That's possible because we now have an access to [CSSX transpiler](https://github.com/krasimir/cssx/tree/master/packages/cssx-transpiler). It understand and successfully transforms expressions like this:
4 |
5 | ```js
6 | sheet.add();
12 | ```
13 |
14 | The `);
23 | ```
24 |
25 | ## Language expressions
26 |
27 | #### ``
28 |
29 | It returns an object.
30 |
31 | Example:
32 |
33 | ```js
34 | var sheet = cssx('id');
35 | sheet.add();
41 | ```
42 |
43 | Same as:
44 |
45 | ```js
46 | var sheet = cssx('id');
47 | sheet.add({
48 | body: {
49 | margin: 0,
50 | padding: 0
51 | }
52 | });
53 | ```
54 |
55 | The `id` passed to `cssx` is optional. If you don't provide one the library will generate it for you. However, we should say that running only `cssx()` generates a new stylesheet every time. So if we plan to execute such code many times it's good to provide an ID.
56 |
57 | #### ``
58 |
59 | It returns a vanilla JavaScript object literal.
60 |
61 | Example:
62 |
63 | ```js
64 | var styles = ;
68 | ```
69 |
70 | Same as :
71 |
72 | ```js
73 | var styles = {
74 | "font-size": "1em",
75 | "line-height": "1.2em"
76 | };
77 | ```
78 |
79 | ## Using JavaScript
80 |
81 | We are writing CSSX in JavaScript context. So it has an access to all the data in the current scope.
82 |
83 | ```js
84 | var property = 'size';
85 | var value = 18;
86 | var sheet = cssx();
87 |
88 | sheet.add();
93 | ```
94 |
95 | There are three ways to define dynamic expressions:
96 |
97 | * ` ... ` (grave accents (backticks))
98 | * `{{ ... }}`
99 | * `<% ... %>`
100 |
101 | The transpiler converts the string inside the expression to a valid JavaScript. The code above is transformed to the following:
102 |
103 | ```js
104 | var property = 'size';
105 | var value = 18;
106 | var sheet = cssx();
107 |
108 | sheet.add((function () {
109 | var _2 = {},
110 | _3 = {};
111 | _3["font-" + property] = value + 2 + "px";
112 | _2['body'] = _3;
113 | return _2;
114 | }.apply(this)));
115 | ```
116 |
117 | And the produced CSS:
118 |
119 | ```css
120 | body {
121 | font-size: 20px;
122 | }
123 | ```
124 |
125 | ## Where to go from here
126 |
127 | Check out the [plugin](./plugins.md) docs to see how to use CSSX together with PostCSS.
128 |
129 | Check out [CSSX client-side](https://github.com/krasimir/cssx/tree/master/packages/cssx) library or learn how to use the [transpiler](https://github.com/krasimir/cssx/tree/master/packages/cssx-transpiler).
130 |
--------------------------------------------------------------------------------
/site/script.js:
--------------------------------------------------------------------------------
1 | var CODEMIRROR_SETTINGS = {
2 | value: '',
3 | mode: 'javascript',
4 | tabSize: 2,
5 | lineNumbers: false,
6 | autofocus: true,
7 | foldGutter: false,
8 | // gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
9 | };
10 |
11 | var el = function (sel) { return document.querySelector(sel); };
12 |
13 | var renderJSEditor = function (onChange) {
14 | var editor = CodeMirror(el('.js-code-mirror'), CODEMIRROR_SETTINGS);
15 |
16 | editor.on('change', function () {
17 | onChange(editor.getValue());
18 | });
19 | editor.setValue('// Loading ...');
20 |
21 | editor.focus();
22 | return editor;
23 | }
24 | var renderError = function(message) {
25 | var container = el('.js-error');
26 | container.innerHTML = message;
27 | container.style.transform = container.style.webkitTransform = 'translateY(0)';
28 | }
29 | var renderErrorOut = function() {
30 | var container = el('.js-error');
31 | container.style.transform = container.style.webkitTransform = 'translateY(-100px)';
32 | }
33 | var compileJS = function(js) {
34 | var transpiled = '', func;
35 | var transpilerOpts = { minified: false };
36 |
37 | try {
38 | transpiled = CSSXTranspiler(js, transpilerOpts);
39 | renderErrorOut();
40 | } catch(err) {
41 | renderError('Error while transpiling:
' + err.message);
42 | return;
43 | }
44 |
45 | cssx.clear();
46 | try {
47 | func = new Function('cssx', transpiled);
48 | renderErrorOut();
49 | } catch(err) {
50 | renderError('Error while using the transpiled code:
' + err.message);
51 | return;
52 | }
53 |
54 | try {
55 | func(cssx);
56 | renderErrorOut();
57 | } catch(err) {
58 | renderError('Error while running the transpiled code:
' + err.message);
59 | return;
60 | }
61 |
62 | try {
63 | generatedCSS = cssx.getStylesheets().map(function (stylesheet) {
64 | return stylesheet.compileImmediate().getCSS();
65 | });
66 | css = generatedCSS.join('');
67 | renderErrorOut();
68 | } catch(err) {
69 | renderError('Error while fetching the generated CSS:
' + err.message);
70 | return false;
71 | }
72 |
73 | }
74 |
75 | window.onload = function () {
76 |
77 | var editor;
78 | var loadDefaultJS = function (cb) {
79 | $.ajax({
80 | url: './site/default.js?r=2',
81 | dataType: 'javascript',
82 | success: cb,
83 | error: function(xhr, type){
84 | editor.setValue('// Error while loading default.js');
85 | }
86 | })
87 | };
88 |
89 | cssx.minify(false);
90 | editor = renderJSEditor(function (value) {
91 | compileJS(value);
92 | });
93 |
94 | loadDefaultJS(function (js) {
95 | editor.setValue(js);
96 | });
97 | }
98 |
99 | /* HELPERS */
100 |
101 | function getRandomColor() {
102 | var letters = '0123456789ABCDEF'.split('');
103 | var color = '#';
104 | for (var i = 0; i < 6; i++ ) {
105 | color += letters[Math.floor(Math.random() * 16)];
106 | }
107 | return color;
108 | }
109 | function getRandomInt(min, max) {
110 | return Math.floor(Math.random() * (max - min)) + min;
111 | }
112 | function increaseBrightness(hex, percent){
113 | // strip the leading # if it's there
114 | hex = hex.replace(/^\s*#|\s*$/g, '');
115 |
116 | // convert 3 char codes --> 6, e.g. `E0F` --> `EE00FF`
117 | if(hex.length == 3){
118 | hex = hex.replace(/(.)/g, '$1$1');
119 | }
120 |
121 | var r = parseInt(hex.substr(0, 2), 16),
122 | g = parseInt(hex.substr(2, 2), 16),
123 | b = parseInt(hex.substr(4, 2), 16);
124 |
125 | return '#' +
126 | ((0|(1<<8) + r + (256 - r) * percent / 100).toString(16)).substr(1) +
127 | ((0|(1<<8) + g + (256 - g) * percent / 100).toString(16)).substr(1) +
128 | ((0|(1<<8) + b + (256 - b) * percent / 100).toString(16)).substr(1);
129 | }
--------------------------------------------------------------------------------
/packages/cssx-transpiler/src/visitors/CSSXRules.js:
--------------------------------------------------------------------------------
1 | var t = require('babel-types');
2 | var randomId = require('../helpers/randomId');
3 | var isArray = require('../helpers/isArray');
4 |
5 | module.exports = {
6 | enter: function (node, parent, index, context) {},
7 | exit: function (node, parent, index, context) {
8 | var propAssignment, addToContext, processRule, key;
9 | var rules = node.body;
10 | var nestedGrouped = [];
11 | var normalizedRules = {};
12 | var id = randomId();
13 | var rulesBuffer, bufferItem, selector;
14 |
15 | addToContext = function (item) {
16 | if (context && context.addToCSSXSelfInvoke) {
17 | context.addToCSSXSelfInvoke(item, parent);
18 | }
19 | };
20 |
21 | processRule = function (rule) {
22 | propAssignment = t.expressionStatement(
23 | t.assignmentExpression(
24 | '=',
25 | t.memberExpression(
26 | t.identifier(id),
27 | rule.key,
28 | true
29 | ),
30 | isArray(rule.value.value) ?
31 | t.arrayExpression(rule.value.value.map(function (v) {
32 | return t.stringLiteral(v);
33 | })) :
34 | rule.value
35 | )
36 | );
37 | addToContext(propAssignment);
38 | };
39 |
40 | addToContext(t.variableDeclaration(
41 | 'var',
42 | [
43 | t.variableDeclarator(
44 | t.identifier(id),
45 | t.objectExpression([])
46 | )
47 | ]
48 | ));
49 |
50 | // normalize the rules so we don't have multiple rules for same CSS property
51 | normalizedRules = rules.reduce(function (result, rule) {
52 | var r = result[rule.key.value];
53 |
54 | if (!r) {
55 | result[rule.key.value] = rule;
56 | } else {
57 | if (isArray(r.value.value)) {
58 | r.value.value.push(rule.value.value);
59 | } else {
60 | r.value.value = [r.value.value, rule.value.value];
61 | }
62 | }
63 | return result;
64 | }, {});
65 |
66 | // processing nested rules (if any)
67 | rulesBuffer = {};
68 | (node.nested || []).forEach(function (cssxElementNode, index) {
69 | selector = cssxElementNode.expression.left.property.value;
70 | bufferItem = rulesBuffer[selector];
71 | if (!bufferItem) {
72 | rulesBuffer[selector] = { type: 'single', el: cssxElementNode };
73 | } else {
74 | if (bufferItem.type === 'single') {
75 | rulesBuffer[selector] = { type: 'multiple', els: [ bufferItem.el, cssxElementNode ] };
76 | } else {
77 | bufferItem.els.push(cssxElementNode);
78 | }
79 | }
80 | });
81 |
82 | for (selector in rulesBuffer) {
83 | bufferItem = rulesBuffer[selector];
84 | if (bufferItem.type === 'single') {
85 | addToContext(t.expressionStatement(
86 | t.assignmentExpression(
87 | '=',
88 | t.memberExpression(
89 | t.identifier(id),
90 | t.stringLiteral(selector),
91 | true
92 | ),
93 | t.identifier(bufferItem.el.expression.right.name)
94 | )
95 | ));
96 | } else {
97 | nestedGrouped = bufferItem.els.map(function (bufferItem) {
98 | return t.identifier(bufferItem.expression.right.name);
99 | });
100 | addToContext(t.expressionStatement(
101 | t.assignmentExpression(
102 | '=',
103 | t.memberExpression(
104 | t.identifier(id),
105 | t.stringLiteral(selector),
106 | true
107 | ),
108 | t.arrayExpression(nestedGrouped)
109 | )
110 | ));
111 | }
112 | }
113 |
114 | for (key in normalizedRules) {
115 | processRule(normalizedRules[key]);
116 | }
117 |
118 | parent[index] = t.identifier(id);
119 | }
120 | };
121 |
--------------------------------------------------------------------------------