option for locally scoped styles

[jakeburden]

I totally dig this pr in postcss-prefix, I think it makes the API for globals muchhhh cleaner and agree on changes that drop deps.

butttt I wonder if it would be cool to make a new possible option called local for example:

const html = require('choo/html')
const css = require('sheetify')

const styles = css('./component.css', { local: true})

module.exports = (state, prev, send) => html`
  <div class=${styles}>Yo!</div>
`

and the css is ./component.css is scoped to that particular component

whatchya think?

[yoshuawuyts]

hah, I think you missed pasting in your example (: - could you post it below? - thanks!

[jakeburden]

updated it above! sorry haha :)

[yoshuawuyts]

This should already be scoped I think; if it's not it's a bug:

/* ./component.css */
:host {
  color: blue;
}

[jakeburden]

It's indeed scoped with :host :) no bugs here, I'm just merely feature creeping haha

say with sheetify v5 I've imported a big css framework (job called for it, I would have used tachyons otherwise) so in the entry js file I have

css('../node_module/big_css_framework/styles.css', {global: true})

and then I have a bunch of component files like this

const html = require('choo/html')
const css = require('sheetify')

const styles = css('./component.css')

module.exports = (state, prev, send) => html`
  <div class=${styles}>
     <p class='big-css-p-tags'>Yo! This uses a class from that big css framework</p>
   </div>
`

/* ./component.css */
.big-css-p-tags {
  font-size: 20px;  // originally 18px in the framework but we want to overwrite it for *just* this component
}

I can easily do :host .big-css-p-tags butttt I kind of would need to do this in a lot of files and on a lot of classes due to the way I did things with sheetify v5 orrr I can use nesting with postcss-cssnext to do something like

:host {
  // classes go here
}

or I can add a specific class to each element, I have options I know, I'm just looking for the smoothest way to update my codebase and use coolio tooling like bankai :)

this is just me wondering if anyone else did this with the last version of sheetify and maybe an option sorta like this would be good for those updating?

If not, thats cool! 🌴

[yoshuawuyts]

Ah yeah this seems reasonable. Given how small and transparent the feature is I'm in favor of adding it. PR welcome

On Wed, Nov 30, 2016, 03:38 Jacob Burden notifications@github.com wrote:

It's indeed scoped with :host :) no bugs here, I'm just merely feature creeping haha

say with sheetify v5 I've imported a big css framework (job called for it, I would have used tachyons otherwise) so in the entry js file I have

css('../node_module/big_css_framework/styles.css', {global: true})

and then I have a bunch of component files like this

const html = require('choo/html') const css = require('sheetify')

const styles = css('./component.css')

module.exports = (state, prev, send) => html`

Yo! This uses a class from that big css framework

`

/ ./component.css / .big-css-p-tags { font-size: 20px; // originally 18px in the framework but we want to overwrite it for just this component }

I can easily :host in front of .big-css-p-tags butttt I kind of would need to do this in a lot of files and on a lot of classes due to the way I did things with sheetify v5 orrr I can use nesting with postcss-cssnext to do something like

:host { // classes go here }

or I can add a specific class to each element, I have options I know, I'm just looking for the smoothest way to update my codebase and use coolio tooling like bankai :)

this is just me wondering if anyone else did this with the last version of sheetify and maybe an option sorta like this would be good for those updating?

If not, thats cool! 🌴

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/stackcss/sheetify/issues/113#issuecomment-263766250, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWlejc99SQiKNAianfFiEaF9nV5m0xJks5rDOGtgaJpZM4K_twx .

[jakeburden]

awesome! thanks for taking the time to read my issue and for making sheetify, choo, bankai, and all those tools that make my dev stack 100% better