test: use json file (#247)

README.md

@@ -308,6 +308,51 @@ module.exports = {
 };
 ```
 
+### Import JSON files
+
+Stylus does not provide resolving capabilities in the `json` function.
+Therefore webpack resolver does not work for `.json` files.
+Use [`stylus resolver`](#stylus-resolver).
+
+**index.styl**
+
+```styl
+// Suppose the file is located here `node_modules/vars/vars.json`
+json('vars.json')
+
+@media queries-small
+  body
+    display nope
+
+```
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.styl$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'stylus-loader',
+            options: {
+              stylusOptions: {
+                // Specify the path. where to find files
+                paths: ['node_modules/vars'],
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ### In production
 
 Usually, it's recommended to extract the style sheets into a dedicated file in production using the [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin). This way your styles are not dependent on JavaScript.

test/__snapshots__/loader.test.js.snap

@@ -314,6 +314,46 @@ exports[`loader should not be resolved when url begin with "#": errors 1`] = `Ar
 
 exports[`loader should not be resolved when url begin with "#": warnings 1`] = `Array []`;
 
+exports[`loader should use .json file: css 1`] = `
+"@media screen and (min-width: 1px) and (max-width: 400px) {
+  body {
+    display: none;
+    color: #a27400;
+    background-color: #a27400;
+    border-color: rgba(255,202,69,0.5);
+    outline-color: #400040;
+    padding: 0;
+    outline: 0;
+    margin: 20px;
+    border: #f00;
+    text-decoration-color: rgba(0,0,0,0.5);
+    text-shadow: 0 1px rgba(0,0,0,0.5);
+  }
+}
+@media screen and (min-width: 1501px) {
+  body {
+    -webkit-transition: width 1s ease-out;
+  }
+}
+body {
+  display: none;
+  color: #a27400;
+  background-color: #a27400;
+  border-color: rgba(255,202,69,0.5);
+  outline-color: #400040;
+  padding: 0;
+  outline: 0;
+  margin: 20px;
+  -webkit-transition: width 1s ease-out;
+  border: #f00;
+}
+"
+`;
+
+exports[`loader should use .json file: errors 1`] = `Array []`;
+
+exports[`loader should use .json file: warnings 1`] = `Array []`;
+
 exports[`loader should work "define" option with raw: css 1`] = `
 "section.current-stylus-support {
   raw: \\"hash property access must use brackets\\";

test/fixtures/json/index.styl

@@ -0,0 +1,35 @@
+json('vars.json')
+
+@media queries-small
+  body
+    display nope
+    color darken(color, 50%)
+    background-color: darken(background-color, 50%)
+    border-color: fade-color
+    outline-color: darken(bg, 50%)
+    padding spacing
+    outline 1.5 * spacing
+    margin gutter * 2
+    if awesome
+      border red
+    text-decoration-color decoration-color
+    text-shadow 0 1px shadow-color
+
+@media queries-large
+  body
+    -webkit-transition animate-special-out
+
+vars = json('vars.json', { hash: true });
+
+body
+  display: vars.nope
+  color: darken(vars.color, 50%)
+  background-color: darken(vars.background-color, 50%)
+  border-color: vars.fade-color
+  outline-color: darken(vars.bg, 50%)
+  padding: vars.spacing
+  outline: 1.5 * vars.spacing
+  margin: vars.gutter * 2
+  -webkit-transition: vars.animate.special.out
+  if vars.awesome
+    border red

test/loader.test.js

@@ -585,6 +585,21 @@ describe('loader', () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
+  it('should use .json file', async () => {
+    const testId = './json/index.styl';
+    const compiler = getCompiler(testId, {
+      stylusOptions: {
+        paths: ['test/fixtures/node_modules/vars'],
+      },
+    });
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle(stats, compiler);
+
+    expect(codeFromBundle.css).toMatchSnapshot('css');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
   it('should emit error when unresolved import', async () => {
     const testId = './import-unresolve.styl';
     const compiler = getCompiler(testId);