Error when trying to load minified css

[EmaSuriano]

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

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

Expected behavior

Start the server as expected.

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

[tsnolan23]

@EmaSuriano The docz CSS plugin should resolve your problem:

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

[EmaSuriano]

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

[tsnolan23]

@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!

[EmaSuriano]

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 ...

[tsnolan23]

Yeah, not disagreeing with that!

[pedronauck]

Fixed on v0.7.0

[EmaSuriano]

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?

[pedronauck]

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

[ekafyi]

@tsnolan23's fix here #160 (comment) works for me, in case others are browsing this issue.