csssearch
v0.0.1
Published
Search engine for utility-based stylesheets.
Downloads
11
Readme
csssearch
This library uses postcss
and fuse.js
to parse and create a search function, given a CSS stylesheet.
It's intended to be used to create UIs to search for styles in utility libraries such as tachyons
, tailwindcss
, etc...
csssearch is not / does not include:
- An ajax solution to load stylesheets from URLs
- A filesystem solution to load stylesheets from the file system
- A super web-optimized library (although it might be a nice-to-have addition in the future)
- A parser that is guaranteed to understand SCSS input (or any other CSS flavour).
csssearch is:
- A library that works both in node and in a web browser
- A searcher that matches class names, property names and property values inside a stylesheet.
Usage
In Node
let cssSearch = require("path/to/csssearch.js");
let cssString = `
.color-red { color: red; }
.color-green { color: green; }
`;
let search = cssSearch(cssString);
let result = search("red");
console.log(result); /*
[
{
selector: '.color-red',
props: [ { prop: 'color', value: 'red' } ],
mediaQuery: null
},
]
*/
In the browser
Load dist/csssearch.js
in your website, and call the css search function like you would in node.
let search = cssSearch(cssString);
let result = search("red");