Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 25 2020 14:47
    vesparny removed as member
  • Jan 23 2020 17:14
    kentcdodds removed as member
  • May 07 2019 12:50
    bjoernricks removed as member
  • Dec 06 2018 20:35
    TejasQ commented #419
  • Dec 06 2018 20:06
    kentcdodds commented #419
  • Dec 06 2018 20:04
    kentcdodds commented #419
  • Dec 06 2018 19:58

    kentcdodds on v5.0.0

    (compare)

  • Dec 06 2018 19:55

    kentcdodds on deprecate

    (compare)

  • Dec 06 2018 19:55
    kentcdodds closed #419
  • Dec 06 2018 19:55

    kentcdodds on master

    fix: officially deprecate the p… (compare)

  • Dec 06 2018 19:55
    kentcdodds closed #433
  • Dec 06 2018 19:54
    kentcdodds opened #433
  • Dec 06 2018 19:54

    kentcdodds on deprecate

    fix: officially deprecate the p… (compare)

  • Dec 06 2018 19:52

    kentcdodds on update-stuff

    (compare)

  • Dec 06 2018 19:51

    kentcdodds on master

    chore: update all things so it … (compare)

  • Dec 06 2018 19:51
    kentcdodds closed #432
  • Dec 06 2018 19:48
    codecov[bot] commented #432
  • Dec 06 2018 19:45
    kentcdodds synchronize #432
  • Dec 06 2018 19:45

    kentcdodds on update-stuff

    chore: update all things so it … (compare)

  • Dec 06 2018 19:40
    kentcdodds opened #432
Adrian Perez
@blackxored

I've a stupid question that's for sure.
I've this code:

const Box = glamorous.div(
  {
    display: 'flex',
    flex: 1,
    flexDirection: 'column',
  },
  space, 
  width, 
  fontSize
);


const App = () => (
  <Box width={1 / 2}>
    <a href="#" style={{backgroundColor: 'green', color: 'white', padding: 10}}>A link</a>
  </Box>
);

Obviously I'm doing something wrong, since the link (anchor tag) gets displayed as flex as well, and I do not want that

I've tried with '&' > { ... } as well
Adrian Perez
@blackxored
anyone?
Luke John
@luke-john
hey @blackxored I've just tried to replicate the issue and have had no luck. the code you've provided seems to behave as expected. https://codesandbox.io/s/3rzvz387m
carl hand
@carlhand11_twitter
Hey guys, newbie to glamorous. I was wondering is it possible to use glamorous in a .ts or .tsx file? It works fine when I import glamorous into a .js file but it complains about glamorous in the .ts files. The error message I get is:
cannot find module 'glamorous'
Luke John
@luke-john
Hey carl, glamorous has bundled declarations so in most cases it should work out of the box with typescript (ts/tsx) files. If you're able to create a small reproduction repo with how you've setup typescript and an example file which is triggering cannot find module 'glamorous' I'll be able to have a look further.
Adrian Perez
@blackxored
Hi, has anyone has an example of making glamorous work with styled-system? As you see above, I'm getting super weird flex behavior and I wondering if I'm doing something wrong, or maybe my understanding of it it's wrong
The link shouldn't be flexed
My apologies if a dumb questions as I've spent the last two years on RN land ;)
Kent C. Dodds
@kentcdodds
Hi @blackxored! There's actually an example on the website: https://glamorous.rocks/integrations#styled-system(https:github.comjxnblkstyled-system)
Ryan Hoffmann
@rjhoffmann

Hey folks, glamorous has found its way into my next project and everything is going great. However, I seem to have run into one issue, and I'm not sure if it's just a (totally justifiable) limitation of glamorous or something that isn't quite clear to me.

https://codesandbox.io/s/qx2qo971n6

What I'd like to be able to do is create a Block component that accepts a prop that will be applied to the style.
Let me know if I can clarify anything further here.

What I have "works", but I'm not sure if that's the best way to go about accomplishing what I need.
Kent C. Dodds
@kentcdodds
Hey @rjhoffmann, here's another arguably better way to do what you were trying to do: https://codesandbox.io/s/n0v60nk12j
Paul Molluzzo
@paulmolluzzo
Maybe I’m missing something, but I don’t think either example needs to pass in the cover or gradient as a prop since they’re in scope when defining the Block component.
Ryan Hoffmann
@rjhoffmann
@paulmolluzzo: They won't be in scope.
@kentcdodds: Thanks, that does look like a more reasonable way.
Callum Denby
@CallumDenby
Hi, I've encountered an issue using glamorous on Safari where my class names are resolving to css-nil for some reason, anyone encounter this before? The component itself is very simple with just padding?
const Link = glamorous.a({
  padding: '5px'
})
All other glamorous components render fine, just that one.
Luke John
@luke-john
Hey @CallumDenby , I've just tried to replicate the issue and don't seem to be able to. the following reproduction in safari appears to work fine for me https://codesandbox.io/s/jp15y2qkv5. if your able to set up a codesandbox reproduction or share the whole code that is leading to the issue I'd be happy to have another look.
Callum Denby
@CallumDenby
Hi @luke-john, I haven't managed to replicate the issue but I found a work around being to just style the div, it seemed to only be the glamorous.a component in use so I just wrapped it.
const Link = ({ href, children }) =>
  <Div css={{
    padding: '5px',
  }}>
    <a href={href}>
      {children}
    </a>
  </Div>
Mordy Tikotzky
@tikotzky
@kentcdodds the link to "the chat" in the codesandbox https://help.glamorous.rocks/ is pointing to https://gitter.im/kentcdodds/glamorous it should be updated to point to here (https://gitter.im/paypal/glamorous)
Mordy Tikotzky
@tikotzky
Hi all, Is it possible to extend the CssProperties allow certain properties to take additional values?
My use case is to allow color and background color css properties to accept a "Color" type as a valid value
(I should specify that this is using TypeScript)
here is a sandbox showing the issue https://codesandbox.io/s/rk8von4wo
Daniel Park
@gimli01
hey guys!
was wondering if anyone knows how to use a glamorous component with React Router Link\
Adrian Perez
@blackxored
hey guys, i just published a post on how to make glamorous work with native elements, (h1, div, etc.), check it out https://adrianperez.codes/glamorous-in-next-js-with-native-elements-styling/
Kent C. Dodds
@kentcdodds
Daniel Park
@gimli01
so i'm trying to change the styling based on props.location
is there a way to do child component selectors?
or do i have to pass a prop down to every child that needs to be changed
i'm doing somehting like this right now
export default glamorous.nav(
{
position: 'absolute',
display: 'flex',
left: 0,
right: 0,
top: 0,
margin: 0,
height: '90px',
justifyContent: 'space-between',
alignItems: 'center',
zIndex: 1000,
},
({ type, theme }) => ({
backgroundColor: type === 'primary' ? null : theme.white,
boxShadow: type === 'primary' ? null : theme.boxShadow,
'& div > ul > li > a': {
color: type === 'primary' ? theme.white : theme.blue,
fontWeight: '400',
letterSpacing: '1px',
},
}),
);
export default glamorous.nav(
{
position: 'absolute',
display: 'flex',
left: 0,
right: 0,
top: 0,
margin: 0,
height: '90px',
justifyContent: 'space-between',
alignItems: 'center',
zIndex: 1000,
},
({ type, theme }) => ({
backgroundColor: type === 'primary' ? null : theme.white,
boxShadow: type === 'primary' ? null : theme.boxShadow,
'& div > ul > li > a': {
color: type === 'primary' ? theme.white : theme.blue,
fontWeight: '400',
letterSpacing: '1px',
},
}),
);
```
oops
new to gitter
sorry about that
but it'd be much easier if i could just do child selectors from the parent nav component
instead of passing props down to every single component that needso tbe changed
Junyoung Clare Jang
@Ailrun
paypal/glamorous#419
Andrew Blick
@blicksky
Hey, would someone be able to help me understand why themes don't seem to be passed through glamorous to custom components? I set up a test case here: https://codesandbox.io/s/017659o850
Royston Shufflebotham
@RoystonS
Hi all. Just noticed (from a flurry of issue closing activity) that glamorous is not long for this world. Shame, but I agree that duplication makes no sense. @kentcdodds , have you figured out how to use rtl-css-js with emotion yet?
Kent C. Dodds
@kentcdodds
I haven't tried it yet @RoystonS, but I did ask Kye (creator of emotion) and I remember him showing me an example at one point. I can't remember where that is though. You could probably jump in their slack and get an answer pretty quickly.
Royston Shufflebotham
@RoystonS
Thanks very much, Kent.
Royston Shufflebotham
@RoystonS
Looks like emotion does plugins via stylis, which doesn't work with CSS-in-JS objects. I've managed to get emotion working with rtl-css-js, but it requires exposing convertProperty from rtl-css-js so that each individual CSS rule can be processed.
Kent C. Dodds
@kentcdodds
Thanks @RoystonS. If there's anything that I can do in rtl-css-js to make it easier let me know.
And if you can share what you're doing in that deprecation issue that would be very helpful!
Royston Shufflebotham
@RoystonS
Btw, we've just completed the migration of our codebase. About 110 modules, so probably about 400 glamorous components of various sizes, all moved over to emotion. Biggest painpoints were a) withProps (the recompose variant is way more painful to work with than the glamorous one), b) typing (the emotion TypeScript types are a little 'immature').
Here's what I've ended up with for rtl-css-js: https://gist.github.com/RoystonS/15e9fcd6aed5c67eb203d01936bd110a