mmikowski / powercss

Create double-buffered responsive CSS that is optimized for performance
Other
44 stars 4 forks source link

Feature Request #1

Open nueverest opened 8 years ago

nueverest commented 8 years ago

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.

mmikowski commented 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

IAMtheIAM commented 8 years ago

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.

mmikowski commented 8 years ago

Thank you. We all agree! I should be tackling this within the next few weeks as my current project requires it soon.

purpledawn777 commented 6 years ago

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

mmikowski commented 6 years ago

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.

purpledawn777 commented 6 years ago

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 ...