• Stars
    star
    119
  • Rank 297,930 (Top 6 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 7 years ago
  • Updated about 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A flexible <style>-tag based CSS reprocessor

reproCSS

A flexible CSS reprocessor using <style> tags

Can you imagine if you could interpolate JS inside CSS with the ${} syntax, and also control when and how frequently that CSS reprocessed with a process="" attribute on the <style> tag:

<style process="none"></style>
<style process="once"></style>
<style process="auto"></style>
<style process="touchstart mousedown"></style>

If you are using reproCSS with custom events, you may also optionally use a selector attribute specify a list of one or more CSS selectors you would like to add event listeners for. If no selector attribute is found all custom events will be applied to window.

<style process="click" selector="#any, .css, [selector]"></style>

You can add the CSS you want reprocss.js to apply to your HTML in <style> tags with the following values on the process attribute:

  • none means no reprocessing
  • once means process immediately and never again
  • auto runs every resize, input, and click event on window
  • any space-separated list of JS events you wish to listen for

How to use reproCSS

Github

Include the reprocss.js JavaScript plugin in your HTML:

<script src="reprocss.js"></script>

npm

If you are using reproCSS on NPM you can include it in your JS modules with a line like this:

const reprocss = require('reprocss')

How to write reproCSSed CSS

To evaluate JavaScript inside the CSS as it's being reprocessed by reprocss.js you can use the ${} interpolation syntax. The following <style> tag would always ensure the <div> in this example was half of the window's height:

<style process="auto">
  div {
    height: calc(${innerHeight}px / 2);
  }
</style>

When the browser is 1000px tall the ${innerHeight} in our CSS will be output as 500, leading to the following output:

<style process="auto">
  div {
    height: calc(500px / 2);
  }
</style>

Currently this plugin only supports <style> tags, but it may be possible to support CSS loaded via <link> with a similar technique.

Examples

Interpolating JS-supplied values in CSS content:;

<div>Hello</div>

<script>
  var user = 'Username'
</script>

<style process="once">
  div:after {
    content: ' ${user}';
  }
</style>

Element Queries via a JS Selector Resolver

<div id="demo">
  <p>Hello</p>
</div>

<style process="resize">
  ${demo.offsetWidth > 400 && "#demo"} {
    background: lime;
  }
  ${demo.offsetWidth > 400 && "#demo"} p {
    color: red;
  }
</style>

JS interpolation in CSS

<textarea id="demo"></textarea>

<style process="input">
  #demo {
    background: hsl(${demo.value.length}, 50%, 50%)
  }
</style>

Demos

Mixins

Writing mixins for reproCSS is easy, any JavaScript function that outputs code that can be used in CSS can be called from anywhere in the stylesheet reproCSS is processing using JS interpolation with ${}.

An example of a common mixin template might look like this:

function mixin(selector, rule) {

  // Find tags in document matching selector
  var tag = document.querySelectorAll(selector)

  // Begin with an empty style
  var style = ''

  // Begin counting matching tags at 0
  var count = 0

  // For each tag matching our selector
  for (var i=0; i<tag.length; i++) {

    // Create an identifier based on the selector used
    var attr = selector.replace(/\W+/g, '')

    // Mark tag with a custom attribute containing identifier and count
    tag[i].setAttribute('data-mixin-' + attr, count)

    // Add a copy of the CSS rule to the style using a selector for this tag's unique attribute
    style += '\n[data-mixin-' + attr + '="' + count + '"] {\n'
             + '  ' + rule + '\n'
             + '}\n'

    // Increment the tag counter by +1
    count++

  }

  // Return all generated styles as CSS text
  return style

}

If you were going to create a mixin starting from the template above the first thing you'd want to do is change the function name (currently mixin()) to something unique, as well as update the mentions of mixin inside the mixin logic where it's used to name the elements the mixin is styling, data-mixin. Once you have changed the name of the function, you can pass a CSS selector or a list of CSS selectors into to the plugin, along with CSS properties and values as a string to be processed and added to new rules. This basic template can be extended in many ways to support different things. Here are some examples of reproCSS mixins and helper functions:

Aspect Ratio Mixin

This mixin lets you to define an aspect ratio for elements.

syntax

aspectRatio('iframe', 16/9)

output

/* iframe { aspect-ratio: 1.77; } */
[data-aspect-ratio-unique="0"] {
  height: 503px;
}

demo

XPath Selector Mixin

This mixin lets you use XPath as a selector for CSS rules.

syntax

xpath('//*', `
  border: 1px solid red;
`)

output

/*

//* {
  border: 1px solid red;
}

*/
[data-xpath-unique="0"] {
  border: 1px solid red;
}

demo

Auto Expand Mixin

This mixin lets you choose between auto-expanding an element's width and height to match its scrollWidth or scrollHeight. Available keywords are width, height, and both.

syntax

autoExpand('textarea', 'height')

output

/* textarea { height: auto-expand; } */

demo

Container Queries Mixin

This mixin lets you define a 'container' using a CSS selector, run a JavaScript test against matching tags that match the container's selector, and to apply a CSS rule to that container or its children.

syntax

container('div', 'this.offsetWidth > 500', 'span', 'background: lime;')

output

/* div(this.offsetWidth > 500) span */
[data-container-unique="0"] span {
  background: lime;
}

demo

Scoped Eval() Mixin

This mixin lets you define a CSS selector list, and to output CSS rules with JS interpolation from the context of each element in the document matching the selector.

syntax

scoped('div', `
  margin: 1em;
  background: lime;
  height: eval(this.offsetWidth / (16/9))px;
`)

output

/* Scope: div */
[data-scoped-unique="0"] {
  margin: 1em;
  background: lime;
  height: 144.5625px;
}

demo

Parent Selector Mixin

This mixin lets you define a CSS selector list and apply a CSS rule to the parent node of any matching tags in your document.

syntax

parent('li', 'border: 1px solid red;')

output

/* li:parent */
[data-parent-unique="0"] {
  border: 1px solid red;
}

demo

Prev Selector Mixin

This mixin lets you define a CSS selector list and apply a CSS rule to the previous sibling node of any matching tags in your document.

syntax

prev('li:nth-of-type(2)', 'background: lime;')

output

/* li:prev */
[data-prev-unique="0"] {
  background: lime;
}

demo

Closest Selector Mixin

This mixin lets CSS authors apply styles to the nearest element matching a CSS selector to another element matching a given CSS selector. You can use this to find the nearest matching ancestor.

syntax

closest('#start', '.target', `border-color: lime`)

output

/* #start:closest(.target) */
[data-closest-unique="0"] {
  border-color: lime
}

demo

Ancestor Selector Mixin

This mixin lets CSS authors apply styles to all ancestor elements matching a CSS selector to another element matching a given CSS selector. You can use this to style all matching ancestors.

syntax

ancestor('#start', '.target', `border-color: lime`)

output

/* #start:ancestor(.target) */
[data-ancestor-unique="0"] {
  border-color: lime;
}

demo

Elder Selector Mixin

This mixin lets CSS authors apply styles to all elder siblings of elements matching a CSS selector.

syntax

elder('.target', 'background: lime;')

output

[data-elder-unique="0"] {
  background: lime;
}

demo

Made with โ™ฅ by @innovati

More Repositories

1

element-queries-spec

A spec for a Container-Style Element Query Syntax
HTML
368
star
2

dragon

dragon.js is a bookmarklet that lets you drag any element on a website using a mouse or touchscreen. The goal is to speed up in-browser design critiques and brainstorming new layout ideas.
CSS
144
star
3

preset

A simple CSS preset for 2020
CSS
144
star
4

cssplus

CSSplus is a collection of CSS Reprocessor plugins that dynamically update CSS variables
JavaScript
142
star
5

quark

Quark.js is a microscopic atomic CSS polyfill in JS just 140 bytes
HTML
97
star
6

liveeditor

A simple live HTML, CSS, and JavaScript scratchpad in your browser
HTML
88
star
7

qss

QSS โžธ a simple query syntax for CSS element queries
HTML
85
star
8

computed-variables

Easy to use event-driven CSS variables
JavaScript
80
star
9

jsincss

A JS-in-CSS stylesheet loader
JavaScript
51
star
10

boilerstrap

Boilerstrap is a WordPress theme based on the Twenty Twelve theme from Wordpress.org that includes support for Bootstrap, FontAwesome icons, custom typography, jQuery, keyboard shortcuts, & much moreโ€ฆ
PHP
35
star
11

deqaf

Decaffeinate CSS stylesheets client-side
JavaScript
30
star
12

tinkerpad

Tinkerpad is an HTML, CSS, and JavaScript scratchpad similar to jsFiddle. Tinkerpad is written as an offline-capable HTML5 web app and requires no external dependencies.
HTML
30
star
13

caffeinated-style-sheets

Extend .css with JavaScript the easy way!
27
star
14

css-package-manager

A Package Manager for CSS Extensions
26
star
15

extstyler

Empty Chrome extension to add custom CSS or JavaScript on top of websites, ready to drop in your user styles and scripts
JavaScript
23
star
16

qaffeine

Decaffeinate your JS-powered CSS stylesheets
JavaScript
22
star
17

cheq

A command-line checklist app
JavaScript
17
star
18

wordpresto

Download, configure, and install Wordpress with one easy script
Shell
15
star
19

varius

Exposing properties of HTML elements as CSS variables
HTML
12
star
20

memopad

Memo Pad is a simple memo pad that saves your notes to localStorage, as well as allows you to share notes via URL
HTML
12
star
21

slinky

Add JavaScript tests to <link> tags to toggle stylesheets
HTML
11
star
22

js-in-css

A Pattern for simple Event-Driven Virtual Stylesheets: 100% CSS plus the expressive power of JavaScript
HTML
11
star
23

fartcss

Functional And Responsive Template is a utility class framework that uses element queries
HTML
10
star
24

parse-css

A standards-based CSS parser - forked from tabatkins/parse-css
JavaScript
9
star
25

theremin

Theremin app built using JavaScript
HTML
9
star
26

responsive.style

A Fresh Approach to Extending CSS
HTML
9
star
27

speedtest

SpeedTest is an HTML5 app that lets you test websites at a variety of resolutions very quickly. It also works on mobile, which allows you to test websites at a variety of widths on a phone or tablet where you can't normally change the width of the browser.
HTML
8
star
28

aspect-ratio-spec

A spec for an aspect-ratio property in CSS
HTML
8
star
29

cssomtools

The 'jQuery-for-the-CSSOM', a library for working with CSS stylesheets and rules in the browser
JavaScript
8
star
30

js1k-arecibo

The Arecibo Message - for JS1K 2017
HTML
7
star
31

jsts-engine

Interpolate JavaScript Template Strings
JavaScript
6
star
32

process-css-demo

A simple CSS preprocessor to demonstrate supporting custom at-rules, selectors, properties, functions, and units
JavaScript
6
star
33

basic-website-starter

A basic HTML/CSS/JS website with a simple toolchain: none
HTML
6
star
34

css-tests

Examples of CSS syntax for testing purposes
CSS
6
star
35

qaffeine-demo

A demo site of qaffeine
CSS
5
star
36

stringify-css-stylesheet

Convert a CSSStyleSheet object to a string of text
HTML
5
star
37

eqcss-compiler

A compiler to turn EQCSS syntax into equivalent (vanilla) JavaScript
JavaScript
5
star
38

5keleton

This is a blank HTML5 template with Bootstrap, jQuery, and FontAwesome already integrated. Includes meta tags for OpenGraph, iOS browsing, icons (including favicon), Windows Live Tile, and the usual keywords and description. Includes .htaccess and robots.txt as well. This is ready for you to clone and kickstart your next HTML project!
ApacheConf
5
star
39

template-factory

The Template Factory is a small website template written simply in PHP, HTML, CSS and JavaScript. Powered by EQCSS for element queries, plus lightweight plugins for tooltips, modals, notifications, and more!
CSS
5
star
40

custom-css

Examples of custom CSS
CSS
4
star
41

sbv

Read Youtube .SBV caption files and convert to JSON, text, or HTML
JavaScript
4
star
42

tweetcruncher.com

Tweet Cruncher
HTML
4
star
43

sourceror

Sourceror lets you view the source of any web page using a PHP proxy.
HTML
4
star
44

unicons

Unicons.css is a CSS file to make adding unicode characters to HTML in a semantic and easy to use way. Because Unicons.css is so lightweight you can include just one file to supplement or replace other icon font solutions on your site like FontAwesome
HTML
4
star
45

cascading-js-variables

Cascading JS Variables with a similar syntax and usage to CSS Variables, implemented in JavaScript
HTML
4
star
46

anesthetic

Nesting CSS rules inside custom properties
JavaScript
3
star
47

repl

A Web REPL for sketching out ideas
HTML
3
star
48

jsincss-has-selector

A :has() selector plugin for jsincss
JavaScript
3
star
49

jsincss-element-query

An element query plugin for jsincss
JavaScript
3
star
50

csson

Using a strict subset of CSS syntax as a superset of JSON
JavaScript
3
star
51

querious

A pure-JavaScript element query demonstration using data attributes for syntax, and applied via classes
HTML
3
star
52

bil

Basic Instruction Language
HTML
3
star
53

alijn

Alijn is a script that puts some JavaScript smarts behind your responsive CSS styles. Calculate the CSS values for tricky layout functions like vertical centering or hortizontal centering in realtime.
JavaScript
3
star
54

espath

Query deeply nested JavaScript objects with XPath
HTML
2
star
55

mathpad

Magic Mathpad: a live JavaScript calculator
HTML
2
star
56

intimateoccasions.ca

Celebrating Life's Special Moments
HTML
2
star
57

htmlforever

HTML templating helper functions written in a Continuation-Passing Style for JavaScript, Python, and Ruby
Python
2
star
58

style-container

A way to re-use CSS for scoped styles and container queries in HTML
JavaScript
2
star
59

apophany

a pattern matcher
JavaScript
2
star
60

deno-test

Begin app
TypeScript
2
star
61

deck

Deck of playing cards in HTML, CSS, and JavaScript
HTML
2
star
62

piano

HTML5 synth app for iPad
HTML
2
star
63

respec

respec allows CSS authors to assign the specificity of a rule separately from the specificity of the selector
HTML
2
star
64

sugarfree

JavaScript
2
star
65

css-overlay-snippet

A live CSS debugging stylesheet you can copy/paste into the browser's JS console
HTML
2
star
66

element-match-media

Parse media queries from the context of an element. Like window.matchMedia() but for HTML elements.
HTML
2
star
67

browserstack-app

A simple electron app for browserstack.com
JavaScript
2
star
68

loqui

Style your console.log() messages with ease
JavaScript
1
star
69

learncss

Docs for ##learncss on freenode
1
star
70

jsincss-overflow

An overflow-detecting plugin for jsincss
JavaScript
1
star
71

jsincss-elder-selector

An elder selector plugin for jsincss
JavaScript
1
star
72

jsincss-regex-match

A regex matching plugin for jsincss
JavaScript
1
star
73

domtools

HTML
1
star
74

cyfer

Cyfer - A Chrome Extension that skins gli.ph conversations
CSS
1
star
75

mixin-macros

String combinators designed to help the creation of jsincss plugins
JavaScript
1
star
76

jsincss-xpath-selector

A jsincss plugin that lets you select elements to style using XPath selectors
JavaScript
1
star
77

jsincss-element-units

An element unit plugin for jsincss
JavaScript
1
star
78

synth

Just a simple WebAudio synth. No reason. What could go wrongโ€ฆ
JavaScript
1
star
79

jsincss-parent-selector

A parent selector plugin for jsincss
JavaScript
1
star
80

queryxpath

Simple queryXPath() and queryXPathAll() functions for JavaScript
HTML
1
star
81

onebuttoncdn

OneButton CDN, the easiest tool for updating Bootstrap 3.0, FontAwesome, and jQuery on your own server
PHP
1
star
82

loadjs

LoadJS lets you share JavaScript on Twitter by encoding it as a URL to share
HTML
1
star
83

freshstart

Static HTML site built using HTML5, CSS, and JavaScript. No frameworks, no bootstrap, no jQuery.
HTML
1
star
84

jsincss-string-match

A string matching plugin for jsincss
JavaScript
1
star
85

domforever

DOM templating helper functions written in a Continuation-Passing Style
JavaScript
1
star
86

bengalcat.party

It's a bengal cat party!
HTML
1
star
87

hade

HTTPArchive DOM Explorer CLI tool
JavaScript
1
star
88

tomhodgins.com

Website for Tom Hodgins
1
star
89

symbolix

Symbolic expression parsing for JavaScript
HTML
1
star
90

process-css

A CSS processor with a simple plugin design that can process CSS server-side and client-side into CSS, JS, and other file output
JavaScript
1
star
91

mini-container-queries

A <200 byte container query plugin
HTML
1
star
92

parse-css-stylesheet

Parse a string of text as a CSS stylesheet with JavaScript in the browser environment
HTML
1
star