rofrischmann/fela

Fast, modular, dynamic & tiny library to handle Styling in JavaScript

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

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>
}

Sorry, I mean:

function Foo() {
  const { css, theme, } = useFela();
  return (<div style={css(wrapperStyle)}>
    <div style={css(innerStyle)} />
  </div>)
}

Tamiross

@tamiross

im not using Hook yet

is there any way to use fela with Typescript? Ts isn't recognizing the 'fe' module

anyway, i'm looking for a way to style without using <FelaComponent> instead of every HTML Element. is that possible?

Tamiross

@tamiross

how do i declare this module correctly on my own project?

Tamiross

@tamiross

so this is as far as i got with this.
i created index.d.ts file and added:

/// <reference path="node\_modules/@types/react/index.d.ts"/>
declare namespace React {
   interface HTMLAttributes<T> extends DOMAttributes<T> {
      css?: any
   }
}

but 'fe' is still not defined. i don't know what else can i do about this

Where communities thrive

People

Repo info

Activity