1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-08-02 11:30:22 +02:00

add atomizer css support. fixes #100

This commit is contained in:
Kushagra Gour
2017-04-28 01:03:43 +05:30
parent 0c85f79bae
commit 40c4cc7209
3 changed files with 15 additions and 1 deletions

View File

@@ -256,6 +256,7 @@
"Sass": true, "Sass": true,
"less": true, "less": true,
"stylus": true, "stylus": true,
"atomizer": true,
"marked": true, "marked": true,
"jade": true, "jade": true,
"loadJS": true, "loadJS": true,

View File

@@ -66,6 +66,7 @@
<li><a data-type="css" data-mode="sass">SASS</a></li> <li><a data-type="css" data-mode="sass">SASS</a></li>
<li><a data-type="css" data-mode="less">LESS</a></li> <li><a data-type="css" data-mode="less">LESS</a></li>
<li><a data-type="css" data-mode="stylus">Stylus</a></li> <li><a data-type="css" data-mode="stylus">Stylus</a></li>
<li><a data-type="css" data-mode="acss">Atomic CSS</a></li>
</ul> </ul>
</div> </div>
<div class="code-wrap__header-right-options"> <div class="code-wrap__header-right-options">

View File

@@ -26,7 +26,8 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
SCSS: 'scss', SCSS: 'scss',
SASS: 'sass', SASS: 'sass',
LESS: 'less', LESS: 'less',
STYLUS: 'stylus' STYLUS: 'stylus',
ACSS: 'acss'
}; };
var JsModes = { var JsModes = {
JS: 'js', JS: 'js',
@@ -47,6 +48,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
modes[CssModes.SASS] = { label: 'SASS', cmMode: 'sass', codepenVal: 'sass' }; modes[CssModes.SASS] = { label: 'SASS', cmMode: 'sass', codepenVal: 'sass' };
modes[CssModes.LESS] = { label: 'LESS', cmPath: 'css', cmMode: 'text/x-less', codepenVal: 'less' }; modes[CssModes.LESS] = { label: 'LESS', cmPath: 'css', cmMode: 'text/x-less', codepenVal: 'less' };
modes[CssModes.STYLUS] = { label: 'Stylus', cmMode: 'stylus', codepenVal: 'stylus' }; modes[CssModes.STYLUS] = { label: 'Stylus', cmMode: 'stylus', codepenVal: 'stylus' };
modes[CssModes.ACSS] = { label: 'Atomic CSS', cmPath: 'css', cmMode: 'css', codepenVal: 'notsupported', cmDisable: true };
var updateTimer var updateTimer
, updateDelay = 500 , updateDelay = 500
@@ -502,6 +504,8 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
}); });
} else if (mode === CssModes.STYLUS) { } else if (mode === CssModes.STYLUS) {
loadJS('lib/stylus.min.js').then(setLoadedFlag); loadJS('lib/stylus.min.js').then(setLoadedFlag);
} else if (mode === CssModes.ACSS) {
loadJS('lib/atomizer.browser.js').then(setLoadedFlag);
} else if (mode === JsModes.COFFEESCRIPT) { } else if (mode === JsModes.COFFEESCRIPT) {
loadJS('lib/coffee-script.js').then(setLoadedFlag); loadJS('lib/coffee-script.js').then(setLoadedFlag);
} else if (mode === JsModes.ES6) { } else if (mode === JsModes.ES6) {
@@ -526,6 +530,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
cssMode = value; cssMode = value;
cssModelLabel.textContent = modes[value].label; cssModelLabel.textContent = modes[value].label;
scope.cm.css.setOption('mode', modes[value].cmMode); scope.cm.css.setOption('mode', modes[value].cmMode);
scope.cm.css.setOption('readOnly', modes[value].cmDisable);
CodeMirror.autoLoadMode(scope.cm.css, modes[value].cmPath || modes[value].cmMode); CodeMirror.autoLoadMode(scope.cm.css, modes[value].cmPath || modes[value].cmMode);
return handleModeRequirements(value); return handleModeRequirements(value);
} }
@@ -588,6 +593,13 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
} }
d.resolve(result); d.resolve(result);
}); });
} else if (cssMode === CssModes.ACSS) {
var html = scope.cm.html.getValue();
var foundClasses = atomizer.findClassNames(html);
var finalConfig = atomizer.getConfig(foundClasses, {});
var acss = atomizer.getCss(finalConfig);
scope.cm.css.setValue(acss);
d.resolve(acss)
} }
return d.promise; return d.promise;