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:
@@ -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,
|
||||||
|
@@ -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">
|
||||||
|
@@ -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;
|
||||||
|
Reference in New Issue
Block a user