projectwallace / wallace-cli Goto Github PK
View Code? Open in Web Editor NEWPretty CSS analytics on the CLI
Home Page: https://www.projectwallace.com/oss
License: MIT License
Pretty CSS analytics on the CLI
Home Page: https://www.projectwallace.com/oss
License: MIT License
It would be nice to have a section list out base64 embeds along with their filesizes. Thank you for the wonderful app!
@projectwallace/css-analyzer
needs to be updated to 2.5.0 for thisI've run into some issues a couple of times because I was using an outdated version of this package. Having update notifications should prevent future issues.
It would be nice if I could analyze my css and post it to projectwallace.com.
Caveats:
that includes
The CLI only gives so much room to view and visualize stats, so I'd like to add a link to open these stats on projectwallace.com.
--no-link
flag to disable this behaviour(NB: projectwallace.com does not support opening a URL with the CSS embedded in the URL yet)
First off, thank you for this great tool!
I've started to use it, and have a question - or maybe a potential feature request?
I have several CSS files that I'm analyzing, and currently I'm doing that by running the CLI for each file separately, ie (in my package.json
):
"styles:analyze": "wallace dist/styles/index.css && wallace dist/styles/a.css && wallace dist/styles/b.css"
When I do this, it's not super clear to tell where in the output the results end for one file and begin for the other:
Is there a way to add a header of some sort to the results table? It would be really nice if when passing a file path to analyze, that path (or at least the filename) would be added to the table. Or perhaps a way to specify a custom header via a flag?
Any thoughts or suggestions on something like that?
AVA supports snapshot testing, so let's utilize that for convenience.
Better testability, nicer code than all the crappy code thatβs in table.js π
-V
as alias for --version
I believe showing the usage of the !important
will be a nice-to-have in the output.
As on the stats of the CSS you already have that information I believe it is 'declarations.importants.total', it will be just a matter of showing that info on the output.
I am just not sure exactly where to put it, but as you already have empty rules, font-faces, etc ... maybe it could stay also inside the performance section, how do you feel about it?
I tried to use this tool with my localhost in a different ways. This is the result:
$ wallace localhost
SyntaxError: Unknown word at line 1, column 1. Source: localhost
wallace http://localhost:80
- Fetching CSS ...
TypeError: this._promise.finally is not a function
$ wallace 127.0.0.1
SyntaxError: Unknown word at line 1, column 1. Source: 127.0.0.1
Any of these commands works for me. But the tool seems works with this command: $ wallace 127.0.0.1:80
. Unfortunately, the results do not seem real.
So... anyone can tell me how I need to use this tool with my localhost?
For a better coverage of CSS, replace get-css with a call to https://extract-css.now.sh
Very cool tool! No rush to fix this ever, only creating this issue in case you wanted to.
Try: wallace https://carbon.now.sh
It would be nice to allow urls in the format of github.com, instead of the full https://github.com. Extract-css and css-analytics.com already use the normalize-url package to allow this.
The headless CSS fetching mechanism requires a whole lot of dependencies and install time. I think it should be separated so that it would would be two different steps, using get-css or someone just piping a local file into wallace-cli:
get-css https://www.projectwallace.com > wallace
How is it possible to use it with authenticated pages?
Like the regex on projectwallace.com: https://github.com/projectwallace/content/blob/master/src/packages/is-url.js#L12
Should be combined with normalize-url to be able to use urls like google.com
(which we can't now).
Update css-analyzer to 2.3.0 and add the new metrics in the table.https://github.com/projectwallace/css-analyzer/releases/tag/v2.3.0
Triggered by #43
@projectwallace/css-analyzer now supports analysis of browserhacks, so they should be shown in the default view too (JSON format shows all metrics by default)
At the very least test for valid output of the version and some basic css stats, perhaps with the json formatter to test that option and have a simple testcase
wallace -v
should show the current version. It shows an error message now.
@media (min-width: 1000px) { ... }
missing semi colon here causes the CSS parser to fail. e.g. $ wallace https://www.gatsbyjs.org
This issue functions as a todo list for all tasks for V2.
--compact/-c
with --verbose/-v
| #37, #38--verbose
impact --format=json
?Accepting CSS input as a string argument is confusing and should be avoided.
Breaking change.
I was trying this tool out and found that I always get a 404 error when using it. Both when installed using npm install -g
or when using it with npx
, see logs below. Oddly enough the tool seems to work fine when I clone the repository and run src/cli.js
...
# with npm install -g
$ wallace projectwallace.com
HTTPError: Response code 404 (Not Found)
# with NPX
$ npx wallace-cli projectwallace.com
[...]
HTTPError: Response code 404 (Not Found)
It would be nice to set some kind of verbosity flag, which is more standard than a --compact
flag.
The default could be -vvv
, which could be overridden with -v
Use create-test-server
or nock
or something similar to respond with either CSS or an error.
Ink 3 is out! π₯³ Upgrading should be pretty painless, I hope.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.