CSS Modules

in webpack

wtf ?

Scoped locally by default

// Widget1.css

.button {
  border-radius: 4px;
  background-color: LightCyan;
}

// generated

.Widget1_button_1FUOu {
  border-radius: 4px;
  background-color: LightCyan;
}

//Widget1.js

import React from 'react';
import styles from './Widget1.css';

// styles == {
//   button: "Widget1_button_1FUOu"
// }
 
class Widget1 extends React.Component {
  render() {
    return (
      <button className={styles.button}>
        Click Me
      </button>
    );
  }
}

export default Widget1;

How about global

/* style.css */

:local(.wrapper) { ... }

.wrapper { ... }

:global .wrapper { ... }

.localA :global .global-b .global-c :local(.localD.localE) .global-d {}

Composition

/* util.css */
.grape {
  border: 2px solid #ff00ff;
  border-radius: 10px;
  background-color: purple;
  color: white;
}
 
.grape:hover {
  background-color: #ff00ff;
}

/* util.js */
.util_grape_A_sa5 {
  border: 2px solid #ff00ff;
  border-radius: 10px;
  background-color: purple;
  color: white;
}
 
.util_grape_A_sa5:hover {
  background-color: #ff00ff;
}
 
/* Widget5.css */
.Widget5_button_1Aw-M {
  padding: .5rem;
  margin-top: .5rem;
}

/* Widget5.css */

.button {
  composes: grape from './util.css';
  padding: .5rem;
  margin-top: .5rem;
}

import React from 'react';
import styles from './Widget5.css';
// styles == {
//   button: "Widget5_button_1Aw-M util_grape_A_sa5"
// }
 
class Widget5 extends React.Component {
  render() {
    return (
      <button className={styles.button}>
        Button
      </button>
    );
  }
}

export default Widget5;

Composition Rules

• 允许多个composes
• 在其他样式属性之前
• 只对局部规则有效
• 同时组合多个类

Order of multiple files

Naming Rules

camelCase

Why CSS Modules

• 减少样式冲突

• 依赖声明

• 没有全局作用

Modular and reusable CSS!

Interoperable CSS

a superset of standard CSS, making use of two additional pseudo-selectors

:export & :import

/* styleA.css */

:export {
  containerPadding: 15px;
}

module.exports = {
    "containerPadding": "15px"
}

/* styleB.css */

import("styleA.css") {
  padding: containerPadding;
}

.container {
  padding-left: padding;
}

https://github.com/css-modules/icss#specification

Webpack

// index.js

import '../css/global.css'

// jsx
<div className="someClassName">hello world</div>

// webpack.config.js

module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style-loader!css-loader' }
    ]
  }
}

// webpack.config.js

module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style-loader!css-loader?modules' }
    ]
  }
}

// jsx

import styles from '../css/app.css'

<div className={styles.someClassName}>hello world</div>

NOTE

// normal mode (not css module mode)

url(image.png) => require("./image.png")
url(~module/image.png) => require("module/image.png")

require("css-loader?sourceMap")

require("style-loader!css-loader?importLoaders=1!autoprefixer-loader!...")

require("css-loader?-import")

require("css-loader?camelCase")

https://github.com/webpack/css-loader#css-modules

Powerful !!!

Enough ???

The End