need to support ES6 module #210

fisherspy · 2016-01-05T03:19:49Z

I'm using webpack 2.0 beta, if I want to " import xx from 'x.css' ", then pass xx string to the style config(like styles: xx), running will go wrong cause the build will be: "styles: xx.default", however cssloader will be : "module.exports=xx", not "module['default']=xx".

hawkrives · 2016-01-30T20:54:41Z

Looking at my project, css-loader is exporting all of the class names both under default and as top-level exports, for compatibility with both es6 and commonjs modules.

If I have

:local(.subtitle) {
    font-size: 0.75em;
}

:local(.title) {
    font-feature-settings: 'onum';
}

its exporting them such that the exported module looks like

module.exports = {
  subtitle: '<hash>',
  title: '<hash>',
  default: {
    subtitle: '<hash>',
    title: '<hash>',
  },
}

I will note that if you're wanting to import a specific class name, you'll need to use the brace style of import: import { specificThing } from './x.css', rather than import specific from './x.css'.

I've been doing import styles from './x.css', personally, so that I can just pass styles[class name] around to whatever needs it.

fisherspy · 2016-02-04T06:21:47Z

Hi hawkrives,

I'm not sure I get what you mean, In my example, I write .bi-tab {xx}, then import {xx} from './x.css' or import xx from './x.css', I get this compiled javascript showing no default. Pls correct me：）

function(module, exports, webpack_require) {

exports = module.exports = __webpack_require__(338)();
// imports


// module
exports.push([module.id, ".bi-tab {\n  background-color: red; }\n", ""]);

// exports

hawkrives · 2016-02-04T14:34:03Z

Ok, hang on a second.

First things first: are you using the ?modules query with your css-loader? If you're not, then you'll need to use the :local style of defining classnames, otherwise they're global and not exported.

Anyway, I just tested this set of files, and they worked. When I open this index.html, the text has a red background.

Does this config work for you? I built it with webpack --config webpack.config.js.

package.json:

{
  "main": "index.js",
  "devDependencies": {
    "webpack": "^2.0.7-beta"
  }
}

styles.css: (with ?modules)

.className {
  background-color: red;
}

styles.css: (without ?modules)

:local(.className) {
  background-color: red;
}

index.js:

import {className} from './styles.css'

let div = document.createElement('div')
div.className = className
div.textContent = 'Words!'
document.body.appendChild(div)

webpack.config.js:

module.exports = {
  entry: ['./index.js'],
  output: {
    path: './',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader' },
      { test: /\.css$/, loader: 'style-loader!css-loader?modules' },  // important! you have to either have `?modules` or use the `:local` thingy in your css files.
    ],
  },
}

index.html:

<body></body>
<script src='./bundle.js'></script>

My bundle.js now includes this for my css file:

exports = module.exports = __webpack_require__(1)();
// imports

// module
exports.push([module.id, "._163b4mm1fitxanXK3GM0_t {\n  background-color: red;\n}\n", ""]);

// exports
exports.locals = {
    "className": "_163b4mm1fitxanXK3GM0_t"
};

fisherspy · 2016-02-05T07:12:18Z

@hawkrives thank you for your guide! I totally get what you mean, however it's not in my case, I'm sorry I didn't describe it correctly.

I'm trying Angular2 currently, if I want to develop a component called bi-tabs,

// bi-tabs.css file,
.bi-tabs {
background-color: red;
}
...
.xx {

}

// in bi-tabs.ts file,
import BiTabsCss from "./bi-tabs.css";
@component {
styles:[BitabsCss]
}
Bi-Tabs.css is only used in Bi-Tabs compnent, it's not global(view-encapsulation)， I don't need style-loader or add :local. I just need string in Bi-Tabs Css file and pass it to styles.

I think the bundle may be like: export.default = {whole content string in css file}

Thanks!

fisherspy · 2016-02-16T03:02:19Z

@hawkrives, I think show you the code is more clear:
Source:

import TabsCss from './bi-tabs.css';

@Component({
  selector: 'bi-tabs',
  template: `
    <div class="bi-tabs">
      <a 
        class="bi-tabs-item"
        [style.width.px]="320/biTabsConfigs.length"
        *ngFor="#tabConfig of biTabsConfigs"
        [routerLink]="[tabConfig.routerLink]"
      >
        <span class="iconfont "></span>
        <p class="bi-tabs-item-text">{{tabConfig.text}}</p>
      </a>
    </div>
  `,
  styles: TabsCss, //  need to be identical with string below
  // styles: [".bi-tabs{position: fixed;bottom: 0;left: 0;width: 100%;z-index: 199;height: 50px;background: #f2f2f2;border-top: 1px solid #dbdbdb;}.bi-tabs-item{display: inline-block;overflow: hidden;height: 100%;color: #999;text-decoration: none;text-overflow: ellipsis;white-space: nowrap;}
  //.bi-tabs-item.router-link-active{color: #F60!important;} .bi-tabs>.bi-tabs-item>.bi-tabs-item-text {font-size: 10px;height: 10px;line-height: 10px;width: 100%;margin: 5px auto;text-align: center;}"],
  directives: [ROUTER_DIRECTIVES],

Build:

var bi_tabs_css_1 = __webpack_require__(354);
    var BiTabs = (function () {
        function BiTabs() {
        }
        __decorate([
            core_1.Input(), 
            __metadata('design:type', Array)
        ], BiTabs.prototype, "biTabsConfigs", void 0);
        BiTabs = __decorate([
            core_1.Component({
                selector: 'bi-tabs',
                template: "\n    <div class=\"bi-tabs\">\n      <a \n        class=\"bi-tabs-item\"\n        [style.width.px]=\"320/biTabsConfigs.length\"\n        *ngFor=\"#tabConfig of biTabsConfigs\"\n        [routerLink]=\"[tabConfig.routerLink]\"\n      >\n        <span class=\"iconfont \"></span>\n        <p class=\"bi-tabs-item-text\">{{tabConfig.text}}</p>\n      </a>\n    </div>\n  ",
                styles: bi_tabs_css_1.default,
                directives: [router_1.ROUTER_DIRECTIVES],
            }), 
            __metadata('design:paramtypes', [])
        ], BiTabs);
        return BiTabs;
    }());
    exports.BiTabs = BiTabs;

/* 354 */
/***/ function(module, exports, __webpack_require__) {

    exports = module.e = __webpack_require__(355)();
    // imports
    // module
    exports.push([module.i, ".bi-tabs{position: fixed;bottom: 0;left: 0;width: 100%;z-index: 199;height: 50px;background: #f2f2f2;border-top: 1px solid #dbdbdb;}\n.bi-tabs-item{display: inline-block;overflow: hidden;height: 100%;color: #999;text-decoration: none;text-overflow: ellipsis;white-space: nowrap;}\n.bi-tabs-item.router-link-active{color: #F60!important;}\n.bi-tabs>.bi-tabs-item>.bi-tabs-item-text {font-size: 10px;height: 10px;line-height: 10px;width: 100%;margin: 5px auto;text-align: center;}", ""]);

    // exports
/***/ },

michael-ciniawsky · 2017-03-06T21:20:22Z

Will be fixed by #402

tjpalmer · 2017-09-04T17:57:50Z

Is this the kind of problem I should expect to see in the current state?

ModuleConcatenation bailout: Cannot concat with ./src/index.css (<- Module is not an ECMAScript module)

simlrh mentioned this issue Jan 20, 2017

Initial ES6 modules support #402

Closed

joshwiens added the has pull request label Jan 20, 2017

michael-ciniawsky closed this as completed Mar 6, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

need to support ES6 module #210

need to support ES6 module #210

fisherspy commented Jan 5, 2016

hawkrives commented Jan 30, 2016

fisherspy commented Feb 4, 2016

hawkrives commented Feb 4, 2016

fisherspy commented Feb 5, 2016

fisherspy commented Feb 16, 2016

michael-ciniawsky commented Mar 6, 2017

tjpalmer commented Sep 4, 2017

need to support ES6 module #210

need to support ES6 module #210

Comments

fisherspy commented Jan 5, 2016

hawkrives commented Jan 30, 2016

fisherspy commented Feb 4, 2016

hawkrives commented Feb 4, 2016

fisherspy commented Feb 5, 2016

fisherspy commented Feb 16, 2016

michael-ciniawsky commented Mar 6, 2017

tjpalmer commented Sep 4, 2017