Mangling fixes, Twig match areas, Tunning

packages/stylify/src/Compiler/Compiler.ts

@@ -452,14 +452,9 @@ export class Compiler {
 			contentToProcess = contentToProcess.replace(
 				/\[([^{}\s]+)\]{([^{}]+)}/g,
 				(fullMatch: string, cssSelectors: string, stylifySelectors: string) => {
-					const customSelector = MacroMatch.replaceCharactersAliases(cssSelectors);
-					const customSelectorSelector = this.mangleSelectors
-						? minifiedSelectorGenerator.getMangledSelector(fullMatch, null)
-						: fullMatch;
-
 					this.addCustomSelector(
-						customSelectorSelector,
-						`${customSelector}{${stylifySelectors.replace(/;/g, ' ')}}`,
+						this.generateMangledSelector(fullMatch, null),
+						`${MacroMatch.replaceCharactersAliases(cssSelectors)}{${stylifySelectors.replace(/;/g, ' ')}}`,
 						false,
 						'customMatchedInClass'
 					);
@@ -471,12 +466,8 @@ export class Compiler {
 			contentToProcess = contentToProcess.replace(
 				/(\S+):{([^{}]+)}/g,
 				(fullMatch: string, screenAndPseudoClasses: string, stylifySelectors: string) => {
-					const customSelectorSelector = this.mangleSelectors
-						? minifiedSelectorGenerator.getMangledSelector(fullMatch, null)
-						: fullMatch;
-
 					this.addCustomSelector(
-						customSelectorSelector,
+						this.generateMangledSelector(fullMatch, null),
 						stylifySelectors.split(';')
 							.map((stylifySelector) => `${screenAndPseudoClasses}:${stylifySelector}`)
 							.join(' '),
@@ -537,6 +528,14 @@ export class Compiler {
 		return contentOptions as Data;
 	}
 
+	private generateMangledSelector(selector: string, prefix: string|null = '.'): string {
+		if (!this.mangleSelectors) {
+			return selector;
+		}
+
+		return minifiedSelectorGenerator.generateMangledSelector(selector, prefix);
+	}
+
 	private configureCompilationResult(compilationResult: CompilationResult): CompilationResult
 	{
 		const newLine = this.dev ? '\n' : '';
@@ -634,7 +633,7 @@ export class Compiler {
 			const isUtilitiesGroup = config.type === 'utilitiesGroup';
 			const isCustomSelectorMatchedInClass = config.type === 'customMatchedInClass';
 			const isClassSelector = isComponent || isUtilitiesGroup || isCustomSelectorMatchedInClass;
-			const preparedEscapedSelector = config.type === 'custom'
+			const preparedEscapedSelector = this.mangleSelectors || config.type === 'custom'
 				? selector
 				: escapeCssSelector(selector, isComponent || isUtilitiesGroup || isCustomSelectorMatchedInClass);
 
@@ -670,7 +669,7 @@ export class Compiler {
 
 								return fullMatch.substring(1).replace(
 									prepareStringForReplace(clearedComponentName),
-									`.${minifiedSelectorGenerator.getMangledSelector(clearedComponentName)}`
+									`.${this.generateMangledSelector(clearedComponentName)}`
 								);
 							});
 					}
@@ -715,8 +714,7 @@ export class Compiler {
 						})
 						: selectorsOrGenerator;
 
-					minifiedSelectorGenerator.getMangledSelector(componentSelector);
-
+					this.generateMangledSelector(componentSelector);
 					this.addCustomSelector(componentSelector, componentSelectors, false, 'component');
 				}
 			}

packages/stylify/src/Compiler/CssRecord.ts

@@ -57,7 +57,7 @@ export class CssRecord {
 		}
 
 		this.mangledSelector = config.selector
-			? minifiedSelectorGenerator.getMangledSelector(config.selector)
+			? minifiedSelectorGenerator.generateMangledSelector(config.selector)
 			: this.mangledSelector;
 		this.screenId = config.screenId ?? this.screenId;
 		this.selector = config.selector?.replace(/([^-_a-zA-Z\d])/g, '\\$1') ?? this.selector;

packages/stylify/src/Compiler/MinifiedSelectorGenerator.ts

@@ -21,7 +21,7 @@ export class MinifiedSelectorGenerator {
 		return addPrefix ? `${this.processedSelectors[selector].prefix ?? ''}${selector}`: selector;
 	}
 
-	public getMangledSelector(selector: string, prefix: string|null = '.') {
+	public generateMangledSelector(selector: string, prefix: string|null = '.') {
 		if (!(selector in this.processedSelectors)) {
 			this.processedSelectors[selector] = {
 				mangledSelector: this.divideLengthAndGetLetter(
@@ -34,6 +34,10 @@ export class MinifiedSelectorGenerator {
 		return this.processedSelectors[selector].mangledSelector;
 	}
 
+	public getMangledSelector(selector: string) {
+		return this.processedSelectors[selector]?.mangledSelector ?? null;
+	}
+
 	private divideLengthAndGetLetter(length: number): string {
 		let shortSelector = '';
 

packages/stylify/src/Compiler/defaultPreset.ts

@@ -113,7 +113,12 @@ export const defaultPreset = {
 		'(?:^|\\s+)\\[(?:ngClass|className)\\]=\'([^\']+)',
 		// Nette
 		'(?:^|\\s+)n:class="([^"]+)"',
-		'(?:^|\\s+)n:class=\'([^\']+)\''
+		'(?:^|\\s+)n:class=\'([^\']+)\'',
+		// Twig form widgets
+		'\'class\':\\s*\'([^\']+)\'',
+		'\'class\':\\s*"([^"]+)"',
+		'"class":\\s*"([^"]+)"',
+		'"class":\\s*\'([^\']+)\''
 	],
 	screens: {
 		tosm: maxWidthScreen('639px'),

packages/stylify/tests/jest/components/expected/mangle-dynamic-components.css

@@ -2,12 +2,12 @@
 --red: darkred;
 }
 .a,
-.c{
+.b{
 	font-size: 24px
 }
 .a{
 	color: #000
 }
-.c{
+.b{
 	color: darkred
 }

packages/stylify/tests/jest/macros.test.ts

@@ -0,0 +1,55 @@
+import TestUtils from '../../../../tests/TestUtils';
+import { Compiler, minifiedSelectorGenerator } from '../../src';
+
+const testName = 'macros';
+const testUtils = new TestUtils('stylify', testName);
+
+beforeEach(() => minifiedSelectorGenerator.processedSelectors = {});
+
+test('Single letter macros', (): void => {
+	const inputIndex = testUtils.getHtmlInputFile('single-letter-macros');
+
+	const compiler = new Compiler({
+		dev: true,
+		macros: {
+			'm:(\\S+?)': ({macroMatch, selectorProperties}) => {
+				selectorProperties.add('margin', macroMatch.getCapture(0));
+			}
+		}
+	});
+
+	let compilationResult = compiler.compile(inputIndex);
+
+	testUtils.testCssFileToBe(compilationResult.generateCss(), 'single-letter-macros');
+});
+
+test('Custom macros', (): void => {
+	const inputIndex = testUtils.getHtmlInputFile('custom-macros');
+
+	const compiler = new Compiler({
+		dev: true,
+		macros: {
+			'zi:(\\S+?)': ({macroMatch, selectorProperties}) => {
+				selectorProperties.addMultiple({
+					'position': 'relative',
+					'z-index': Number(macroMatch.getCapture(0))
+				});
+			}
+		}
+	});
+
+	let compilationResult = compiler.compile(inputIndex);
+
+	testUtils.testCssFileToBe(compilationResult.generateCss(), 'custom-macros');
+});
+
+test('Selectors areas', (): void => {
+	const inputIndex = testUtils.getHtmlInputFile('selectors-areas');
+
+	const compiler = new Compiler({ dev: true });
+
+	console.log(inputIndex);
+	let compilationResult = compiler.compile(inputIndex);
+	console.log(compilationResult);
+	testUtils.testCssFileToBe(compilationResult.generateCss(), 'selectors-areas');
+});

packages/stylify/tests/jest/macros/expected/selectors-areas.css

@@ -0,0 +1,12 @@
+.color\:blue{
+	color: blue
+}
+.font-size\:1px{
+	font-size: 1px
+}
+.color\:red{
+	color: red
+}
+.font-size\:2px{
+	font-size: 2px
+}

packages/stylify/tests/jest/macros/input/selectors-areas.html

@@ -0,0 +1,2 @@
+{{ form_widget(form, { 'attr': {'class': 'color:blue font-size:1px'} }) }}
+{{ form_widget(form, { 'attr': {"class": 'color:red font-size:2px'} }) }}

packages/stylify/tests/jest/screens.test.ts

@@ -8,14 +8,14 @@ beforeEach(() => {
 	minifiedSelectorGenerator.processedSelectors = {};
 });
 
-/* test('Dynamic screens', (): void => {
+test('Dynamic screens', (): void => {
 	const inputIndex = testUtils.getHtmlInputFile();
 
 	const compiler = new Compiler({ dev: true });
 	let compilationResult = compiler.compile(inputIndex);
 
 	testUtils.testCssFileToBe(compilationResult.generateCss());
-}); */
+});
 
 test('Similar screens', (): void => {
 	const compiler = new Compiler({

packages/stylify/tests/jest/selectors-mangling.test.ts

@@ -12,7 +12,6 @@ beforeEach(() => {
  * This test is here, because dollars were removed when content was mangled. It is becuase $$ is replaced by $
  * and it broke some of the functionality in some codes when mangled.
  */
-
 test('Mangle with special characters - dollars should stay as they are and non should removed.', (): void => {
 	const fileName = 'mangle-with-special-characters';
  	const inputContent = testUtils.getHtmlInputFile(fileName);
@@ -79,3 +78,15 @@ test('Component selector similar to custom selector', (): void => {
 	testUtils.testCssFileToBe(compilationResult.generateCss(), fileName);
 	testUtils.testHtmlFileToBe(compiler.rewriteSelectors(inputContent), fileName);
 });
+
+
+test('Chained classes from custom selector', (): void => {
+	const fileName = 'chained-classes-from-custom-selector';
+	const inputContent = testUtils.getHtmlInputFile(fileName);
+
+	const compiler = new Compiler({ dev: true, mangleSelectors: true });
+	let compilationResult = compiler.compile(inputContent);
+
+	testUtils.testCssFileToBe(compilationResult.generateCss(), fileName);
+	testUtils.testHtmlFileToBe(compiler.rewriteSelectors(inputContent), fileName);
+});

packages/stylify/tests/jest/selectors-mangling/expected/chained-classes-from-custom-selector.css

@@ -0,0 +1,6 @@
+.a{
+	width: 1px
+}
+.b{
+	width: 2px
+}

packages/stylify/tests/jest/selectors-mangling/expected/chained-classes-from-custom-selector.html

@@ -0,0 +1,9 @@
+<!--
+stylify-components
+  container: `
+    width:1px
+    &--lg { width:2px }
+  `
+/stylify-components
+-->
+<div class="a b"></div>

packages/stylify/tests/jest/selectors-mangling/input/chained-classes-from-custom-selector.html

@@ -0,0 +1,9 @@
+<!--
+stylify-components
+  container: `
+    width:1px
+    &--lg { width:2px }
+  `
+/stylify-components
+-->
+<div class="container container--lg"></div>