Skip to content

postcss-value-parser #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Dec 1, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions plugins/postcss-color-functional-notation/.tape.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
module.exports = {
'basic': {
message: 'supports basic usage',
warnings: 1,
},
'basic:preserve-true': {
message: 'supports { preserve: true } usage',
warnings: 1,
options: {
preserve: true
}
},
'variables': {
message: 'supports variables',
},
'variables:preserve-true': {
message: 'supports variables with { preserve: true } usage',
options: {
preserve: true
}
Expand Down
7 changes: 4 additions & 3 deletions plugins/postcss-color-functional-notation/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"bugs": "https://github.com/csstools/postcss-plugins/issues",
"main": "dist/index.cjs",
"module": "dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"CHANGELOG.md",
"INSTALL.md",
Expand All @@ -20,16 +21,16 @@
},
"scripts": {
"prepublishOnly": "npm run build && npm run test",
"lint": "eslint src/**/*.js",
"lint": "eslint src/**/*.ts",
"test": "postcss-tape --ci",
"build": "rollup -c ../../rollup/default.js",
"build": "rollup -c ../../rollup/default.ts.js",
"stryker": "stryker run --logLevel error"
},
"engines": {
"node": "^12 || ^14 || >=16"
},
"dependencies": {
"postcss-values-parser": "^6.0.1"
"postcss-value-parser": "^4.2.0"
},
"devDependencies": {
"postcss": "^8.3.6",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import type { Node, AtRule } from 'postcss';

export function hasSupportsAtRuleAncestor(node: Node): boolean {
let parent = node.parent;
while (parent) {
if (parent.type !== 'atrule') {
parent = parent.parent;
continue;
}

if ((parent as AtRule).name === 'supports' && (parent as AtRule).params.indexOf('(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))') !== -1) {
return true;
}

parent = parent.parent;
}

return false;
}
18 changes: 0 additions & 18 deletions plugins/postcss-color-functional-notation/src/index.js

This file was deleted.

102 changes: 102 additions & 0 deletions plugins/postcss-color-functional-notation/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
import valueParser from 'postcss-value-parser';
import type { ParsedValue, FunctionNode } from 'postcss-value-parser';
import type { Declaration, Postcss, Result } from 'postcss';
import onCSSFunction from './on-css-function';

import type { PluginCreator } from 'postcss';
import { hasSupportsAtRuleAncestor } from './has-supports-at-rule-ancestor';

/** Transform lab() and lch() functions in CSS. */
const postcssPlugin: PluginCreator<{ preserve: boolean }> = (opts?: { preserve: boolean }) => {
const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false;

return {
postcssPlugin: 'postcss-color-functional-notation',
Declaration: (decl: Declaration, { result, postcss }: { result: Result, postcss: Postcss }) => {
if (preserve && hasSupportsAtRuleAncestor(decl)) {
return;
}

const originalValue = decl.value;
if (!(/(^|[^\w-])(hsla?|rgba?)\(/i.test(originalValue))) {
return;
}

let valueAST: ParsedValue|undefined;

try {
valueAST = valueParser(originalValue);
} catch (error) {
decl.warn(
result,
`Failed to parse value '${originalValue}' as a hsl or rgb function. Leaving the original value intact.`,
);
}

if (typeof valueAST === 'undefined') {
return;
}

valueAST.walk((node) => {
if (!node.type || node.type !== 'function') {
return;
}

if (
node.value !== 'hsl' &&
node.value !== 'hsla' &&
node.value !== 'rgb' &&
node.value !== 'rgba'
) {
return;
}

onCSSFunction(node as FunctionNode);
});
const modifiedValue = String(valueAST);

if (modifiedValue === originalValue) {
return;
}

if (preserve && decl.variable) {
const parent = decl.parent;
const atSupportsParams = '(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))';
const atSupports = postcss.atRule({ name: 'supports', params: atSupportsParams, source: decl.source });

const parentClone = parent.clone();
parentClone.removeAll();

parentClone.append(decl.clone());
atSupports.append(parentClone);

// Ensure correct order of @supports rules
// Find the last one created by us or the current parent and insert after.
let insertAfter = parent;
let nextInsertAfter = parent.next();
while (
insertAfter &&
nextInsertAfter &&
nextInsertAfter.type === 'atrule' &&
nextInsertAfter.name === 'supports' &&
nextInsertAfter.params === atSupportsParams
) {
insertAfter = nextInsertAfter;
nextInsertAfter = nextInsertAfter.next();
}

insertAfter.after(atSupports);

decl.value = modifiedValue;
} else if (preserve) {
decl.cloneBefore({ value: modifiedValue });
} else {
decl.value = modifiedValue;
}
},
};
};

postcssPlugin.postcss = true;

export default postcssPlugin;
Loading