Parcel: CSS files being compiled with PostCSS before they're imported

Created on 22 Jan 2018  路  8Comments  路  Source: parcel-bundler/parcel

馃悰

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

Bug CSS Preprocessing Stale
Source
picture jonmilner
👍9

Most helpful comment

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

picture jssee on 9 Apr 2018
👍7

All 8 comments

It appears that PostCSS files are compiled, but only seperately, before they are imported. It just imports variables and functions without checking if they are being used in other files. I tried several methods to fix this, and they didn't work. Maybe a 'best practice' in the documentation (on how to work with variables and/or functions across different files) would solve some things?

agepoor picture agepoor on 22 Jan 2018
👍1

@agepoor Ah, you're right. I see now that the CSS files are being compiled, but before they're imported. I should update the title and description of the issue.

Unfortunately, imports should typically be the first thing to run in a PostCSS config:

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.

jonmilner picture jonmilner on 22 Jan 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.

drtyh2o picture drtyh2o on 30 Jan 2018
👍1

I didn't get a response from the team, so I used a workaround by running a watch script for the CSS files doing just the imports and make parcel 'watch' the output file.

agepoor picture agepoor on 30 Jan 2018

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

jssee picture jssee on 9 Apr 2018
👍7

what happens when official css variables (the ones prefixed with -- ) are used iinstead of $ syntax ?

GrosSacASac picture GrosSacASac on 10 Jun 2018

Having the same problem with postcss-extend Plugin when using it across two files. Any news on this issue?

dreerr picture dreerr on 28 Dec 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

github-actions[bot] picture github-actions[bot] on 17 Jan 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

urbanhop picture urbanhop  路  3Comments
466023746 picture 466023746  路  3Comments
devongovett picture devongovett  路  3Comments
Niggler picture Niggler  路  3Comments
dotdash picture dotdash  路  3Comments