CSS / compiler questions

[stevenjcoates]

Loving your work here, thank you.
A couple of questions on this theme:

1. When I run npm run build it still compiles mammoth css file sfor front and backend without any minification or purging?
2. Getting "Selector should use lowercase and separate words with hyphens selector-class-pattern" - is there any easy way to disable this rule within the theme?
   Cheers.

[coreymcollins]

When I run npm run build, I get a minified index.css file of around 25kb. We're not producing separate backend and frontend styles on build:

For ignoring any rules, you can refer to the Stylelint docs for ignoring individual lines, blocks of styles, or entire files: https://stylelint.io/user-guide/ignore-code/

[stevenjcoates]

Thanks @coreymcollins.
Hmm, wonder why I'm not getting the minified file, it's definitely building the file with my changes from the src/ scss files. Will play some more and post here if I work it out.

[stevenjcoates]

I've tracked this down now. Two things...

1. I can get purge to work if I add enabled: true, in purge: { in tailwind.config.js

module.exports = {
	purge: {
		content: [ './**/*.php', './src/js/**/*.js' ],
		layers: [ 'utilities' ],
		mode: 'layers',
		enabled: true,
	},

2. I can get minify to work running npm run start by copying across the optimization stuff from webpack.prod.js to webpack.config.js

const CssMinimizerPlugin = require( 'css-minimizer-webpack-plugin' );

and

	optimization: {
		minimize: true,
		minimizer: [
			/**
			 * Minify CSS.
			 *
			 * @see https://www.npmjs.com/package/css-minimizer-webpack-plugin
			 */
			new CssMinimizerPlugin( {
				sourceMap: false,
				parallel: true,
				minimizerOptions: {
					preset: [
						'default',
						{
							discardComments: { removeAll: true },
						},
					],
				},
			} ),
		],
	},

New to this and unclear exactly what's causing issues in my case but but it works and gets me a 25kb build file down from 5.5mb.

[stevenjcoates]

In case anyone's having the issue with stylelint error I'm getting re css syntax

Selector should use lowercase and separate words with hyphens

Add "selector-class-pattern": null to the other rules in .stylelintsrc.json

{
	"extends": [
		"@wordpress/stylelint-config/scss",
		"stylelint-config-prettier"
	],
	"rules": {
		"at-rule-empty-line-before": null,
		"declaration-colon-newline-after": null,
		"declaration-no-important": true,
		"function-parentheses-space-inside": null,
		"no-descending-specificity": null,
		"selector-pseudo-class-parentheses-space-inside": null,
		"selector-class-pattern": null,