Extract classes into @apply directive in the corresponding place

[edimitchel]

Hi folks !

I'm thinking about a great feature that miss with Tailwind : select a class (the text cursor in the class attribute) and do a command that will take all classes and extract it into the best place.
With Vue or Svelte, inside the style block. Otherwise, in another file.
The classe name have to be written by the user in sync with the classe attributes value.
And so, classes are extracted as well !

If I have time, I will try to code something. But I'll need help !!

[alexanderniebuhr]

#8

[alexanderniebuhr]

extraction of all classes into external file already exists as commands. maybe you can hook into it

[eikaramba]

can you elaborate how this can be done? at least in the plugin documentation i did not see such a command :)

[alexanderniebuhr]

@eikaramba it is still a feature yet to be implemented, not had time to tackle this

[eikaramba]

ahh okay, no problem. i will try at the weekend whether i understand the code and help out, as i would like to have this ;)

[alexanderniebuhr]

the existing commands for extracting style, just put them into an css file
so to resolve #8 and this issue, we would based on editor opened file put the code generated similar to the existing commands into the exiting / or new <style> </style> tag. another idea is to just add this code into clipboard maybe, then user can paste wherever they need it

windicss-intellisense/src/lib/commands.ts

Lines 18 to 53 in c382ae0

	disposables.push(
	commands.registerTextEditorCommand('windicss.interpret', (textEditor, textEdit) => {
	if (!core.processor) return;
	const text = textEditor.document.getText();
	const parser = new HTMLParser(text);
	const preflights = core.processor.preflight(text);
	const utilities = core.processor.interpret(parser.parseClasses().map(i => i.result).join(' ')).styleSheet;
	writeFileSync(join(dirname(textEditor.document.uri.fsPath), 'windi.css'), [preflights.build(), utilities.build()].join('\n'));
	})
	);
	disposables.push(
	commands.registerTextEditorCommand('windicss.compile', (textEditor, textEdit) => {
	if (!core.processor) return;
	const text = textEditor.document.getText();
	const parser = new HTMLParser(text);
	const preflights = core.processor.preflight(text);
	const outputHTML: string[] = [];
	const outputCSS: StyleSheet[] = [];
	let indexStart = 0;
	for (const p of parser.parseClasses()) {
	outputHTML.push(text.substring(indexStart, p.start));
	const result = core.processor.compile(p.result, 'windi-', true);
	outputCSS.push(result.styleSheet);
	outputHTML.push([result.className, ...result.ignored].join(' '));
	indexStart = p.end;
	}
	outputHTML.push(text.substring(indexStart));
	const utilities = outputCSS.reduce((previousValue, currentValue) => previousValue.extend(currentValue), new StyleSheet()).combine();
	textEdit.replace(new Range(new Position(0, 0), textEditor.document.lineAt(textEditor.document.lineCount - 1).range.end), outputHTML.join(''));
	writeFileSync(join(dirname(textEditor.document.uri.fsPath), 'windi.css'), [preflights.build(), utilities.build()].join('\n'));
	})
	);