search

carteb / carte-blanche

An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.
https://www.youtube.com/watch?v=6g3-TQ6aaw8
MIT License
1.5k stars 47 forks source link

Custom CSS gets overwritten #289

Closed Anahkiasen closed 8 years ago

Anahkiasen commented 8 years ago

I'm using the plugin as such:

new CarteBlanche({
    componentRoot: './src/Components',
    files: [
        path.resolve('dist/client.css'),
    ],
}),

When I look at /dist/carte-blanche/index.html I do see the <style> tags with my CSS in it, in this case a basic Bootstrap:

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  // ...

However when I actually go into Carte Blanche and look at a component using those styles, they're nowhere to be found:

screen shot 2016-06-03 at 15 28 27

Inspecting CB's <head> also shows a good bunch of <style> tags but none containing my CSS. Same thing for the <head> in the component's iframe

mxstbr commented 8 years ago

That's because the components are rendered in an iframe, which doesn't let any styles go through.

We currently don't support the files option for the ReactPlugin, but the injectTags option could be of help:

plugins: [
  new CarteBlanche({
    componentRoot: './src/Components',
    plugins: [
      new CarteBlancheReactPlugin({
        injectTags: ['<link rel="stylesheet" href="path/to/custom.css" />']
      });
    ]
  })
]
Anahkiasen commented 8 years ago

What about the files option of the React plugin itself, what does it do differently?

mxstbr commented 8 years ago

It doesn't work currently, due to the way the API is designed at the moment. That's high up on our list of bugs to fix!

Anahkiasen commented 8 years ago

Ok! Using injectTags in the meantime, can confirm that solved my issue. Can close this if you want

mxstbr commented 8 years ago

Awesome, thanks! We're working on it!