search

linkedin / css-blocks

High performance, maintainable stylesheets.
http://css-blocks.com/
BSD 2-Clause "Simplified" License
6.33k stars 152 forks source link

Support for console.log in jsx. #161

Open chriseppstein opened 6 years ago

chriseppstein commented 6 years ago

When console.log()-ing a block or styles, we should see something helpful printed in dev.

We're already detecting console logging, so we should be able to track this and handle it correctly.

https://github.com/linkedin/css-blocks/blob/132508179041c1386057735590da127fc2855fcb/packages/%40css-blocks/jsx/src/Analyzer/visitors/element.ts#L178-L181

montogeek commented 6 years ago

Can I try to implement this? :)

chriseppstein commented 6 years ago

@montogeek yes, please! I think it's a good one. A block style expression should get replaced with it's corresponding debug info. Each Style has a method asDebug that you can use. The block has a method called debug (the block is degenerate with the root style from a syntax perspective in jsx so you can just go with the block I think). Bonus points for handling template strings as long as they are used directly within the console.log call. (We can't let class names leak into the js runtime, that will surely get abused).