Initial

Author: TrySound

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+coverage
+lib

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "4"
+  - "6"
+  - "node"

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Bogdan Chadkin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,19 @@
+# postcss-icss-import [![Build Status][travis-img]][travis]
+
+[PostCSS] plugin for css-modules to convert @import statements to ICSS
+
+[PostCSS]: https://github.com/postcss/postcss
+[travis-img]: https://travis-ci.org/css-modules/postcss-icss-import.svg
+[travis]: https://travis-ci.org/css-modules/postcss-icss-import
+
+## Usage
+
+```js
+postcss([ require('postcss-icss-import') ])
+```
+
+See [PostCSS] docs for examples for your environment.
+
+# License
+
+MIT © [Bogdan Chadkin](mailto:trysound@yandex.ru)

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "postcss-icss-import",
+  "version": "0.1.0",
+  "description": "PostCSS plugin for css-modules to convert @import statements to ICSS",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "babel --out-dir lib src",
+    "test": "jest --coverage",
+    "precommit": "lint-staged",
+    "prepublish": "yarn test && yarn run build"
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint",
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "eslintConfig": {
+    "parserOptions": {
+      "ecmaVersion": 6,
+      "sourceType": "module"
+    },
+    "extends": "eslint:recommended"
+  },
+  "babel": {
+    "presets": [
+      [
+        "env",
+        {
+          "targets": {
+            "node": 4
+          }
+        }
+      ]
+    ]
+  },
+  "repository": "css-modules/postcss-icss-import",
+  "author": "Bogdan Chadkin <trysound@yandex.ru>",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-jest": "^20.0.3",
+    "babel-preset-env": "^1.5.1",
+    "eslint": "^3.19.0",
+    "husky": "^0.13.4",
+    "jest": "^20.0.4",
+    "lint-staged": "^3.5.1",
+    "prettier": "^1.3.1",
+    "strip-indent": "^2.0.0"
+  },
+  "dependencies": {
+    "icss-utils": "^2.1.0",
+    "postcss": "^6.0.1",
+    "postcss-value-parser": "^3.3.0"
+  }
+}

src/index.js

@@ -0,0 +1,73 @@
+/* eslint-env node */
+import postcss from "postcss";
+import valueParser from "postcss-value-parser";
+import { createICSSRules } from "icss-utils";
+
+const plugin = "postcss-plugin-import";
+
+const getArg = nodes =>
+  nodes.length !== 0 && nodes[0].type === "string"
+    ? nodes[0].value
+    : valueParser.stringify(nodes);
+
+const getUrl = node => {
+  if (node.type === "function" && node.value === "url") {
+    return getArg(node.nodes);
+  }
+  if (node.type === "string") {
+    return node.value;
+  }
+  return "";
+};
+
+const parseImport = params => {
+  const { nodes } = valueParser(params);
+  if (nodes.length === 0) {
+    return null;
+  }
+  const url = getUrl(nodes[0]);
+  if (url.trim().length === 0) {
+    return null;
+  }
+  return {
+    url,
+    media: valueParser.stringify(nodes.slice(1)).trim()
+  };
+};
+
+const isExternalUrl = url => /^\w+:\/\//.test(url) || url.startsWith("//");
+
+const walkImports = (css, callback) => {
+  css.each(node => {
+    if (node.type === "atrule" && node.name.toLowerCase() === "import") {
+      callback(node);
+    }
+  });
+};
+
+module.exports = postcss.plugin(plugin, () => (css, result) => {
+  const imports = {};
+  walkImports(css, atrule => {
+    if (atrule.nodes) {
+      return result.warn(
+        "It looks like you didn't end your @import statement correctly. " +
+          "Child nodes are attached to it.",
+        { node: atrule }
+      );
+    }
+    const parsed = parseImport(atrule.params);
+    if (parsed === null) {
+      return result.warn(`Unable to find uri in '${atrule.toString()}'`, {
+        node: atrule
+      });
+    }
+    if (!isExternalUrl(parsed.url)) {
+      atrule.remove();
+      imports[`'${parsed.url}'`] = {
+        import: "default" +
+          (parsed.media.length === 0 ? "" : ` ${parsed.media}`)
+      };
+    }
+  });
+  css.prepend(createICSSRules(imports, {}));
+});

test/test.js

@@ -0,0 +1,145 @@
+/* eslint-env jest */
+import postcss from "postcss";
+import stripIndent from "strip-indent";
+import plugin from "../src";
+
+const strip = input => stripIndent(input).replace(/^\n/, "");
+const compile = input => postcss([plugin]).process(input);
+const runWarnings = input =>
+  compile(input).then(result => result.warnings().map(warning => warning.text));
+const runCSS = input => compile(strip(input)).then(result => strip(result.css));
+
+test("convert @import", () => {
+  return expect(
+    runCSS(`
+      @import "foo.css";
+      @import 'bar.css';
+      @import url(baz.css);
+      @import url("foobar.css");
+      @import url('foobarbaz.css');
+      .foo {}
+    `)
+  ).resolves.toEqual(
+    strip(`
+      :import('foo.css') {
+        import: default
+      }
+      :import('bar.css') {
+        import: default
+      }
+      :import('baz.css') {
+        import: default
+      }
+      :import('foobar.css') {
+        import: default
+      }
+      :import('foobarbaz.css') {
+        import: default
+      }
+      .foo {}
+    `)
+  );
+});
+
+test("convert @import with media queries", () => {
+  return expect(
+    runCSS(`
+      @import "foo.css" screen;
+      @import 'bar.css' screen;
+      @import url(baz.css) screen;
+      @import url("foobar.css") screen and (min-width: 25em);
+      @import url('foobarbaz.css') print, screen and (min-width: 25em);
+      .foo {}
+    `)
+  ).resolves.toEqual(
+    strip(`
+      :import('foo.css') {
+        import: default screen
+      }
+      :import('bar.css') {
+        import: default screen
+      }
+      :import('baz.css') {
+        import: default screen
+      }
+      :import('foobar.css') {
+        import: default screen and (min-width: 25em)
+      }
+      :import('foobarbaz.css') {
+        import: default print, screen and (min-width: 25em)
+      }
+      .foo {}
+    `)
+  );
+});
+
+test("convert camelcased @import", () => {
+  return expect(
+    runCSS(`
+      @IMPORT 'path.css';
+    `)
+  ).resolves.toEqual(
+    strip(`
+      :import('path.css') {
+        import: default
+      }
+    `)
+  );
+});
+
+test("not convert external uri", () => {
+  const input = `
+    @import 'http://path';
+    @import 'https://path';
+    @import '//path';
+  `;
+  return expect(runCSS(input)).resolves.toEqual(strip(input));
+});
+
+test("not warn when a user closed an import with ;", () => {
+  return expect(runWarnings(`@import url('http://');`, [])).resolves.toEqual(
+    []
+  );
+});
+
+test("warn when a user didn't close an import with ;", () => {
+  return expect(
+    runWarnings(`@import url('http://') :root{}`)
+  ).resolves.toEqual([
+    "It looks like you didn't end your @import statement correctly. " +
+      "Child nodes are attached to it."
+  ]);
+});
+
+test("warn on invalid url", () => {
+  return expect(
+    runWarnings(`
+      @import foo-bar;
+      @import ;
+      @import '';
+      @import "";
+      @import " ";
+      @import url();
+      @import url('');
+      @import url("");
+    `)
+  ).resolves.toEqual([
+    `Unable to find uri in '@import foo-bar'`,
+    `Unable to find uri in '@import '`,
+    `Unable to find uri in '@import '''`,
+    `Unable to find uri in '@import ""'`,
+    `Unable to find uri in '@import " "'`,
+    `Unable to find uri in '@import url()'`,
+    `Unable to find uri in '@import url('')'`,
+    `Unable to find uri in '@import url("")'`
+  ]);
+});
+
+test("convert only top-level @import", () => {
+  const input = `
+    .foo {
+      @import 'path.css';
+    }
+  `;
+  return expect(runCSS(input)).resolves.toEqual(strip(input));
+});