https://github.com/plotdb/csscope

add custom scope to any css. Use browser thus only works in browsers.
https://github.com/plotdb/csscope

Last synced: about 2 months ago
JSON representation

add custom scope to any css. Use browser thus only works in browsers.

• Host: GitHub
• URL: https://github.com/plotdb/csscope
• Owner: plotdb
• Created: 2020-12-07T06:21:49.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-28T00:04:50.000Z (over 1 year ago)
• Last Synced: 2024-09-23T07:37:18.287Z (3 months ago)
• Language: JavaScript
• Size: 892 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# csscope

add custom scope to any css. Use browser thus only works in browsers.

## Usage

install via npm:

    npm install --save @plotdb/csscope

then, include `csscope.js`, and convert css as follow:

    scopedCSS = csscope("desired-scope-name", "your-css-code")

or, with object as option:

    scopedCSS = csscope({css: "your css code", name: "desired-scope-name", scopeTest: "..."})

or, create a converter to convert:

    scope = new csscope.converter({ scopeTest: '...' });

    var scopedCSS = scope.convert({ ... });

options:

 - name: scope name. should be a valid name for CSS class and CSS animation name.

 - rule: optional. rule for matching the given scope name. by default `.your-scope-name`

 - scopeTest: optional. selector for testing boundary of scope.

 - css: css code to scope.

## Scope Testing

`scopeTest` is a css selector rule for which if certain node matches then it's the root of a scope.

This is used to identify scope boundary in DOM, according how users label and identify the root element of scopes by their implementation.

For example, following DOM ( in Pug ) use `[ld-scope]` to separate each scope:

    div(ld-scope,scope-id="0a2c92a0e7e82")

      h2 This is the root scope.

      div(ld-scope,scope-id="4c26846e44f68")

        h2 This is a child scope.

when we specify `scopeTest` option, we can ensure that the style for `h2` element in the parent won't affect `h2` element in its child.

`scopeTest` is by default `undefined` (or by default the value specified in option when calling `csscope.converter` constructor), in this case there is no scope boundary so all parent rules penetrate into their children.

## Scope Root

To style element of scope root, simply use `:scope` pseudo class:

    :scope { background: #000; color: #fff}

csscope will replace `:scope` with the corresponding scope selector.

## csscope.manager

use `csscope.manager` for managing library version and cache. usage:

    csm = new csscope.manager(options)

where `options` is an object with following posisble fields:

 - `registry`: a registry object telling manager how to fetch requested resource. can be either

   - a string. `csscope.manager` uses it as a root path to construct a resource URL.

   - a function accepting `{name, version, path}` parameters. return an URL for specific module

   - an object, with following fields:

     - `url({name, version, path})`: return an URL for specified item.

     - `fetch({name, version, path})`: optional, return `{version, content}` for specified item.

       - `version`: exact version of the returned content

       - `content`: content of the requested resource

   - for more information, check `@plotdb/block` and `@plotdb/registry` module.

## Pre bundling (WIP)

Generate js / css files and use `csscope.cache` to preload assets. 

Load from JS:

    csscope.cache({inited: false, code: 'scoped-css-code', scope: 'scope-name'});

Load from CSS:

    script csscope.cache({inited: true, scope: 'scope-name'});

    style: include bundle.css

## Todo

Test against all major browsers.

## License

MIT