Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS files being compiled with PostCSS before they're imported #609

Closed
jonmilner opened this issue Jan 21, 2018 · 8 comments
Closed

CSS files being compiled with PostCSS before they're imported #609

jonmilner opened this issue Jan 21, 2018 · 8 comments
Labels
🐛 Bug CSS Preprocessing All the PostCSS, Less, SASS, etc issues Stale Inactive issues

Comments

@jonmilner
Copy link

jonmilner commented Jan 21, 2018 •
edited
Loading

🐛

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
@agepoor
Copy link

agepoor commented Jan 22, 2018 •
edited
Loading

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?

@jonmilner
Copy link
Author

@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 jonmilner changed the title Imported CSS files not being compiled with PostCSS CSS files being compiled with PostCSS before they're imported Jan 22, 2018
@mdurling
Copy link

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.

@agepoor
Copy link

agepoor commented Jan 30, 2018

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.

@jssee
Copy link

jssee commented Apr 9, 2018

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

@jssee jssee mentioned this issue Apr 10, 2018
Closed
@GrosSacASac
Copy link

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

@cmnstmntmn cmnstmntmn mentioned this issue Aug 27, 2018
Closed
@dreerr
Copy link

dreerr commented Dec 27, 2018

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

@devongovett devongovett added CSS Preprocessing All the PostCSS, Less, SASS, etc issues CSS and removed CSS Preprocessing All the PostCSS, Less, SASS, etc issues CSS labels Jan 6, 2019
@github-actions
Copy link

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 github-actions bot added the Stale Inactive issues label Jan 17, 2020
@github-actions github-actions bot closed this as completed Feb 2, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 Bug CSS Preprocessing All the PostCSS, Less, SASS, etc issues Stale Inactive issues
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@devongovett @jonmilner @dreerr @DeMoorJasper @jssee @mdurling @GrosSacASac @agepoor