Update Compiler Fork #8

thysultan · 2016-12-05T15:31:04Z

There's a few things missing pre-v0.6.4 of the stylis compiler that your fork will not handle that could be nice to have.

flat css

/* this should get wrapped in the namespace */
color: red;

h1 {
    font-size:1px;
}

full prefix support in @root and @keyframes blocks.
support opting out of name-spacing keyframes and animations.

I've done away with the regex solution i was using, and added supports for stylis("[data-id=namespace]") namespaces.

The text was updated successfully, but these errors were encountered:

rauchg · 2016-12-07T16:11:36Z

@thysultan what do you think about :host support instead?

thysultan · 2016-12-07T17:01:51Z

@rauchg So these will be the same& { ... } === :host { ... } ?

rauchg · 2016-12-07T17:06:29Z

yep so

<div>
  <style jsx>{`
    :host {
      color: red
    }
  `}</style>
</div>

:host would impact the div.

Alternatively, we could make the div also targetable simply with div { }, but I'm not sure if that's elegant

rauchg · 2016-12-07T17:06:59Z

cc @giuseppeg

thysultan · 2016-12-07T17:11:38Z

sure i can add that, :host will be an alias for &.

giuseppeg · 2016-12-07T18:29:03Z

@rauchg correct :host should resolve to the shadow root aka the div in the example.

One thing to keep in mind is that styles applied from the outside should win over :host's but I guess that this behavior is hard to shim.

Nice to have then it would be to get :host-context(selector) support e.g.:

<body>
  <div>
    <style jsx>{`
      :host-context(body) {
        color: red
      }
    `}</style>
  </div>
</body>

yields

body div[data-jsx="abc"] { color: red }

But probably it is better to tackle this later and maybe also consider the ._aB1bC-ext thing that I suggested in the original issue.

thysultan · 2016-12-07T19:42:21Z

@rauchg @giuseppeg pushed a patch for all the host variations

:host - > ${namespace} {...}
:host(.fancy), -> ${namspace}.fancy {...}
:host-context(body) -> body ${namespace} {...}

commit

giuseppeg · 2016-12-07T20:14:27Z

@thysultan cool in order for * {} to work you need to append the namespace though otherwise ${namespace}* {} won't work. In general I think that suffixing is better than prefixing.

thysultan · 2016-12-07T20:19:36Z

@giuseppeg * {} will generate ${namespace} * {} with a space.

giuseppeg · 2016-12-07T20:30:24Z

@thysultan oh I see, sorry I was thinking in terms of styled-jsx :)

thysultan · 2016-12-07T20:36:02Z

@rauchg instead of this

  <style jsx>{`
    :host {
      color: red
    }
  `}</style>

can this work

<style jsx>`
    :host {
      color: red
    }
`</style>

or better yet a plugin that treats everything in the <style jsx><style> block as a text node/string literal, removing the need for \`or{}`

<style jsx>
    :host {
      color: red
    }
</style>

rauchg · 2016-12-07T22:22:01Z

The latter is invalid JSX unfortunately. It'll think of { … } as an expression

rauchg · 2016-12-07T22:22:33Z

We picked the most optimal syntax considering how JSX works today I think :D

rauchg · 2016-12-16T19:54:43Z

@thysultan what happens here

https://github.com/zeit/styled-jsx/blob/master/lib/style-transform.js#L197

if the selector is something like:

[title="a,b"] {
  color: red
}

thysultan · 2016-12-16T23:25:04Z

@rauchg it will break, i fixed this in 0.7.1 commit

giuseppeg · 2017-02-10T09:38:18Z

@thysultan do you think that it would be trivial to switch to your version of the compiler and write a middleware to add scoping the styled-jsx way (with data-jsx to each selector)? If so would you be interested in helping out?

thysultan · 2017-02-10T11:33:13Z

Sure, the middleware will look something like this

function middleware (ctx, str, line, col, prefix) {
	if (ctx === 1.5) {
                // avoids name-spacing :global() functions
		if (str.indexOf(prefix) === 0) {
			return str.replace(prefix, '') + prefix;
		}
	}
}

This will change h1, h2 { to h1[prefix], h2[prefix] {

The 1.5 context is to be executed at every selector(post-processed) in a selector declaration.

thysultan · 2017-02-10T15:56:12Z

@giuseppeg On the repl site https://stylis.js.org/ You can try the following in the console.

stylis.use(middleware (ctx, str, line, col, prefix) {
	if (ctx === 1.5) {
		if (str.indexOf(prefix+' ') === 0) {
			var pos = (str = str.substring(prefix.length).replace('&', '').trim()).indexOf(' ');
			return pos !== -1 ? str.substring(0, pos) + prefix + str.substring(pos) : str + prefix;
		}
	}
});

and input something into the editor and it should namespace the styled-jsx way.

giuseppeg · 2017-02-10T16:08:50Z

@thysultan the selector below should be .logo[data-jsx="foo"] a[data-jsx="foo"]

i.e. the prefix should be added to every part of the selector (except for globals). Do you think that it is doable with the current version of stylis + middleware?

thysultan · 2017-02-10T16:16:05Z

@giuseppeg Yes doable, what should .logo:hover a { compile to?

giuseppeg · 2017-02-10T16:29:21Z

cool .logo[data-jsx="foo"]:hover a[data-jsx="foo"]

thysultan · 2017-02-10T16:30:48Z

Then this should work as expected.

function middleware (ctx, str, line, col, prefix) {
	if (ctx === 1.5) {
                // avoid :global()
		if (str.indexOf(prefix+' ') === 0) {
                        // strips stylis added namespace
			str = str.substring(prefix.length).trim();
                        // flag if single selector
			var pos = str.indexOf(' ');
                        // multiple selectors, i.e h1 h2
			if (pos !== -1) {
				var parts = str.split(' ');
                                // add namespace to all parts
				for (var i = 0; i < parts.length; i++) {
					var part = parts[i];
					pos = part.indexOf(':');
                                        // if has pseudo selector
					parts[i] = pos !== -1 ? part.substring(0, pos) + prefix + part.substring(pos) : part + prefix;
				}

				return parts.join(' ');
			}
                        // single selector
			else {
				return str + prefix;
			}
		}
	}
}

giuseppeg · 2017-02-13T21:23:29Z

@thysultan @rauchg I started to work on this tonight #125 keep in mind that it is very wip

giuseppeg · 2017-02-19T09:11:06Z

fixed by #134

rauchg mentioned this issue Dec 6, 2016

Add :host pseudo-class support #13

Closed

thysultan mentioned this issue Feb 13, 2017

[wip] Stylis CSS Middleware initial commit #125

Closed

giuseppeg closed this as completed Feb 19, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Compiler Fork #8

Update Compiler Fork #8

thysultan commented Dec 5, 2016

rauchg commented Dec 7, 2016

thysultan commented Dec 7, 2016

rauchg commented Dec 7, 2016

rauchg commented Dec 7, 2016

thysultan commented Dec 7, 2016

giuseppeg commented Dec 7, 2016

thysultan commented Dec 7, 2016 •

edited

Loading

giuseppeg commented Dec 7, 2016 •

edited

Loading

thysultan commented Dec 7, 2016

giuseppeg commented Dec 7, 2016

thysultan commented Dec 7, 2016 •

edited

Loading

rauchg commented Dec 7, 2016

rauchg commented Dec 7, 2016

rauchg commented Dec 16, 2016

thysultan commented Dec 16, 2016

giuseppeg commented Feb 10, 2017 •

edited

Loading

thysultan commented Feb 10, 2017 •

edited

Loading

thysultan commented Feb 10, 2017

giuseppeg commented Feb 10, 2017

thysultan commented Feb 10, 2017

giuseppeg commented Feb 10, 2017

thysultan commented Feb 10, 2017 •

edited

Loading

giuseppeg commented Feb 13, 2017

giuseppeg commented Feb 19, 2017

Update Compiler Fork #8

Update Compiler Fork #8

Comments

thysultan commented Dec 5, 2016

rauchg commented Dec 7, 2016

thysultan commented Dec 7, 2016

rauchg commented Dec 7, 2016

rauchg commented Dec 7, 2016

thysultan commented Dec 7, 2016

giuseppeg commented Dec 7, 2016

thysultan commented Dec 7, 2016 • edited Loading

giuseppeg commented Dec 7, 2016 • edited Loading

thysultan commented Dec 7, 2016

giuseppeg commented Dec 7, 2016

thysultan commented Dec 7, 2016 • edited Loading

rauchg commented Dec 7, 2016

rauchg commented Dec 7, 2016

rauchg commented Dec 16, 2016

thysultan commented Dec 16, 2016

giuseppeg commented Feb 10, 2017 • edited Loading

thysultan commented Feb 10, 2017 • edited Loading

thysultan commented Feb 10, 2017

giuseppeg commented Feb 10, 2017

thysultan commented Feb 10, 2017

giuseppeg commented Feb 10, 2017

thysultan commented Feb 10, 2017 • edited Loading

giuseppeg commented Feb 13, 2017

giuseppeg commented Feb 19, 2017

thysultan commented Dec 7, 2016 •

edited

Loading

giuseppeg commented Dec 7, 2016 •

edited

Loading

thysultan commented Dec 7, 2016 •

edited

Loading

giuseppeg commented Feb 10, 2017 •

edited

Loading

thysultan commented Feb 10, 2017 •

edited

Loading

thysultan commented Feb 10, 2017 •

edited

Loading