Skip to content
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

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

Rich-Harris opened this issue Mar 29, 2017 · 3 comments


Copy link

@Rich-Harris Rich-Harris commented Mar 29, 2017

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

Copy link

@lahmatiy lahmatiy commented Mar 29, 2017

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 added a commit that referenced this issue Sep 8, 2017
- standalone entry points for parser, walker, generator and convertor
(i.e. `require('css-tree/lib/parser')`)
- replace `syntax#syntax` -> `syntax#grammar`
Copy link

@lahmatiy lahmatiy commented Sep 8, 2017

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.

Copy link

@Rich-Harris Rich-Harris commented Sep 8, 2017

Thanks so much @lahmatiy! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.