Make it possible to use e.g. parse and walk without requiring entire library

[Rich-Harris]

Hi — big fan of css-tree, I tried a lot of different CSS parsers to use with Svelte and this one was by far the best, in terms of the AST format and ease of use.

This is a follow-up to sveltejs/svelte#408. To recap: for various reasons, we bundle our dependencies, and until recently (up to 1.0.0-alpha16) we were able to selectively import parse and walk like so;

import parse from 'css-tree/lib/parser/index.js';
import walk from 'css-tree/lib/utils/walk.js';

As of 1.0.0-alpha17 that no longer seems to be possible — we have to import the whole of css-tree. The result is that our bundle size balloons in size, from 417kb (of which 103kb was css-tree) to 770kb.

We were wondering therefore if this is a use case you might consider supporting? Or does the new extensible architecture make that very difficult?

Thank you!

cc @Conduitry

[lahmatiy]

Hi, @Rich-Harris!
As I mentioned in sveltejs/svelte#408 I postponed bundle size problem until a real case. Since it's make sense now we should to think about the size.
Yep, new architecture is about extensibility. But it doesn't lock css-tree for that single feature. I'm constantly looking for a balance between performance, usability, extensibility and of course the size. Definitely you'll be able to get a smaller version of css-tree to solve certain problem you're facing. But it will takes some time to find a solution.
Anyway I see the huge change in size of your bundle – 363Kb. css-tree bundle it much less than that number. Currently it's size is 156Kb. I suppose it's because you use webpack and assembly css-tree from sources. css-tree uses a couple JSON files (properties grammar) for lexer from mdn/data. Those files contain a lot of redundant information that cutting when build a css-tree's bundle. Actually syntax.json is generating first, then we use it to replace original files when build a bundle with browserify. I know that the bundle contains things that you do not need (grammar for lexer is about 30% of bundle size) but it's less by 200Kb (156Kb in total as mentioned above). So using dist/csstree.js may to be an option for now if you would to use the latest version.

[lahmatiy]

Just released v1.0.0-alpha22
Since now, key modules have their own entry points, i.e.:

let parse = require('css-tree/lib/parser');  // function
let walkers = require('css-tree/lib/walker');  // .all(), .allUp() etc
let generator = require('css-tree/lib/generator'); // .translate() etc
// all requires refer to folders, i.e. require('css-tree/lib/parser/index.js') is the full path to module

I believe this is what you've requested.
Looked up sources of Svelte. I'm not sure, but looks like you just need to change a version of css-tree in package.json ;)

One tip: You can use csstree.toPlainObject() instead of JSON.parse(JSON.stringify(ast)) (here)

let toPlainObject = require('css-tree/lib/convertor').toPlainObject;
let ast = toPlainObject(parse(css));

Or just add a "conversion" on AST tidy up:

if (node.children) {
    node.children = node.children.toArray();
}

Btw, parser supports tolerant mode now. Maybe it would be helpful too.

[Rich-Harris]

Thanks so much @lahmatiy! 🎉