CSS with extensions not correctly transforming

[romainmenke]

    My 2:20-morning brain could not think to install `postcss-env-function` separately. Thank you.

I tried installing the beta alpha and postcss-env-function. I do not see the fix succeed.

Has my 3:20-morning brain done anything wrong?

Source & Config

package.json (abbreviated)

  "peerDependencies": {
    "commander": "^9.4.1",
    "cssnano": "^5.1.14",
    "js-yaml": "^4.1.0",
    "merge-lite": "^1.0.2",
    "node-cmd": "^5.0.0",
    "npm-watch": "^0.11.0",
    "postcss": "^8.4.18",
    "postcss-banner": "^4.0.1",
    "postcss-cli": "^10.0.0",
    "postcss-extend": "^1.0.5",
    "postcss-env-function": "4.0.6",
    "postcss-import": "^15.0.0",
    "postcss-preset-env": "^8.0.0-alpha.1",
    "postcss-replace": "^2.0.0"
  },
  "devDependencies": {
    "@frctl/fractal": "^1.5.13",
    "@frctl/mandelbrot": "^1.10.1"
  },

No dependencies. Long story. Temporary. Does it matter?

npm list

➜  Core-Styles git:(dev--task/form-patterns--task/base-cms-portal-header) ✗ npm list postcss-env-function
@tacc/[email protected] /Users/wbomar/Code/Core-Styles
└── [email protected]

➜  Core-Styles git:(dev--task/form-patterns--task/base-cms-portal-header) ✗ npm list postcss-custom-selectors           
@tacc/[email protected] /Users/wbomar/Code/Core-Styles
└─┬ [email protected]
  └── [email protected]

src/.postcssrc.yml

plugins:
  postcss-import:
    path:
      - src/lib
  postcss-extend: {}
  postcss-env-function:
    importFrom:
      - src/lib/_themes/default.json
  postcss-preset-env:
    stage: false
    features:
      custom-media-queries: true
      media-query-ranges: true
      custom-selectors: true
  cssnano:
    preset:
      - default
      - discardDuplicates:
          exclude: true
        mergeRules:
          exclude: true
  postcss-banner:
    banner: '@tacc/core-styles v0.11.0-30-g66400cb+ | MIT | github.com/TACC/Core-Styles'
    inline: true
    important: true
  postcss-replace:
    pattern: ../../fonts/
    data:
      replaceAll: fonts/

src/.../c-button.css

@custom-selector :--disabled :disabled,[disabled];

.c-button {
  display: inline-block;

  box-sizing: border-box;

  border-width: var(--global-border-width--normal);
  border-style: solid;
}

.c-button:not(:--disabled) {
  cursor: pointer; /* WARNING: Opinionated */
}

No @import

✓ The @custom-selector is parsed away.

dist/c-button.css

/*! @tacc/core-styles v0.11.0-30-g66400cb+ | MIT | github.com/TACC/Core-Styles */

.c-button {
	border-style: solid;
	border-width: var(--global-border-width--normal);
	box-sizing: border-box;
	display: inline-block
}

.c-button:not(:is(:disabled, [disabled])) {
	cursor: pointer
}

Use @import

ⓧ The @custom-selector remains, unparsed.

src/.../core-styles.base.css

/*! core-styles.base.css */
@import url("./components/c-button.css") layer(components);

dist/core-styles.base.css

/*! @tacc/core-styles v0.11.0-30-g66400cb+ | MIT | github.com/TACC/Core-Styles */
/*! core-styles.base.css */

@layer components {
	@custom-selector : --disabled:disabled, [disabled];

	.c-button {
		border-style: solid;
		border-width: var(--global-border-width--normal);
		box-sizing: border-box;
		display: inline-block
	}

	.c-button:not(:--disabled) {
		cursor: pointer
	}
}

Originally posted by @wesleyboar in #481 (comment)

[romainmenke]

@wesleyboar I've taken your report and created a separate issue to keep the other thread on topic.

Can you verify a few things?

What is the output without cascade-layers but with @import?

This in your base.css :

/*! core-styles.base.css */
@import url("./components/c-button.css");

What is the version of @csstools/postcss-cascade-layers ?

npm list @csstools/postcss-cascade-layers

[wesleyboar]

Okay. Yes.

The output—sans cascade-layers, with import—is correct custom-selectors parsing.

Input base.css

/*! core-styles.base.css */
@import url("./components/c-button.css");

Output base.css

/*! @tacc/core-styles v0.11.0-30-g66400cb+ | MIT | github.com/TACC/Core-Styles */
/*! core-styles.base.css */.c-button{border-style:solid;border-width:var(--global-border-width--normal);box-sizing:border-box;display:inline-block}.c-button:not(:is(:disabled,[disabled])){cursor:pointer}

My cascade-layers is at v2.0.0.

npm list @csstools/postcss-cascade-layers

➜  Core-Styles git:(dev--task/form-patterns--task/base-cms-portal-header) ✗ npm list @csstools/postcss-cascade-layers
@tacc/[email protected] /Users/wbomar/Code/Core-Styles
└─┬ [email protected]
  └── @csstools/[email protected]

[romainmenke]

Unminified output :

.c-button {
	border-style: solid;
	border-width: var(--global-border-width--normal);
	box-sizing: border-box;
	display: inline-block
}

.c-button:not(:is(:disabled, [disabled])) {
	cursor: pointer
}

---

🤔 Something is indeed not working here but I can't reproduce it within our repo.

UPDATE : I did not notice the plugin options before, that explains why I couldn't reproduce.

/* styles.css (entrypoint) */
@import url(./imports/extensions.css) layer(extensions);
@import url(./imports/components.css) layer(components);

/* extensions.css */
@custom-media --dark (prefers-color-scheme: dark);
@custom-media --light (prefers-color-scheme: light);
@custom-media --tablet (width >= 768px);

@custom-selector :--h h1, h2, h3, h4, h5, h6;
@custom-selector :--button button, input[type="submit"];

:root {
	--color-red: red;
	--color-blue: blue;
}

/* components.css */
:--button {
	color: var(--color-red);
}

@media (--dark) {
	:--button {
		color: var(--color-blue);
	}
}

Becomes :

:root {
	--color-red: red;
	--color-blue: blue;
}
button:not(.does-not-exist):not(#\#) {
	color: red;
	color: var(--color-red);
}
input[type="submit"]:not(#\#) {
	color: red;
	color: var(--color-red);
}
@media (prefers-color-scheme: dark) {
	button:not(.does-not-exist):not(#\#) {
		color: blue;
		color: var(--color-blue);
	}
	input[type="submit"]:not(#\#) {
		color: blue;
		color: var(--color-blue);
	}
}

All extensions resolved correctly :

• custom properties
• custom media
• custom selectors

---

I am currently working a fix for the interaction with CSS Nesting so maybe that one also fixes this issue?

Alternatively it would be best to have a minimal reproduction.
Ideally something we can clone locally and inspect in detail.

[romainmenke]

Nevermind, I noticed what is happening :)

  postcss-preset-env:
    stage: false
    features:
      custom-media-queries: true
      media-query-ranges: true
      custom-selectors: true

You have disabled all features except those three.
Those three features do not support Cascade Layers.

It is currently the Cascade Layers plugin which removes all @layer rules.
After this the other plugins work as expected.

Since you disabled cascade-layers nothing will work.

---

I am currently working a fix for the interaction with CSS Nesting so maybe that one also fixes this issue?

This change will allow your setup to work.

[wesleyboar]

I agree. I want to provide a minimal reproduction. I might make one later today. Thanks for showing your input and output.

Note to Self

1. In your stack, re-create romainmenke's code.
2. If it works or fails, let 'em know.
3. If you get a light bulb from the effort, follow the light.

[wesleyboar]

Oh, indeed. I will activate it, and cross all of my fingers.

[wesleyboar]

Activating the plugin works. 😅

I consider this issue resolved.

Thanks.

[romainmenke]

We have also made the needed code changes so that the plugins for custom-media, custom-selectors, ... understand @layer and can work correctly even when you do not want to transpile @layer rules.

These changes will be shipped in upcoming released.