postcss-custom-properties
postcss-custom-properties copied to clipboard
postcss
Use Custom Properties in CSS
In fallback pattern using "preserve: false", custom properties remain and "root" is deleted, so it can't check the custom properties like below. [preserve: false] ``` ▼ before :root { --my-blue:...
Looking at the docs, `exportTo` supports exporting a ESM module if the file ends with `.mjs`. However `importFrom` doesn't seem to support importing `.mjs` files (https://github.com/postcss/postcss-custom-properties/blob/9b46ae805605842cfa3b0c2f8f8b4dd1c8c88dce/src/lib/get-custom-properties-from-imports.js#L85).
## Summary Recently the importFrom property was given maximum priority in #222 to resolve #215. The change in priority was no-passive and is breaking the theme strategy in our builds....
```css :root { /** is working **/ --checkbox-size: 2em; /** it does not work! **/ --✅-size: 2em; } ```
## Issue When using variables like ```css :root { --vds-font-heading-xxs: normal normal bold normal var(--vds-font-size-heading-xxs)/var(--vds-line-height-heading-xxs) var(--vds-font-family-display); --vds-font-family-display: 'Raleway', Helvetica, Arial, sans-serif; --vds-font-scale-base: 1.6rem; --vds-font-scale-multiplier: 1.25; --vds-font-size-heading-xxs: var(--vds-font-scale-base); --vds-line-height-heading-xxs: 1.50; }...
It would be useful if `importFrom` could accept a CSS string or buffer, rather than a file. Would you accept a PR for this feature?
[email protected] ```css .problem { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB3aWR0aD0iMjAiCiAgIGhlaWdodD0iNDAiCiAgIHZpZXdCb3g9IjAgMCA1IDEwIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWF4WU1pZCIKICAgZGF0YS1uYW1lPSJMYXllciAxIgogICBpZD0iTGF5ZXJfMSI+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMTciPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPmFycm93czwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMzIj4KICAgIDxzdHlsZQogICAgICAgaWQ9InN0eWxlNSI+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT4KICA8L2RlZnM+CiAgPHRpdGxlCiAgICAgaWQ9InRpdGxlNyI+YXJyb3dzPC90aXRsZT4KICA8cG9seWdvbgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xLjQwMDczMDYsMCkiCiAgICAgc3R5bGU9ImZpbGw6IzQ0NDQ0NCIKICAgICBpZD0icG9seWdvbjExIgogICAgIHBvaW50cz0iMi40OCwzLjE4IDMuNTQsNC42NyAxLjQxLDQuNjcgMS40MSw0LjY3ICIKICAgICBjbGFzcz0iY2xzLTIiIC8+CiAgPHBvbHlnb24KICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMS40MDA3MzA2LDApIgogICAgIHN0eWxlPSJmaWxsOiM0NDQ0NDQiCiAgICAgaWQ9InBvbHlnb24xMyIKICAgICBwb2ludHM9IjIuNDgsNi44MiAxLjQxLDUuMzMgMy41NCw1LjMzIDMuNTQsNS4zMyAiCiAgICAgY2xhc3M9ImNscy0yIiAvPgo8L3N2Zz4K") no-repeat 100% 50%, var(--color-background-gray, #f2f2f2); } ``` Expected result: The line is processed correctly. Actual result: ``` Message: postcss-custom-properties: :1:19: Unknown word ```
pcss ``` @import "./_css/__function.pcss"; // :root @import "./_css/common_content.pcss"; // contents ``` postcss.config ``` module.exports = (api) => ({ plugins: { "postcss-import": {}, "postcss-advanced-variables": {}, "postcss-custom-properties": { preserve: false, }, }...
The `importFrom` option can take `css`, `scss`, and `pcss` however doesn't look like it supports `postcss` files. This is what I use and I've seen it as a common extension...
When using variables for a CSS transition followed by a comma white space is removed between the transition properties which breaks the transition: ex. ```css // pre-compiled.css :root { --transition-transform:...
