CSS Modules

[Sydney-o9]

CSS Modules - question

Is there any way to have CSS Modules working with Symfony Encore using Twig?

I would assume this is pretty straight forward to setup with React frontend, but if people use twig, would there be a way to use CSS Modules?

I am not sure how to or if this is even possible, but just raising the question because I think frontend becomes a lot more maintainable with CSS modules..

I personally tend to use CSS Modules in all isomorphic js projects but would love to use it with Symfony Encore & Twig. I think it would be amazing.

---

For example, if we were to:

1 Import our css

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('build/business/register.css') data-css-modules="mycss" }}">
{% endblock %}

2 Reference our classes with mycss

<h1 class="{{ header | css_modules('mycss') }}">Title</h1>

Twig could generate a unique hash per file imported and Webpack with Symfony Encore would then use the same unique hash.

This is just an idea, again.. just to see what you smart people think.

[RobinDev]

I am interested too for a such twig extension.

I will work on it and share it before the end of the year.

[mars-abd]

Hello! We use symfony + react + webpack and I want to share our solutions with you.
About css modules in react components and twig:

1. For example you have some css module file, some-widget.css:

.container {
    // some styles
}
.content {
    // some styles
}

2. Add to webpack.config.js post css plugin – css-modules to css loader – https://github.com/css-modules/postcss-modules like this:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...

{
	test: /\.css$/,
	use: [
		{
			loader: MiniCssExtractPlugin.loader
		},
		{
			loader: 'css-loader'
		},
		{
			loader: 'postcss-loader',
			options: {
				plugins: () => [
					require('postcss-modules')({
						generateScopedName: isProdMode ? '[hash:base64:5]' : '[name]__[local]___[hash:base64:5]'
					})
				]
			}
		}
	]
}

3. After webpack build it will compile some-widget.css.json file like this:

{
    "container": "3wMhw",
    "content": "3PzWu"
}

4. In react components you can use local styles like this:

import React from 'react';
import cssClasses from './some-widget.css.json';
...
render() {
    return <div className={cssClasses.container}>
        <span className={cssClasses.content}></span>
    </div>;
}

5. And for using in twig templates you should white twig extension for reading json file with caching. Usage will be like this:

{% set cssClasses = getCssClasses('./some-widget.css.json') %}
<div class="{{ cssClasses.container }}">
    <span class="{{ cssClasses.content }}"></span>
</div>

[Lyrkan]

@mars-abd Since Encore already provides a rule that handles CSS files, you probably shouldn't add a new one but rather:

• enable/configure PostCSS using Encore.enablePostCssLoader(options => { ... })
• or modify the existing rule using Encore.configureLoaderRule('css', rule => { ... })

[mars-abd]

Yes, of course, thanks
But I want to talk about twig extension more

[tmalley99]

Hey @mars-abd - do you have example code for the extension or a guide as to how we can do this with the Encore existing rules?

[JohnAlbin]

@mars-abd I'm interested in seeing the code for the "twig extension for reading json file with caching". Can you post it or a link to it?

[Bilge]

There simply is no glue between CSS components and Twig. It's completely missing. Everything related to Twig is built around the old-fashioned paradigm of pages instead of components.

[carsonbot]

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

[carsonbot]

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

[mkrauser]

Hey everyone,

I built a bundle for this: https://github.com/mkrauser/css-module-bundle. We've been using that in production for a few months now and it works like a charm.

I would be happy to receive feedback!

Thank you!