Error trying to use sheetify-postcss and @rule #460

timsim00 · 2018-04-05T17:12:48Z

Expected Behavior

Successful compile and css using the keyframes rule.

Current Behavior

TypeError: First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.
at Function.Buffer.from (buffer.js:179:11)

Possible Solution

Has someone successfully used css rules with sheetify-postcss?

Context

Trying to use css for animated ellipsis.

Code Sample

package.json

  "browserify": {
    "transform": [
      [
        "sheetify/transform",
        {
          "use": [
            [
              "sheetify-postcss",
              {
                "plugins": [
                  "postcss-animation"
                ]
              }
            ]
          ]
        }
      ]
    ]
  },

Your Environment

OSX, Latest versions of bankai, choo, sheetify, sheetify-postcss

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

goto-bus-stop · 2018-04-06T09:30:58Z

could you share your input script file as well? that'll make it a bit easier to reproduce the problem :)

timsim00 · 2018-04-06T13:02:57Z

Sure, not much to it. Here you go:

const css = require('sheetify')

  const loadingCss = css`
  :host {
    @keyframes blink {
        0% {
          opacity: .2;
        }
        20% {
          opacity: 1;
        }
        100% {
          opacity: .2;
        }
    }
  
    .saving span {
        animation-name: blink;
        animation-duration: 1.4s;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
    }
  
    .saving span:nth-child(2) {
        animation-delay: .2s;
    }
  
    .saving span:nth-child(3) {
        animation-delay: .4s;
    }
  }
  `

Any "@" will cause the above error. Very possible I just don't have this configured correctly.

goto-bus-stop · 2018-04-06T13:37:41Z

ah; somehow the CSS ends up with the :host { part removed, but with the matching } still there. That causes purify-css to throw, which we should be showing somewhere, but apparently are not. Then we try to set the undefined result from purify-css as the css bundle contents, causing the error you're actually seeing.

timsim00 · 2018-04-06T16:05:00Z

Thank you for researching. Is there a way to use this css without host?

timsim00 · 2018-04-06T19:15:48Z

My bad, has nothing to do with the "@" rule. Breaks on all uses of "host".

goto-bus-stop · 2018-04-13T11:40:20Z

It looks like it's crashing because of the nesting. You need to add the postcss-nesting plugin to make that work. I wonder if we can make it crash less … confusingly, though!

emilbayes · 2018-07-17T21:03:19Z

Just hit the same issue even with postcss-cssnext which I thought would take care of the nesting. Just adding another datapoint, will try to investigate more myself too :)

emilbayes · 2018-07-17T23:07:49Z

So here's my tiny app that appear to show the same result:

package.json

{
  "scripts": {
    "dev": "bankai start index.js"
  },
  "browserify": {
    "transform": [
      [
        "sheetify",
        {
          "transform": [
            [
              "sheetify-postcss",
              {
                "plugins": [
                  "postcss-nesting"
                ]
              }
            ]
          ]
        }
      ]
    ]
  },
  "dependencies": {
    "choo": "^6.13.0"
  },
  "devDependencies": {
    "postcss-nesting": "^6.0.0",
    "bankai": "^9.14.0",
    "sheetify-postcss": "^1.2.0"
  }
}

index.js

var choo = require('choo')
var html = require('choo/html')
var css = require('sheetify')
var app = choo()

css`
  :host {
    & .icon {
      stroke: red;
    }
  }
`

app.route('/', _ => html`<body></body>`)

app.mount('body')

If I add a console.log(style) in the catch of graph-style.js I see that the css has not been transformed with postcss-nesting:

._a0f69f10 {
    & .icon {
      stroke: red;
    }
  }

I therefore tried adding a console.log(opts.transforms) to https://github.com/stackcss/sheetify/blob/addbd3337ec85c299ea48a44bc857818c4b967c3/transform.js#L97 and saw that this would log twice:

[]
[ [ 'sheetify-postcss', { plugins: [ 'postcss-nesting' ] } ] ]

I suspect the reason it is not transformed properly is because there are no registered transforms the first time around? Does this sound plausible @goto-bus-stop ? :)

timsim00 · 2018-07-18T01:34:43Z

I think host just applies to the parent element, so for my keyframes example I got it working by removing the outer host.

goto-bus-stop · 2018-07-18T08:56:53Z

@emilbayes it logs twice because bankai already adds the sheetify transform, you can configure it using the top level sheetify key in package.json instead of adding it to the browserify key. whichever sheetify transform runs first will remove all the template tags so the second one doesn't see them.

emilbayes · 2018-07-18T13:11:10Z

@goto-bus-stop Ah! Using the sheetify key in my package.json actually fixed my problem!

goto-bus-stop · 2018-07-18T13:12:38Z

Huh that may have been part of the problem in the OP too, but i didn't notice it then. Could be worth adding a warning about this because it is extremely non obvious

emilbayes · 2018-07-18T13:16:16Z

So adding sheetify as a browserify transform, without explicitly having sheetify as a dependency works because it just happens to be in node_modules due to bankai? Is it overreaching if bankai used the browserify transforms directly? I guess you couldn't have two versions of sheetify at the same time then, but since the first of them to run removes all css already, I guess there's not really a point to having another?

goto-bus-stop · 2018-07-18T13:21:05Z

Right now bankai adds the sheetify transform using b.transform(sheetify). If you add sheetify to the browserify.transform key in your own package.json, browserify adds sheetify again (or a different version if you also manually installed it and npm could not dedupe it for some reason). Sheetify itself uses the sheetify package.json key to read config.

Is it overreaching if bankai used the browserify transforms directly?

I'm not sure what this means 😅

goto-bus-stop added the Type: Bug label Apr 6, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error trying to use sheetify-postcss and @rule #460

Error trying to use sheetify-postcss and @rule #460

timsim00 commented Apr 5, 2018

goto-bus-stop commented Apr 6, 2018

timsim00 commented Apr 6, 2018

goto-bus-stop commented Apr 6, 2018

timsim00 commented Apr 6, 2018

timsim00 commented Apr 6, 2018

goto-bus-stop commented Apr 13, 2018

emilbayes commented Jul 17, 2018

emilbayes commented Jul 17, 2018 •

edited

Loading

timsim00 commented Jul 18, 2018

goto-bus-stop commented Jul 18, 2018

emilbayes commented Jul 18, 2018

goto-bus-stop commented Jul 18, 2018

emilbayes commented Jul 18, 2018

goto-bus-stop commented Jul 18, 2018 •

edited

Loading

Error trying to use sheetify-postcss and @rule #460

Error trying to use sheetify-postcss and @rule #460

Comments

timsim00 commented Apr 5, 2018

Expected Behavior

Current Behavior

Possible Solution

Context

Code Sample

Your Environment

goto-bus-stop commented Apr 6, 2018

timsim00 commented Apr 6, 2018

goto-bus-stop commented Apr 6, 2018

timsim00 commented Apr 6, 2018

timsim00 commented Apr 6, 2018

goto-bus-stop commented Apr 13, 2018

emilbayes commented Jul 17, 2018

emilbayes commented Jul 17, 2018 • edited Loading

timsim00 commented Jul 18, 2018

goto-bus-stop commented Jul 18, 2018

emilbayes commented Jul 18, 2018

goto-bus-stop commented Jul 18, 2018

emilbayes commented Jul 18, 2018

goto-bus-stop commented Jul 18, 2018 • edited Loading

emilbayes commented Jul 17, 2018 •

edited

Loading

goto-bus-stop commented Jul 18, 2018 •

edited

Loading