Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Nikos Gereoudakis
    @stream7
    do you have a link for that?
    Robin Frischmann
    @rofrischmann
    im fine with so. maintaining those, but I dont want to do that my own
    and I don't want it to be part of react-fela, id be fine with a different package, but its super hard to improve stuff with always having to make cC and connect work as is
    Nikos Gereoudakis
    @stream7
    Robin Frischmann
    @rofrischmann
    yeah
    Nikos Gereoudakis
    @stream7
    Ok, cool, thanks for looking into it
    Nikos Gereoudakis
    @stream7
    @rofrischmann is there an easy way to see the breaking changes of react-fela 6 -> 8 ?
    Robin Frischmann
    @rofrischmann
    Thats probably the best resource
    Nikos Gereoudakis
    @stream7
    I think there was no breaking change tbh
    so it could have still been 6 :D
    also that previous problem I had is gone too
    or maybe it is cause I’m not using SSR in this project (regarding major version bump)
    Robin Frischmann
    @rofrischmann
    There was no major change in the react-fela package itself
    But within fela-bindings or fela-dom and as it requires those we bump a major because else your fucked with ^versions
    Nikos Gereoudakis
    @stream7
    I don’t want to know more :D
    hehe
    Marek Janča
    @jancama2
    Hey guys, is there any chance how to find out Fela rendered all the styles for my component? I'm having a kind of a race condition: React renders all the markup => I’m performing scrollToHashLink on componentDidMount, but somehow the scroll is faster then styles so I end up scrolled to the bottom after the styles are applied.
    Marek Janča
    @jancama2
    Btw this thing is happening on the first render, after the first render everything is ok, thanks for any help :))
    Robin Frischmann
    @rofrischmann
    hmm whats your setup? using Provider from react-fela? that should ensure style rendering, but yeah its async due to the insertRule calls
    Marek Janča
    @jancama2

    Yes, usig Provider from react-fela, ended up with:

    <Fragment>
        <FelaProvider renderer={renderer}>
           <ThemeProvider theme={theme}>
              <Application>{children}</Application>
           </ThemeProvider>
        </FelaProvider>
        <ScrollOnUpdate />
    </Fragment>

    and extracting static styles (vendors) to scss, looks like waiting for the Provider to render and extracting statics helped.
    The issues is basically similar to this one rofrischmann/fela#532. I havent found renderToDOM property in docs or codebase so I guess it wasnt included, Am I right?

    Robin Frischmann
    @rofrischmann
    Yeah, we used didMount in the past, but now it renders in the constructor which means your styles should be ready as soon as a component hits the DOM.
    Marek Janča
    @jancama2
    Well, checking ProviderFactory now and since the Provider renders the renderer in the constructor there shouldnt be a problem. Dont know why moving vendors out of fela helped.
    Haha, was just thinking about the same
    Marek Janča
    @jancama2
    hmmm, looks, like splitting statics into more chunks helped
    Marek Janča
    @jancama2
    could be the problem that i’m loading fonts using static css and not fela renderFont?
    Robin Frischmann
    @rofrischmann
    is it just the font that fails?
    Marek Janča
    @jancama2
    yes, i had fonts in my static css imported from an external url (google api), when i moved the fonts to renderFont, everything is ok, dont ask me why :|
    lesson learned: use renderFont and renderStatic, dont try to load fonts using renderStatic… what bothers me the most is I dont really understand the problem
    Marija Najdova
    @mnajdova
    Hey guys, I've got one question. According to the documentation about the createRenderer (http://fela.js.org/docs/advanced/RendererConfiguration.html), adding the selectorPrefix option should add prefixes to the generated rules and keyframes. I tried the same example in the link, but although the rules' classNames are generated with the prefix, the keyframes are not. Is this a bug, or there was some change in the API that is not documented? I saw in the implementation of the createRenderer that the selectorPrefix is used only when the classNames for the rules are generated, but not in the generation of the animationName... Let me know if I should create an issue about this! Thanks!
    Robin Frischmann
    @rofrischmann
    @mnajdova You're right, the docs are out-dated on that one! I will update it as soon as possible. We do not include the selectorPrefix for keyframe names anymore. Is this an issue for you? I don't see how we could benefit from prefixed animation names.
    Marija Najdova
    @mnajdova
    @rofrischmann thanks for your answer. I think that feature would have been very beneficial. In our case, we have two different renderers on the page (the dafualt one and rtl). In order for these two to work on the same page, we are adding the selectorPrefix ‘rtl_’ on the rtl renderer, and everything works as expected. Now, with the animations introduced, the rtl renderer is overriding the keyframes for the previous renderer and we are ending up with two different keyframes with the same name on the page. The worse thing is, after we are switching back to the default one, the last keyframes added in the head are the rtl ones and we don’t even have a way to override those back to the original ones. Do you have any suggestion then how can this be fixed, now that we cannot use the selectorPrefix for the keyframes?
    Marek Janča
    @jancama2
    hey guys, I'm using fela along with typescript and export { createComponent, FelaComponent } from 'react-fela'; complains about react-fela not exporting FelaComponent (i have found just FelaHtmlComponent and FelaSvgComponent), any suggestions?
    Miroslav Stastny
    @miroslavstastny
    Hi, checking fela-plugin-fallback-value I find its documentation misleading.
    The motivational example describes fallback from rgba() to static color, but as static color is added as the last item, it always wins.
    Am I wrong in my understanding or would it be worth updating the docs?
    Robin Frischmann
    @rofrischmann
    @miroslavstastny oh well thats true yeah, feel free to send a PR to fix it!
    James Dowell
    @j-dowell

    Hey all, so we are currently using fela with react and are now trying to split out our reusable components into an npm package and import them into our different apps. However I'm running into issues with exporting/importing these components, I’m assuming this is due to the fact there should only be one Provider/renderer?

    Has anyone else been through this process or have any suggestions? Any help would be much appreciated!

    Robin Frischmann
    @rofrischmann
    Hmm, I always open source components using e.g. FelaComponent or createComponent without wrapping those with a Provider as that's the part the user should provide.
    Fair enough, they won't work without a Provider, but you'll have an error message pointing that out anyways
    James Dowell
    @j-dowell
    Thanks for replying! Okay so exporting a createComponent(component) from a separate npm package, into an app that is wrapped with Provider should work then? Because I'm currently receiving this error message: Uncaught Error: createComponent() can't render styles without the renderer in the context. Missing react-fela's <Provider /> at the app root?
    James Dowell
    @j-dowell
    I've created an example of what I'm trying to achieve here if you have the time to take a look -
    https://github.com/j-dowell/reusable-fela-components
    Robin Frischmann
    @rofrischmann
    @j-dowell Heyhey, sorry for not writing back. I will check that repo in a second. I can imagine it's an issue with how you ship components using npm, but I can tell you more later.
    You might want to checkout libraries such as kilvin where I also export Fela components and they just work within my applications as soon as I wrap those with a Fela Provider.
    @/all We are moving over to Spectrum. I will not check Gitter that frequently anymore so if you have an urgent issue, please reach out on Spectrum instead.
    https://spectrum.chat/fela
    @j-dowell Just by looking at the repo. Try not to use Rollup at all, but only Babel your files for ES5 (usually /lib) and maybe ES2015 (usually /es) so that they can be imported correctly.
    Tamiross
    @tamiross

    Hi all, i'm new to Fela, and i learned how to use '<FelaComponent style={styles.example}>' to generate a styled div,
    but i don't understand how can i use this Fela styling for all the nested html primitive elements. do i need to use <FelaComponent> for every <div> or element in my code?

    here's an example. the outer 'div' is working, and the ':hover' effect will work,
    but the inner div isn't working and i need to convert it also to <FelaComponent> ?

        const styles = {
          base: {
            border: '5px solid red',
            ':hover': {
              border: '5px solid green'
            }
          },
    
          innerDiv: {
            border: '5px solid red',
            ':hover': {
              border: '5px solid green'
            }
          }
        }
    
        render(){
          return (
            <Fela style={styles.base}>
              <div style={styles.innerDiv}>
                {this.props.children}
              </div>
            </Fela>
          );
        }
    Tamiross
    @tamiross
    image.png

    so i found that i can use 'fe' , but it doesn't work with TS. files.
    any idea why?

    /* @jsx fe */
    import { fe } from 'react-fela';

    and it works in '.jsx' files, but with '.tsx' files i get the next error:

    Type error: Module '"react-fela"' has no exported member 'fe'. TS2305
    Jonathan Pollak
    @TxHawks
    With FelaComponent, yes, you'd have to use it for each styled element.
    If you're okay using hooks, you could use the useFela hook, and then do something like:
    
    
    Jonathan Pollak
    @TxHawks
    function Foo() {
      const { css, theme, } = useFela();
      <div style={css(wrapperStyle)}>
        <div style={css(innerStyle)} />
      </div>
    }