Fix code quality violations and exclude Manifest from checks
Document application modes (development/debug/production) Add global file drop handler, order column normalization, SPA hash fix Serve CDN assets via /_vendor/ URLs instead of merging into bundles Add production minification with license preservation Improve JSON formatting for debugging and production optimization Add CDN asset caching with CSS URL inlining for production builds Add three-mode system (development, debug, production) Update Manifest CLAUDE.md to reflect helper class architecture Refactor Manifest.php into helper classes for better organization Pre-manifest-refactor checkpoint: Add app_mode documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
root
108
node_modules/css-tree/README.md
generated
vendored
108
node_modules/css-tree/README.md
generated
vendored
@@ -1,18 +1,14 @@
|
||||
<img align="right" width="111" height="111"
|
||||
alt="CSSTree logo"
|
||||
src="https://cloud.githubusercontent.com/assets/270491/19243723/6f9136c6-8f21-11e6-82ac-eeeee4c6c452.png"/>
|
||||
<img align="right" width="111" height="111" alt="CSSTree logo" src="assets/csstree-logo-rounded.svg" />
|
||||
|
||||
# CSSTree
|
||||
|
||||
[](https://www.npmjs.com/package/css-tree)
|
||||
[](https://travis-ci.org/csstree/csstree)
|
||||
[](https://github.com/csstree/csstree/actions/workflows/build.yml)
|
||||
[](https://coveralls.io/github/csstree/csstree?branch=master)
|
||||
[](https://www.npmjs.com/package/css-tree)
|
||||
[](https://twitter.com/csstree)
|
||||
|
||||
CSSTree is a tool set for CSS: [fast](https://github.com/postcss/benchmark) detailed parser (CSS → AST), walker (AST traversal), generator (AST → CSS) and lexer (validation and matching) based on specs and browser implementations. The main goal is to be efficient and W3C specs compliant, with focus on CSS analyzing and source-to-source transforming tasks.
|
||||
|
||||
> NOTE: The library isn't in final shape and needs further improvements (e.g. AST format and API are subjects to change in next major versions). However it's stable enough and used by projects like [CSSO](https://github.com/css/csso) (CSS minifier) and [SVGO](https://github.com/svg/svgo) (SVG optimizer) in production.
|
||||
CSSTree is a tool set for CSS: [fast](https://github.com/postcss/benchmark) detailed parser (CSS → AST), walker (AST traversal), generator (AST → CSS) and lexer (validation and matching) based on specs and browser implementations. The main goal is to be efficient and W3C spec compliant, with focus on CSS analyzing and source-to-source transforming tasks.
|
||||
|
||||
## Features
|
||||
|
||||
@@ -30,7 +26,18 @@ CSSTree is a tool set for CSS: [fast](https://github.com/postcss/benchmark) deta
|
||||
|
||||
- **Syntax validation**
|
||||
|
||||
The build-in lexer can test CSS against syntaxes defined by W3C. CSSTree uses [mdn/data](https://github.com/mdn/data/) as a basis for lexer's dictionaries and extends it with vendor specific and legacy syntaxes. Lexer can only check the declaration values currently, but this feature will be extended to other parts of the CSS in the future.
|
||||
The built-in lexer can test CSS against syntaxes defined by W3C. CSSTree uses [mdn/data](https://github.com/mdn/data/) as a basis for lexer's dictionaries and extends it with vendor specific and legacy syntaxes. Lexer can only check the declaration values and at-rules currently, but this feature will be extended to other parts of the CSS in the future.
|
||||
|
||||
## Projects using CSSTree
|
||||
|
||||
- [Svelte](https://github.com/sveltejs/svelte) – Cybernetically enhanced web apps
|
||||
- [SVGO](https://github.com/svg/svgo) – Node.js tool for optimizing SVG files
|
||||
- [CSSO](https://github.com/css/csso) – CSS minifier with structural optimizations
|
||||
- [NativeScript](https://github.com/NativeScript/NativeScript) – NativeScript empowers you to access native APIs from JavaScript directly
|
||||
- [react-native-svg](https://github.com/react-native-svg/react-native-svg) – SVG library for React Native, React Native Web, and plain React web projects
|
||||
- [penthouse](https://github.com/pocketjoso/penthouse) – Critical Path CSS Generator
|
||||
- [Bit](https://github.com/teambit/bit) – Bit is the platform for collaborating on components
|
||||
- and more...
|
||||
|
||||
## Documentation
|
||||
|
||||
@@ -44,12 +51,18 @@ CSSTree is a tool set for CSS: [fast](https://github.com/postcss/benchmark) deta
|
||||
- [find(ast, fn)](docs/traversal.md#findast-fn)
|
||||
- [findLast(ast, fn)](docs/traversal.md#findlastast-fn)
|
||||
- [findAll(ast, fn)](docs/traversal.md#findallast-fn)
|
||||
- [Utils for AST](docs/utils.md)
|
||||
- [property(name)](docs/utils.md#propertyname)
|
||||
- [keyword(name)](docs/utils.md#keywordname)
|
||||
- [clone(ast)](docs/utils.md#cloneast)
|
||||
- [fromPlainObject(object)](docs/utils.md#fromplainobjectobject)
|
||||
- [toPlainObject(ast)](docs/utils.md#toplainobjectast)
|
||||
- [Util functions](docs/utils.md)
|
||||
- Value encoding & decoding
|
||||
- [property(name)](docs/utils.md#propertyname)
|
||||
- [keyword(name)](docs/utils.md#keywordname)
|
||||
- [ident](docs/utils.md#ident)
|
||||
- [string](docs/utils.md#string)
|
||||
- [url](docs/utils.md#url)
|
||||
- [List class](docs/list.md)
|
||||
- AST transforming
|
||||
- [clone(ast)](docs/utils.md#cloneast)
|
||||
- [fromPlainObject(object)](docs/utils.md#fromplainobjectobject)
|
||||
- [toPlainObject(ast)](docs/utils.md#toplainobjectast)
|
||||
- [Value Definition Syntax](docs/definition-syntax.md)
|
||||
- [parse(source)](docs/definition-syntax.md#parsesource)
|
||||
- [walk(node, options, context)](docs/definition-syntax.md#walknode-options-context)
|
||||
@@ -77,19 +90,19 @@ CSSTree is a tool set for CSS: [fast](https://github.com/postcss/benchmark) deta
|
||||
Install with npm:
|
||||
|
||||
```
|
||||
> npm install css-tree
|
||||
npm install css-tree
|
||||
```
|
||||
|
||||
Basic usage:
|
||||
|
||||
```js
|
||||
var csstree = require('css-tree');
|
||||
import * as csstree from 'css-tree';
|
||||
|
||||
// parse CSS to AST
|
||||
var ast = csstree.parse('.example { world: "!" }');
|
||||
const ast = csstree.parse('.example { world: "!" }');
|
||||
|
||||
// traverse AST and modify it
|
||||
csstree.walk(ast, function(node) {
|
||||
csstree.walk(ast, (node) => {
|
||||
if (node.type === 'ClassSelector' && node.name === 'example') {
|
||||
node.name = 'hello';
|
||||
}
|
||||
@@ -104,26 +117,75 @@ Syntax matching:
|
||||
|
||||
```js
|
||||
// parse CSS to AST as a declaration value
|
||||
var ast = csstree.parse('red 1px solid', { context: 'value' });
|
||||
const ast = csstree.parse('red 1px solid', { context: 'value' });
|
||||
|
||||
// match to syntax of `border` property
|
||||
var matchResult = csstree.lexer.matchProperty('border', ast);
|
||||
const matchResult = csstree.lexer.matchProperty('border', ast);
|
||||
|
||||
// check first value node is a <color>
|
||||
console.log(matchResult.isType(ast.children.first(), 'color'));
|
||||
console.log(matchResult.isType(ast.children.first, 'color'));
|
||||
// true
|
||||
|
||||
// get a type list matched to a node
|
||||
console.log(matchResult.getTrace(ast.children.first()));
|
||||
console.log(matchResult.getTrace(ast.children.first));
|
||||
// [ { type: 'Property', name: 'border' },
|
||||
// { type: 'Type', name: 'color' },
|
||||
// { type: 'Type', name: 'named-color' },
|
||||
// { type: 'Keyword', name: 'red' } ]
|
||||
```
|
||||
|
||||
### Exports
|
||||
|
||||
Is it possible to import just a needed part of library like a parser or a walker. That's might useful for loading time or bundle size optimisations.
|
||||
|
||||
```js
|
||||
import * as tokenizer from 'css-tree/tokenizer';
|
||||
import * as parser from 'css-tree/parser';
|
||||
import * as walker from 'css-tree/walker';
|
||||
import * as lexer from 'css-tree/lexer';
|
||||
import * as definitionSyntax from 'css-tree/definition-syntax';
|
||||
import * as data from 'css-tree/definition-syntax-data';
|
||||
import * as dataPatch from 'css-tree/definition-syntax-data-patch';
|
||||
import * as utils from 'css-tree/utils';
|
||||
```
|
||||
|
||||
### Using in a browser
|
||||
|
||||
Bundles are available for use in a browser:
|
||||
|
||||
- `dist/csstree.js` – minified IIFE with `csstree` as global
|
||||
```html
|
||||
<script src="node_modules/css-tree/dist/csstree.js"></script>
|
||||
<script>
|
||||
csstree.parse('.example { color: green }');
|
||||
</script>
|
||||
```
|
||||
|
||||
- `dist/csstree.esm.js` – minified ES module
|
||||
```html
|
||||
<script type="module">
|
||||
import { parse } from 'node_modules/css-tree/dist/csstree.esm.js'
|
||||
parse('.example { color: green }');
|
||||
</script>
|
||||
```
|
||||
|
||||
One of CDN services like `unpkg` or `jsDelivr` can be used. By default (for short path) a ESM version is exposing. For IIFE version a full path to a bundle should be specified:
|
||||
|
||||
```html
|
||||
<!-- ESM -->
|
||||
<script type="module">
|
||||
import * as csstree from 'https://cdn.jsdelivr.net/npm/css-tree';
|
||||
import * as csstree from 'https://unpkg.com/css-tree';
|
||||
</script>
|
||||
|
||||
<!-- IIFE with an export to global -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/css-tree/dist/csstree.js"></script>
|
||||
<script src="https://unpkg.com/css-tree/dist/csstree.js"></script>
|
||||
```
|
||||
|
||||
## Top level API
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
|
||||
|
||||
Reference in New Issue
Block a user