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

csstransform

v0.0.2

Published

Automated CSS Transformations

Downloads

2

Readme

#csstransform

Automated css transformations.

Build Status

#Example Usage csstransform can be used to transform existing css and transform for example it's selectors.

var css = __dirname + '/input/bootstrap.css';
var target = __dirname + '/output/bootstrap-match-string.css';

var csstransform = require('../index');
var csst = csstransform(css);
csst.transformSelectorText({
	prepend: '.bootstrap-admin',
	match: ".modal"
});
csst.toString(target);

#How it works csstransform uses cssom (a full fledged css parser) to parse the css into an internal css dom. When calling toString(target), the css is formatted with cssbeautify.

#API

##csstransform(css) Creates a new CSST Object and parses the css file into a cssom Object.

Parameters css: String, css Path to the css file to read

Returns Object, the new created CCST Object that holds the parsed css dom for further transformations.

##transformSelectorText(op) Transforms the css selectors. transformSelectorText is chainable. Therefore several Transformation can take place.

Parameters op: Object, {[match,] [exclude,] [append,] [prepend,] [replace]}

Returns Object, this CSST object for function chanining.

op Object

{	
	prepend: String,
	append: String,
	replace: [String, String],
	match: String or Regex,
	exclude: String or Regex
}

op Object Description ####prepend prepend will prepend the given string to the selector.

####append append will append the given string to the selector.

####replace replace is an Array where the first element is the String that should be replaced and the second element is the String that will be used as replacement.

####match If match is missing, it matches every selector. If match is provided with a String value, it will be used as contains(). If match is a Regex, it will directly be used in the .match(regex) function.

####exclude Opposite of match. The found selectors will be excluded from the transfomration.

##toString(target) writes the the formatted css to the target file.

Parameters target: String, Path to the target file.

Returns String, The formatted css.

#Tests Run tests with mocha:

mocha