@hqjs/babel-plugin-transform-css-imports - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

index.js

@@ -11,2 +11,51 @@ const notCssImport = modName => !/.*\.(css|scss|sass|less)$/m.test(modName);
 
+const determineLeftExpression = (t, node) => {
+  if (isDestructuredImportExpression(t, node)) {
+    return buildObjectPatternFromDestructuredImport(t, node);
+  }
+
+  const [specifier] = node.specifiers;
+
+  return t.identifier(specifier.local.name);
+};
+
+const buildObjectPatternFromDestructuredImport = (t, node) => {
+  const properties = node.specifiers.map(specifier => t.objectProperty(
+    t.identifier(specifier.imported.name),
+    t.identifier(specifier.local.name)
+  ));
+
+  return t.objectPattern(properties);
+};
+
+const isDestructuredImportExpression = (t, node) => {
+  return node.specifiers.length !== 0 && node.specifiers.some(specifier => !t.isImportDefaultSpecifier(specifier));
+};
+
+const cleanJSON = (t, node, json) => {
+  if (isDestructuredImportExpression(t, node)) {
+    const res = {};
+    for (const specifier of node.specifiers) {
+      const { name } = specifier.imported;
+      if (name in json) res[name] = json[name];
+    }
+    return res;
+  }
+
+  return json;
+};
+
+const cleanRequiredJSON = (t, node, json) => {
+  if (t.isObjectPattern(node.id)) {
+    const res = {};
+    for (const property of node.id.properties) {
+      const { name } = property.key;
+      if (name in json) res[name] = json[name];
+    }
+    return res;
+  }
+
+  return json;
+};
+
 module.exports = function({ types: t }) {
@@ -69,14 +118,32 @@ const documentCreateElementLink = t.callExpression(
     visitor: {
-      CallExpression(nodePath) {
+      CallExpression(nodePath, stats) {
+        const { styleMaps = {} } = stats.opts;
         if (notRequire(t, nodePath)) return;
-        const [ requireArg ] = nodePath.node.arguments;
+        const { node, parent } = nodePath;
+        const [ requireArg ] = node.arguments;
         const { value: modName } = requireArg;
         if (notCssImport(modName)) return;
         const ast = fetchLink(nodePath, modName);
-        nodePath.replaceWithMultiple(ast);
+        if (t.isVariableDeclarator(parent)) {
+          nodePath.insertAfter(ast);
+          nodePath.replaceWith(t.valueToNode(cleanRequiredJSON(t, parent, styleMaps[modName] || {})));
+        } else {
+          nodePath.replaceWithMultiple(ast);
+        }
       },
-      ImportDeclaration(nodePath) {
-        const { value: modName } = nodePath.node.source;
+      ImportDeclaration(nodePath, stats) {
+        const { styleMaps = {} } = stats.opts;
+        const { node } = nodePath;
+        const { value: modName } = node.source;
         if (notCssImport(modName)) return;
         const ast = fetchLink(nodePath, modName);
+        if (node.specifiers.length !== 0) {
+          const leftExpression = determineLeftExpression(t, node);
+          nodePath.insertAfter(t.variableDeclaration('const', [
+            t.variableDeclarator(
+              leftExpression,
+              t.valueToNode(cleanJSON(t, node, styleMaps[modName] || {})),
+            ),
+          ]));
+        }
         nodePath.replaceWithMultiple(ast);
@@ -83,0 +150,0 @@ },

package.json

 {
   "name": "@hqjs/babel-plugin-transform-css-imports",
-  "version": "0.0.2",
-  "description": "Transform css imports",
+  "version": "0.0.3",
+  "description": "Transform css imports, supports css modules",
   "main": "index.js",
@@ -18,5 +18,7 @@ "scripts": {
     "css",
-    "import"
+    "import",
+    "modules",
+    "css modules"
   ],
-  "author": "hqjs <[e-mail]>",
+  "author": "hqjs <[e-mail]>",
   "license": "MIT",
@@ -23,0 +25,0 @@ "bugs": {

README.md

@@ -1,2 +0,2 @@
-# http://hqjs.org
+# https://hqjs.org
 Transform css imports
@@ -8,1 +8,109 @@
 ```
+
+# Usage
+```json
+{
+    "plugins": [
+      ["hqjs@babel-plugin-transform-css-imports", {
+        "styleMaps": {
+          "/main.css" : {
+            "root": "root_01",
+            "text": "text_1217",
+            "color": "color_918"
+          }
+        }
+      }
+    ]
+  ]
+}
+```
+Option `styleMaps` pass relations between module name and class names translated by css modules.
+
+# Transformation
+Transforms `.css` imports into style loading and in case of named import - add css mosules transformation.
+
+Let's say we have file `/main.css`
+```css
+.root {
+  border-width: 2px;
+  border-style: solid;
+  border-color: #777;
+  padding: 0 20px;
+  margin: 0 6px;
+  max-width: 400px;
+}
+
+.text {
+  color: #777;
+  font-size: 24px;
+  font-family: helvetica, arial, sans-serif;
+  font-weight: 600;
+}
+```
+transformed with css modules
+```css
+.root_01 {
+    border-width: 2px;
+    border-style: solid;
+    border-color: #777;
+    padding: 0 20px;
+    margin: 0 6px;
+    max-width: 400px;
+}
+
+.text_1217 {
+    color: #777;
+    font-size: 24px;
+    font-family: helvetica, arial, sans-serif;
+    font-weight: 600;
+}
+```
+
+and importing it
+
+```js
+import '/main.css';
+// Named imports will use css modules
+import styles from '/main.css';
+// Or with destructure
+import {root, text as t} from '/main.css';
+```
+or similar expressions with require
+```js
+require('/main.css');
+// Named imports will use css modules
+const styles = require('/main.css');
+// Or with destructure
+const {root, text: t} = require('/main.css');
+```
+we will obtain
+```js
+const _ref = document.createElement("link");
+_ref.rel = "stylesheet";
+_ref.href = "/main.css";
+document.head.appendChild(_ref);
+
+// Named imports will use css modules
+const _ref2 = document.createElement("link");
+_ref2.rel = "stylesheet";
+_ref2.href = "/main.css";
+document.head.appendChild(_ref2);
+const styles = {
+  root: 'root_01',
+  text: 'text_1217',
+  color: 'color_918'
+};
+
+// Or with destructure
+const _ref3 = document.createElement("link");
+_ref3.rel = "stylesheet";
+_ref3.href = "/main.css";
+document.head.appendChild(_ref3);
+const {
+  root: root,
+  text: t
+} = {
+  root: 'root_01',
+  text: 'text_1217'
+};
+```

No alert changes

Improved metrics

Total package byte prevSize

16814

increased by33.32%

Lines of code

137

increased by71.25%

Number of lines in readme file

116

increased by1350%

No dependency changes