Hi there 👋, welcome! Please introduce yourself, and if you have a question, please use this: https://help.glamorous.rocks
Afternoon, I am trying to contribute to the glamorous-website repo, but am running into a bit of a snag. A fresh pull down from the non-fork repo and running the command
npm start validate fails. Test are failing (6) and I wanted to see if I am missing something before opening an issue. I'm certain there is something I missed, but nothing is standing out as of now. Thanks.
Hey @andrew-codes thanks for reporting this issue (and trying to contribute 🙂), I've just rebased off the latest master and don't seem to have the same issue 🤔. I'm unlikely to get time to help investigate this today, if you're able to create a new issue on the repository that would be appreciated thanks. I suspect more people will be looking at those issues than watching this gitter channel 🙂.
Thanks for contributing!
Thank you @luke-john
node@8.7.0 gives me the same errors when running the validate or test commands.
I will file an issue on GH. Running
npm start test yields a more descriptive error message. I suspect there is something environment that is not setup on my machine in some way (a globally installed package, etc.). Whatever the cause is, it would be at least good to document the outcome for others; surely I'm not the only one with this problem.
I cropped the image for brevity
Ie,
<Link prop='a choice'> vs AChoiceLink
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 🙂.
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?
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!
Ok, so actually it should be working: https://codesandbox.io/s/vy6660k3j3
I'll trying to figure it out some more...
@motleydev, note, you don't need the
[ and ]. '& div' is a totally valid key for an object :wink: https://codesandbox.io/s/vy6660k3j3
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
didn't want to put an issue for the site in the project repo for the lib
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.
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?
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)
have responded on github @Powell-v2, sorry I don't always see the gitter notifications. https://github.com/paypal/glamorous/issues/302#issuecomment-355269852