Is composes supposed to work?

[bitttttten]

/* PageTitle.css */
.root {
	composes: h2 from '../../theme/type.css';
	color: #147C3F;
	padding: 1.6rem 0;
}

/* theme/type.css */
.heading {
	line-height: 1.2em;
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.h2 {
	composes: heading;
	font-size: 2.4rem;
}

My class name is correct: <h2 class="PageTitle_root theme_h2 theme_heading">Shopping</h2>. However the CSS is not:

/* theme/type.css */
._2mTJYElVgbS7n2ZX_6poxK{line-height:1.2em;text-align:center;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.euz7EGBHQkfc-E5dtLq7b{font-size:38.4px;font-size:2.4rem}

/* PageTitle.css */
.PageTitle_root{color:#147c3f;padding:25.6px 0;padding:1.6rem 0}

As you can see, the PageTitle CSS is generating the class name correctly, but the theme/type.css file is not. What's up with that?

My config is this:

// Process JS with Babel.
{
	test: /\.(js|jsx|mjs)$/,
	include: paths.appSrc,
	loader: require.resolve('babel-loader'),
	options: {
		// This is a feature of `babel-loader` for webpack (not Babel itself).
		// It enables caching results in ./node_modules/.cache/babel-loader/
		// directory for faster rebuilds.
		cacheDirectory: false,
		plugins: [
			'transform-decorators-legacy',
			'react-loadable/babel',
			['react-css-modules', {
				context: paths.appSrc,
				generateScopedName,
				webpackHotModuleReloading: false,
				attributeNames: {
					activeStyleName: 'activeClassName'
				}
			}]
		]
	},
},

[gajus]

Whats the definition of generateScopedName?

[bitttttten]

Oh sorry, I tried to include as much as I can. I took this function from this medium article and changed it slightly.

const incstr = require('incstr')
const path = require('path')

const createUniqueIdGenerator = () => {
	const index = {}

	const generateNextId = incstr.idGenerator({
		alphabet: 'abcdefghijklmnopqrstuvwxyz0123456789'
	})

	return (name) => {

		if (index[name]) {
			return index[name]
		}

		let nextId

		// class name cannot start with a number
		// and it cannot start with 'ad' otherwise adblocks will hide the element
		do {
			nextId = generateNextId()
		} while (/^[0-9]/.test(nextId) || /^ad/.test(nextId))

		index[name] = process.env.NODE_ENV === 'development'
			? `${name}-${nextId}`
			: nextId

		return index[name]
	}
}

const uniqueIdGenerator = createUniqueIdGenerator()

const generateScopedName = (localName, resourcePath) => {
	let componentName = resourcePath.split(path.sep).slice(-2, -1)

	if (componentName === "theme") {
		componentName = `${componentName}.${resourcePath.split(path.sep).slice(-1, -1)}`
	}

	return `${uniqueIdGenerator(componentName)}_${uniqueIdGenerator(localName)}`
}

and my .babelrc

{
	"presets": [
		["env", {
			"modules": false,
			"targets": {
				"browsers": ["> 0.5%"]
			}
		}],
		"stage-2",
		"react"
	],
	"env": {
		"server": {
			"presets": [["env", {
				"targets": {
					"node": "8.9.1"
				}
			}], "react"],
			"plugins": [
				"transform-decorators-legacy",
				"transform-class-properties",
				"react-loadable/babel"
			]
		}
	}
}

[bitttttten]

And also my css-loader config:

{
	test: /\.css$/,
	use: [
		{
			loader: require.resolve('style-loader'),
			options: {
				insertInto: 'body',
			},
		},              
		{
			loader: require.resolve('css-loader'),
			options: {
				importLoaders: 1,
				modules: true,
				getLocalIdent: (context, localIdentName, localName) => {
					return generateScopedName(localName, context.resourcePath)
				},
			},
		},
		{
			loader: require.resolve('postcss-loader'),
		},
	],
},

[bitttttten]

Perhaps it is my local set up that is incorrect. If I remove getLocalIdent from the css-loader and generateScopedName from react-css-modules config composes is still not working.

I see in the DOM:

<h2 class="components-PageTitle-___PageTitle__root___3fA2n theme-___type__h2___266vk theme-___type__heading___1anDN">Shopping</h2>

But in the CSS I see:

/* PageTitle.css */._3fA2nPANa1DNO1QapNXW1v{color:#147c3f;padding:25.6px 0;padding:1.6rem 0}
/* theme/type.css */._1anDNxYVFvlSql6C1Bryx5{...}

If you are still interested, I can give you a repo to check out?

Edit: I see you need to match them so I understand why this doesn't work lol. Although my first question and the offer to share a reproduceable repo still stands.

[gajus]

Probably duplicate of:

• Adding "composes" doesn't update className #48 or
• composes .. from ... statements no longer work #22