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
Andrew Smith
@andrew-codes
I cropped the image for brevity
Rich Dillon
@richraid21
Howdy fellow Reacters! I was reading through the docs, and the library looks great. I'm wondering if there is any discussion or best practices regarding when to use a prop to change a style vs when to just create a new element with that style
Ie, <Link prop='a choice'> vs AChoiceLink
Luke John
@luke-john
I've not seen any discussions of that nature specific to glamorous. The pros and cons of each would be fairly similar to other React components though. I've put down some very initial thoughts at https://gist.github.com/luke-john/b80923d5b4084c753a7e1120695d5d85 on some pros and cons specific to glamorous, but these are mostly initial notes to be fleshed out.
I'm going do some more thinking on it, discuss with my team tomorrow and will update with a more thought out and reasoned list πŸ™‚. Also the reasonings/discussions are likely to be similar across css-in-js libraries so you may find good guidelines/discussions elsewhere as well πŸ™‚.
Jeppe Reinhold
@JReinhold

I'm trying to define a grid-template-area using Glamorous, which relies on the values being multiline. I just want to make sure I'm doing it correctly.

this is the CSS way of doing grid-template-area:

  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";

this is what I'm doing now in Glamorous that works:

gridTemplateAreas: `'head head' \n
                    'nav main' \n
                    'nav foot'`,

notice the template string with strings inside and newlines, a bit hacky. is there another way to write it?

Kent C. Dodds
@kentcdodds
@JReinhold, did you notice the CSS Grid example ? https://glamorous.rocks/examples#css-grid
Jeppe Reinhold
@JReinhold
oh cool, hadn't spotted that! sorry for wasting your time, should have looked more closely.
Jesse
@motleydev

Hey, I've been trying to figure out what the syntax is for nested styles. I'm not actually using a nested Component but simply a nested style like:

const Header = glamorous.header({
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
    & div: {
        height: 0
    }
})

It seems like that used to work? I see references to some of that kind of support being removed and the only references I see now are regarding nested Components with the [bracket] syntax, but that doesn't seem to carry over to nested styles. Thanks!

Jesse
@motleydev
correction to the above, the nested selector I'm trying is ['& div']
Ok, so actually it should be working: https://codesandbox.io/s/vy6660k3j3
I'll trying to figure it out some more...
Kent C. Dodds
@kentcdodds
@motleydev, note, you don't need the [ and ]. '& div' is a totally valid key for an object :wink: https://codesandbox.io/s/vy6660k3j3
Mattias HΓ€llkvist
@emattias
Can you not set children prop with .withProps ?
Kent C. Dodds
@kentcdodds
Veli-Pekka Parhiala
@pekq
Having trouble finding documentation on how to achieve something like this with Glamorous
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
Paul Molluzzo
@paulmolluzzo
@pekq those should be usable as is if they're camel-cased to webkitFontSmoothing: 'antialiased' and mozOsxFontSmoothing: 'grayscale'. You can also wrap the key in quotes, but you'll get warnings in the console
Nico Chaves
@nmchaves
I'm just switching over to VS Code. Anyone have recommendations for extension(s) that'll provide syntax highlighting+autocomplete with Glamorous? (Sorry if this is in the docs and I overlooked it :sweat_smile:)
Nico Chaves
@nmchaves
oh nevermind it actually works outta the box. slick! guess those TS declarations are paying off!
Anna Pankevich
@circusofive_twitter
really loving glamorous
i'm just hitting a small snag on how to import local font families
i can't find any examples and im not sure how to go about it
Anna Pankevich
@circusofive_twitter
nvm, looks like injectGlobal will do the job
Anna Pankevich
@circusofive_twitter
is there a better way to import local fonts using glamorous?
Douglas Mason
@douglas-mason
hi, it appears https://glamorous.rocks/ is not working? Just getting a 500
didn't want to put an issue for the site in the project repo for the lib
Luke John
@luke-john
hey @douglas-mason, the site appears to be working for me right now. Was possibly an outage with next which the site is hosted with.
the glamorous.rocks site is also managed/developed on github at https://github.com/kentcdodds/glamorous-website. So if you ever have issues in the future, feel free to create an issue there.
Thanks for reporting it, hope you're having a Merry Christmas.
Douglas Mason
@douglas-mason
thanks @luke-john , yeah it's up for me now. I was looking for the website repo under the paypal org, thanks for clarifying!
Merry Christmas and Happy New Year to you as well!
Lianne Turnbull
@xiavn
Hey, I'm currently working on converting an existing component library (that is made up of lots of private packages) over to using glamorous. The docs give an example of using the glamorous() composition method to extend styles of an existing glamorous component, which up to now I've not had any problems with. However now I'm getting an error related to glamor and a cache miss occurring which is normally a sign of multiple instance of glamor running. I assume this is because I'm trying to extend the styles on a component that is located in another npm package, and am ending up with two different instances of glamor. I can get around this problem simply by setting the css prop or the styles themselves on the component, rather than using the glamorous() method; but I was wondering if anyone had any advice on a better way of handling this?
Pavel Ermolin
@Powell-v2
Hey guys, I'm trying to set up glamorous locally for the first time but an error while running "validate" script won't let me :D Somebody willing to give me a hand with this? I was only following instructions in the guide for contributors (so stuck on step 3). Here is the error message I've got:
> glamorous@0.0.0-semantically-released validate /Users/powell_v2/Downloads/glamorous
> kcd-scripts validate lint,build-and-test,test:cover

/Users/powell_v2/Downloads/glamorous/node_modules/kcd-scripts/dist/utils.js:135
  scripts = Object.entries(scripts).reduce(function (all, _ref3) {
                   ^

TypeError: Object.entries is not a function
    at getConcurrentlyArgs (/Users/powell_v2/Downloads/glamorous/node_modules/kcd-scripts/dist/utils.js:135:20)
    at Object.<anonymous> (/Users/powell_v2/Downloads/glamorous/node_modules/kcd-scripts/dist/scripts/validate.js:32:53)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:383:7)
    at startup (bootstrap_node.js:149:9)
Luke John
@luke-john
have responded on github @Powell-v2, sorry I don't always see the gitter notifications. https://github.com/paypal/glamorous/issues/302#issuecomment-355269852
Pavel Ermolin
@Powell-v2
thanks! np : )
Luke John
@luke-john
@xiavn you should be able to confirm if that is the case with npm ls glamor or yarn list glamor. Unfortunately if it is the problem I don't have any suggestions other than shifting glamor to a peer dependency for the package being consumed, if that's possible.
Lianne Turnbull
@xiavn
@luke-john Yeah they both already have it as peer dependency, I assume it's just running two instances of the same version, which still causes problems for some reason.
Adrian Perez
@blackxored
Hi guys

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.