npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@css-doodle/cli

v1.4.2

Published

A command-line tool for css-doodle to preview and generate images/videos

Downloads

24

Readme

@css-doodle/cli

A command-line tool for css-doodle to preview and generate images/videos.

Installation

npm install -g @css-doodle/cli

[!NOTE] After installation, you can use cssd or css-doodle command in the terminal.

Usage

Usage: cssd [options] [command]

Options:
  -V, --version  output the version number
  -h, --help     display help for command

Commands:
  render         Generate an image/video from css|cssd|html file or CodePen link
  preview        Open a window to preview the css|cssd file
  generate       Generate code using css-doodle generators
  config         Display/set configurations
  use            Shorthand to fetch and use a custom version of css-doodle
  parse          Print the parsed tokens, help to debug in development
  upgrade        Upgrade CLI to latest version

Commands

render

Generate an image/video from the css-doodle source file. The source file can be a .css, .cssd, .html file or CodePen link.

  • -o, --output: Custom output filename of the generated result.
  • -x, --scale: Scale factor of the generated result, defaults to 2 for images, 1 for videos.
  • -s, --selector: CSS selector to target the rendered node, defaults to css-doodle.
  • -d, --delay: Delay time before taking screenshot/screencast, e.g, 2s.
  • -t, --time: Record screen for a specific time, e.g, 10s.
  • -ws, --window-size: The size of the rendered window, defaults to 1600x1200 for images, 1200x900 for videos.
  • --mp4: Use mp4 as the generated video format.
cssd render
cssd render code.css
cssd render code.css -o result.png
cssd render code.css -x 4
cssd render https://codepen.io/yuanchuan/pen/MQEeJo

Screen recording:

cssd render -t 10s

By default the generated video is in webm format, you can transform it automatically into mp4 by adding --mp4 option, or use an output filename with .mp4 extension.

cssd render -t 10s --mp4
cssd render -o result.mp4

preview

Open a window to preview the css-doodle source file. The source file can be either .css or .cssd.

  • --fullscreen: Open in fullscreen mode.
cssd preview code.css
cssd preview code.css --fullscreen

generate

Generate code using css-doodle generators.

  • svg: Generate SVG code using svg() function.
  • polygon: Generate CSS polygon() using shape() function.
cssd generate svg code.css
cssd generate polygon code.css

# read from STDIN
cssd generate polygon

config

Display/set the configurations in key/value pairs. Currently only two configuration names are recognized:

  • set: Set a configuration with key/value pair.
  • get: Get a configuration value by key.
  • list: List all configurations.

Recognizable configurations:

  • browserPath: The path to the browser executable.
  • css-doodle: The path to the css-doodle to use.
# show all configurations
cssd config list

# use a custom browser
cssd config set browserPath /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome

# reset
cssd config set browserPath ''

# get the value
cssd config get browserPath

# download and use a custom version of css-doodle
cssd config set css-doodle 0.40.6

use

Shorthand of cssd config set css-doodle <version>.

cssd use css-doodle@0.40.6

# or just version
cssd use 0.40.6
cssd use latest

upgrade

Upgrade CLI to latest version.

cssd upgrade