chore(release): 4.0.0

Author: alexander-akait

.travis.yml

@@ -1,5 +1,31 @@
+sudo: false
+
+git:
+  depth: 10
+
+branches:
+  only:
+    - master
+
 language: node_js
-node_js:
-  - "4"
-  - "6"
-  - "node"
+
+# cache node modules
+cache:
+  directories:
+    - $HOME/.npm
+    - node_modules
+
+matrix:
+  fast_finish: true
+  include:
+    - node_js: '10'
+      script: npm run test -- --no-coverage
+    - node_js: '8'
+      script: npm run test -- --no-coverage
+    - node_js: '6'
+      script: npm run test -- --no-coverage
+
+before_install:
+  - npm install -g npm@latest
+  - node --version
+  - npm --version

README.md

@@ -1,6 +1,6 @@
 [![Build Status](https://travis-ci.org/css-modules/icss-utils.svg)](https://travis-ci.org/css-modules/icss-utils)
 
-# ICSS Utils 
+# ICSS Utils
 
 ## replaceSymbols
 
@@ -10,9 +10,10 @@ This is broken into its own module in case the behaviour needs to be replicated
 (i.e. [CSS Modules Values](https://github.com/css-modules/postcss-modules-values))
 
 ```js
-import { replaceSymbols, replaceValueSymbols } from "icss-utils"
-replaceSymbols(css, replacements)
-replaceValueSymbols(string, replacements)
+import { replaceSymbols, replaceValueSymbols } from "icss-utils";
+
+replaceSymbols(css, replacements);
+replaceValueSymbols(string, replacements);
 ```
 
 Where:
@@ -30,19 +31,19 @@ A symbol is a string of alphanumeric, `-` or `_` characters. A replacement can b
 Extracts and remove (if removeRules is equal true) from PostCSS tree `:import` and `:export` statements.
 
 ```js
-import postcss from 'postcss';
-import { extractICSS } from 'icss-utils'
+import postcss from "postcss";
+import { extractICSS } from "icss-utils";
 
 const css = postcss.parse(`
-  :import(colors) {
+  :import("colors.css") {
     a: b;
   }
   :export {
     c: d;
   }
-`)
+`);
 
-extractICSS(css)
+extractICSS(css);
 /*
   {
     icssImports: {
@@ -62,18 +63,21 @@ extractICSS(css)
 Converts icss imports and exports definitions to postcss ast
 
 ```js
-createICSSRules({
-  colors: {
-    a: 'b'
+createICSSRules(
+  {
+    colors: {
+      a: "b"
+    }
+  },
+  {
+    c: "d"
   }
-}, {
-  c: 'd'
-})
+);
 ```
 
 ## License
 
 ISC
 
 ---
-Glen Maddern and Bogdan Chadkin, 2015.
+Glen Maddern, Bogdan Chadkin and Evilebottnawi 2015-present.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "icss-utils",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "description": "ICSS utils for postcss ast",
   "main": "lib/index.js",
   "files": [
@@ -20,21 +20,23 @@
     ]
   },
   "eslintConfig": {
+    "parser": "babel-eslint",
     "parserOptions": {
       "sourceType": "module"
     },
     "env": {
-      "es6": true
+      "es6": true,
+      "jest": true
     },
     "extends": "eslint:recommended"
   },
   "babel": {
     "presets": [
       [
-        "env",
+        "@babel/preset-env",
         {
           "targets": {
-            "node": 4
+            "node": 6
           }
         }
       ]
@@ -57,16 +59,19 @@
   },
   "homepage": "https://github.com/css-modules/icss-utils#readme",
   "dependencies": {
-    "postcss": "^6.0.2"
+    "postcss": "^7.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-jest": "^20.0.3",
-    "babel-preset-env": "^1.5.2",
-    "eslint": "^4.0.0",
-    "husky": "^0.13.4",
-    "jest": "^20.0.4",
-    "lint-staged": "^3.6.1",
+    "@babel/cli": "^7.1.0",
+    "@babel/core": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
+    "babel-eslint": "^9.0.0",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-jest": "^23.6.0",
+    "eslint": "^5.6.0",
+    "husky": "^0.14.1",
+    "jest": "^23.6.0",
+    "lint-staged": "^7.3.0",
     "prettier": "^1.4.4"
   }
 }

src/createICSSRules.js

@@ -1,8 +1,8 @@
 import postcss from "postcss";
 
 const createImports = imports => {
-  return Object.keys(imports).map(path => {
-    const aliases = imports[path];
+  return Object.keys(imports).map(token => {
+    const aliases = imports[token];
     const declarations = Object.keys(aliases).map(key =>
       postcss.decl({
         prop: key,
@@ -12,7 +12,7 @@ const createImports = imports => {
     );
     return postcss
       .rule({
-        selector: `:import('${path}')`,
+        selector: `:import(${token})`,
         raws: { after: "\n" }
       })
       .append(declarations);

src/extractICSS.js

@@ -1,4 +1,4 @@
-const importPattern = /^:import\(("[^"]*"|'[^']*'|[^"']+)\)$/;
+const importPattern = /^:import\(("[^"]*"|'[^']*')(?:\s(.+))?\)$/;
 
 const getDeclsObject = rule => {
   const object = {};
@@ -17,11 +17,17 @@ const extractICSS = (css, removeRules = true) => {
         const matches = importPattern.exec(node.selector);
         if (matches) {
           const path = matches[1].replace(/'|"/g, "");
-          const aliases = Object.assign(
-            icssImports[path] || {},
-            getDeclsObject(node)
-          );
-          icssImports[path] = aliases;
+          const extra = matches[2] ? matches[2] : "";
+          const dep = `"${path}"${extra ? ` ${extra}` : ""}`;
+          icssImports[dep] = Object.assign(icssImports[dep] || {}, {
+            path,
+            extra,
+            tokens: Object.assign(
+              {},
+              icssImports[dep] ? icssImports[dep].tokens : {},
+              getDeclsObject(node)
+            )
+          });
           if (removeRules) {
             node.remove();
           }

src/replaceSymbols.js

@@ -6,7 +6,10 @@ const replaceSymbols = (css, replacements) => {
       node.value = replaceValueSymbols(node.value, replacements);
     } else if (node.type === "rule") {
       node.selector = replaceValueSymbols(node.selector, replacements);
-    } else if (node.type === "atrule" && node.name === "media") {
+    } else if (
+      node.type === "atrule" &&
+      ["media", "supports"].includes(node.name.toLowerCase())
+    ) {
       node.params = replaceValueSymbols(node.params, replacements);
     }
   });

test/createICSSRules.test.js

@@ -1,16 +1,18 @@
-/* eslint-env jest */
 import postcss from "postcss";
 import { createICSSRules } from "../src";
 
 const run = (imports, exports) => {
-  return postcss.root().append(createICSSRules(imports, exports)).toString();
+  return postcss
+    .root()
+    .append(createICSSRules(imports, exports))
+    .toString();
 };
 
-test("create :import statement", () => {
+test("create :import statement with single quotes", () => {
   expect(
     run(
       {
-        "path/file": {
+        "'path/file'": {
           e: "f"
         }
       },
@@ -19,6 +21,52 @@ test("create :import statement", () => {
   ).toEqual(":import('path/file') {\n  e: f\n}");
 });
 
+test("create :import statement with double quotes", () => {
+  expect(
+    run(
+      {
+        '"path/file"': {
+          e: "f"
+        }
+      },
+      {}
+    )
+  ).toEqual(':import("path/file") {\n  e: f\n}');
+});
+
+test("create multiple :import statement", () => {
+  expect(
+    run(
+      {
+        "path/file": {
+          e: "f"
+        },
+        "path/other": {
+          a: "b"
+        }
+      },
+      {}
+    )
+  ).toEqual(
+    ":import(path/file) {\n  e: f\n}\n:import(path/other) {\n  a: b\n}"
+  );
+});
+
+test("create :import statement with extra", () => {
+  expect(
+    run(
+      {
+        "'path/file' screen and (orientation:landscape)": {
+          e: "f"
+        }
+      },
+      {}
+    )
+  ).toEqual(
+    ":import('path/file' screen and (orientation:landscape)) {\n  e: f\n}"
+  );
+});
+
 test("create :export statement", () => {
   expect(
     run(
@@ -35,13 +83,13 @@ test("create :import and :export", () => {
   expect(
     run(
       {
-        colors: {
+        '"colors"': {
           a: "b"
         }
       },
       {
         c: "d"
       }
     )
-  ).toEqual(":import('colors') {\n  a: b\n}\n:export {\n  c: d\n}");
+  ).toEqual(':import("colors") {\n  a: b\n}\n:export {\n  c: d\n}');
 });