Initial list about polished

[mxstbr]

Sounds good to me @nikgraf! I reckon when we got these and I'll finally finish the website (submitting a WIP PR soon) we can release this

[ericclemmons]

What'd be helpful (for me) is editing the list, as exhaustive as it is, with suggested usage examples so that way individuals can tackle & submit PRs more effectively.

Or, if we want to do the TDD thing, the first step would be tests for the use cases that someone else would implement :)

I think a lot of these would be handled by wrapping color, but likely with a better .toString implementation or functional underpinnings.

(On that note, I personally find color's fluent interface much clearer than nested function calls that you see nowadays)

[mxstbr]

We should just use this instead of adding all the functions manually, 👏 @rofrishmann! https://github.com/cssinjs/css-functions

[mxstbr]

Good point, added an example to the OC! Right now we're still setting up and figuring out how we want to do this, so I don't think implementing a helper right now is a good idea?

[AriTheElk]

Oooo that looks like fun. I may give it a go tomorrow

[bhough]

Removing flexbox and keyframes as they are unnecessary with an autoprefixer.

[nikgraf]

@bhough @mxstbr I'm going to implement these next

• adjustHue(degrees, color)
• grayscale(color)
• complement(color)
• invert(color)
• opacify(color)
• transparentize(color)
• mix(color1, color2)
• tint(amount, color) (is it the same as lighten?)
• shade(amount, color) (is it the same as darken?)

These function don't make much sense since they only provide a single value of function. Do you guys think this is valuable? I would suggested we drop the following ones and add them later if there are valid use-cases.

• hue(color) - Gets the hue component of a color.
• saturation(color) - Gets the saturation component of a color.
• lightness(color) - Gets the lightness component of a color.
• alpha($color) / opacity($color) - Gets the alpha component (opacity) of a color.
• red(color)
• green(color)
• blue(color)

Thoughts?

[bhough]

I've been in the process of moving, but I'm almost done with the error handler as well as integrating it into existing modules. I should have something to share by Monday.

[ericclemmons]

Fair enough. I know we've been creating ad-hoc versions of these internally, but it seems that the majority of the color-related functions could be solved by recommending/supporting the stringification of objects from libs like color & chroma.js:

http://gka.github.io/chroma.js/

That leaves "mixins" as the only one not really answered here, which I think warrants solving within this project. The others can be referenced via documentation & be effectively "solved" from the user's standpoint.

[bhough]

@ericclemmons what are some examples of mixins we are missing from this? We are purposely excluding ones that only return prefixes as most CSS in JS solutions included prefixers built in. I also don't believe we need to include the concept of mixin creation as you see in SASS/LESS as in JS those are just normal functions.

[ericclemmons]

Frankly, I've found I'm mostly lacking a good reset / normalize & something akin to:

https://github.com/maximkoretskiy/postcss-autoreset

When testing our React components with this across browsers & sites, there's been a lot of "bleed-through" of parent styles & browser inconsistencies that had us like, "Wait, I thought this was a solved problem?"

We're so used to these tools leveling the browser playing field.

[ericclemmons]

Wait a tick, shouldn't we all just be using @KyleAMathews' http://kyleamathews.github.io/typography.js/!?

[mxstbr]

I would like all of these utils to live under a single package with the same API for all of those, like Bourbon does for Sass.

Having to search for all of those packages individually and having to learn their complete different APIs seems very backwards for me, and is something that (as we've noticed in our issue tracker) not many people do, even though that's their reason for not switching to styles in JS yet.

Not sure how typography.js is related?

[ericclemmons]

@mxstbr Sorry, let me clarify:

• Of course it would be ideal for polished to "own" the API for these utils. However, until the solution exists, a bit of documentation could go a long way to answer users' needs instead of them writing off this project because it doesn't have a built-in solution yet.
• We agree that the intent is not to rebuild color or chroma.js ourselves, but to wrap other libs as necessary to provide a clean API (e.g. Bourbon).
• I mentioned typograph.js erroneously. I thought it had useful utils/normalization that we could leverage, but it's pretty much a "select a theme & eject the CSS" project.

Anyway, I'm working on a project right now with styled-components that could use media & normalization mixins. I'd like to have those built internally in a way they could be applied here.

[KyleAMathews]

@ericclemmons you're underselling typography.js a bit :-) The "themes" aren't the point, they're a byproduct. One way of viewing it is as a global styles reset with a high-level API focused on typographic design. For my projects I put all global styles in Typography.js and then component styles in components and this combo works really well together.

Anyways, a Lodash for css-in-js sounds freaking amazing! Will be following along closely!

[mxstbr]

Ah, now I get what you're saying @ericclemmons. Yeah, I totally agree with that, though this project isn't announced/official yet and probably won't be until we have all utils of the initial list finished. 👍

[KyleAMathews]

A utility for link styles would be great — text-underline, box-shadow, border-bottom, and the cool effect where descenders cover the link — https://eager.io/blog/smarter-link-underlines/

[KyleAMathews]

And on converting between css size units — I wrote this (used in Typography.js) https://github.com/KyleAMathews/convert-css-length

[mxstbr]

I wrote this (used in Typography.js) https://github.com/KyleAMathews/convert-css-length

Coffeescript 🙈

Just kidding, looks great! Let's rewrite it in ES6 and export it from polished!

[KyleAMathews]

Haha :-)

Sounds great! Would love to move things here!
On Thu, Nov 10, 2016 at 9:58 AM Max Stoiber [email protected]
wrote:

I wrote this (used in Typography.js)
https://github.com/KyleAMathews/convert-css-length

Coffeescript 🙈

Just kidding, looks great! Let's rewrite it in ES6 and export it from
polished!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh23tKGUJIyMLEV0nw5RNRylN0hNiks5q81tLgaJpZM4KocXf
.

[KyleAMathews]

I can make a PR soonish.
On Thu, Nov 10, 2016 at 10:00 AM Kyle Mathews [email protected]
wrote:

Haha :-)

Sounds great! Would love to move things here!
On Thu, Nov 10, 2016 at 9:58 AM Max Stoiber [email protected]
wrote:

I wrote this (used in Typography.js)
https://github.com/KyleAMathews/convert-css-length

Coffeescript 🙈

Just kidding, looks great! Let's rewrite it in ES6 and export it from
polished!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh23tKGUJIyMLEV0nw5RNRylN0hNiks5q81tLgaJpZM4KocXf
.

[mxstbr]

Awesome, sounds great! We just finished setting up the automatic documentation and the testing stuff 👌

[AriTheElk]

Note that styled-components can handle simple CSS-in-JS perfectly fine. It doesn't handle pseudo-selectors and those sorts of things though, so we'll have to have a discussion what to do with the more complex of these helpers!

What pseudo-selectors does styled-components not support? It's worked with a lot of the things I've thrown at it.

I was happy to see complex things like

import styled from 'styled-components';
import { Link } from 'react-router';

const A = styled(Link)`
  color: #000;
  text-decoration: underline;
  &::before {
    content: '💩';
  }
  &::after {
    content: '🍺';
  }
  &:hover {
    opacity: .2;
    &::before, &::after {
      content: '😻';
    }
  }
`;

export default A;

functioning as expected. I don't think I could get the :visited selector to work though. Although I'm to sure why :hover would work and :visited would not, do they require manually written transformers or something?

I feel like the most often used pseudo-selectors are ::before, ::after, and :hover, so it's good that they work 👏

edit: I guess technically the ::before and ::after are pseudo-elements, so is :hover the only pseudo-selector that works right now?

[Dattaya]

I don't think I could get the :visited selector to work though

It depends on what you were trying to do, :visited pseudo class has some limitations.

[AriTheElk]

Wow, I had no idea there were that many constraints on the :visited selector. So no chance of updating a pseudo-element of a :visited selector?

edit: sorry, if that's a little off topic. My original question remains about which selectors aren't properly working for styled-components.

[mxstbr]

What pseudo-selectors does styled-components not support? It's worked with a lot of the things I've thrown at it.

It supports all of them, but it doesn't support them in object notation, just as a CSS string, that's what I was trying to say. Will update the comment to reflect that better!

[mxstbr]

As for lighten/darken I found this SO answer: https://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors#13542669

Anybody want to dig into that? 🙈

[mxstbr]

v1.0.0 is out! 🎉 Amazing job everybody!