[roadmap] sheetify v6

[yoshuawuyts]

Been using sheetify for a while now, and feel there's some rough edges still. In this issue I try and outline which problems I've been experiencing, and suggest solutions on how to fix 'em. Comments and suggestions super welcome; if we need to break stuff this is the place to mention it

problems

• insert-css as a peer dep is hella annoying and probably makes for a not-so-great user experience - using sheetify right now doesn't "just work" and yeah it would be cool if it did
• we don't support inline globals, which would be like a cool thing to support as it allows for inline var declaration, overrides and other stuff - people I'm working with right now have requested this already and kinda confirmed my idea this would be neat - Don't differentiate between host and non-host  #98 | Support for @apply Rule #91 | Variables don't work in template strings #97 (ish)

todos

• make insert-css a file in sheetify that can be required in, removing the peer dep (pr
• patch css-extract to also detect the sheetify/insert (minor patch; just pick up more files)
• merge feat(prefix): drop support for non :host prefix postcss-prefix#9 so only :host properties are prefixed

---

And that's it. Suggestions and thoughts super welcome!

[ahdinosaur]

hey @yoshuawuyts, sounds good to me. 👍

from my usage of sheetify, i really want to pass in style variables (as in say from require('./styles')) to each style declaration (#54, #97). unfortunately it's not easy unless we move to doing runtime inline styles instead of compiled string compilation, sooo yeah. 😄

[yoshuawuyts]

@ahdinosaur yeah a simpler way would be to declare css variables in a :root element in some index file, and then import all other files. Order in sheetify is guaranteed so you could run a transform over the whole bundle which would then resolve the vars. Gets you vars across the board - not convinced we should do fancy interpolation stuffs / runtime parsing as that complicates stuff a bunch

[yoshuawuyts]

e.g.

const css = require('sheetify')

css`
  :root {
    --main-bg-color: brown;
  }
`

/* can be in another file */
css`
  .foo {
    background-color: var(--main-bg-color);
  }
`

[Kriesse]

@yoshuawuyts The above example looks good to me 👍

[ahdinosaur]

@yoshuawuyts you're right that's way simpler, thanks for the suggestion. ✨

[yoshuawuyts]

Patches are done; can release sheetify@6 when these are merged:

• feat(deps): bump css-prefix #107
• feat(insert): add #106
• feat(extract): detect sheetify css-extract#11

yay!

[serapath]

when using it like you suggest above, doesn't that encourage the use of a lot of global variables?

What if i have many components that were authored by different people, which used the same name for their variables, maybe even set those variables... how can i make sure my global css variable won't override or be overridden by a component that uses and sets it too?

[serapath]

what about

const css = require('sheetify')

var x = css`
  :root {
    --main-bg-color: brown; /* will be auto-suffixed */
  }
`

/* can be in another file */
css`
  .foo {
    background-color: var(${x[':root/--main-bg-color']});
  }
`

then maybe somewhere in a root component that uses a lot of other components, maybe sheetify can offer the sum of all variables that have been defined in all the levels of nested components, so i can generate a style tag that sets all the values for all the variables... like maybe

var css = require('sheetify')
var yo = require('yo-yo')

Object.keys(css.vars()).forEach(x=>console.log(x)) // to see what is available for theming
// then later - remove the line above and replace it with something like:
css.vars()[':root/--main-bg-color'] = 'pink'

[yoshuawuyts]

That wouldn't work as sheetify always returns a prefix. Having multiple
return types based on content feels off - besides Im not really seeing the
added value in the example. I understand globals are not ideal but then
again if variable name conflicts start to become an issue it might be time
to rethink what you're trying to do with CSS anyway haha.

On Wed, Nov 16, 2016, 17:35 Alexander Praetorius notifications@github.com
wrote:

what about

const css = require('sheetify')

var vars = css`

:root { --main-bg-color: brown; } /* can be in another file */ css .foo {

background-color: var(${vars[':root']});  }`

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#105 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACWlenYQgq2d-RMpHw3Yav5BKeSSRutgks5q-zDTgaJpZM4KsOHD
.

[yoshuawuyts]

Released as v6.0.0 🎉