restyle-lite
Note: this is just restyle stripped of some features:
- We don’t add the generated CSS to the
<head>
of the document. - We don’t add any prefixes.
- We don’t support
restyle.customElement
(it probably wasn’t documented anyway). - We don’t support JS-based animations.
- We don’t support a custom
component
ordocument
. - restyle-lite behaves the same in node and in browsers.
- We’ve got rid of all non-CommonJS builds.
We’ve left all that we need:
const restyle = ; ▸ ;◂ '.a:{margin-top:10px;background-color:blue;}'
new 10 minutes intro about restyle.js in vimeo
This project has been somehow inspired by absurd.js but it is not exactly the same.
You can check restyle specifications or go directly to a face 2 face against absurd but the long story short is that no JavaScript library out there fits in about 1KB and feels as natural as restyle
does in typing CSS.
Good news is, you can choose more now but let's see what's in the menu here ;-)
In A Nutshell
restyle
is a function able to transform the following:
// we are in a browser// defining some style at runtimevar myStyle = { // some function helper { return Math; } // something we could reuse all over { return '#'; } // the fresh new appended style object wrap return ;};
into this runtime appended and generated cross browser CSS style:
@- } @- } @- } @- } @ }
with the ability to drop all those styles at once:
myStyle;
Signature
: String
Specifications
The first Object
parameter in restyle
signature is spec'd as such:
selector any CSS selector
{
body: {
// ...
},
'ul.dat > li:first-child': {
// ...
}
}
property a property name or a group name
{
div: {
// properties
width: 256, // will result in "256px"
transform: 'rotate(360deg)',
background: 'transparent url(image.png) 0 0'
}
}
camelCase will be translated into camel-case
(backgroundImage => background-image)
value the property value or a group of properties
if int, will be set as 'px' value
group key/value properties names/values object
or
an Array of possible values for the property
{
div: {
// group
background: {
color: 'transparent',
image: 'url(image.png)',
position: '0 0'
}
}
}
or
{
'.flexbox': {
// mutiple values
display: [
'-webkit-box',
'-moz-box',
'-ms-flexbox',
'-webkit-flex',
'flex'
]
}
}
special keyframes, media queries,
anything that starts with @
{
div: {
// as before
},
// special selectors
'@keyframes spin': {
// cpecialContent
}
}
specialContent everything supported by restyle as CSS
{
// special selectors
'@keyframes spin': {
// properties => values or groups
'0%': {transform: 'rotate(0deg)'},
'100%': {transform: 'rotate(360deg)'}
},
'@media all and (color)': {
'body': {
background: randomRainbow()
}
}
}
Reason & Benefits
Here a list of bullets to support restyle
idea, grouped by usage.
As DOM Runtime
- all values, groups, and even keys, can be generated at runtime after features detection or states
- all changes are confined in a single style element that can be dropped at any time
- it can be used to style custom components preserving the overall application size
- it fits in less than 1KB minzipped
As node.js module or Preprocessor
- compared to Sass, Stylus, Less, and others, there's nothing new to learn: it's basically JSON that transpile to CSS
- can be used upfront other preprocessors such beautifiers, cross platform transformers, etc.
- CSS can be exported as generic JS modules, with the ability to include, require, and use any sort of utility able to simplify CSS creation, aggregate objects upfront for unified style, anything else you might think would be useful
- it's simple, fast and straightforward
Compatibility
restyle
is compatible with new browsers but also old as IE6 . If in doubt, check the live test- every node.js is able to use
restyle
too as the Travis passing build on top says ;-)
Examples
It is possible to test them directly in this page but here few examples.
// this example code;
It will generate a style with the following content.
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
font-family: sans-serif;
}
section {
margin: auto;
margin-top: 20px;
}
Things become more interesting with more complex CSS and prefixed support:
;
will result in
while this little piece of code:
;
will produce the following
@-}@-}@-}@-}@}
Special Features
There are few tricks hidden in the simple restyle
logic where Array
values are able to combine multiple declarations at once.
multiple values, same property
The most classic example here would be flex-box
mess, simplified through a variable
var flexBox = '-webkit-box' '-moz-box' '-ms-flexbox' '-webkit-flex' 'flex';
reusable whenever it's needed:
;
resulting into the following CSS
multiple styles, same selector
Another example would be mixins or reusable functions in order to define some grouped style and reuse this whenever is needed.
{ return display: '-webkit-box' '-moz-box' '-ms-flexbox' '-webkit-flex' 'flex' ;} { return boxFlex: values flex: values ;} { return boxOrdinalGroup: value flexOrder: value order: value ;};
Above is a restyle
example of ths Sass one showed in CSS tricks.
What Is NOT
Just to be clear what restyle
is not a CSS validator, beautifier, or uglifier, plus it is not responsible or capable of making everything magically works.
As example, flex-box
is not fixed, neither early or non standard implementation of any feature.
However, you can simply combine a common class fix for flex-box and use restyle
to add more or simply specify other properties, there are no implicit limits in what you can write through restyle
.
You are free to fix things indeed by your own, deciding very specific CSS accordingly with the browser if done at runtime or simply trusting other pre-processors if done on the server side with the benefit that the object will be reused in both worlds, as example:
var flexValue = '1 200px' orderValue = 2 flexBox = '-webkit-box' '-moz-box' '-ms-flexbox' '-webkit-flex' 'flex' ; var flex = ;
F.A.Q.
- should I serve all CSS only via
restyle
at runtime? you can do whatever you want. You can combine normal CSS with restyle in order to add special FX only or new features where prefixes are a mess. You can use restyle only to fix things that need to be fixed for browsers that support JS. You can use onlyrestyle
if your app depends on JavaScript so there's no way it's going to be used or useful at all without JS enabled. You chose, don't blame the tool, it's here to help when needed ;-) - what's the difference with absurd.js? by the time I am writing this,
restyle
works better for WebApp development at runtime and wins in size and performance but it cannot compete againstabsurd
on the server side since it does nothing thatabsurd
does, only the object syntax is similar. Bear in mind I've said similar but not identical,absurd.js
is by design not able to solve a property name from a tagName whilerestyle
simply represents CSS without magic involved. - can I use
restyle
for serving both server and client at runtime? Yes, again, you can userestyle
as you wish. On the server, you can use same logic you would apply on the client and maybe chose to serve that pre-processed file inside a noscript as external link, usingrestyle
for all other JS centric cases or for graceful enhancement without compromising the layout. CSS modules can be shared, reused, the same, both pre-processed as CSS behind other pre-processors. Go wild, still respect your site/app users ;-) - didn't Netscape with JSSS ... bla bla? probably you didn't read what
restyle
is, neither what JSSS proposal was. Please take a minute to understand again what is this about, and feel free to use JSSS if you think that's even an option.
If you have any hint about some syntax that could improve restyle
ease please let me know, thanks.