How to correctly work with CSS styles (importing, generating, etc)

[samsnori]

Currently I'm experimenting with react-aria and not sure how to deal with CSS. I look at the react-aria components page and copy the CSS from there into my react/next based app. This feels silly.

I've seen that react-aria also has a vanilla CSS starter kit. This starter kit contains all the CSS for each component separately in a .css file. I can copy all those CSS files into my app and import those. However I think there must be a better way.

How would I correctly include the bare-bone vanilla CSS as shown on the components pages of react-aria?

[reidbarber]

The styles on each page are split up intentionally, since some styles might not be needed for all use cases (i.e. if your listbox doesn't include drag and drop, no need to include those styles). We originally included all the styles at the top of each page, but got feedback that this was overwhelming and usually included excess styles for most use cases. We now introduce styles as they are needed by section.

The Vanilla CSS and Tailwind CSS starter kits are a good way to get going more quickly. The Vanilla CSS starter uses the exact styles included in the docs. I think copying these into your project as needed is a good strategy, and having them in separate files is better for separation of concerns. We may consider a CLI tool that quickly copies starters/components in the future (this was explored in #4397).

[samsnori]

I've read up on PostCSS. Now I'm trying to figure out how to use it to generate correct CSS. What configuration should I create and importantly what plugins and optionns do I need?

I did find this reference https://github.com/adobe/react-spectrum/blob/main/postcss.config.js which points to https://github.com/adobe/spectrum-css/blob/main/tools/component-builder/css/processors.js with a list of plugins. I can create a postcss.config.js and copy those plugins I guess.

How are others doing this, are they taking the same steps as I do? You can't simply copy/paste the CSS from the react-aria as the CSS is not supported by all browsers yet.

[reidbarber]

Your build tool can usually handle this. Here's an example: https://parceljs.org/languages/css/#nesting
There are links to instructions for other build tools here: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#usage

I think we could definitely clarify how to integrate these into existing or new build setups though.

[reidbarber]

Made a PR for this here: #5746

[samsnori]

Thanks @reidbarber. Yes I understand a build tool like PostCSS can handle this. But this build tool needs to be configured. The problem is that it's not clear how I should exactly configure PostCSS. I mean what is the actual configuration that I must use to build the storybook/vanilla CSS files.

I noted the nested issue because a friend was using an older version of Chrome that has only partial support. My concern is that the vanilla CSS might user other features that are not supported yet.

[reidbarber]

You can target specific browser version minimums or percentage usage by providing a browserslist config. Ex: Lightning CSS or postcss-preset-env

The starter storybook already includes lightning css via a webpack config, which by default should target the last two versions of major browsers:

react-spectrum/starters/docs/.storybook/main.js

Lines 52 to 57 in 46ae331

	async webpackFinal(config) {
	let rule = config.module.rules.find(rule => String(rule.test).includes('.css'));
	rule.use.push('lightningcss-loader');
	return config;
	}
	};