Open nueverest opened 8 years ago
Hi @nueverest
This is an excellent request. In summary, we'd like to start with CSS like this:
pcss-_list_>li {
position: relative;
border: 0;
width: 100%
}
And have a conversion utility create the PowerCSS data structure:
_selector_list_ : [
{ _selector_str_ : 'pcss-_list_',
_rule_map_ {
_position_ : '_relative_',
_border_ : '_0_',
_width_ : '_100p_'
}
}
]
I don't think this utility needs to be perfect to be very helpful. In fact, I already have a number of VIM macros that do a lot of this for me. I have also added a new capability that exports the CSS value and key maps, so an external utility could easily be used to map the values to known shorthand. See pcss._getCssValMap_
and pcss._getCssKeyMap_
.
If you want to take a swing at it, pull requests are welcome. I would recommend a separate JS utility instead of building it into the pcss.js core to avoid deployment bloat. If you don't get there first, I may tackle this in the next week or so.
Cheers, Mike
I also agree, there should be way to write vanilla css, sass, less, or css modules and have it convert into powercss JSON. That would make the barrier to entry much less with powercss.
Thank you. We all agree! I should be tackling this within the next few weeks as my current project requires it soon.
Hi, did this suggestion ever come to fruition? PowerCss seems like a powerful lib that hasn't received much traction; but I would love to use to be able to combine it with tailwindcss or tachions for its dynamic theming capabilities
I've haven't gotten around to it, but I haven't forgotten it either. With all the css parsers out there, its probably a weekend project, at least for the first pass. I'd love to get this done.
I'm curious -- since the tailwindcss utility library is already pure js (built as a plugin for postcss), perhaps it would be easy to integrate the two together; ie, generate the powercss files as output of postcss+tailwindcss ...
I would like to suggest an integration option that auto-generates the javascript based virtual stylesheets based on encoded class selectors similar to blowdrycss https://github.com/nueverest/blowdrycss and Atomic CSS http://acss.io.