- Notifications
You must be signed in to change notification settings - Fork13
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.
License
kodyl/stilr
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Encapsulated styling for your javascript components with all the power ofjavascript and CSS combined.
- Unique class names (Content Hash Based)
- Useable on the server
- Allows nested pseudo selectors
- Allows nested media queries
- No namespacing / Class name collisions.
- Plays nicely with React Hot Loader and autoprefixer.
...oh, and did I mention you get duplicate style elimination for free?
Note: This library fits really nice withReact but should work with other libraries likeAngular 2 orDeku
Stilr extracts the styles from the style object and returns an object with thesame keys mapped to class names.
Example
importStyleSheetfrom'stilr';constpalm='@media screen and (max-width:600px)';conststyles=StyleSheet.create({container:{color:'#fff',':hover':{// Pseudo Selectors are allowedcolor:'#000'},[palm]:{// Media Queries are allowedfontSize:16,':hover':{color:'blue'// Pseudo selectors inside media queries.}}}});console.log(styles.container);// => '_xsrhhm' -- (The class name for this style.)
Stilr outputs the contents of its internal stylesheet as a string of css
Example
importStyleSheetfrom'stilr';StyleSheet.create({container:{color:'#fff'}});constCSS=StyleSheet.render();console.log(CSS);// => '._yiw79c{color:#fff;}'
Clear Stilr internal stylesheet
Example
importStyleSheetfrom'stilr';conststyles=StyleSheet.create({container:{color:'#fff'}});StyleSheet.clear();constCSS=StyleSheet.render();console.log(CSS);// => ''
Let's start of by creating our styles. If you have ever used React Native, thiswill be familiar to you:
importStyleSheetfrom'stilr';import{palm}from'./breakpoints';import{color,font}from'./theme';conststyles=StyleSheet.create({base:{transition:'background-color .25s',borderRadius:2,textAlign:'center',fontSize:20,padding:6,color:'#fff',border:`${color.border} 1px solid`,[palm]:{fontSize:18}},primary:{backgroundColor:color.primary,':hover':{color:'tomato'}},secondary:{backgroundColor:'tomato',color:'#eee'}});
Stilr will now generate a set of class names based on the content of your stylesand return an object with the same keys mapped to those classes.
Note that you're able to use pseudo selectors and media queries.Pseudo selectors are written like you normally would in CSS, e.g.::hover,:active,:before etc.Media queries are the same, e.g.palm in the example is just a string:@media screen and (max-width:600px). Any valid media query is allowed.
Since we just have a bunch of class names now, we can use these in our ReactComponent.
importReact,{PropTypes}from'react';classButtonextendsReact.Component{staticpropTypes={type:PropTypes.oneOf(['primary','secondary'])}render(){const{ type, children}=this.props;constbuttonStyles=[styles.base,styles[type]].join(' ');return(<buttonclassName={buttonStyles}>{children}</button>);}
Next up, let's render our css and mount our app:
importReactfrom'react';importButtonfrom'./button';importStyleSheetfrom'stilr';React.render(<Buttontype='primary'/>,document.getElementById('root'));document.getElementById('stylesheet').textContent=StyleSheet.render();
This step could also have been done on the server. Since StyleSheet.render justreturns a string of css. In our case, it would look something like this in aprettified version:
@media screenand (max-width:600px) { ._82uwp6 {font-size:18px; }}._82uwp6 {transition: background-color.25s;border-radius:2px;text-align: center;font-size:20px;padding:6px;color:#fff;border:#fff1px solid;}._11jt6vs:hover {color: tomato;}._11jt6vs {background-color: red;}._1f4wq27 {background-color: tomato;color:#eee;}
In case you were wondering: Yes, this would would be an ideal place to add something like autoprefixer, minification etc.
importStyleSheetfrom'stilr';conststyles=StyleSheet.create({same:{fontSize:18,color:'#000'},sameSame:{fontSize:18,color:'#000'}});console.log(styles.same);=>'_1v3qejj'console.log(styles.sameSame);=>'_1v3qejj'
...magic.
Under the hood, stilr creates class names based on a content hash of your style objectwhich means that when the content is the same, the same hash will always bereturned.
If you do serverside rendering, you should be able to extract your styles right after you load your app.
importReactfrom'react';importStyleSheetfrom'stilr';importAppfrom'../your-app.js';constcss=StyleSheet.render();consthtml=React.renderToStaticMarkup(<App/>);// Extract css to a file or insert it in a file at the top of your html document
Apply autoprefixer here, or other preprocess goodness here.If you're really fancy, you only do the required autoprefixes based on the user agent.
When working with Stilr in development, the preferred way to extract styles would be the following way, just before you initialize your app.
importAppfrom'../app';importReactfrom'react';importStyleSheetfrom'stilr';letstylesheet=document.createElement('style');stylesheet.textContent=StyleSheet.render();document.head.appendChild(stylesheet);React.render(<App/>,document.getElementById('root'));
If you're usingReact Hot Loader. Use the following approach in development to get hot loading styles and autoprefixer awesomeness.
importReactfrom'react';importStyleSheetfrom'stilr';importautoprefixerfrom'autoprefixer';importpostcssfrom'postcss';// Make sure you have a style element with the ID: 'stylesheet' in your html.conststylesheet=document.getElementById('stylesheet');classAppextendsReact.Component{render(){if(process.env!=='production'){constprefixedCSS=postcss(autoprefixer()).process(StyleSheet.render()).css;stylesheet.textContent=prefixedCSS;}return( ...snip...);}}
If you're using Webpack, you have to addnode: { fs: 'empty' } to your config file. Otherwise autoprefixer will throw an error when trying to use it on the client.
Add this as a build step in your makefile.
extract-styles:@node -p"require('babel/register')({ignore: false}); var s = require('stilr'); require('./your-app.js'); s.render()"> ./bundle.css
The following snippet can also be executed anywhere to extract the styles.Remember to replace./your-app.js with the entry file of your app.node -p "require('babel/register')({ignore: false}); var s = require('stilr'); require('./your-app.js')
- Remove React as a dependency
- More examples
About
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors9
Uh oh!
There was an error while loading.Please reload this page.