Is there any way to apply these styles only within a certain container element?

[zenflow]

Suppose I didn't want to apply the styles globally because I am using another design framework but I want to apply them within a specific container element (e.g. to beautify the presentation of user inputted semantic/classless html, or processed markdown), would that be possible?

I was hoping something like this would be possible:

<div class="new-css-container">
  <p>this element has new.css styles</p>
</div>
<p>this element does not</p>

[px-64]

I haven't thought of this use case before, but this is very interesting. There isn't currently support for this, but I will look into adding it.

[zenflow]

Awesome! :)

Might be able to use something like postcss-prepend-selector to generate a separate css file which can be used this way. :)

[zenflow]

@3x Let me know if you are interested in a PR using postcss-cli and postcss-prepend-selector.. I think it would come down to ~8 new lines of code (2 entries in package dev dependencies, 1 entry in package scripts, ~5 lines in a new postcss.config.js file)

[px-64]

@zenflow That's absolutely something I'll look into after the v2 release, thanks for sharing! I'm interested in using postcss-cli for the next update in order to use Sass, imports from other CSS files, autoprefixer, and some form of automatic code compression, but I'm not yet comfortable with my ability to use them properly.

Do you know of any good places to learn these, or would you be open for some questions if you know them yourself? :)

[zenflow]

I'm not much of a css designer (more of a js programmer) so I feel like I don't know that much about these tools, but I do know a bit and I'd be more than happy to try and answer any questions you have :)
Unfortunately I have no resources to recommend, except the postcss documentation. I think the system is pretty straight-forward to use though, so maybe that's all you will need!
So yeah, go ahead and shoot if you have any questions! I'll do my best :)