Home

Quick Start!

The CSSOBject.js is a package writted in Javascript Vanilla! you can parser stylesheets and css codes.

Usage

Simple Usage

The fast way is using UNPKG link:

<script src="https://unpkg.com/cssobjectjs@latest/cssobject.js"></script>

sample code:

// normal
const cssobj = new CSSObject()

// get local stylesheets
cssobj.local(style => {
    // parsed local style!
    console.log(style)
})

// get external stylesheets
cssobj.external(style => {
    // parsed external style!
    console.log(style)
})

// static stylesheet
cssobj.static(".blob { background-color: #d7d7d7; }", style => {
  // parsed static style
  console.log(style)
})

or use alias CSSObj to CSSObject instance:

// using alias
CSSObj.options({load_min: false})
  .local(style => console.log(style))
  .external(style => console.log(style))
  .static(".blob { background-color: #d7d7d7; }", style => console.log(style))

Full Usage Mode

In your html, use type="module" in <script> tag:

<script src="./main.js" type="module"></script>

In main.js you can use CSSObject to get local stylesheets, styles inside <style> tag in your HTML, or external stylesheets (link), see:

import CSSObject from "CSSObject/CSSObject.js"


// instace CSSObject
let cssobj = new CSSObject()

// get local stylesheets
cssobj.local(style => {
  // parsed local style!
  console.log(style)
})

// get external stylesheets
cssobj.external(style => {
  // parsed external style!
  console.log(style)
})

the external method use a callback in promise, so it has a short call delay...

You can use the method .options(), to filter external stylesheets

cssobj.options({
  load_min: false, // '.min.css' (default is `true`)
  ignore_files: [], // ignored if `only_files` not empty
  only_files: []
}).external(style => {
  console.log(style)
})

the options object can also be passed in CSSObject constructor, and haven't effect for local stylesheets