[FIX] Autoscoping for snippet styles about 30-seconds-of-css HOT 7 CLOSED

Example: circle.md

The code that is actually displayed on the website is within <style>, notice, it's namespaced with .snippet-demo__ so the styles don't conflict with the global ones or other snippets.

I'm suggesting to autoscope the selectors during the build script and forget about manually creating a demo -- the demo is created via the build script using the actual code.

Current

Snippet creator manually creates the demo, repeating code

#### Demo

<div class="snippet-demo">
  <div class="snippet-demo__circle"></div>
</div>

<style>
.snippet-demo__circle {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  background: #333;
}
</style>

New

The build script does it using the actual code within the blocks automatically.

#### Demo
<!-- Leave this blank, the build script will generate the demo -->

Generated demo

<div class="snippet-demo" data-scope="circle">
  <div class="circle"></div>
</div>

<!-- Not sure how to do this reliably -->
<style>
[data-scope="circle"] .circle {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  background: #333;
}
</style>

Any suggestions on how to do this efficiently would be nice.

from 30-seconds-of-css.

It may be better to generate a SCSS or .less string and pass it to the parse for output because then you merely need to wrap the style with the namespace selector and it should do it for you.

Yeah I was thinking this. I thought a smart parser would be needed because my quick tries with regex were failing.

But with SCSS you can just stick everything inside a single block and it works. It shouldn't be too hard to convert the SCSS to CSS with the script.

from 30-seconds-of-css.

I may be misunderstanding you, but won't generating a custom scope for the styles just repeat the code itself anyways? Or are you suggesting we move the namespacing chore to the build script?

from 30-seconds-of-css.

prepend any CSS selector with a data scope selector?

The problem is that to understand this, the design needs to account for complex cases with several classes in the code. It may be better to generate a SCSS or .less string and pass it to the parse for output because then you merely need to wrap the style with the namespace selector and it should do it for you.

Less and SCSS generators can also be used to generate a giant demo CSS too which may be helpful instead so that the CSS loads with the page, and the demo html gets styled at render so that demo blocks don't need a style tag.

from 30-seconds-of-css.

either that or less, both will namespace inside the single block very similarly. It should be pretty easy and regex should be minimal. Gotta love those build tools right?

from 30-seconds-of-css.

Resolved in #103

from 30-seconds-of-css.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for any follow-up tasks.

from 30-seconds-of-css.