Using css modules with jade/haml/slim/etc or other templating library/language. #70

fesor · 2015-10-12T08:52:25Z

Well... I like the idea of css modules, but what I don't get is how to make it work with jade for example.

Let's took jade for example. Since we have access to template AST we can do something like this:

/* alerts.css *?
.alert {}
.success{}
.error{}
.warning{}

//- alerts.jade
include 'alerts.css'

.alert.success Some success text

I could prepare some proof-of-concept implementation, but... I really not sure about it and I need to hear other people's thoughts about this problem.

geelen · 2015-10-12T21:34:51Z

YES YES YES I really want to support templating languages like this as first class citizens.

With Jade, you can currently do this sort of thing:

doctype html
- styles = require("./styles.css");
html(lang="en")
  body
    h1.global(class=styles.local) CSS Modules & Jade

And it works! If you hop on over to http://jade-lang.com/ and replace require("./styles.css") with { local: 'local__abcd1234' } you get this output:

<!DOCTYPE html>
<html lang="en">
  <body>
    <h1 class="global local__abcd1234">CSS Modules & Jade</h1>
  </body>
</html>

Would that be enough? Or would you want to go further and make local styles the default so you could use the short-hand?

As for other templating languages, that's a bit more work. I'm going to start a new issue to discuss.

fesor · 2015-10-12T22:19:27Z

Your solutions seems to be more flexible. This way I don't need to use some other solutions, for angular's ng-class for example.

// - foo.jade
var styl = require("./foo.css")
.global(ng-class="{'#{styl.local}': vm.someCondition}")

nkbt · 2015-10-13T04:04:53Z

@fesor the very basic example of using css-modules with angular https://github.com/nkbt/ng-modular

fesor · 2015-10-13T06:59:31Z

@nkbt I've seen it. With jade I can do the same without angular be knowing anything about css.

nkbt · 2015-10-13T07:27:25Z

Sure 👌

nostalgicdodo · 2015-10-18T13:12:41Z

how did you get this to work?
jade says "require is not a function"

fesor · 2015-10-18T15:11:55Z

@nostalgicdodo this is a feature of jade-loader for webpack i think. I didn't tried this so far.

nostalgicdodo · 2015-10-27T16:17:39Z

@fesor yes, it is. thanks.

zhouwenbin · 2015-12-25T14:33:04Z

https://github.com/zhouwenbin/css-modules-jade-demo

geelen · 2015-12-26T02:23:26Z

Nice work @zhouwenbin!

kulakowka · 2016-10-05T17:38:19Z

Pug (ex-Jade)

Let's say you have a Pug template about.jade:

h1(class=css.title) postcss-modules
article(class=css.article)

A PostCSS plugin to use CSS Modules everywhere
Render it:

var jade = require('jade');
var cssModules = require('./cssModules.json');
var html = jade.compileFile('about.jade')({css: cssModules});
console.log(html);

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>

I copied this from https://github.com/css-modules/postcss-modules

geelen added the enhancement label Oct 12, 2015

zhouwenbin mentioned this issue Dec 25, 2015

css modules的几种技术方案 zhouwenbin/blog#15

Open

TrySound closed this as completed May 31, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using css modules with jade/haml/slim/etc or other templating library/language. #70

Using css modules with jade/haml/slim/etc or other templating library/language. #70

fesor commented Oct 12, 2015

geelen commented Oct 12, 2015

fesor commented Oct 12, 2015

nkbt commented Oct 13, 2015

fesor commented Oct 13, 2015

nkbt commented Oct 13, 2015

nostalgicdodo commented Oct 18, 2015

fesor commented Oct 18, 2015

nostalgicdodo commented Oct 27, 2015

zhouwenbin commented Dec 25, 2015

geelen commented Dec 26, 2015

kulakowka commented Oct 5, 2016

Using css modules with jade/haml/slim/etc or other templating library/language. #70

Using css modules with jade/haml/slim/etc or other templating library/language. #70

Comments

fesor commented Oct 12, 2015

geelen commented Oct 12, 2015

fesor commented Oct 12, 2015

nkbt commented Oct 13, 2015

fesor commented Oct 13, 2015

nkbt commented Oct 13, 2015

nostalgicdodo commented Oct 18, 2015

fesor commented Oct 18, 2015

nostalgicdodo commented Oct 27, 2015

zhouwenbin commented Dec 25, 2015

geelen commented Dec 26, 2015

kulakowka commented Oct 5, 2016