add configurations support for ACSS. fixes #109

src/index.html

@@ -101,6 +101,11 @@
 								</select>
 							</label>
 							<div class="code-wrap__header-right-options">
+								<a href="#" id="cssSettingsBtn" title="Atomic CSS configuration" d-click="openCssSettingsModal" class="code-wrap__header-btn hide">
+									<svg>
+										<use xlink:href="#settings-icon"></use>
+									</svg>
+								</a>
 								<a class="js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn" title="Toggle code pane">
 								</a>
 							</div>
@@ -261,6 +266,16 @@
 			</div>
 		</div>
 
+		<div class="modal" id="cssSettingsModal">
+			<div class="modal__content">
+				<h1>Atomic CSS Settings</h1>
+				<h3>Configure Atomizer settings. <a href="https://github.com/acss-io/atomizer#api" target="_blank">Read more</a> about available settings.</h3>
+				<div style="height: calc(100vh - 350px);">
+					<textarea id="acssSettingsTextarea" cols="30" rows="10"></textarea>
+				</div>
+			</div>
+		</div>
+
 		<div class="modal" id="helpModal">
 			<div class="modal__content">
 				<h1>Web Maker<small style="font-size:14px;"> v2.8.1</small></h1>

src/script.js

@@ -6,7 +6,7 @@ notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settings
 onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
 onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
 runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
-customEditorFontInput
+customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea
 */
 /* eslint-disable no-extra-semi */
 (function(alertsService) {
@@ -95,7 +95,8 @@ customEditorFontInput
 		cmPath: 'css',
 		cmMode: 'css',
 		codepenVal: 'notsupported',
-		cmDisable: true
+		cmDisable: true,
+		hasSettings: true
 	};
 
 	const AUTO_SAVE_INTERVAL = 15000; // 15 seconds
@@ -369,6 +370,9 @@ customEditorFontInput
 		currentItem.htmlMode = htmlMode;
 		currentItem.cssMode = cssMode;
 		currentItem.jsMode = jsMode;
+		currentItem.cssSettings = {
+			acssConfig: scope.acssSettingsCm.getValue()
+		};
 		currentItem.updatedOn = Date.now();
 		currentItem.layoutMode = currentLayoutMode;
 		currentItem.externalLibs = {
@@ -592,6 +596,11 @@ customEditorFontInput
 		scope.cm.css.refresh();
 		scope.cm.js.refresh();
 
+		scope.acssSettingsCm.setValue(
+			currentItem.cssSettings ? currentItem.cssSettings.acssConfig : ''
+		);
+		scope.acssSettingsCm.refresh();
+
 		scope.clearConsole();
 
 		// To have the library count updated
@@ -614,6 +623,7 @@ customEditorFontInput
 		addLibraryModal.classList.remove('is-modal-visible');
 		onboardModal.classList.remove('is-modal-visible');
 		settingsModal.classList.remove('is-modal-visible');
+		cssSettingsModal.classList.remove('is-modal-visible');
 		toggleSavedItemsPane(false);
 		document.dispatchEvent(new Event('overlaysClosed'));
 	}
@@ -681,6 +691,9 @@ customEditorFontInput
 		cssModelLabel.parentElement.querySelector('select').value = value;
 		scope.cm.css.setOption('mode', modes[value].cmMode);
 		scope.cm.css.setOption('readOnly', modes[value].cmDisable);
+		cssSettingsBtn.classList[modes[value].hasSettings ? 'remove' : 'add'](
+			'hide'
+		);
 		CodeMirror.autoLoadMode(
 			scope.cm.css,
 			modes[value].cmPath || modes[value].cmMode
@@ -770,7 +783,15 @@ customEditorFontInput
 		} else if (cssMode === CssModes.ACSS) {
 			const html = scope.cm.html.getValue();
 			const foundClasses = atomizer.findClassNames(html);
-			const finalConfig = atomizer.getConfig(foundClasses, {});
+			var finalConfig;
+			try {
+				finalConfig = atomizer.getConfig(
+					foundClasses,
+					JSON.parse(scope.acssSettingsCm.getValue())
+				);
+			} catch (e) {
+				finalConfig = atomizer.getConfig(foundClasses, {});
+			}
 			const acss = atomizer.getCss(finalConfig);
 			scope.cm.css.setValue(acss);
 			d.resolve(acss);
@@ -1046,7 +1067,7 @@ customEditorFontInput
 	}
 
 	scope.setPreviewContent = function(isForced) {
-		if( !prefs.preserveConsoleLogs ) {
+		if (!prefs.preserveConsoleLogs) {
 			scope.clearConsole();
 		}
 
@@ -1832,6 +1853,10 @@ customEditorFontInput
 		var intervalID = window.setInterval(checkWindow, 500);
 	};
 
+	scope.openCssSettingsModal = function() {
+		scope.toggleModal(cssSettingsModal);
+	};
+
 	function init() {
 		var lastCode;
 
@@ -2270,6 +2295,13 @@ customEditorFontInput
 			}
 		);
 
+		scope.acssSettingsCm = CodeMirror.fromTextArea(acssSettingsTextarea, {
+			mode: 'json'
+		});
+		scope.acssSettingsCm.on('blur', () => {
+			scope.setPreviewContent(true);
+		});
+
 		var options = '';
 		[
 			'3024-day',