Docz: Error when trying to load minified css

Created on 21 Jul 2018 · 9Comments · Source: doczjs/docz

Bug Report

Describe the bug
I'm using a library (react-tippy) which requires to load a css file in order to look as expected. When I load the component which imports that css file, I get an error of Unexpected token .*

A clear and concise description of what the bug is.
I get the following error on the console which stops the server from starting ..

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .tippy-touch{cursor:pointer!important}.tippy-notransition{transition:none!important}.tippy-popper{max-width:400px;-webkit-perspective:800px;perspective:800px;z-index:9999;outline:0;transition-timing-function:cubic-bezier( ...

To Reproduce

In order to

git clone https://github.com/EmaSuriano/docz-css-bug-example.git
yarn install
yarn dev

Expected behavior

Start the server as expected.
screen shot 2018-07-20 at 19 11 11

Enviroment

OS: OSX
Node/npm version: 10.6.0

Additional context/Screenshots

The workaround I found was to format the file with prettier and it seems the server to be working. The problem with is that I have to store the file in my codebase, which I really don't want to do because if the owner of the library made a change on the styles I have to manually change it ..

This is the branch with the work around --> https://github.com/EmaSuriano/docz-css-bug-example/tree/formatting-css-file

Source

EmaSuriano

Most helpful comment

@EmaSuriano I was able to get your project running by modifying the bundler config without the CSS plugin:

// doczrc.js
export default {
  modifyBundlerConfig: config => {
    config.module.rules.push({
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    });
    return config;
  }
};

It did require additional dependencies, then, though - style-loader and css-loader.

Not sure if that's the proper way to achieve the result, but it does work!

tsnolan23 on 22 Jul 2018

👍5

All 9 comments

@EmaSuriano The docz CSS plugin should resolve your problem:

https://github.com/pedronauck/docz/tree/master/packages/docz-plugin-css

tsnolan23 on 22 Jul 2018

Hi @tsnolan23 I'm using the docz-plugin-css. This my doczrc.js

// doczrc.js
import { css } from 'docz-plugin-css';

export default {
  plugins: [
    css({
      preprocessor: 'postcss',
      cssmodules: true,
    }),
  ],
};

Please tell me if I'm missing anything

EmaSuriano on 22 Jul 2018

@EmaSuriano I was able to get your project running by modifying the bundler config without the CSS plugin:

// doczrc.js
export default {
  modifyBundlerConfig: config => {
    config.module.rules.push({
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    });
    return config;
  }
};

It did require additional dependencies, then, though - style-loader and css-loader.

Not sure if that's the proper way to achieve the result, but it does work!

tsnolan23 on 22 Jul 2018

👍5

It works! 🎉
But I'm thinking if this bug should be fixed in docz-plugin-css because this kind of transformation should be taking care of by this plugin ...

EmaSuriano on 22 Jul 2018

👍2

Yeah, not disagreeing with that!

tsnolan23 on 22 Jul 2018

Fixed on v0.7.0

pedronauck on 23 Jul 2018

Hi @pedronauck, I updated the version of docz and docz-plugin-css to 0.7.0 and the problem still persists :( This is the repo, could you please check it out?

EmaSuriano on 23 Jul 2018

Sorry @EmaSuriano, I was excluding imports from node_modules at loaders 🙄 Now I think that is fixed on v0.7.1 🙏

pedronauck on 24 Jul 2018

🎉1

@tsnolan23's fix here https://github.com/pedronauck/docz/issues/160#issuecomment-406883661 works for me, in case others are browsing this issue.