Add support for plugins

[giuseppeg]

Fixes #182

[giuseppeg]

It would be nice if we could find a way to magically resolve paths internally.
If it is not possible then asking them to use require.resolve or anyway provide full paths is ok I guess.

[giuseppeg]

should this be a noun/plural? vendorPrefixes

[giuseppeg]

this object could as well be renamed to options and change shape:

{
  // user options
  exampleOption: true,

  // babel options
  babel: { // or env
    sourceMaps: true,
    vendorPrefix: true,
  }
}

[nkzawa]

Does it support async operations ?

[giuseppeg]

no it doesn't because of the sync nature of babel

[giuseppeg]

fwiw in styled-jsx-postcss I use a super hack to make async code work (syncronously) https://github.com/giuseppeg/styled-jsx-postcss/blob/master/src/babel.js#L98-L107

[nkzawa]

I wonder if we can implement the example of #5. (can you get type="text/sass" ?)

Additionally, I wonder if there are any limitations comparing to creating a babel plugin which transforms css string before styled-jsx compilation runs.

[giuseppeg]

I wonder if we can implement the example of #5. (can you get type="text/sass" ?)

We could but I'd rather keep those extensions in user space otherwise we'd have to ship styled-jsx with node-sass, postcss etc

Additionally, I wonder if there are any limitations comparing to creating a babel plugin which transforms css string before styled-jsx compilation runs.

Definitely an option but obviously writing a simple function is easier than setting up a new babel plugin that has to detect <style jsx> tags, replace expressions with placeholders, preprocess the string and then replace the original template literal. Also with external styles they'd need to detect css exports like we do in order to apply plugins to external css.

[nkzawa]

I'm rather wondering if you can get props of <style jsx/>. I totally agree this style of plugins would be better.

Can we have props as an argument (or in settings) ?

export default (css, props, settings) => {
   if (props.type === 'text/sass') {
     return compileSass(css);
   } else {
     return css;
   }
}

[giuseppeg]

Can we have props as an argument (or in settings) ?

ah yes I like the idea but unfortunately we wouldn't have those info for external stylesheets :/

[giuseppeg]

@nkzawa ideally people can annotate css eg:

<style jsx>{`
  /* @styled-jsx-sass */
  div {
    color: red;
    &:hover { color: blue }
  } 
`}</style>

and the plugin author can check for that comment

export default (css, props, settings) => {
   if (/@styled-jsx-sass/.test(css)) {
     return compileSass(css);
   } else {
     return css;
   }
}

[giuseppeg]

another thing to do is figure out whether this feature could make dynamic styles (#81) harder to implement in the future

[Tomekmularczyk]

what is the status of this pull request?

[giuseppeg]

update: we decided to wait until we implement #81 since it might affect how plugin works.

[medv]

When this gets merged I'm selling all my stuff and moving to styled-jsx island.

[jabacchetta]

Also very interested in both this and #81. Trying to decide between styled-jsx or styled-components with Next.js, and these seem to be the missing pieces.

[smeijer]

@giuseppeg update: we decided to wait until we implement #81 since it might affect how plugin works.

So, what's the status of #81? Since I really like to have these plugins available, to be able to parse PostCSS.

[giuseppeg]

It is in a good spot, in my little spare time I am trying to finish #81 basically there are a few minor adjustments to do, need to write extensive tests and docs. You can track the progress here https://github.com/zeit/styled-jsx/tree/dynamic-styles

[Faradey27]

Hi, do we plan to merge this pull request?(and resolve conflicts)

[giuseppeg]

@Faradey27 finishing up #81 and planning on updating this PR and get it merged. With the limited amount of free time that I have it might take a few weeks 😅 but I will do my best

[giuseppeg]

Duplicate of #291
Reworked #291