https://github.com/refi64/scopify

A Dart library for compiling scoped styles
https://github.com/refi64/scopify

Last synced: 5 months ago
JSON representation

A Dart library for compiling scoped styles

• Host: GitHub
• URL: https://github.com/refi64/scopify
• Owner: refi64
• License: mit
• Created: 2017-09-26T21:40:33.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-09-10T21:19:09.000Z (almost 8 years ago)
• Last Synced: 2025-03-16T01:41:27.635Z (over 1 year ago)
• Language: Dart
• Homepage: https://pub.dartlang.org/packages/scopify
• Size: 4.88 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# scopify

**scopify** implements scoped styling in a manner similar to HTML5 and Vue. It processes

the given HTML nodes and CSS stylesheets in-place, adding specialized attributes that

make sure the CSS can only ever modify the given HTML.

## Example

```dart

import 'package:csslib/parser.dart' as css;

import 'package:csslib/visitor.dart' show CssPrinter;

import 'package:html/parser.dart' as html;

import 'package:scopify/scopify.dart';

void main() {

  var myCss = 'p#my-id { color: purple; }';

  var myHtml = '
purplified text here
';


  // First, we have to parse the CSS and HTMl text.

  var style = css.parse(myCss);

  var node = html.parse(myHtml);

  // Now, we can call scopify. It takes two arguments: a list of HTML nodes, and a list of CSS

  // stylesheets to process.

  scopify(html: [node], css: [style]);

  // The HTML and CSS parse trees were modified in-place. Now, the CSS will only ever modify this

  // HTML code, even when combined with other HTML code.

  // To get the resulting HTML:

  var resultHtml = node.outerHtml;

  print(resultHtml);

  // and CSS:

  var printer = new CssPrinter();

  style.visit(printer);

  var resultCss = printer.toString();

  print(resultCss);

}

```