Question: How do I use stylus with css as its import?

[bioinformatist]

Hey dear contributors,

I have used neutrino for months, and it's really fantastic tool as a packing tool chain.

I wanna use stylus as well as css with React preset, so my .neutrinorc.js seems as:

const airbnb = require('@neutrinojs/airbnb');
const react = require('@neutrinojs/react');
const jest = require('@neutrinojs/jest');
const styles = require('@neutrinojs/style-loader');

module.exports = {
  options: {
    root: __dirname,
    index: 'index',
  },
  use: [
    airbnb(),
    react({
      html: {
        title: 'TPGA'
      },
      // https://github.com/neutrinojs/neutrino/issues/1561#issuecomment-640060434
      styles: ({
        test: /\.css$/,
        modulesTest: /\.module\.css$/,
        loaders: [
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')],
            },
          },
        ],
      }),
      devServer: {
        proxy: {
          '**': {
            target: 'http://localhost:3333',
            changeOrigin: true,
          },
        },
      },
    }),
    styles({
      ruleId: 'style-stylus',
      loaders: [
        {
          loader: 'stylus-loader',
          useId: 'stylus',
        },
      ],
      test: /\.(styl)$/,
      modulesTest: /\.module.(styl)$/,
    }),
    jest(),
  ],
};

And my global style settings is only code with one line written in App.styl which is in the same directory as App.jsx:

@import '~antd/dist/antd.css';

It just imports one css file.

But when I try call npm start, it raises error:

ERROR in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/stylus-loader!./node_modules/antd/dist/antd.css)
Module build failed (from ./node_modules/stylus-loader/index.js):
TypeError: /home/ysun/github.com/bioinformatist/TPGA/node_modules/antd/dist/antd.css:18374:11
   18370|   width: 100%;
   18371|   height: 0;
   18372|   background-color: rgba(0, 0, 0, 0.45);
   18373|   opacity: 0;
   18374|   filter: alpha(opacity=45);
--------------------^
   18375|   -webkit-transition: opacity 0.3s linear, height 0s ease 0.3s;
   18376|   transition: opacity 0.3s linear, height 0s ease 0.3s;
   18377|   pointer-events: none;

Cannot read property 'a' of undefined
    at ".ant-drawer-mask " (/home/ysun/github.com/bioinformatist/TPGA/node_modules/antd/dist/antd.css:18367:1)

    at CachedPathEvaluator.alpha (/home/ysun/github.com/bioinformatist/TPGA/node_modules/stylus/lib/functions/alpha.js:35:31)
    at CachedPathEvaluator.Evaluator.invokeBuiltin (/home/ysun/github.com/bioinformatist/TPGA/node_modules/stylus/lib/visitor/evaluator.js:1054:30)
    at CachedPathEvaluator.Evaluator.visitCall (/home/ysun/github.com/bioinformatist/TPGA/node_modules/stylus/lib/visitor/evaluator.js:516:16)
    at CachedPathEvaluator.Visitor.visit (/home/ysun/github.com/bioinformatist/TPGA/node_modules/stylus/lib/visitor/index.js:28:40)
    at CachedPathEvaluator.Evaluator.visit (/home/ysun/github.com/bioinformatist/TPGA/node_modules/stylus/lib/visitor/evaluator.js:160:18)
    at CachedPathEvaluator.Evaluator.visitExpression (/home/ysun/github.com/bioinformatist/TPGA/node_modules/stylus/lib/visitor/evaluator.js:644:26)
    at CachedPathEvaluator.Visitor.visit (/home/ysun/github.com/bioinformatist/TPGA/node_modules/stylus/lib/visitor/index.js:28:40)
    at CachedPathEvaluator.Evaluator.visit (/home/ysun/github.com/bioinformatist/TPGA/node_modules/stylus/lib/visitor/evaluator.js:160:18)
    at CachedPathEvaluator.Evaluator.visitProperty (/home/ysun/github.com/bioinformatist/TPGA/node_modules/stylus/lib/visitor/evaluator.js:687:22)
    at CachedPathEvaluator.Visitor.visit (/home/ysun/github.com/bioinformatist/TPGA/node_modules/stylus/lib/visitor/index.js:28:40)

Unfortunately, the webpack still call stylus-loader to parse the imported css. So what's wrong here?

Thank you in advance.

[edmorley]

@bioinformatist Hi! I'm not too familiar with stylus-loader -- my recommendation to debug this is to output the generated webpack config using: https://neutrinojs.org/usage/#inspecting-the-generated-webpack-config

...and then check against the stylus-loader docs to see how it compares to what they say to use.

[constgen]

@bioinformatist I have decided to help you and released neutrino-middleware-stylus-loader that should resolve your problem. I am not strong in Stylus, so If you will have some problems open an issue or Pull Request in GitHub

[bioinformatist]

@edmorley Good suggestion~ @constgen Thanks for this released middleware.

I'll have a try.