babel-plugin-transform-import-css - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
   "name": "babel-plugin-transform-import-css",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Babel plugin to convert css imports into jss objects",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -1,5 +0,9 @@
-This is a simple babel plugin to inline css into js vis jss.
+Injects imported styles (css-modules) into js.
+Plugin respects webpack css-modules API and postcss config.
 
-This plugin is very much experimental due to use of the Babel6 API - largely undocumented. Contributions are welcome.
+# Requirements
+babel == 6, node >= 8
 
+babel and postcss configs for best results
+
 # Usage
@@ -9,20 +13,46 @@
 
-    babel src/ -d lib/ --presets stage-0,es2015,react --plugins import-css-to-jss
+    babel src/ -d lib/ --presets stage-0,env,react --plugins transform-import-css
 
 Every js file that has a statement such as:
 
-```javascript
-import styles from './styles.css'
+```js
+import classes from './Component.css'
 ```
 
-will be roughtly translated to:
+will be rouroughly translated to:
 
-```javascript
-var styles = {
-    // the css file converted to JSS
+```js
+var classes = {
+    root: 'lib-foo-root-SFs0',
+    // ...
 }
+require('load-styles')('.root{color:red}') // puts styles into head
 ```
 
+# Api
+- `generateScopedName` *optional* css-modules scope template
+
+### Example:
+**.babelrc**:
+```json5
+{
+  "sourceMaps": "inline",
+  "presets": [
+    ["env", {
+      "targets": { "browsers": ["last 2 Chrome versions", "last 1 Safari version"] },
+      "useBuiltIns": false, "modules": false
+    }],
+    "stage-1", "react"
+  ],
+  "plugins": [
+    ["transform-import-css", {
+      "generateScopedName": "lib-[folder]-[name]-[local]-[hash:base64:4]"
+    }]
+  ]
+}
+```
+
 # Use Cases
 
-The only use case of this plugin is to be able to bundle css styles with your js components. It is good for portability.
+Bundling the css with js/react components.
+It is good for portability.

No alert changes

Improved metrics

Total package byte prevSize

182263

increased by0.27%

Number of lines in readme file

58

increased by107.14%

No dependency changes