Closed
Description
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)