andreypopp / react-css-components Goto Github PK

Hello @andreypopp, thanks for your library.

I'm trying to add it to my css-in-js repo but I get the following error:

ERROR in Cannot find module '/Users/andreypopp/Workspace/react-css-components/node_modules/.store/[email protected]/_/lib/liftToAST.js'

The version I'm using is: 0.6.6.

Important as divs are not permissible in some elements (i.e. buttons)

How to run react-css-components in webpack 2?
When I try to run I get an error:

Error: Module '/home/kacper/Works/maybeer/node_modules/react-css-components/lib/index.js' is not a loader (must have normal or pitch function)

Hello @andreypopp, I've added the library to MicheleBertoli/css-in-js.
To make it work locally, I had to install some extra dependencies: style-loader, css-loader and babel-plugin-transform-object-rest-spread.
I guess it would be nice to have those deps installed automatically with the package.
Thanks!

Looks amazing btw!

This looks great, any plans for variable support?

Label {
  color: @label.color
}

Label:hover {
  color: @label.hover
}

or

Label {
  color: @prop:color;
}

Label:hover {
  color: @prop:hover;
}

I think styled-components set a bad precedent: mixing styling and semantics. For example, there are many times I need to use a heading of a certain level (h1, h2, h3) for semantics, but may want to style it as a heading of a different one. I don't see any way to accomplish this sort of thing, since styles are coupled with the HTML tags. Maybe I'm missing something?

More discussion: styled-components/styled-components#494.

Nice work andrey!

Hello @andreypopp.
Now that #3 is fixed, I was trying to use it but I couldn't make it work.

So, I cloned the repo and run the following commands:

npm install
make build
cd examples/webpack
npm install
npm run build
open index.html

And I got the output without classes:

<div id="main">
  <div data-reactroot="">
    <div>Header</div>
    <div>Content</div>
  </div>
</div>

Environment:

node --version
v5.11.0
npm --version
3.8.6

Am I doing something wrong?

It would be more useful if we can compile directly to ES5 and not ES2015. That way we don't require running Babel on output.

• How to configure additional PostCSS transforms.
• How to configure additional CSS loaders.

At the moment, if you import a component from your CSS, using the className prop to pass global classes in doesn't seem to work.

Is there a way to make these carry through to the underlying markup to allow things like global layout classes?

Pseudo-element with - don't work properly.

eg.:

Label:first-child {
    border-left: none;
}

In transpiled file looks like this:

// ...
var className = styles.Label + (variant.first-child ? ' ' + styles.Label__first-child : '');
// ...

And selector will be: .Label__first-child---36X92.

when using the following syntax with React 15.x

Label {}
Label:prop(mode == 'edit') {}

<Label mode="edit"/>

React throws the following error:

Warning: Unknown prop `mode` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

If I understand correctly what is being said here, you should be able to remove unknown props. Basically, that means that the syntax you are currently using should be deprecated.
I would suggest keeping to the variant prop:

<Label variant={{mode: 'edit'}} />

Tell me what you think.

EDIT: On second thoughts, the syntax is still very useful in many cases. For instance, you could choose to change the style of the component when onClick prop is set. I think it should be clearer in the doc that the library does not whitelist the props, and that you should use this feature only with props the component accepts.