first commit

This commit is contained in:
2026-09-08 20:28:54 +08:00
commit 2ada8d3d5a
37380 changed files with 4886169 additions and 0 deletions
+22
View File
@@ -0,0 +1,22 @@
Copyright (c) Ben Briggs <beneb.info@gmail.com> (http://beneb.info)
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
+50
View File
@@ -0,0 +1,50 @@
# [postcss][postcss]-merge-longhand
> Merge longhand properties into shorthand with PostCSS.
## Install
With [npm](https://npmjs.org/package/postcss-merge-longhand) do:
```
npm install postcss-merge-longhand --save
```
## Example
Merge longhand properties into shorthand; works with `margin`, `padding` &
`border`. For more examples see the [tests](src/__tests__/index.js).
### Input
```css
h1 {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
```
### Output
```css
h1 {
margin: 10px 20px;
}
```
## Usage
See the [PostCSS documentation](https://github.com/postcss/postcss#usage) for
examples for your environment.
## Contributors
See [CONTRIBUTORS.md](https://github.com/cssnano/cssnano/blob/master/CONTRIBUTORS.md).
## License
MIT © [Ben Briggs](http://beneb.info)
[postcss]: https://github.com/postcss/postcss
@@ -0,0 +1,22 @@
Copyright (c) Bogdan Chadkin <trysound@yandex.ru>
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,263 @@
# postcss-value-parser
[![Travis CI](https://travis-ci.org/TrySound/postcss-value-parser.svg)](https://travis-ci.org/TrySound/postcss-value-parser)
Transforms CSS declaration values and at-rule parameters into a tree of nodes, and provides a simple traversal API.
## Usage
```js
var valueParser = require('postcss-value-parser');
var cssBackgroundValue = 'url(foo.png) no-repeat 40px 73%';
var parsedValue = valueParser(cssBackgroundValue);
// parsedValue exposes an API described below,
// e.g. parsedValue.walk(..), parsedValue.toString(), etc.
```
For example, parsing the value `rgba(233, 45, 66, .5)` will return the following:
```js
{
nodes: [
{
type: 'function',
value: 'rgba',
before: '',
after: '',
nodes: [
{ type: 'word', value: '233' },
{ type: 'div', value: ',', before: '', after: ' ' },
{ type: 'word', value: '45' },
{ type: 'div', value: ',', before: '', after: ' ' },
{ type: 'word', value: '66' },
{ type: 'div', value: ',', before: ' ', after: '' },
{ type: 'word', value: '.5' }
]
}
]
}
```
If you wanted to convert each `rgba()` value in `sourceCSS` to a hex value, you could do so like this:
```js
var valueParser = require('postcss-value-parser');
var parsed = valueParser(sourceCSS);
// walk() will visit all the of the nodes in the tree,
// invoking the callback for each.
parsed.walk(function (node) {
// Since we only want to transform rgba() values,
// we can ignore anything else.
if (node.type !== 'function' && node.value !== 'rgba') return;
// We can make an array of the rgba() arguments to feed to a
// convertToHex() function
var color = node.nodes.filter(function (node) {
return node.type === 'word';
}).map(function (node) {
return Number(node.value);
}); // [233, 45, 66, .5]
// Now we will transform the existing rgba() function node
// into a word node with the hex value
node.type = 'word';
node.value = convertToHex(color);
})
parsed.toString(); // #E92D42
```
## Nodes
Each node is an object with these common properties:
- **type**: The type of node (`word`, `string`, `div`, `space`, `comment`, or `function`).
Each type is documented below.
- **value**: Each node has a `value` property; but what exactly `value` means
is specific to the node type. Details are documented for each type below.
- **sourceIndex**: The starting index of the node within the original source
string. For example, given the source string `10px 20px`, the `word` node
whose value is `20px` will have a `sourceIndex` of `5`.
### word
The catch-all node type that includes keywords (e.g. `no-repeat`),
quantities (e.g. `20px`, `75%`, `1.5`), and hex colors (e.g. `#e6e6e6`).
Node-specific properties:
- **value**: The "word" itself.
### string
A quoted string value, e.g. `"something"` in `content: "something";`.
Node-specific properties:
- **value**: The text content of the string.
- **quote**: The quotation mark surrounding the string, either `"` or `'`.
- **unclosed**: `true` if the string was not closed properly. e.g. `"unclosed string `.
### div
A divider, for example
- `,` in `animation-duration: 1s, 2s, 3s`
- `/` in `border-radius: 10px / 23px`
- `:` in `(min-width: 700px)`
Node-specific properties:
- **value**: The divider character. Either `,`, `/`, or `:` (see examples above).
- **before**: Whitespace before the divider.
- **after**: Whitespace after the divider.
### space
Whitespace used as a separator, e.g. ` ` occurring twice in `border: 1px solid black;`.
Node-specific properties:
- **value**: The whitespace itself.
### comment
A CSS comment starts with `/*` and ends with `*/`
Node-specific properties:
- **value**: The comment value without `/*` and `*/`
- **unclosed**: `true` if the comment was not closed properly. e.g. `/* comment without an end `.
### function
A CSS function, e.g. `rgb(0,0,0)` or `url(foo.bar)`.
Function nodes have nodes nested within them: the function arguments.
Additional properties:
- **value**: The name of the function, e.g. `rgb` in `rgb(0,0,0)`.
- **before**: Whitespace after the opening parenthesis and before the first argument,
e.g. ` ` in `rgb( 0,0,0)`.
- **after**: Whitespace before the closing parenthesis and after the last argument,
e.g. ` ` in `rgb(0,0,0 )`.
- **nodes**: More nodes representing the arguments to the function.
- **unclosed**: `true` if the parentheses was not closed properly. e.g. `( unclosed-function `.
Media features surrounded by parentheses are considered functions with an
empty value. For example, `(min-width: 700px)` parses to these nodes:
```js
[
{
type: 'function', value: '', before: '', after: '',
nodes: [
{ type: 'word', value: 'min-width' },
{ type: 'div', value: ':', before: '', after: ' ' },
{ type: 'word', value: '700px' }
]
}
]
```
`url()` functions can be parsed a little bit differently depending on
whether the first character in the argument is a quotation mark.
`url( /gfx/img/bg.jpg )` parses to:
```js
{ type: 'function', sourceIndex: 0, value: 'url', before: ' ', after: ' ', nodes: [
{ type: 'word', sourceIndex: 5, value: '/gfx/img/bg.jpg' }
] }
```
`url( "/gfx/img/bg.jpg" )`, on the other hand, parses to:
```js
{ type: 'function', sourceIndex: 0, value: 'url', before: ' ', after: ' ', nodes: [
type: 'string', sourceIndex: 5, quote: '"', value: '/gfx/img/bg.jpg' },
] }
```
### unicode-range
The unicode-range CSS descriptor sets the specific range of characters to be
used from a font defined by @font-face and made available
for use on the current page (`unicode-range: U+0025-00FF`).
Node-specific properties:
- **value**: The "unicode-range" itself.
## API
```
var valueParser = require('postcss-value-parser');
```
### valueParser.unit(quantity)
Parses `quantity`, distinguishing the number from the unit. Returns an object like the following:
```js
// Given 2rem
{
number: '2',
unit: 'rem'
}
```
If the `quantity` argument cannot be parsed as a number, returns `false`.
*This function does not parse complete values*: you cannot pass it `1px solid black` and expect `px` as
the unit. Instead, you should pass it single quantities only. Parse `1px solid black`, then pass it
the stringified `1px` node (a `word` node) to parse the number and unit.
### valueParser.stringify(nodes[, custom])
Stringifies a node or array of nodes.
The `custom` function is called for each `node`; return a string to override the default behaviour.
### valueParser.walk(nodes, callback[, bubble])
Walks each provided node, recursively walking all descendent nodes within functions.
Returning `false` in the `callback` will prevent traversal of descendent nodes (within functions).
You can use this feature to for shallow iteration, walking over only the *immediate* children.
*Note: This only applies if `bubble` is `false` (which is the default).*
By default, the tree is walked from the outermost node inwards.
To reverse the direction, pass `true` for the `bubble` argument.
The `callback` is invoked with three arguments: `callback(node, index, nodes)`.
- `node`: The current node.
- `index`: The index of the current node.
- `nodes`: The complete nodes array passed to `walk()`.
Returns the `valueParser` instance.
### var parsed = valueParser(value)
Returns the parsed node tree.
### parsed.nodes
The array of nodes.
### parsed.toString()
Stringifies the node tree.
### parsed.walk(callback[, bubble])
Walks each node inside `parsed.nodes`. See the documentation for `valueParser.walk()` above.
# License
MIT © [Bogdan Chadkin](mailto:trysound@yandex.ru)
@@ -0,0 +1,177 @@
declare namespace postcssValueParser {
interface BaseNode {
/**
* The offset, inclusive, inside the CSS value at which the node starts.
*/
sourceIndex: number;
/**
* The offset, exclusive, inside the CSS value at which the node ends.
*/
sourceEndIndex: number;
/**
* The node's characteristic value
*/
value: string;
}
interface ClosableNode {
/**
* Whether the parsed CSS value ended before the node was properly closed
*/
unclosed?: true;
}
interface AdjacentAwareNode {
/**
* The token at the start of the node
*/
before: string;
/**
* The token at the end of the node
*/
after: string;
}
interface CommentNode extends BaseNode, ClosableNode {
type: "comment";
}
interface DivNode extends BaseNode, AdjacentAwareNode {
type: "div";
}
interface FunctionNode extends BaseNode, ClosableNode, AdjacentAwareNode {
type: "function";
/**
* Nodes inside the function
*/
nodes: Node[];
}
interface SpaceNode extends BaseNode {
type: "space";
}
interface StringNode extends BaseNode, ClosableNode {
type: "string";
/**
* The quote type delimiting the string
*/
quote: '"' | "'";
}
interface UnicodeRangeNode extends BaseNode {
type: "unicode-range";
}
interface WordNode extends BaseNode {
type: "word";
}
/**
* Any node parsed from a CSS value
*/
type Node =
| CommentNode
| DivNode
| FunctionNode
| SpaceNode
| StringNode
| UnicodeRangeNode
| WordNode;
interface CustomStringifierCallback {
/**
* @param node The node to stringify
* @returns The serialized CSS representation of the node
*/
(nodes: Node): string | undefined;
}
interface WalkCallback {
/**
* @param node The currently visited node
* @param index The index of the node in the series of parsed nodes
* @param nodes The series of parsed nodes
* @returns Returning `false` will prevent traversal of descendant nodes (only applies if `bubble` was set to `true` in the `walk()` call)
*/
(node: Node, index: number, nodes: Node[]): void | boolean;
}
/**
* A CSS dimension, decomposed into its numeric and unit parts
*/
interface Dimension {
number: string;
unit: string;
}
/**
* A wrapper around a parsed CSS value that allows for inspecting and walking nodes
*/
interface ParsedValue {
/**
* The series of parsed nodes
*/
nodes: Node[];
/**
* Walk all parsed nodes, applying a callback
*
* @param callback A visitor callback that will be executed for each node
* @param bubble When set to `true`, walking will be done inside-out instead of outside-in
*/
walk(callback: WalkCallback, bubble?: boolean): this;
}
interface ValueParser {
/**
* Decompose a CSS dimension into its numeric and unit part
*
* @param value The dimension to decompose
* @returns An object representing `number` and `unit` part of the dimension or `false` if the decomposing fails
*/
unit(value: string): Dimension | false;
/**
* Serialize a series of nodes into a CSS value
*
* @param nodes The nodes to stringify
* @param custom A custom stringifier callback
* @returns The generated CSS value
*/
stringify(nodes: Node | Node[], custom?: CustomStringifierCallback): string;
/**
* Walk a series of nodes, applying a callback
*
* @param nodes The nodes to walk
* @param callback A visitor callback that will be executed for each node
* @param bubble When set to `true`, walking will be done inside-out instead of outside-in
*/
walk(nodes: Node[], callback: WalkCallback, bubble?: boolean): void;
/**
* Parse a CSS value into a series of nodes to operate on
*
* @param value The value to parse
*/
new (value: string): ParsedValue;
/**
* Parse a CSS value into a series of nodes to operate on
*
* @param value The value to parse
*/
(value: string): ParsedValue;
}
}
declare const postcssValueParser: postcssValueParser.ValueParser;
export = postcssValueParser;
@@ -0,0 +1,28 @@
var parse = require("./parse");
var walk = require("./walk");
var stringify = require("./stringify");
function ValueParser(value) {
if (this instanceof ValueParser) {
this.nodes = parse(value);
return this;
}
return new ValueParser(value);
}
ValueParser.prototype.toString = function() {
return Array.isArray(this.nodes) ? stringify(this.nodes) : "";
};
ValueParser.prototype.walk = function(cb, bubble) {
walk(this.nodes, cb, bubble);
return this;
};
ValueParser.unit = require("./unit");
ValueParser.walk = walk;
ValueParser.stringify = stringify;
module.exports = ValueParser;
@@ -0,0 +1,321 @@
var openParentheses = "(".charCodeAt(0);
var closeParentheses = ")".charCodeAt(0);
var singleQuote = "'".charCodeAt(0);
var doubleQuote = '"'.charCodeAt(0);
var backslash = "\\".charCodeAt(0);
var slash = "/".charCodeAt(0);
var comma = ",".charCodeAt(0);
var colon = ":".charCodeAt(0);
var star = "*".charCodeAt(0);
var uLower = "u".charCodeAt(0);
var uUpper = "U".charCodeAt(0);
var plus = "+".charCodeAt(0);
var isUnicodeRange = /^[a-f0-9?-]+$/i;
module.exports = function(input) {
var tokens = [];
var value = input;
var next,
quote,
prev,
token,
escape,
escapePos,
whitespacePos,
parenthesesOpenPos;
var pos = 0;
var code = value.charCodeAt(pos);
var max = value.length;
var stack = [{ nodes: tokens }];
var balanced = 0;
var parent;
var name = "";
var before = "";
var after = "";
while (pos < max) {
// Whitespaces
if (code <= 32) {
next = pos;
do {
next += 1;
code = value.charCodeAt(next);
} while (code <= 32);
token = value.slice(pos, next);
prev = tokens[tokens.length - 1];
if (code === closeParentheses && balanced) {
after = token;
} else if (prev && prev.type === "div") {
prev.after = token;
prev.sourceEndIndex += token.length;
} else if (
code === comma ||
code === colon ||
(code === slash &&
value.charCodeAt(next + 1) !== star &&
(!parent ||
(parent && parent.type === "function" && parent.value !== "calc")))
) {
before = token;
} else {
tokens.push({
type: "space",
sourceIndex: pos,
sourceEndIndex: next,
value: token
});
}
pos = next;
// Quotes
} else if (code === singleQuote || code === doubleQuote) {
next = pos;
quote = code === singleQuote ? "'" : '"';
token = {
type: "string",
sourceIndex: pos,
quote: quote
};
do {
escape = false;
next = value.indexOf(quote, next + 1);
if (~next) {
escapePos = next;
while (value.charCodeAt(escapePos - 1) === backslash) {
escapePos -= 1;
escape = !escape;
}
} else {
value += quote;
next = value.length - 1;
token.unclosed = true;
}
} while (escape);
token.value = value.slice(pos + 1, next);
token.sourceEndIndex = token.unclosed ? next : next + 1;
tokens.push(token);
pos = next + 1;
code = value.charCodeAt(pos);
// Comments
} else if (code === slash && value.charCodeAt(pos + 1) === star) {
next = value.indexOf("*/", pos);
token = {
type: "comment",
sourceIndex: pos,
sourceEndIndex: next + 2
};
if (next === -1) {
token.unclosed = true;
next = value.length;
token.sourceEndIndex = next;
}
token.value = value.slice(pos + 2, next);
tokens.push(token);
pos = next + 2;
code = value.charCodeAt(pos);
// Operation within calc
} else if (
(code === slash || code === star) &&
parent &&
parent.type === "function" &&
parent.value === "calc"
) {
token = value[pos];
tokens.push({
type: "word",
sourceIndex: pos - before.length,
sourceEndIndex: pos + token.length,
value: token
});
pos += 1;
code = value.charCodeAt(pos);
// Dividers
} else if (code === slash || code === comma || code === colon) {
token = value[pos];
tokens.push({
type: "div",
sourceIndex: pos - before.length,
sourceEndIndex: pos + token.length,
value: token,
before: before,
after: ""
});
before = "";
pos += 1;
code = value.charCodeAt(pos);
// Open parentheses
} else if (openParentheses === code) {
// Whitespaces after open parentheses
next = pos;
do {
next += 1;
code = value.charCodeAt(next);
} while (code <= 32);
parenthesesOpenPos = pos;
token = {
type: "function",
sourceIndex: pos - name.length,
value: name,
before: value.slice(parenthesesOpenPos + 1, next)
};
pos = next;
if (name === "url" && code !== singleQuote && code !== doubleQuote) {
next -= 1;
do {
escape = false;
next = value.indexOf(")", next + 1);
if (~next) {
escapePos = next;
while (value.charCodeAt(escapePos - 1) === backslash) {
escapePos -= 1;
escape = !escape;
}
} else {
value += ")";
next = value.length - 1;
token.unclosed = true;
}
} while (escape);
// Whitespaces before closed
whitespacePos = next;
do {
whitespacePos -= 1;
code = value.charCodeAt(whitespacePos);
} while (code <= 32);
if (parenthesesOpenPos < whitespacePos) {
if (pos !== whitespacePos + 1) {
token.nodes = [
{
type: "word",
sourceIndex: pos,
sourceEndIndex: whitespacePos + 1,
value: value.slice(pos, whitespacePos + 1)
}
];
} else {
token.nodes = [];
}
if (token.unclosed && whitespacePos + 1 !== next) {
token.after = "";
token.nodes.push({
type: "space",
sourceIndex: whitespacePos + 1,
sourceEndIndex: next,
value: value.slice(whitespacePos + 1, next)
});
} else {
token.after = value.slice(whitespacePos + 1, next);
token.sourceEndIndex = next;
}
} else {
token.after = "";
token.nodes = [];
}
pos = next + 1;
token.sourceEndIndex = token.unclosed ? next : pos;
code = value.charCodeAt(pos);
tokens.push(token);
} else {
balanced += 1;
token.after = "";
token.sourceEndIndex = pos + 1;
tokens.push(token);
stack.push(token);
tokens = token.nodes = [];
parent = token;
}
name = "";
// Close parentheses
} else if (closeParentheses === code && balanced) {
pos += 1;
code = value.charCodeAt(pos);
parent.after = after;
parent.sourceEndIndex += after.length;
after = "";
balanced -= 1;
stack[stack.length - 1].sourceEndIndex = pos;
stack.pop();
parent = stack[balanced];
tokens = parent.nodes;
// Words
} else {
next = pos;
do {
if (code === backslash) {
next += 1;
}
next += 1;
code = value.charCodeAt(next);
} while (
next < max &&
!(
code <= 32 ||
code === singleQuote ||
code === doubleQuote ||
code === comma ||
code === colon ||
code === slash ||
code === openParentheses ||
(code === star &&
parent &&
parent.type === "function" &&
parent.value === "calc") ||
(code === slash &&
parent.type === "function" &&
parent.value === "calc") ||
(code === closeParentheses && balanced)
)
);
token = value.slice(pos, next);
if (openParentheses === code) {
name = token;
} else if (
(uLower === token.charCodeAt(0) || uUpper === token.charCodeAt(0)) &&
plus === token.charCodeAt(1) &&
isUnicodeRange.test(token.slice(2))
) {
tokens.push({
type: "unicode-range",
sourceIndex: pos,
sourceEndIndex: next,
value: token
});
} else {
tokens.push({
type: "word",
sourceIndex: pos,
sourceEndIndex: next,
value: token
});
}
pos = next;
}
}
for (pos = stack.length - 1; pos; pos -= 1) {
stack[pos].unclosed = true;
stack[pos].sourceEndIndex = value.length;
}
return stack[0].nodes;
};
@@ -0,0 +1,48 @@
function stringifyNode(node, custom) {
var type = node.type;
var value = node.value;
var buf;
var customResult;
if (custom && (customResult = custom(node)) !== undefined) {
return customResult;
} else if (type === "word" || type === "space") {
return value;
} else if (type === "string") {
buf = node.quote || "";
return buf + value + (node.unclosed ? "" : buf);
} else if (type === "comment") {
return "/*" + value + (node.unclosed ? "" : "*/");
} else if (type === "div") {
return (node.before || "") + value + (node.after || "");
} else if (Array.isArray(node.nodes)) {
buf = stringify(node.nodes, custom);
if (type !== "function") {
return buf;
}
return (
value +
"(" +
(node.before || "") +
buf +
(node.after || "") +
(node.unclosed ? "" : ")")
);
}
return value;
}
function stringify(nodes, custom) {
var result, i;
if (Array.isArray(nodes)) {
result = "";
for (i = nodes.length - 1; ~i; i -= 1) {
result = stringifyNode(nodes[i], custom) + result;
}
return result;
}
return stringifyNode(nodes, custom);
}
module.exports = stringify;
@@ -0,0 +1,120 @@
var minus = "-".charCodeAt(0);
var plus = "+".charCodeAt(0);
var dot = ".".charCodeAt(0);
var exp = "e".charCodeAt(0);
var EXP = "E".charCodeAt(0);
// Check if three code points would start a number
// https://www.w3.org/TR/css-syntax-3/#starts-with-a-number
function likeNumber(value) {
var code = value.charCodeAt(0);
var nextCode;
if (code === plus || code === minus) {
nextCode = value.charCodeAt(1);
if (nextCode >= 48 && nextCode <= 57) {
return true;
}
var nextNextCode = value.charCodeAt(2);
if (nextCode === dot && nextNextCode >= 48 && nextNextCode <= 57) {
return true;
}
return false;
}
if (code === dot) {
nextCode = value.charCodeAt(1);
if (nextCode >= 48 && nextCode <= 57) {
return true;
}
return false;
}
if (code >= 48 && code <= 57) {
return true;
}
return false;
}
// Consume a number
// https://www.w3.org/TR/css-syntax-3/#consume-number
module.exports = function(value) {
var pos = 0;
var length = value.length;
var code;
var nextCode;
var nextNextCode;
if (length === 0 || !likeNumber(value)) {
return false;
}
code = value.charCodeAt(pos);
if (code === plus || code === minus) {
pos++;
}
while (pos < length) {
code = value.charCodeAt(pos);
if (code < 48 || code > 57) {
break;
}
pos += 1;
}
code = value.charCodeAt(pos);
nextCode = value.charCodeAt(pos + 1);
if (code === dot && nextCode >= 48 && nextCode <= 57) {
pos += 2;
while (pos < length) {
code = value.charCodeAt(pos);
if (code < 48 || code > 57) {
break;
}
pos += 1;
}
}
code = value.charCodeAt(pos);
nextCode = value.charCodeAt(pos + 1);
nextNextCode = value.charCodeAt(pos + 2);
if (
(code === exp || code === EXP) &&
((nextCode >= 48 && nextCode <= 57) ||
((nextCode === plus || nextCode === minus) &&
nextNextCode >= 48 &&
nextNextCode <= 57))
) {
pos += nextCode === plus || nextCode === minus ? 3 : 2;
while (pos < length) {
code = value.charCodeAt(pos);
if (code < 48 || code > 57) {
break;
}
pos += 1;
}
}
return {
number: value.slice(0, pos),
unit: value.slice(pos)
};
};
@@ -0,0 +1,22 @@
module.exports = function walk(nodes, cb, bubble) {
var i, max, node, result;
for (i = 0, max = nodes.length; i < max; i += 1) {
node = nodes[i];
if (!bubble) {
result = cb(node, i, nodes);
}
if (
result !== false &&
node.type === "function" &&
Array.isArray(node.nodes)
) {
walk(node.nodes, cb, bubble);
}
if (bubble) {
cb(node, i, nodes);
}
}
};
@@ -0,0 +1,58 @@
{
"name": "postcss-value-parser",
"version": "4.2.0",
"description": "Transforms css values and at-rule params into the tree",
"main": "lib/index.js",
"files": [
"lib"
],
"devDependencies": {
"eslint": "^5.16.0",
"husky": "^2.3.0",
"lint-staged": "^8.1.7",
"prettier": "^1.17.1",
"tap-spec": "^5.0.0",
"tape": "^4.10.2"
},
"scripts": {
"lint:prettier": "prettier \"**/*.js\" \"**/*.ts\" --list-different",
"lint:js": "eslint . --cache",
"lint": "yarn lint:js && yarn lint:prettier",
"pretest": "yarn lint",
"test": "tape test/*.js | tap-spec"
},
"eslintConfig": {
"env": {
"es6": true,
"node": true
},
"extends": "eslint:recommended"
},
"lint-staged": {
"*.js": [
"eslint",
"prettier --write",
"git add"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"author": "Bogdan Chadkin <trysound@yandex.ru>",
"license": "MIT",
"homepage": "https://github.com/TrySound/postcss-value-parser",
"repository": {
"type": "git",
"url": "https://github.com/TrySound/postcss-value-parser.git"
},
"keywords": [
"postcss",
"value",
"parser"
],
"bugs": {
"url": "https://github.com/TrySound/postcss-value-parser/issues"
}
}
+43
View File
@@ -0,0 +1,43 @@
{
"name": "postcss-merge-longhand",
"version": "5.1.7",
"description": "Merge longhand properties into shorthand with PostCSS.",
"main": "src/index.js",
"types": "types/index.d.ts",
"files": [
"LICENSE-MIT",
"src",
"types"
],
"keywords": [
"css",
"minify",
"optimise",
"postcss",
"postcss-plugin"
],
"license": "MIT",
"homepage": "https://github.com/cssnano/cssnano",
"author": {
"name": "Ben Briggs",
"email": "beneb.info@gmail.com",
"url": "http://beneb.info"
},
"repository": "cssnano/cssnano",
"dependencies": {
"postcss-value-parser": "^4.2.0",
"stylehacks": "^5.1.1"
},
"bugs": {
"url": "https://github.com/cssnano/cssnano/issues"
},
"engines": {
"node": "^10 || ^12 || >=14.0"
},
"devDependencies": {
"postcss": "^8.2.15"
},
"peerDependencies": {
"postcss": "^8.2.15"
}
}
+23
View File
@@ -0,0 +1,23 @@
'use strict';
const processors = require('./lib/decl');
/**
* @type {import('postcss').PluginCreator<void>}
* @return {import('postcss').Plugin}
*/
function pluginCreator() {
return {
postcssPlugin: 'postcss-merge-longhand',
OnceExit(css) {
css.walkRules((rule) => {
processors.forEach((p) => {
p.explode(rule);
p.merge(rule);
});
});
},
};
}
pluginCreator.postcss = true;
module.exports = pluginCreator;
+16
View File
@@ -0,0 +1,16 @@
'use strict';
const isCustomProp = require('./isCustomProp');
const globalKeywords = new Set(['inherit', 'initial', 'unset', 'revert']);
/** @type {(prop: import('postcss').Declaration, includeCustomProps?: boolean) => boolean} */
module.exports = (prop, includeCustomProps = true) => {
if (
!prop.value ||
(includeCustomProps && isCustomProp(prop)) ||
(prop.value && globalKeywords.has(prop.value.toLowerCase()))
) {
return false;
}
return true;
};
+35
View File
@@ -0,0 +1,35 @@
'use strict';
const isCustomProp = require('./isCustomProp');
/** @type {(node: import('postcss').Declaration) => boolean} */
const important = (node) => node.important;
/** @type {(node: import('postcss').Declaration) => boolean} */
const unimportant = (node) => !node.important;
/* Cannot be combined with other values in shorthand
https://www.w3.org/TR/css-cascade-5/#shorthand */
const cssWideKeywords = ['inherit', 'initial', 'unset', 'revert'];
/**
* @type {(props: import('postcss').Declaration[], includeCustomProps?: boolean) => boolean}
*/
module.exports = (props, includeCustomProps = true) => {
const uniqueProps = new Set(props.map((node) => node.value.toLowerCase()));
if (uniqueProps.size > 1) {
for (const unmergeable of cssWideKeywords) {
if (uniqueProps.has(unmergeable)) {
return false;
}
}
}
if (
includeCustomProps &&
props.some(isCustomProp) &&
!props.every(isCustomProp)
) {
return false;
}
return props.every(unimportant) || props.every(important);
};
+152
View File
@@ -0,0 +1,152 @@
'use strict';
/* https://www.w3.org/TR/css-color-4/#named-colors */
module.exports = new Set([
'aliceblue',
'antiquewhite',
'aqua',
'aquamarine',
'azure',
'beige',
'bisque',
'black',
'blanchedalmond',
'blue',
'blueviolet',
'brown',
'burlywood',
'cadetblue',
'chartreuse',
'chocolate',
'coral',
'cornflowerblue',
'cornsilk',
'crimson',
'cyan',
'darkblue',
'darkcyan',
'darkgoldenrod',
'darkgray',
'darkgreen',
'darkgrey',
'darkkhaki',
'darkmagenta',
'darkolivegreen',
'darkorange',
'darkorchid',
'darkred',
'darksalmon',
'darkseagreen',
'darkslateblue',
'darkslategray',
'darkslategrey',
'darkturquoise',
'darkviolet',
'deeppink',
'deepskyblue',
'dimgray',
'dimgrey',
'dodgerblue',
'firebrick',
'floralwhite',
'forestgreen',
'fuchsia',
'gainsboro',
'ghostwhite',
'gold',
'goldenrod',
'gray',
'green',
'greenyellow',
'grey',
'honeydew',
'hotpink',
'indianred',
'indigo',
'ivory',
'khaki',
'lavender',
'lavenderblush',
'lawngreen',
'lemonchiffon',
'lightblue',
'lightcoral',
'lightcyan',
'lightgoldenrodyellow',
'lightgray',
'lightgreen',
'lightgrey',
'lightpink',
'lightsalmon',
'lightseagreen',
'lightskyblue',
'lightslategray',
'lightslategrey',
'lightsteelblue',
'lightyellow',
'lime',
'limegreen',
'linen',
'magenta',
'maroon',
'mediumaquamarine',
'mediumblue',
'mediumorchid',
'mediumpurple',
'mediumseagreen',
'mediumslateblue',
'mediumspringgreen',
'mediumturquoise',
'mediumvioletred',
'midnightblue',
'mintcream',
'mistyrose',
'moccasin',
'navajowhite',
'navy',
'oldlace',
'olive',
'olivedrab',
'orange',
'orangered',
'orchid',
'palegoldenrod',
'palegreen',
'paleturquoise',
'palevioletred',
'papayawhip',
'peachpuff',
'peru',
'pink',
'plum',
'powderblue',
'purple',
'rebeccapurple',
'red',
'rosybrown',
'royalblue',
'saddlebrown',
'salmon',
'sandybrown',
'seagreen',
'seashell',
'sienna',
'silver',
'skyblue',
'slateblue',
'slategray',
'slategrey',
'snow',
'springgreen',
'steelblue',
'tan',
'teal',
'thistle',
'tomato',
'turquoise',
'violet',
'wheat',
'white',
'whitesmoke',
'yellow',
'yellowgreen',
]);
+860
View File
@@ -0,0 +1,860 @@
'use strict';
const { list } = require('postcss');
const stylehacks = require('stylehacks');
const insertCloned = require('../insertCloned.js');
const parseTrbl = require('../parseTrbl.js');
const hasAllProps = require('../hasAllProps.js');
const getDecls = require('../getDecls.js');
const getRules = require('../getRules.js');
const getValue = require('../getValue.js');
const mergeRules = require('../mergeRules.js');
const minifyTrbl = require('../minifyTrbl.js');
const minifyWsc = require('../minifyWsc.js');
const canMerge = require('../canMerge.js');
const trbl = require('../trbl.js');
const isCustomProp = require('../isCustomProp.js');
const canExplode = require('../canExplode.js');
const getLastNode = require('../getLastNode.js');
const parseWsc = require('../parseWsc.js');
const { isValidWsc } = require('../validateWsc.js');
const wsc = ['width', 'style', 'color'];
const defaults = ['medium', 'none', 'currentcolor'];
const colorMightRequireFallback =
/(hsla|rgba|color|hwb|lab|lch|oklab|oklch)\(/i;
/**
* @param {...string} parts
* @return {string}
*/
function borderProperty(...parts) {
return `border-${parts.join('-')}`;
}
/**
* @param {string} value
* @return {string}
*/
function mapBorderProperty(value) {
return borderProperty(value);
}
const directions = trbl.map(mapBorderProperty);
const properties = wsc.map(mapBorderProperty);
/** @type {string[]} */
const directionalProperties = directions.reduce(
(prev, curr) => prev.concat(wsc.map((prop) => `${curr}-${prop}`)),
/** @type {string[]} */ ([])
);
const precedence = [
['border'],
directions.concat(properties),
directionalProperties,
];
const allProperties = precedence.reduce((a, b) => a.concat(b));
/**
* @param {string} prop
* @return {number | undefined}
*/
function getLevel(prop) {
for (let i = 0; i < precedence.length; i++) {
if (precedence[i].includes(prop.toLowerCase())) {
return i;
}
}
}
/** @type {(value: string) => boolean} */
const isValueCustomProp = (value) =>
value !== undefined && value.search(/var\s*\(\s*--/i) !== -1;
/**
* @param {string[]} values
* @return {boolean}
*/
function canMergeValues(values) {
return !values.some(isValueCustomProp);
}
/**
* @param {import('postcss').Declaration} decl
* @return {string}
*/
function getColorValue(decl) {
if (decl.prop.substr(-5) === 'color') {
return decl.value;
}
return parseWsc(decl.value)[2] || defaults[2];
}
/**
* @param {[string, string, string]} values
* @param {[string, string, string]} nextValues
* @return {string[]}
*/
function diffingProps(values, nextValues) {
return wsc.reduce((prev, curr, i) => {
if (values[i] === nextValues[i]) {
return prev;
}
return [...prev, curr];
}, /** @type {string[]} */ ([]));
}
/**
* @param {{values: [string, string, string], nextValues: [string, string, string], decl: import('postcss').Declaration, nextDecl: import('postcss').Declaration, index: number}} arg
* @return {void}
*/
function mergeRedundant({ values, nextValues, decl, nextDecl, index }) {
if (!canMerge([decl, nextDecl])) {
return;
}
if (stylehacks.detect(decl) || stylehacks.detect(nextDecl)) {
return;
}
const diff = diffingProps(values, nextValues);
if (diff.length !== 1) {
return;
}
const prop = /** @type {string} */ (diff.pop());
const position = wsc.indexOf(prop);
const prop1 = `${nextDecl.prop}-${prop}`;
const prop2 = `border-${prop}`;
let props = parseTrbl(values[position]);
props[index] = nextValues[position];
const borderValue2 = values.filter((e, i) => i !== position).join(' ');
const propValue2 = minifyTrbl(props);
const origLength = (minifyWsc(decl.value) + nextDecl.prop + nextDecl.value)
.length;
const newLength1 =
decl.value.length + prop1.length + minifyWsc(nextValues[position]).length;
const newLength2 = borderValue2.length + prop2.length + propValue2.length;
if (newLength1 < newLength2 && newLength1 < origLength) {
nextDecl.prop = prop1;
nextDecl.value = nextValues[position];
}
if (newLength2 < newLength1 && newLength2 < origLength) {
decl.value = borderValue2;
nextDecl.prop = prop2;
nextDecl.value = propValue2;
}
}
/**
* @param {string | string[]} mapped
* @return {boolean}
*/
function isCloseEnough(mapped) {
return (
(mapped[0] === mapped[1] && mapped[1] === mapped[2]) ||
(mapped[1] === mapped[2] && mapped[2] === mapped[3]) ||
(mapped[2] === mapped[3] && mapped[3] === mapped[0]) ||
(mapped[3] === mapped[0] && mapped[0] === mapped[1])
);
}
/**
* @param {string[]} mapped
* @return {string[]}
*/
function getDistinctShorthands(mapped) {
return [...new Set(mapped)];
}
/**
* @param {import('postcss').Rule} rule
* @return {void}
*/
function explode(rule) {
rule.walkDecls(/^border/i, (decl) => {
if (!canExplode(decl, false)) {
return;
}
if (stylehacks.detect(decl)) {
return;
}
const prop = decl.prop.toLowerCase();
// border -> border-trbl
if (prop === 'border') {
if (isValidWsc(parseWsc(decl.value))) {
directions.forEach((direction) => {
insertCloned(
/** @type {import('postcss').Rule} */ (decl.parent),
decl,
{ prop: direction }
);
});
decl.remove();
}
}
// border-trbl -> border-trbl-wsc
if (directions.some((direction) => prop === direction)) {
let values = parseWsc(decl.value);
if (isValidWsc(values)) {
wsc.forEach((d, i) => {
insertCloned(
/** @type {import('postcss').Rule} */ (decl.parent),
decl,
{
prop: `${prop}-${d}`,
value: values[i] || defaults[i],
}
);
});
decl.remove();
}
}
// border-wsc -> border-trbl-wsc
wsc.some((style) => {
if (prop !== borderProperty(style)) {
return false;
}
if (isCustomProp(decl)) {
decl.prop = decl.prop.toLowerCase();
return false;
}
parseTrbl(decl.value).forEach((value, i) => {
insertCloned(
/** @type {import('postcss').Rule} */ (decl.parent),
decl,
{
prop: borderProperty(trbl[i], style),
value,
}
);
});
return decl.remove();
});
});
}
/**
* @param {import('postcss').Rule} rule
* @return {void}
*/
function merge(rule) {
// border-trbl-wsc -> border-trbl
trbl.forEach((direction) => {
const prop = borderProperty(direction);
mergeRules(
rule,
wsc.map((style) => borderProperty(direction, style)),
(rules, lastNode) => {
if (canMerge(rules, false) && !rules.some(stylehacks.detect)) {
insertCloned(
/** @type {import('postcss').Rule} */ (lastNode.parent),
lastNode,
{
prop,
value: rules.map(getValue).join(' '),
}
);
for (const node of rules) {
node.remove();
}
return true;
}
return false;
}
);
});
// border-trbl-wsc -> border-wsc
wsc.forEach((style) => {
const prop = borderProperty(style);
mergeRules(
rule,
trbl.map((direction) => borderProperty(direction, style)),
(rules, lastNode) => {
if (canMerge(rules) && !rules.some(stylehacks.detect)) {
insertCloned(
/** @type {import('postcss').Rule} */ (lastNode.parent),
lastNode,
{
prop,
value: minifyTrbl(rules.map(getValue).join(' ')),
}
);
for (const node of rules) {
node.remove();
}
return true;
}
return false;
}
);
});
// border-trbl -> border-wsc
mergeRules(rule, directions, (rules, lastNode) => {
if (rules.some(stylehacks.detect)) {
return false;
}
const values = rules.map(({ value }) => value);
if (!canMergeValues(values)) {
return false;
}
const parsed = values.map((value) => parseWsc(value));
if (!parsed.every(isValidWsc)) {
return false;
}
wsc.forEach((d, i) => {
const value = parsed.map((v) => v[i] || defaults[i]);
if (canMergeValues(value)) {
insertCloned(
/** @type {import('postcss').Rule} */ (lastNode.parent),
lastNode,
{
prop: borderProperty(d),
value: minifyTrbl(
/** @type {[string, string, string, string]} */ (value)
),
}
);
} else {
insertCloned(
/** @type {import('postcss').Rule} */ (lastNode.parent),
lastNode
);
}
});
for (const node of rules) {
node.remove();
}
return true;
});
// border-wsc -> border
// border-wsc -> border + border-color
// border-wsc -> border + border-dir
mergeRules(rule, properties, (rules, lastNode) => {
if (rules.some(stylehacks.detect)) {
return false;
}
const values = rules.map((node) => parseTrbl(node.value));
const mapped = [0, 1, 2, 3].map((i) =>
[values[0][i], values[1][i], values[2][i]].join(' ')
);
if (!canMergeValues(mapped)) {
return false;
}
const [width, style, color] = rules;
const reduced = getDistinctShorthands(mapped);
if (isCloseEnough(mapped) && canMerge(rules, false)) {
const first =
mapped.indexOf(reduced[0]) !== mapped.lastIndexOf(reduced[0]);
const border = insertCloned(
/** @type {import('postcss').Rule} */ (lastNode.parent),
lastNode,
{
prop: 'border',
value: first ? reduced[0] : reduced[1],
}
);
if (reduced[1]) {
const value = first ? reduced[1] : reduced[0];
const prop = borderProperty(trbl[mapped.indexOf(value)]);
rule.insertAfter(
border,
Object.assign(lastNode.clone(), {
prop,
value,
})
);
}
for (const node of rules) {
node.remove();
}
return true;
} else if (reduced.length === 1) {
rule.insertBefore(
color,
Object.assign(lastNode.clone(), {
prop: 'border',
value: [width, style].map(getValue).join(' '),
})
);
rules
.filter((node) => node.prop.toLowerCase() !== properties[2])
.forEach((node) => node.remove());
return true;
}
return false;
});
// border-wsc -> border + border-trbl
mergeRules(rule, properties, (rules, lastNode) => {
if (rules.some(stylehacks.detect)) {
return false;
}
const values = rules.map((node) => parseTrbl(node.value));
const mapped = [0, 1, 2, 3].map((i) =>
[values[0][i], values[1][i], values[2][i]].join(' ')
);
const reduced = getDistinctShorthands(mapped);
const none = 'medium none currentcolor';
if (reduced.length > 1 && reduced.length < 4 && reduced.includes(none)) {
const filtered = mapped.filter((p) => p !== none);
const mostCommon = reduced.sort(
(a, b) =>
mapped.filter((v) => v === b).length -
mapped.filter((v) => v === a).length
)[0];
const borderValue = reduced.length === 2 ? filtered[0] : mostCommon;
rule.insertBefore(
lastNode,
Object.assign(lastNode.clone(), {
prop: 'border',
value: borderValue,
})
);
directions.forEach((dir, i) => {
if (mapped[i] !== borderValue) {
rule.insertBefore(
lastNode,
Object.assign(lastNode.clone(), {
prop: dir,
value: mapped[i],
})
);
}
});
for (const node of rules) {
node.remove();
}
return true;
}
return false;
});
// border-trbl -> border
// border-trbl -> border + border-trbl
mergeRules(rule, directions, (rules, lastNode) => {
if (rules.some(stylehacks.detect)) {
return false;
}
const values = rules.map((node) => {
const wscValue = parseWsc(node.value);
if (!isValidWsc(wscValue)) {
return node.value;
}
return wscValue.map((value, i) => value || defaults[i]).join(' ');
});
const reduced = getDistinctShorthands(values);
if (isCloseEnough(values)) {
const first =
values.indexOf(reduced[0]) !== values.lastIndexOf(reduced[0]);
rule.insertBefore(
lastNode,
Object.assign(lastNode.clone(), {
prop: 'border',
value: minifyWsc(first ? values[0] : values[1]),
})
);
if (reduced[1]) {
const value = first ? reduced[1] : reduced[0];
const prop = directions[values.indexOf(value)];
rule.insertBefore(
lastNode,
Object.assign(lastNode.clone(), {
prop: prop,
value: minifyWsc(value),
})
);
}
for (const node of rules) {
node.remove();
}
return true;
}
return false;
});
// border-trbl-wsc + border-trbl (custom prop) -> border-trbl + border-trbl-wsc (custom prop)
directions.forEach((direction) => {
wsc.forEach((style, i) => {
const prop = `${direction}-${style}`;
mergeRules(rule, [direction, prop], (rules, lastNode) => {
if (lastNode.prop !== direction) {
return false;
}
const values = parseWsc(lastNode.value);
if (!isValidWsc(values)) {
return false;
}
const wscProp = rules.filter((r) => r !== lastNode)[0];
if (!isValueCustomProp(values[i]) || isCustomProp(wscProp)) {
return false;
}
const wscValue = values[i];
values[i] = wscProp.value;
if (canMerge(rules, false) && !rules.some(stylehacks.detect)) {
insertCloned(
/** @type {import('postcss').Rule} */ (lastNode.parent),
lastNode,
{
prop,
value: wscValue,
}
);
lastNode.value = minifyWsc(/** @type {any} */ (values));
wscProp.remove();
return true;
}
return false;
});
});
});
// border-wsc + border (custom prop) -> border + border-wsc (custom prop)
wsc.forEach((style, i) => {
const prop = borderProperty(style);
mergeRules(rule, ['border', prop], (rules, lastNode) => {
if (lastNode.prop !== 'border') {
return false;
}
const values = parseWsc(lastNode.value);
if (!isValidWsc(values)) {
return false;
}
const wscProp = rules.filter((r) => r !== lastNode)[0];
if (!isValueCustomProp(values[i]) || isCustomProp(wscProp)) {
return false;
}
const wscValue = values[i];
values[i] = wscProp.value;
if (canMerge(rules, false) && !rules.some(stylehacks.detect)) {
insertCloned(
/** @type {import('postcss').Rule} */ (lastNode.parent),
lastNode,
{
prop,
value: wscValue,
}
);
lastNode.value = minifyWsc(/** @type {any} */ (values));
wscProp.remove();
return true;
}
return false;
});
});
// optimize border-trbl
let decls = getDecls(rule, directions);
while (decls.length) {
const lastNode = decls[decls.length - 1];
wsc.forEach((d, i) => {
const names = directions
.filter((name) => name !== lastNode.prop)
.map((name) => `${name}-${d}`);
let nodes = rule.nodes.slice(0, rule.nodes.indexOf(lastNode));
const border = getLastNode(nodes, 'border');
if (border) {
nodes = nodes.slice(nodes.indexOf(border));
}
const props = nodes.filter(
(node) =>
node.type === 'decl' &&
names.includes(node.prop) &&
node.important === lastNode.important
);
const rules = getRules(
/** @type {import('postcss').Declaration[]} */ (props),
names
);
if (hasAllProps(rules, ...names) && !rules.some(stylehacks.detect)) {
const values = rules.map((node) => (node ? node.value : null));
const filteredValues = values.filter(Boolean);
const lastNodeValue = list.space(lastNode.value)[i];
values[directions.indexOf(lastNode.prop)] = lastNodeValue;
let value = minifyTrbl(values.join(' '));
if (
filteredValues[0] === filteredValues[1] &&
filteredValues[1] === filteredValues[2]
) {
value = /** @type {string} */ (filteredValues[0]);
}
let refNode = props[props.length - 1];
if (value === lastNodeValue) {
refNode = lastNode;
let valueArray = list.space(lastNode.value);
valueArray.splice(i, 1);
lastNode.value = valueArray.join(' ');
}
insertCloned(
/** @type {import('postcss').Rule} */ (refNode.parent),
/** @type {import('postcss').Declaration} */ (refNode),
{
prop: borderProperty(d),
value,
}
);
decls = decls.filter((node) => !rules.includes(node));
for (const node of rules) {
node.remove();
}
}
});
decls = decls.filter((node) => node !== lastNode);
}
rule.walkDecls('border', (decl) => {
const nextDecl = decl.next();
if (!nextDecl || nextDecl.type !== 'decl') {
return false;
}
const index = directions.indexOf(nextDecl.prop);
if (index === -1) {
return;
}
const values = parseWsc(decl.value);
const nextValues = parseWsc(nextDecl.value);
if (!isValidWsc(values) || !isValidWsc(nextValues)) {
return;
}
const config = {
values,
nextValues,
decl,
nextDecl,
index,
};
return mergeRedundant(config);
});
rule.walkDecls(/^border($|-(top|right|bottom|left)$)/i, (decl) => {
let values = parseWsc(decl.value);
if (!isValidWsc(values)) {
return;
}
const position = directions.indexOf(decl.prop);
let dirs = [...directions];
dirs.splice(position, 1);
wsc.forEach((d, i) => {
const props = dirs.map((dir) => `${dir}-${d}`);
mergeRules(rule, [decl.prop, ...props], (rules) => {
if (!rules.includes(decl)) {
return false;
}
const longhands = rules.filter((p) => p !== decl);
if (
longhands[0].value.toLowerCase() ===
longhands[1].value.toLowerCase() &&
longhands[1].value.toLowerCase() ===
longhands[2].value.toLowerCase() &&
values[i] !== undefined &&
longhands[0].value.toLowerCase() === values[i].toLowerCase()
) {
for (const node of longhands) {
node.remove();
}
insertCloned(
/** @type {import('postcss').Rule} */ (decl.parent),
decl,
{
prop: borderProperty(d),
value: values[i],
}
);
/** @type {string|null} */ (values[i]) = null;
}
return false;
});
const newValue = values.join(' ');
if (newValue) {
decl.value = newValue;
} else {
decl.remove();
}
});
});
// clean-up values
rule.walkDecls(/^border($|-(top|right|bottom|left)$)/i, (decl) => {
decl.value = minifyWsc(decl.value);
});
// border-spacing-hv -> border-spacing
rule.walkDecls(/^border-spacing$/i, (decl) => {
const value = list.space(decl.value);
// merge vertical and horizontal dups
if (value.length > 1 && value[0] === value[1]) {
decl.value = value.slice(1).join(' ');
}
});
// clean-up rules
decls = getDecls(rule, allProperties);
while (decls.length) {
const lastNode = decls[decls.length - 1];
const lastPart = lastNode.prop.split('-').pop();
// remove properties of lower precedence
const lesser = decls.filter(
(node) =>
!stylehacks.detect(lastNode) &&
!stylehacks.detect(node) &&
!isCustomProp(lastNode) &&
node !== lastNode &&
node.important === lastNode.important &&
/** @type {number} */ (getLevel(node.prop)) >
/** @type {number} */ (getLevel(lastNode.prop)) &&
(node.prop.toLowerCase().includes(lastNode.prop) ||
node.prop.toLowerCase().endsWith(/** @type {string} */ (lastPart)))
);
for (const node of lesser) {
node.remove();
}
decls = decls.filter((node) => !lesser.includes(node));
// get duplicate properties
let duplicates = decls.filter(
(node) =>
!stylehacks.detect(lastNode) &&
!stylehacks.detect(node) &&
node !== lastNode &&
node.important === lastNode.important &&
node.prop === lastNode.prop &&
!(!isCustomProp(node) && isCustomProp(lastNode))
);
if (duplicates.length) {
if (colorMightRequireFallback.test(getColorValue(lastNode))) {
const preserve = duplicates
.filter(
(node) => !colorMightRequireFallback.test(getColorValue(node))
)
.pop();
duplicates = duplicates.filter((node) => node !== preserve);
}
for (const node of duplicates) {
node.remove();
}
}
decls = decls.filter(
(node) => node !== lastNode && !duplicates.includes(node)
);
}
}
module.exports = {
explode,
merge,
};
+117
View File
@@ -0,0 +1,117 @@
'use strict';
const stylehacks = require('stylehacks');
const canMerge = require('../canMerge.js');
const getDecls = require('../getDecls.js');
const minifyTrbl = require('../minifyTrbl.js');
const parseTrbl = require('../parseTrbl.js');
const insertCloned = require('../insertCloned.js');
const mergeRules = require('../mergeRules.js');
const mergeValues = require('../mergeValues.js');
const trbl = require('../trbl.js');
const isCustomProp = require('../isCustomProp.js');
const canExplode = require('../canExplode.js');
/**
* @param {string} prop
* @return {{explode: (rule: import('postcss').Rule) => void, merge: (rule: import('postcss').Rule) => void}}
*/
module.exports = (prop) => {
const properties = trbl.map((direction) => `${prop}-${direction}`);
/** @type {(rule: import('postcss').Rule) => void} */
const cleanup = (rule) => {
let decls = getDecls(rule, [prop].concat(properties));
while (decls.length) {
const lastNode = decls[decls.length - 1];
// remove properties of lower precedence
const lesser = decls.filter(
(node) =>
!stylehacks.detect(lastNode) &&
!stylehacks.detect(node) &&
node !== lastNode &&
node.important === lastNode.important &&
lastNode.prop === prop &&
node.prop !== lastNode.prop
);
for (const node of lesser) {
node.remove();
}
decls = decls.filter((node) => !lesser.includes(node));
// get duplicate properties
let duplicates = decls.filter(
(node) =>
!stylehacks.detect(lastNode) &&
!stylehacks.detect(node) &&
node !== lastNode &&
node.important === lastNode.important &&
node.prop === lastNode.prop &&
!(!isCustomProp(node) && isCustomProp(lastNode))
);
for (const node of duplicates) {
node.remove();
}
decls = decls.filter(
(node) => node !== lastNode && !duplicates.includes(node)
);
}
};
const processor = {
/** @type {(rule: import('postcss').Rule) => void} */
explode: (rule) => {
rule.walkDecls(new RegExp('^' + prop + '$', 'i'), (decl) => {
if (!canExplode(decl)) {
return;
}
if (stylehacks.detect(decl)) {
return;
}
const values = parseTrbl(decl.value);
trbl.forEach((direction, index) => {
insertCloned(
/** @type {import('postcss').Rule} */ (decl.parent),
decl,
{
prop: properties[index],
value: values[index],
}
);
});
decl.remove();
});
},
/** @type {(rule: import('postcss').Rule) => void} */
merge: (rule) => {
mergeRules(rule, properties, (rules, lastNode) => {
if (canMerge(rules) && !rules.some(stylehacks.detect)) {
insertCloned(
/** @type {import('postcss').Rule} */ (lastNode.parent),
lastNode,
{
prop,
value: minifyTrbl(mergeValues(...rules)),
}
);
for (const node of rules) {
node.remove();
}
return true;
}
return false;
});
cleanup(rule);
},
};
return processor;
};
+162
View File
@@ -0,0 +1,162 @@
'use strict';
const { list } = require('postcss');
const { unit } = require('postcss-value-parser');
const stylehacks = require('stylehacks');
const canMerge = require('../canMerge.js');
const getDecls = require('../getDecls.js');
const getValue = require('../getValue.js');
const mergeRules = require('../mergeRules.js');
const insertCloned = require('../insertCloned.js');
const isCustomProp = require('../isCustomProp.js');
const canExplode = require('../canExplode.js');
const properties = ['column-width', 'column-count'];
const auto = 'auto';
const inherit = 'inherit';
/**
* Normalize a columns shorthand definition. Both of the longhand
* properties' initial values are 'auto', and as per the spec,
* omitted values are set to their initial values. Thus, we can
* remove any 'auto' definition when there are two values.
*
* Specification link: https://www.w3.org/TR/css3-multicol/
*
* @param {[string, string]} values
* @return {string}
*/
function normalize(values) {
if (values[0].toLowerCase() === auto) {
return values[1];
}
if (values[1].toLowerCase() === auto) {
return values[0];
}
if (
values[0].toLowerCase() === inherit &&
values[1].toLowerCase() === inherit
) {
return inherit;
}
return values.join(' ');
}
/**
* @param {import('postcss').Rule} rule
* @return {void}
*/
function explode(rule) {
rule.walkDecls(/^columns$/i, (decl) => {
if (!canExplode(decl)) {
return;
}
if (stylehacks.detect(decl)) {
return;
}
let values = list.space(decl.value);
if (values.length === 1) {
values.push(auto);
}
values.forEach((value, i) => {
let prop = properties[1];
const dimension = unit(value);
if (value.toLowerCase() === auto) {
prop = properties[i];
} else if (dimension && dimension.unit !== '') {
prop = properties[0];
}
insertCloned(/** @type {import('postcss').Rule} */ (decl.parent), decl, {
prop,
value,
});
});
decl.remove();
});
}
/**
* @param {import('postcss').Rule} rule
* @return {void}
*/
function cleanup(rule) {
let decls = getDecls(rule, ['columns'].concat(properties));
while (decls.length) {
const lastNode = decls[decls.length - 1];
// remove properties of lower precedence
const lesser = decls.filter(
(node) =>
!stylehacks.detect(lastNode) &&
!stylehacks.detect(node) &&
node !== lastNode &&
node.important === lastNode.important &&
lastNode.prop === 'columns' &&
node.prop !== lastNode.prop
);
for (const node of lesser) {
node.remove();
}
decls = decls.filter((node) => !lesser.includes(node));
// get duplicate properties
let duplicates = decls.filter(
(node) =>
!stylehacks.detect(lastNode) &&
!stylehacks.detect(node) &&
node !== lastNode &&
node.important === lastNode.important &&
node.prop === lastNode.prop &&
!(!isCustomProp(node) && isCustomProp(lastNode))
);
for (const node of duplicates) {
node.remove();
}
decls = decls.filter(
(node) => node !== lastNode && !duplicates.includes(node)
);
}
}
/**
* @param {import('postcss').Rule} rule
* @return {void}
*/
function merge(rule) {
mergeRules(rule, properties, (rules, lastNode) => {
if (canMerge(rules) && !rules.some(stylehacks.detect)) {
insertCloned(
/** @type {import('postcss').Rule} */ (lastNode.parent),
lastNode,
{
prop: 'columns',
value: normalize(/** @type [string, string] */ (rules.map(getValue))),
}
);
for (const node of rules) {
node.remove();
}
return true;
}
return false;
});
cleanup(rule);
}
module.exports = {
explode,
merge,
};
+7
View File
@@ -0,0 +1,7 @@
'use strict';
const borders = require('./borders');
const columns = require('./columns');
const margin = require('./margin');
const padding = require('./padding');
module.exports = [borders, columns, margin, padding];
+4
View File
@@ -0,0 +1,4 @@
'use strict';
const base = require('./boxBase.js');
module.exports = base('margin');
+4
View File
@@ -0,0 +1,4 @@
'use strict';
const base = require('./boxBase');
module.exports = base('padding');
+14
View File
@@ -0,0 +1,14 @@
'use strict';
/**
* @param {import('postcss').Rule} rule
* @param {string[]} properties
* @return {import('postcss').Declaration[]}
*/
module.exports = function getDecls(rule, properties) {
return /** @type {import('postcss').Declaration[]} */ (
rule.nodes.filter(
(node) =>
node.type === 'decl' && properties.includes(node.prop.toLowerCase())
)
);
};
+7
View File
@@ -0,0 +1,7 @@
'use strict';
/** @type {(rule: import('postcss').AnyNode[], prop: string) => import('postcss').Declaration} */
module.exports = (rule, prop) => {
return /** @type {import('postcss').Declaration} */ (
rule.filter((n) => n.type === 'decl' && n.prop.toLowerCase() === prop).pop()
);
};
+15
View File
@@ -0,0 +1,15 @@
'use strict';
const getLastNode = require('./getLastNode.js');
/**
* @param {import('postcss').Declaration[]} props
* @param {string[]} properties
* @return {import('postcss').Declaration[]}
*/
module.exports = function getRules(props, properties) {
return properties
.map((property) => {
return getLastNode(props, property);
})
.filter(Boolean);
};
+8
View File
@@ -0,0 +1,8 @@
'use strict';
/**
* @param {import('postcss').Declaration} arg
* @return {string}
*/
module.exports = function getValue({ value }) {
return value;
};
+7
View File
@@ -0,0 +1,7 @@
'use strict';
/** @type {(rule: import('postcss').Declaration[], ...props: string[]) => boolean} */
module.exports = (rule, ...props) => {
return props.every((p) =>
rule.some((node) => node.prop && node.prop.toLowerCase().includes(p))
);
};
+14
View File
@@ -0,0 +1,14 @@
'use strict';
/**
* @param {import('postcss').Rule} rule
* @param {import('postcss').Declaration} decl
* @param {Partial<import('postcss').DeclarationProps>=} props
* @return {import('postcss').Declaration}
*/
module.exports = function insertCloned(rule, decl, props) {
const newNode = Object.assign(decl.clone(), props);
rule.insertAfter(decl, newNode);
return newNode;
};
+3
View File
@@ -0,0 +1,3 @@
'use strict';
/** @type {(node: import('postcss').Declaration) => boolean} */
module.exports = (node) => node.value.search(/var\s*\(\s*--/i) !== -1;
+75
View File
@@ -0,0 +1,75 @@
'use strict';
const hasAllProps = require('./hasAllProps.js');
const getDecls = require('./getDecls.js');
const getRules = require('./getRules.js');
/**
* @param {import('postcss').Declaration} propA
* @param {import('postcss').Declaration} propB
* @return {boolean}
*/
function isConflictingProp(propA, propB) {
if (
!propB.prop ||
propB.important !== propA.important ||
propA.prop === propB.prop
) {
return false;
}
const partsA = propA.prop.split('-');
const partsB = propB.prop.split('-');
/* Be safe: check that the first part matches. So we don't try to
* combine e.g. border-color and color.
*/
if (partsA[0] !== partsB[0]) {
return false;
}
const partsASet = new Set(partsA);
return partsB.every((partB) => partsASet.has(partB));
}
/**
* @param {import('postcss').Declaration[]} match
* @param {import('postcss').Declaration[]} nodes
* @return {boolean}
*/
function hasConflicts(match, nodes) {
const firstNode = Math.min(...match.map((n) => nodes.indexOf(n)));
const lastNode = Math.max(...match.map((n) => nodes.indexOf(n)));
const between = nodes.slice(firstNode + 1, lastNode);
return match.some((a) => between.some((b) => isConflictingProp(a, b)));
}
/**
* @param {import('postcss').Rule} rule
* @param {string[]} properties
* @param {(rules: import('postcss').Declaration[], last: import('postcss').Declaration, props: import('postcss').Declaration[]) => boolean} callback
* @return {void}
*/
module.exports = function mergeRules(rule, properties, callback) {
let decls = getDecls(rule, properties);
while (decls.length) {
const last = decls[decls.length - 1];
const props = decls.filter((node) => node.important === last.important);
const rules = getRules(props, properties);
if (
hasAllProps(rules, ...properties) &&
!hasConflicts(
rules,
/** @type import('postcss').Declaration[]*/ (rule.nodes)
)
) {
if (callback(rules, last, props)) {
decls = decls.filter((node) => !rules.includes(node));
}
}
decls = decls.filter((node) => node !== last);
}
};
+5
View File
@@ -0,0 +1,5 @@
'use strict';
const getValue = require('./getValue.js');
/** @type {(...rules: import('postcss').Declaration[]) => string} */
module.exports = (...rules) => rules.map(getValue).join(' ');
+21
View File
@@ -0,0 +1,21 @@
'use strict';
const parseTrbl = require('./parseTrbl.js');
/** @type {(v: string | [string, string, string, string]) => string} */
module.exports = (v) => {
const value = parseTrbl(v);
if (value[3] === value[1]) {
value.pop();
if (value[2] === value[0]) {
value.pop();
if (value[0] === value[1]) {
value.pop();
}
}
}
return value.join(' ');
};
+31
View File
@@ -0,0 +1,31 @@
'use strict';
const parseWsc = require('./parseWsc.js');
const minifyTrbl = require('./minifyTrbl.js');
const { isValidWsc } = require('./validateWsc.js');
const defaults = ['medium', 'none', 'currentcolor'];
/** @type {(v: string) => string} */
module.exports = (v) => {
const values = parseWsc(v);
if (!isValidWsc(values)) {
return minifyTrbl(v);
}
const value = [...values, '']
.reduceRight((prev, cur, i, arr) => {
if (
cur === undefined ||
(cur.toLowerCase() === defaults[i] &&
(!i || (arr[i - 1] || '').toLowerCase() !== cur.toLowerCase()))
) {
return prev;
}
return cur + ' ' + prev;
})
.trim();
return minifyTrbl(value || 'none');
};
+12
View File
@@ -0,0 +1,12 @@
'use strict';
const { list } = require('postcss');
/** @type {(v: string | string[]) => [string, string, string, string]} */
module.exports = (v) => {
const s = typeof v === 'string' ? list.space(v) : v;
return [
s[0], // top
s[1] || s[0], // right
s[2] || s[0], // bottom
s[3] || s[1] || s[0], // left
];
};
+83
View File
@@ -0,0 +1,83 @@
'use strict';
const { list } = require('postcss');
const { isWidth, isStyle, isColor } = require('./validateWsc.js');
const none = /^\s*(none|medium)(\s+none(\s+(none|currentcolor))?)?\s*$/i;
/* Approximate https://drafts.csswg.org/css-values-4/#typedef-dashed-ident */
// eslint-disable-next-line no-control-regex
const varRE = /--(\w|-|[^\x00-\x7F])+/g;
/** @type {(v: string) => string} */
const toLower = (v) => {
let match;
let lastIndex = 0;
let result = '';
varRE.lastIndex = 0;
while ((match = varRE.exec(v)) !== null) {
if (match.index > lastIndex) {
result += v.substring(lastIndex, match.index).toLowerCase();
}
result += match[0];
lastIndex = match.index + match[0].length;
}
if (lastIndex < v.length) {
result += v.substring(lastIndex).toLowerCase();
}
if (result === '') {
return v;
}
return result;
};
/**
* @param {string} value
* @return {[string, string, string]}
*/
module.exports = function parseWsc(value) {
if (none.test(value)) {
return ['medium', 'none', 'currentcolor'];
}
let width, style, color;
const values = list.space(value);
if (
values.length > 1 &&
isStyle(values[1]) &&
values[0].toLowerCase() === 'none'
) {
values.unshift();
width = '0';
}
/** @type {string[]} */
const unknown = [];
values.forEach((v) => {
if (isStyle(v)) {
style = toLower(v);
} else if (isWidth(v)) {
width = toLower(v);
} else if (isColor(v)) {
color = toLower(v);
} else {
unknown.push(v);
}
});
if (unknown.length) {
if (!width && style && color) {
width = unknown.pop();
}
if (width && !style && color) {
style = unknown.pop();
}
if (width && style && !color) {
color = unknown.pop();
}
}
return /** @type {[string, string, string]} */ ([width, style, color]);
};
+2
View File
@@ -0,0 +1,2 @@
'use strict';
module.exports = ['top', 'right', 'bottom', 'left'];
+87
View File
@@ -0,0 +1,87 @@
'use strict';
const colors = require('./colornames.js');
const widths = new Set(['thin', 'medium', 'thick']);
const styles = new Set([
'none',
'hidden',
'dotted',
'dashed',
'solid',
'double',
'groove',
'ridge',
'inset',
'outset',
]);
/**
* @param {string} value
* @return {boolean}
*/
function isStyle(value) {
return value !== undefined && styles.has(value.toLowerCase());
}
/**
* @param {string} value
* @return {boolean}
*/
function isWidth(value) {
return (
(value && widths.has(value.toLowerCase())) ||
/^(\d+(\.\d+)?|\.\d+)(\w+)?$/.test(value)
);
}
/**
* @param {string} value
* @return {boolean}
*/
function isColor(value) {
if (!value) {
return false;
}
value = value.toLowerCase();
if (/rgba?\(/.test(value)) {
return true;
}
if (/hsla?\(/.test(value)) {
return true;
}
if (/#([0-9a-z]{6}|[0-9a-z]{3})/.test(value)) {
return true;
}
if (value === 'transparent') {
return true;
}
if (value === 'currentcolor') {
return true;
}
return colors.has(value);
}
/**
* @param {[string, string, string]} wscs
* @return {boolean}
*/
function isValidWsc(wscs) {
const validWidth = isWidth(wscs[0]);
const validStyle = isStyle(wscs[1]);
const validColor = isColor(wscs[2]);
return (
(validWidth && validStyle) ||
(validWidth && validColor) ||
(validStyle && validColor)
);
}
module.exports = { isStyle, isWidth, isColor, isValidWsc };
+9
View File
@@ -0,0 +1,9 @@
export = pluginCreator;
/**
* @type {import('postcss').PluginCreator<void>}
* @return {import('postcss').Plugin}
*/
declare function pluginCreator(): import('postcss').Plugin;
declare namespace pluginCreator {
const postcss: true;
}
+2
View File
@@ -0,0 +1,2 @@
declare const _exports: (prop: import('postcss').Declaration, includeCustomProps?: boolean) => boolean;
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare const _exports: (props: import('postcss').Declaration[], includeCustomProps?: boolean) => boolean;
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare const _exports: Set<string>;
export = _exports;
+10
View File
@@ -0,0 +1,10 @@
/**
* @param {import('postcss').Rule} rule
* @return {void}
*/
export function explode(rule: import('postcss').Rule): void;
/**
* @param {import('postcss').Rule} rule
* @return {void}
*/
export function merge(rule: import('postcss').Rule): void;
+5
View File
@@ -0,0 +1,5 @@
declare function _exports(prop: string): {
explode: (rule: import('postcss').Rule) => void;
merge: (rule: import('postcss').Rule) => void;
};
export = _exports;
+10
View File
@@ -0,0 +1,10 @@
/**
* @param {import('postcss').Rule} rule
* @return {void}
*/
export function explode(rule: import('postcss').Rule): void;
/**
* @param {import('postcss').Rule} rule
* @return {void}
*/
export function merge(rule: import('postcss').Rule): void;
+3
View File
@@ -0,0 +1,3 @@
declare const _exports: (typeof borders)[];
export = _exports;
import borders = require("./borders");
+5
View File
@@ -0,0 +1,5 @@
declare const _exports: {
explode: (rule: import("postcss").Rule) => void;
merge: (rule: import("postcss").Rule) => void;
};
export = _exports;
+5
View File
@@ -0,0 +1,5 @@
declare const _exports: {
explode: (rule: import("postcss").Rule) => void;
merge: (rule: import("postcss").Rule) => void;
};
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare function _exports(rule: import('postcss').Rule, properties: string[]): import('postcss').Declaration[];
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare const _exports: (rule: import('postcss').AnyNode[], prop: string) => import('postcss').Declaration;
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare function _exports(props: import('postcss').Declaration[], properties: string[]): import('postcss').Declaration[];
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare function _exports({ value }: import('postcss').Declaration): string;
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare const _exports: (rule: import('postcss').Declaration[], ...props: string[]) => boolean;
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare function _exports(rule: import('postcss').Rule, decl: import('postcss').Declaration, props?: Partial<import('postcss').DeclarationProps> | undefined): import('postcss').Declaration;
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare const _exports: (node: import('postcss').Declaration) => boolean;
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare function _exports(rule: import('postcss').Rule, properties: string[], callback: (rules: import('postcss').Declaration[], last: import('postcss').Declaration, props: import('postcss').Declaration[]) => boolean): void;
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare const _exports: (...rules: import('postcss').Declaration[]) => string;
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare const _exports: (v: string | [string, string, string, string]) => string;
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare const _exports: (v: string) => string;
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare const _exports: (v: string | string[]) => [string, string, string, string];
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare function _exports(value: string): [string, string, string];
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare function _exports(node: import('postcss').Node): import('postcss').Node;
export = _exports;
+2
View File
@@ -0,0 +1,2 @@
declare const _exports: string[];
export = _exports;
+20
View File
@@ -0,0 +1,20 @@
/**
* @param {string} value
* @return {boolean}
*/
export function isStyle(value: string): boolean;
/**
* @param {string} value
* @return {boolean}
*/
export function isWidth(value: string): boolean;
/**
* @param {string} value
* @return {boolean}
*/
export function isColor(value: string): boolean;
/**
* @param {[string, string, string]} wscs
* @return {boolean}
*/
export function isValidWsc(wscs: [string, string, string]): boolean;