Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS files being compiled with PostCSS before they're imported

See original GitHub issue

🐛

CSS files appear to be compiling with PostCSS before they’re imported. This will lead to unexpected behavior in most PostCSS builds, as imports are typically the first thing that should run. See:

https://github.com/postcss/postcss-import

This plugin should probably be used as the first plugin of your list. This way, other plugins will work on the AST as if there were only a single file to process, and will probably work as you can expect.

Possibly related to #329 and #593.

🎛 Configuration

package.json

{
  "main": "index.js",
  "scripts": {
    "start": "parcel src/index.html"
  },
  "devDependencies": {
    "parcel-bundler": "^1.4.1",
    "postcss-easy-import": "^3.0.0",
    "postcss-simple-vars": "^4.1.0"
  }
}

postcss.config.js

module.exports = {
  plugins: [
    require("postcss-easy-import"),
    require("postcss-simple-vars")
  ]
};

index.html

<html>
<head>
  <link rel="stylesheet" href="./assets/css/index.css"></link>
</head>
<body>
  <script src="./index.js"></script>
</body>
</html>

assets/css/index.css

@import "./global/colors.css";

body {
  background: $red;
}

assets/css/global/colors.css

$red: #f00;

🤔 Expected Behavior

body {
  background: #f00;
}

😯 Current Behavior

🚨  /Users/jon/git/parcel-test/src/assets/css/index.css:4:3: Undefined variable $red
  2 | 
  3 | body {
> 4 |   background: $red;
    |   ^
  5 | }
  6 |

💁 Possible Solution

It appears that CSS imports will work even without requiring a PostCSS plugin like postcss-easy-import. Because different import plugins can behave differently, and because the order of PostCSS plugins is very important, I believe CSS import behavior should be left completely up to the PostCSS config and plugin.

🔦 Context

This config works with webpack + postcss-loader, and gulp.

💻 Code Sample

https://github.com/jonmilner/parcel-test

🌍 Your Environment

Software	Version(s)
Parcel	1.4.1
Node	8.2.1
npm/Yarn	1.3.2
Operating System	macOS 10.13.3

Issue Analytics

State:
Created 6 years ago
Reactions:9
Comments:8

Top GitHub Comments

7reactions

jsseecommented, Apr 9, 2018

Any update on this? its a very crucial feature and its a surprised this the parcel team hasnt addressed it @devongovett

1reaction

drtyh2ocommented, Jan 30, 2018

Can @agepoor or anyone on the Parcel team comment on whether there has been any headway made on this issue? I am using parcel on a current project, but I will have to pivot to using webpack if I can’t get postcss-import to work properly. Other that this issue, parcel is working great for us and I would really prefer to stick with it if possible.

Top Results From Across the Web

Webpack Dev Server not compiling on change (imported CSS)

I'm using vue-loader to compile the .vue files. In App.vue, I'm importing the main.css file (which imports multiple other css files, e.g. ...

Using with Preprocessors - Tailwind CSS

A guide to using Tailwind with common CSS preprocessors like Sass, Less, and Stylus. Since Tailwind is a PostCSS plugin, there's nothing stopping...

What is PostCSS? How to Use Plugins to Automate CSS Tasks

It lets us import CSS files into other files. To check how to use this plugin go to src/style.css in the postcss-tutorial repository....

An Introduction to PostCSS - SitePoint

CSS preprocessors are popular, but they have some drawbacks. In this introduction to PostCSS, we'll explore the advantages of PostCSS, ...

PostCSS - a tool for transforming CSS with JavaScript

Transform CSS with the power of JavaScript. Auto-prefixing, future CSS syntaxes, modules, linting and more are possible with hundreds of PostCSS plugins.