I seem to be having issues with the plugin on SystemJS 0.18.x. seems like it's trying to process it as JS and never gets to the fetch call.

Hey,

I think this line needs to change to '$__System.register ...'

following those minimal instructions from the main readme fails with an exception

"

Install the plugin and name it css locally

jspm install css=npm:jspm-loader-css

Load the styles by 
referencing them in your JS:

import from './styles.css!'

"

I'm using [email protected] and [email protected]. It seems that the systemjs tries to load the css file as plain js

also note, I'm using [email protected] but #20 does not have any effect on this issue

I just posted systemjs/systemjs#579, and was thinking a similar property for CSS might work well.

A meta property which could enable CSS next transpilations per-CSS module.

Deeper option configurations could potentially be provided via System.postCSS or something like that (the name of the transpiler system being used).

The idea is that it would be nice to have a single CSS plugin (the custom factories work well, but it still seems an unnecessary layer for "css next" principles?), which can be configured to be in two modes - basic CSS loading, and CSS next.

Further CSS transforms beyond the above is certainly via a custom factory etc, but for the above it would be really nice to have a streamlined workflow.

Just throwing this stuff out there. Perhaps we need to try and get this work sponsored :)

Need to figure out a way to have this work in bundle mode.

Hey,

One of the main benefits of using CSS modules is the automatic namespacing of selectors which allows developers to worry less about selectors colliding unintentionally.

Web Components have been gaining a great deal of traction lately. They allow for burying CSS within the Shadow DOM. The Shadow DOM also provides the ability to encapsulate CSS such that collisions are less likely to occur.

I'm wondering if these two concepts are mutually exclusive or if they can/should be mixed into each other?

Hey,

I spent the last few days attempting to integrate JSPM + CSS Modules w/ this loader, but it did not result in success. Here I'm outlining my pain points and wondering when I should revisit this project for production use.

• PostCSS version is split across v4 and v5. css-modules/css-modules-loader-core#21
• Documentation out of date. There was a large PR recently accepted, #23. This new code makes the current example for a css.js file incorrect.
• Lag during development. There was a non-trivial amount of waiting after every reload for this loader to parse CSS and apply it. This lag is not present when using the default JSPM css plugin.
• Bundling support. The current implementation does not appear to be able to easily bundle and inline code. At the very least, there's no minification step and no documentation indicating that it does support bundling, but I suspect that with the above PR changes the basics of bundling do work.

Hi,

Yesterday, I tried to import some CSS files. In two of these files, I have rules with the same priority, something like :

/* File 1 */
.my-class {
    background-color: red;
}

/* File 2 */
.my-class {
    background-color: green;
}

import 'file1.css';
import 'file2.css';

The expected result is to have a green background, but as my first file is heavier than my first, it's loaded after the second one, making my override fail.

Really up to @guybedford if/when that happens, but I think it should be, and I'm happy to do what's needed to make it happen.

Loading CSS on a per-module basis makes sense for 99% of code, but it's still common to want to load a reset.css file and/or a core.css file. These files are independent of a given module and provide global changes to CSS.

Looking at https://github.com/geelen/glenmaddern.com I see that you load global files like so:

import './reset.css!css-global'
import './core.css!css-global'

where css-global is mapped as:

"css-global": "npm:[email protected]",

This works, but the entire point of using !css is to allow for additional postCSS plugins to be extended onto the base loader. Those plugins won't be applied for any global files which isn't intuitive.

Is there a sensible & DRY way of having both of these use cases go through the same suite of plugins?

From geelen/plugin-postcss#5

So I figured out how to do this in my own blog, but it's suuuuper hacky (cause I did at 3am as the "I am gonna crack this before I go to sleep): https://github.com/geelen/glenmaddern.com/blob/master/snapshot.js#L36

I need to figure out a nicer API and show examples. Cause it's possible and cooooool!

I got this project, had composes: test from '../../xx.css' in css file, when building in windows, I would have errors like Cannot read property 'push' of undefined at CSSLoader.triggerImport. But if I built the project in Mac OSX, it would work.

So I log some variables in triggerImport from windows:

And from Mac:

• What to write in your css.js file
• Use Plugins.autoprefixer
• Change "css": "npm:[email protected]" in config.js to "jspm-loader-css":

Currently this is all in my head, not in the README

Does anyone be able to use postcss-import plugin? Not sure why it keeps saying File not found.

jspm-loader-css is broken with bundles. First there is an uncaught error

Uncaught ReferenceError: System is not defined(anonymous function) 

In generated bundle replacing System with $__System for css stuff fixes this error. But no css are working. Without bundling it works.

Also with 1.0.1-beta1 there is am implicit dependency on postcss-safe-parser and stuff breaks if postcss-safe-parser is not added explicitly to jspm dependencies.

This is a feature we have in the main plugin currently when running a build via the bundle hook. It would be good to maintain this support.

With the latest babel:

System.config({
  "map": {
    "babel": "npm:[email protected]",
    "babel-runtime": "npm:[email protected]",

import '../style/app.css! with jspm-loader-css would throw errors in console:

I tried jspm-loader-css with

"babel": "npm:[email protected]",
    "babel-runtime": "npm:[email protected]",

Everything works as expected.

Right! I have a repeatable test case! Use this project: https://github.com/css-modules/jspm-demo and use https://github.com/geelen/jspm-server v1.0.1 then make changes to main.css

I'm seeing:

What I want to see:

This is the key info but I'm not sure where to integrate it into the new code: #39 (comment)

Thoughts, @douglasduteil?

The original issue is systemjs/systemjs#1348. I have a few stylesheets:

component.css:

.h1 {
  composes: primaryText from "./colors.css";
}

colors.css:

.primaryText {
  color: #0d7689;
}

When I import component.css SystemJS v0.19.29-31 fails:

System.import('app/client/components/component.css!css.js').then(r => console.log(r));

// Error loading http://0.0.0.0:7070/http:/0.0.0.0:7070/app/client/components/colors.css!http://0.0.0.0:7070/css.js
The problem is here http://0.0.0.0:7070/http:/0.0.0.0:7070/. SystemJS v0.19.28 works fine. My config.js is default. Is it a bug?

The problem is here http://0.0.0.0:7070/http:/0.0.0.0:7070/. SystemJS v0.19.28 works fine. My config.js is default. This demo also fails with the latest SystemJS.

The variable __moduleName is passed into CSSLoader's constructor and stored as a private variable, _moduleName, but it is then never used.

Is this just sloppy coding? Or were their plans for it in the future that didn't make it into this?

CSS files can be live-reloaded no problem, need to make sure jspm-server is up to date with them

Hey,

I'm getting an error when I try to install the latest:

C:\Users\Meo\Documents\GitHub\StreamusSocial>jspm install npm:jspm-loader-css
         Looking up npm:jspm-loader-css
         Updating registry cache...
         Looking up npm:css-modules-loader-core
         Looking up npm:debounce
         Looking up npm:path
         Looking up npm:toposort
         Looking up npm:date-now
ok   Installed npm:debounce@^1.0.0 (1.0.0)
ok   Installed npm:toposort@^0.2.12 (0.2.12)
         Looking up npm:process
         Looking up npm:util
ok   Installed npm:path@^0.12.7 (0.12.7)
ok   Installed npm:process@^0.11.1 (0.11.2)
         Looking up npm:inherits
ok   Installed npm:util@^0.10.3 (0.10.3)
             Downloading npm:[email protected]

    warn Error on processPackageConfig
             Package.json dependency postcss-modules-local-by-default set to github:css-modules/postcss-modules-local-by-default, which is not a valid dependency format for npm.
             It's advisable to publish jspm-style packages to GitHub or another registry so conventions are clear.

    warn Error processing package config for npm:css-modules-loader-core.

The background image URLs paths are something like this
chrome-devtools://devtools/assets/images/image.png

Do I need to do any specific setting to get this working?

Hi @geelen

I'm having a strange import order time to time when sharing the same stylesheet with two components.

I'm a bit confused not giving you directly a working buggy demo but please if you can take the time to refresh this demo several times (with or without cache) you will notice an unusual pink background on some buttons that results to a wrong style tags order in the head.

The other repo, https://github.com/geelen/jspm-loader-css-modules, says this repo is the 'opt-in' version where you need to use :local, but this appears to use localByDefault.

Is that intended? I'm fine with it... prefer localByDefault, but just curious.

Hey,

CSS files are loaded on-demand with this plugin. In production, that's fine. There's no FOUC because we've inlined all modules into their parents.

In development, I see FOUC because a view I'm rendering imports its CSS module, but the CSS module isn't the actual CSS file its just an object with class descriptors. The browser hasn't loaded that CSS file yet if it hasn't been seen. So, the element is appended to the page with the correct class, but the CSS isn't loaded until a moment later.

Not sure if this is worth resolving, but thought it'd be worth bringing up. Suspect the issue isn't limited to JSPM.

Hey,

I've been pouring over this code for a few days now and I think I've got a pretty darn good understanding of what's happening with it. A few complaints, but nothing major. I feel like I will be capable of taking over some sort of management of this project in the near future.

I have a question.

https://github.com/geelen/jspm-loader-css/blob/master/lib/CSSModuleLoaderProcess.js#L18

You can see here that someone has decided it's a good idea to bind fetch. I understand why this occurred. SystemJS runs fetch from within its own scope and we're trying to store data inside of this class which means we need a reference to the class.

However, this means we're making explicit references to System throughout the code which feels wrong because System was this prior to bind. I have no reasoning behind this, but I feel like that could come back to bite us at some point? Is that incorrect?

Hi Glen!
Could you please release the current master branch using a new version number?
We really need the fix afd2d80 in order to not crash and burn when trying to import from another package (like @value blue, green from 'fancypackage/colors.css') :)

Nice work, though!

I'm trying to run

jspm bundle app -wid

with jspm 0.17.0-beta.22
and getting

err  (SystemJS) TypeError: Plugins.autoprefixer is not a function
      at execute (/media/Data/dev/work/encurate/cognito-proof-of-concept/jspm_packages/npm/[email protected]/index.js15:94)

Hi, i am attempting to use this module but i constantly get System is not defined, when i do jspm bundle -sfx

Any clue, why it only happens when using jspm-loader/jspm-loader-module

Hi there, I'm just trying to get started with jspm-loader-css.

jspm v0.16.10
jspm-loader-css v1.0.1-beta1

<script src="jspm_packages/system.src.js"></script>
<script src="config.js"></script>
<script>
    System.import('main');
</script>

// main.js
import foo from './styles.css!';;

console.log(foo);

/* styles.css */
body {
    background: blue;
}

Opening the HTML file in my browser results in a network error:

GET http://127.0.0.1:8081/postcss-safe-parser.js 404 (Not Found)

Any ideas?