[wip] Stylis CSS Middleware initial commit

[giuseppeg]

No description provided.

[thysultan]

@giuseppeg Everything after this point including :global should already be handled by stylis and the middleware, Is there a reason to iterate through the characters again?

[giuseppeg]

@thysultan in your snippet you split selectors by space str.split(' ') which is not reliable.

[thysultan]

@giuseppeg Apart from [title="hello world"] h2 an attribute case what other case do you think that will break on. I have the following that will make it work in the above case.

if (pos !== -1) {
	var edge;

	if (/\[.*[ ].*\]/g.exec(str) !== null) {
		edge = true;
		str = str.replace(/ (.*(?=\]))/g, '<-!->$1');
	}

	var parts = str.split(' ');

	for (var i = 0; i < parts.length; i++) {
		var part = parts[i];
		pos = part.indexOf(':');

		parts[i] = pos !== -1 ? part.substring(0, pos) + prefix + part.substring(pos) : part + prefix;
	}

	str = parts.join(' ');

	if (edge === true) {
		str = str.replace(/<-!->/g, ' ');
	}

	return str;
}

[thysultan]

This might be better than the split solution i first came up with.

if (ctx === 1.5) {
	// stylis does not prefix `:global()`
	if (str.indexOf(prefix+' ') === 0) {
		// remove prefix
		str = str.substring(prefix.length).trim();

		// single selector
		if (str.indexOf(' ') !== -1) {
			return str.replace(/.+\]|[^ \n\r\t]+/g, function (match) {
				var indexOf = match.indexOf(':');

				// :hover etc...
				if (indexOf !== -1) {
					// global
					if (match.charCodeAt(indexOf+1) === 103) {
						return match.replace(/:global\((.*)\)/g, '$1').trim();
					}
					else {
						return match.substring(0, indexOf) + prefix + match.substring(indexOf);
					}
				}
				else {
					return match + prefix;
				}
			});
		}
		else {
			return str + prefix;
		}
	}
}

[giuseppeg]

at this stage my version seems more robust (I get less compilation errors) but I am open to suggestions

[thysultan]

Ok, will test it out locally to see what tests fail, might be vendor prefixing and whitespace issues since stylis has gone through a few patches since.

[thysultan]

@giuseppeg Tweaked the middleware a bit to be more robust only thing failing now is source-maps generation https://github.com/thysultan/styled-jsx/commits/master last two commits.

Edit: https://github.com/thysultan/styled-jsx/commits/rewrite-css-compiler-v2

[giuseppeg]

cool! do normal and :global selector support nested parenthesis? e.g. :global(div:not(.foo))

[giuseppeg]

if you create a branch and submit a PR (even if work in progress) I can leave some comments on your code

[thysultan]

do normal and :global selector support nested parenthesis? e.g. :global(div:not(.foo))

Yes.

h1 :global(div:not(.foo)) {
	color: red;
}

produces...

h1[data-jsx="123"] div:not(.foo) {color: red;}

[giuseppeg]

we went for #134