Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
danielgren
@danielgren
cheers @kentcdodds !
Kent C. Dodds
@kentcdodds
lol, I just happened to be around
Oleg Isonen
@kof
Just published an article about jss/aphrodite, hope it is all correct: https://medium.com/@oleg008/aphrodite-vs-jss-a15761b91ee3
Christian Ranebäck
@iamrane
Are there any thoughts of why aphrodite dont support siblings? For example when there is :focus + .sibling. Or do i need to rely on javascript
Marcus Nielsen
@marcusnielsen
@iamrane I think there's an open issue on github. Im on my mobile, but ping me if you cant find it and I can try to help when I get to work.
Christian Ranebäck
@iamrane
Yeah i think i added it this friday. Just wanted to checked if there were any plans of adding it or if it was a choice not adding support for it
@marcusnielsen
Marcus Nielsen
@marcusnielsen
The issue we follow is much older. And our designer found some solution.
Christian Ranebäck
@iamrane
I found this one. Khan/aphrodite#77
But it cannot apply with focus. Or I just need to set a class with js onfocus. Not really a super nice solution, but it works for most places.
Marcus Nielsen
@marcusnielsen
@iamrane does this tell you something?
    ajaxInput: {
      boxSizing: 'content-box',
      backgroundColor: 'rgba(255, 255, 255, 0.06)',
      color: 'rgb(255, 255, 255)',
      paddingTop: '4px',
      paddingRight: `${initialPaddingRight}px`,
      paddingBottom: '4px',
      paddingLeft: paddingLeftSide,
      marginRight: `${controlsVisibleBuffer - initialPaddingRight}px`,
      borderRadius: '2px',
      transition: 'all .1s',
      ':hover': {
        backgroundColor: 'rgba(255, 255, 255, 0.1)'
      },
      ':focus': {
        backgroundColor: 'rgba(255, 255, 255, 1)',
        color: 'rgb(0, 0, 0)',
        paddingRight: `${controlsVisibleBuffer}px`,
        marginRight: 0
      },
      ':focus + .controls': {
        opacity: 1,
        top: '50%'
      }
I think this might be the issue I was referring to: Khan/aphrodite#10
oh and...
controls: {
      position: 'absolute',
      top: '-1000%',
      transform: 'translateY(-50%)',
      right: 0,
      opacity: 0,
      transition: 'right .1s .1s, opacity .1s'
    }
sorry, not me that's working on aphrodite in our team :-)
Matt Krick
@mattkrick
Anyone get a chance to read https://medium.com/@oleg008/aphrodite-vs-jss-a15761b91ee3#.e0610dvwq? It's written by the author of JSS. I would love to see a reply written by someone in the aphrodite camp. Two biased POVs average out to a solid comparison, right?
Kent C. Dodds
@kentcdodds
@mattkrick here's my response (followed by a great conversation): kentcdodds/ama#172
Marcus Nielsen
@marcusnielsen
@mattkrick our designer seems happy with aphrodite. The painpoint with the need to complement aphrodite w/ vanilla css is covered in Kent's link. No big issue for us. We did have lots of pains with postcss, and the main thing solved is moving from native css to js. I would not recommend a specific tool, but any architecture that solves your specific pain. If you are worried, try to implement a wrapper that can cover both APIs if that is possible.
Matt Krick
@mattkrick
@kentcdodds that is all I could've hoped for and more, thank you! reading both sources & seeing how they push to the DOM, I think I like aphrodite's css solution a bit better, since I generally pass in props to determine style.
@marcusnielsen definitely agree wrt keeping it in JS, we're on the now-defunct react-look & i'm just waiting for work to slow down so I can make the switch. The lack of being able to add an occasional global is a slight pain, but if we've gotta use a css sheet for something like font-awesome, there's no reason we can't do the same for a rule or 2 of our own.
chriz
@chrizworks_twitter
hey guys, I posted this question on SO. Hope someone can point me to a right direction? Now that I think about it, this is more of the bundler problem rather than Aphrodite...
http://stackoverflow.com/questions/39749978/how-do-you-deal-with-referencing-binary-files-inside-css-in-js-solutions-like
Kevin Barabash
@kevinbarabash
@chriz you shouldn't need webpack to reference external files in your CSS. You can set props that accept URLs to url("${relativePathToResource"). Here's an example from the README.md.
const coolFont = {
    fontFamily: "CoolFont",
    fontStyle: "normal",
    fontWeight: "normal",
    src: "url('coolfont.woff2') format('woff2')"
};
chriz
@chrizworks_twitter
is that relative to the js file?
Kevin Barabash
@kevinbarabash
@chrizworks_twitter I believe it is relative to the URL of the page being served. If it's not loading look at the network tab in dev tools and see what path it's trying to load and adjust from there.
Marcus Nielsen
@marcusnielsen

Hi, I'm importing aphrodite like this:
import {StyleSheet, css} from 'aphrodite/no-important'
and I'm getting typescript complaints like this:

web_1          | ERROR in ./common/ajax-form/renderable/index.ts
web_1          | (5,9): error TS2305: Module '"/usr/src/app/node_modules/aphrodite/no-important"' has no exported member 'StyleSheet'.
web_1          | 
web_1          | ERROR in ./common/ajax-form/renderable/index.ts
web_1          | (5,21): error TS2305: Module '"/usr/src/app/node_modules/aphrodite/no-important"' has no exported member 'css'.

Anyone here familiar with this?

I first suspected /no-important, but https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/aphrodite/aphrodite.d.ts has an export in it for no-important too.
hmm, or actually that export might be exporting the string "aphrodite" instead of the lib...
const {StyleSheet, css} = 'aphrodite/no-important'
makes vscode give red error underlining with message:
[ts] Type 'string' has no property 'css' and no string index signature.
Marcus Nielsen
@marcusnielsen
bah, never mind. ofc I didn't add require() lol. I'll dig some more.
craig
@couturecraigj
Can somebody help me with the possibility of if I wanted to create something similar to '.class-name + .class-name' is this possible in aphrodite?
Kevin Barabash
@kevinbarabash
@couturecraigj this isn't possible at moment. You'll have to use a js based solution for this behavior, see Khan/aphrodite#127 for details.
Len-art
@Len-art
hey guys, a seriously noob question here, but is there any documentation talking about how to write basic css in aphrodite? for example h1 tags and stuff like that
Marcus Nielsen
@marcusnielsen
@Len-art don’t know about docs, but you make a component for h1 and then style that component with aphrodite. If you want global CSS, you will need to use normal CSS for that.
So any place where you normally write <div class=“button-default”> you now do <ButtonDefault> instead to contain the classes inside components.
Len-art
@Len-art
Ok, thanks. So all css with aphrodite is local.
Marcus Nielsen
@marcusnielsen
Exactly :-)
Write a small global.css for the rest.
Paul Reesman
@reesmanp
Hey, I am using aphrodite and server side rendering and saw there was an example doing it with aphrodite. It keeps erroring out on me during the html string return statement: A valid React element must be returned. Either I'm doing something wrong or the documentation is a little off.
import React, { Component } from 'react';
import ReactDOMServer from 'react-dom/server';
import { StyleSheetServer } from 'aphrodite';
import Banner from './banner';
import Body from './body';

class App extends Component {
  render () {
    return (
      <div>
        <Banner/>
        <Body/>
      </div>
    );
  }
}

export default () => {
  // Contains the generated html, as well as the generated css and some
  // rehydration data.
  const {html, css} = StyleSheetServer.renderStatic(() => {
    return ReactDOMServer.renderToString(<App/>);
  });
  // <-- I get here no problem
  // Return the base HTML, which contains your rendered HTML as well as a
  // simple rehydration script.
  return `
    <!DOCTYPE HTML>
    <html>
      <head>
        <link href="//cdn.muicss.com/mui-0.9.12/css/mui.min.css" rel="stylesheet" type="text/css" media="screen">
        <link rel='stylesheet' type='text/css' href='static/index.css'>
        <style data-aphrodite>${css.content}</style>
      </head>
      <body>
        <div id='root'>${html}</div>
        <script src="./bundle.js"></script>
        <script>
          StyleSheet.rehydrate(${JSON.stringify(css.renderedClassNames)});
          ReactDOM.render(<App/>, document.getElementById('root'));
        </script>
      </body>
    </html>
  `;
}
cahnory
@cahnory
Hello everyone!
Yang He
@abruzzihraig
Hey guys, is there any way to get the generated CSS string from a specific className? I'm creating a website builder, most of styles that are kept in tag style are useless for the final result. I just want to get the styles I need for a specific state. Thanks.
Yang He
@abruzzihraig
Looks like I could use the extension way to get SubtreeStyles
dana weiss
@callmedw
mmmm anyone around these parts?
Sungho Cho
@scho7623
hmmm is this gitter still active?
Bailey Stoner
@monokrome
Hi! Does anyone have ideas why this would be throwing an error?
I tried css with and without the second argument, but same thing either way
Bailey Stoner
@monokrome
n/m - it wanted be to pass sheet.button apparently :)
goldenMetteyya
@goldenMetteyya
Hi i am new to using this library but i seem not to be able to apple a style to the element.
const styles = StyleSheet.create({
    //Banner Area Styling 
    banner: {
        backgroundSize: "cover",
        padding: "350px 0 300px",
        h1: {
            fontSize: "80px",
            fontWeight: "700",
            marginBottom: "0"
        },
the style is not applied to a h1 element when the div its in is styled witht he banner
any help would be appriciated
GeorgiaMayou
@GeorgiaMayou
Module not found: Error: Can't resolve 'aphrodite/no-important' anybody got any clues on why this is happening all of a sudden?