jss-from-postcss - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

package.json

 {
   "name": "jss-from-postcss",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Empower your JSS styles by using the best bits of PostCSS with all plugins and ecosystem",
@@ -18,6 +18,16 @@ "main": "lib/index.js",
   "keywords": [
-    "react",
     "css",
     "css-in-js",
-    "postcss"
+    "postcss",
+    "rework",
+    "jss",
+    "styled-components",
+    "stylesheets", 
+    "jss-from-css",
+    "jss-from-postcss",
+    "scss",
+    "sass",
+    "less",
+    "stylus",
+    "sugarss"
   ],
@@ -24,0 +34,0 @@ "author": "Axept <[e-mail]>",

README.md

@@ -9,8 +9,17 @@ # jss-from-postcss
 
-Fast, predictable and fully customized PostCSS-to-JSS adapter. 
+Fast, predictable and fully customized PostCSS-to-JSS adapter which uses [Tagged Template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals) (a recent addition to JavaScript/ES6).
 
 It close to "Drop-in Replacement" for your SCSS/LESS/CSS Modules/Stylus to use it as JSS  "on-the-fly".
 
-Supports Server-side Rendering (SSR) and run-time execution. [Fast run-time execution](https://github.com/axept/babel-plugin-jss-from-postcss).
+Supports:
 
++ React.js for Web
++ React Native (WIP)
++ Server-side Rendering (SSR)
++ Run-time execution
++ [Fast run-time execution by pre-compilation](https://github.com/lttb/babel-plugin-prejss)
++ Theming  (WIP)
++ Linting (WIP)
++ Syntax highlighting (WIP)
+
 ## Content
@@ -21,2 +30,3 @@
 + [Adapters](#adapters)
++ [Precompilation](#precompilation)
 + [Inspiration](#inspiration)
@@ -90,12 +100,66 @@
 
-const { classes } = jss.createStyleSheet(styles({
+const buttonStyles = styles({
   defaultColor: 'navy',
-}).attach()
+})
 
+
+// Vanilla JS Example
+const { classes } = jss.createStyleSheet(buttonStyles).attach()
+
 document.body.innerHTML = `
-  <button class="${classes['button']}">Button</button>
-  <button class="${classes['ctaButton']}">CTA Button</button>
+  <div>
+    <button class="${classes.button}">Button</button>
+    <button class="${classes.ctaButton}">CTA Button</button>
+  </div>
 `
+
+// Or React.js Example
+import injectSheet from 'react-jss'
+
+const buttons = ({ button, ctaButton }) => (
+  <div>
+    <button className={button}>Button</button>
+    <button className={ctaButton}>CTA Button</button>
+  </div>
+)
+
+export default injectSheet(buttonStyles)(Button)
 ```
 
+### Result
+
+The example above makes `styles` as a function which looks like:
+
+```javascript
+// ...
+const styles = (context) => {
+  const button = {
+    color: (context) => context.defaultColor || 'palevioletred',
+    display: 'block',
+    margin: '0.5em 0',
+    fontFamily: 'Helvetica, Arial, sans-serif',
+
+    '&:hover' {
+      textDecoration: 'underline',
+      animation: rotate360 + ' 2s linear infinite',
+    }
+  }
+  
+  const ctaButton = {
+    ...buton,
+    
+    '&:hover' {
+      background: color('blue').darken(0.3).hex(),
+    }
+  }
+  
+  return { button, ctaButton }
+}
+
+const buttonStyles = styles({
+  defaultColor: 'navy',
+})
+// ...
+```
+
 ## Adapters
@@ -156,4 +220,11 @@
 
+
+## Precompilation
+
+It's not great idea to parse CSS in run-time on client-side. And you don't have to do it because there is a great [babel-plugin-prejss](https://github.com/axept/babel-plugin-prejss) which make it possible to process your source code and transform specified PostCSS styles to callback functions.
+
+[See how it works](https://github.com/lttb/babel-plugin-prejss#how-it-works)
+
 ## Inspiration
 
 + https://github.com/styled-components/styled-components

No alert changes

Improved metrics

Total package byte prevSize

12400

17.66%

Number of lines in readme file

227

45.51%

No dependency changes