These are chat archives for jescalan/roots

6th
Jul 2016
Nauz
@Nauz
Jul 06 2016 07:29
@jescalan Hi, Jeff! Please, help! )) How can I plug Postcss-modules? I know It uses JSON for recording generated classes, so I know roots need to use roots-records plugin for read this JSON file, but I don't know how to do correct injecting these classes into jade. I think it may need a lot of people who use roots and who use css modules)
Tom Kraak
@tkraak
Jul 06 2016 08:45
@Nauz are you asking how to wire up a postcss plugin?
Nuno Alexandre
@NunoAlexandre
Jul 06 2016 09:37

Hi guys!

Is it possible to have .html templates instead of .jade (or other)? So it would be normal html with the tags/markup to display content that would then be processed

Tom Kraak
@tkraak
Jul 06 2016 10:12
yes, that's no problem
see this basic template:
David Eglin
@djeglin
Jul 06 2016 11:42
Hmm. Seems there is currently a gateway error on NPM for one of Roots' dependencies. Love it when things like that break my build for no reason :P
Nauz
@Nauz
Jul 06 2016 11:43
@tkraak No! I know how to wire up postcss plugins to roots, BUT this problem is not the same stuff!))
Tom Kraak
@tkraak
Jul 06 2016 11:46
@Nauz can you explain your issue again then?
Nauz
@Nauz
Jul 06 2016 11:50
@tkraak Ok! I'll try to be easier)) I want to wire up postcss-modules to roots and I want It works
David Eglin
@djeglin
Jul 06 2016 11:53
@Nauz Are you successfully getting generated CSS out of the postcss plugin?
Nauz
@Nauz
Jul 06 2016 11:53
@djeglin Yes I am
David Eglin
@djeglin
Jul 06 2016 11:54
And you don't have a problem adding it to your templates, I'm guessing, so what exactly is it that you are trying to do that isn't working?
Nauz
@Nauz
Jul 06 2016 11:58
@djeglin I have a problem adding generated css classes to my jade templates
David Eglin
@djeglin
Jul 06 2016 11:59
generated css classes? That sounds like a nightmare waiting to happen...
So you are dynamically generating a className (like component_className_1 or similar) in your css and you want to add these same dynamically generated classes into your templates, am I right?
Nauz
@Nauz
Jul 06 2016 12:01
@djeglin Yep! You are right!
David Eglin
@djeglin
Jul 06 2016 12:01
To the best of my knowledge there isn't really a way to do that... Or, if there is, it won't be a good one.
Because postcss is generating stylesheets... which are a very separate concern from your html.
Nauz
@Nauz
Jul 06 2016 12:02
@djeglin Please, read docs of Postcss-modules
David Eglin
@djeglin
Jul 06 2016 12:03
Ew.
Thats... err... truly horrendous
But ok
David Eglin
@djeglin
Jul 06 2016 12:09
Others will probably be more knowledgable on this than me, but I think Jade can accept a "data" option where you can pass it a json file?
Or can you not set the json file as a global and require it directly into your jade template?
Nauz
@Nauz
Jul 06 2016 12:10
@djeglin It is possible to do this! May be with extension roots-records But I can't((( If this problem will be solved, each of us will be able to use isolated blocks! It'll be amazing!
David Eglin
@djeglin
Jul 06 2016 12:11
Well... No.
This solution makes modules, sure, but they are being created separately and transmuted to get there
Is the goal here to separate out into multiple files? To simply namespace things properly? I honestly don't see what the purpose in doing this is in a generated static website. If this was to be used in a SPA or in some kind of modular framework, then sure, but this seems like a really weird usage.
But maybe I'm just not getting it. Or I'm old fashioned.
Nauz
@Nauz
Jul 06 2016 12:19
@djeglin Perhaps, this video will clear everything up: Fix Global CSS with PostCSS
David Eglin
@djeglin
Jul 06 2016 12:19
so try requiring roots-records and setting your JSON output from postcss in the extension:
module.exports = 
  extensions: [
    records(
      css: { file: "path/to/json/output.json" }
    )
  ]
Nauz
@Nauz
Jul 06 2016 12:21
@djeglin Ok! I've already done this, what's next?
David Eglin
@djeglin
Jul 06 2016 12:32
that would then mean that there should be a css global available in your jade templates.
There isn't a built-in way for jade to consume this and transform the classNames, I don't think... But I'll look into it
Nauz
@Nauz
Jul 06 2016 12:47

@djeglin
Accessing Data In Jade Templates (with roots-records):

!= JSON.stringify(records.css_generated_with_postcss_modules)

And...

h1(class=css.title) postcss-modules
article(class=css.article) A PostCSS plugin to use CSS Modules everywhere

And you'll get the following HTML:

<h1 class="_title_xkpkl_5 _title_116zl_1">postcss-modules</h1>
<article class="_article_xkpkl_10">A PostCSS plugin to use CSS Modules everywhere</article>
...But I'm missing something...
Nuno Alexandre
@NunoAlexandre
Jul 06 2016 12:50
@tkraak I didn't mean simple html. I'm using the contentful plugin to fetch and display data. within jade files it works well but within html files it just doesn't compile / parses / processes it
Tom Kraak
@tkraak
Jul 06 2016 12:55

@NunoAlexandre have you looked at multipass compilation?

http://roots.cx/docs/multipass

Nuno Alexandre
@NunoAlexandre
Jul 06 2016 13:01
@tkraak no, I will now have a look, thanks!
Jeff Escalante
@jescalan
Jul 06 2016 13:50
@Nauz you would need a custom plugin for this type of integration. but may i suggest https://github.com/jescalan/gps as a much easier solution to locally scoped css :)
Also, this type of thing will be supported in spike
But still would strongly advise against it, imho css modules is a disaster