Package Exports

jsincss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jsincss) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

jsincss

A JS-in-CSS stylesheet loader

About

This plugin is a JavaScript module that loads JS-in-CSS stylesheets, manages the creation of <style> tags to output the processed stylesheets, and registers event listeners for reprocessing loaded stylesheets when changes occur in the browser.

Downloading

You can download jsincss and add it to your codebase manually, or download it with npm:

npm install jsincss

Another option that works for building or testing, that isn't ideal for production use, is linking to the module directly from a CDN like unpkg:

<script type=module>
  import jsincss from 'https://unpkg.com/jsincss/index.vanilla.js'
</script>

Importing

You can import the plugin into your own JavaScript modules in a couple of ways.

The first way is using the native import statement in JavaScript. Here you can assign any name you want to the function you are importing, and you only need to provide a path to the plugin's index.vanilla.js file:

import jsincss from './node_modules/jsincss/index.vanilla.js'

You can also use require to load this plugin instead with a bundler like Webpack or Parcel:

const jsincss = require('jsincss')

Once you have imported this plugin into your module, you can use the plugin as jsincss()

Using JS-in-CSS Stylesheets

The main goal of this plugin is to let people using a JS-in-CSS workflow load JIC stylesheets inside of a JavaScript module.

The plugin has the following format:

jsincss(stylesheet, selector, events)

stylesheet is a JavaScript function that returns a CSS stylesheet as a string
selector is string containing either 'window' or a CSS selector
events is an array of events to add event listeners for, quoted as strings: (eg. ['load', resize'])

The default selector is window, and the default list of events is ['load', 'resize', 'input', 'click'].

You can also create and listen for custom events with JavaScript using new Event() and dispatchEvent() for total control over when jsincss reprocesses styles.

Example

This example uses the default selector and events list, and provides the stylesheet inline.

<script type=module>
  import jsincss from 'https://unpkg.com/jsincss/index.vanilla.js'

  jsincss(() => `

    body:before {
      content: '${innerWidth} x ${innerHeight}';
    }

  `)
</script>

It's also possible to write your stylesheets as a separate JavaScript module like this:

export default () => `

  body:before {
    content: '${innerWidth} x ${innerHeight}';
  }

`

And then import both the jsincss plugin and the stylesheet into your module and run them like this:

import jsincss from 'https://unpkg.com/jsincss/index.vanilla.js'
import stylesheet from './path/to/stylesheet.js'

jsincss(stylesheet)

jsincss

Package Exports

Readme

jsincss

About

Downloading

Importing

Using JS-in-CSS Stylesheets

Example

Compatible JS-in-CSS Plugins