necolas

/**
 * Functional and Unit test configuration
 *
 * This configuration file has to work in both Node.js and browser environments.
 * Therefore, this config is a template that is used to build the Intern config
 * used to run the tests. The packages and suites are automatically defined.
 *
 * Learn more about configuring Intern at:
 * https://github.com/theintern/intern/wiki/Configuring-Intern
 */

necolas

// Still need to work out how to combine rules for numbers
// that share a greatest common factor without the unit-builder
// actually containing the fraction to which they can both be
// reduced.

// Calculate the greatest common factor of two integers
@function gcf($a, $b) {
    @if $b == 0 {
        @return $a;
    }

necolas

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

class Button extends React.Component{
  render() {
    return (
      <button className={styles.button}>
        <span className={styles.icon} />
        Button
      </button>

necolas

/**
 * CSS modules required for this module to render correctly.
 * Correct order for entire app is resolved by script.
 */

@require "normalize.css";
@require "vendor/button.css";

/**
 * CSS component

necolas

General idea

• Create isolated, predictable, configurable UI components.

• Change the way that eng-design team operates by creating a workflow and audit trail that is based on reviewing modules.

• UI component's code and appearance are reviewed at the same time, with the same scope.

• Automatically be aware of changes to modules that depend on the one you are changing. Encourage decomposition of UI where appropriate.

necolas

/**
* @preserve Copyright 2012 Twitter, Inc.
* @license http://www.apache.org/licenses/LICENSE-2.0.txt
*/
var Hogan={};(function(e,t){function n(e,t,n){var r,i;return t&&typeof t=="object"&&(t[e]!=null?r=t[e]:n&&t.get&&typeof t.get=="function"&&(r=t.get(e))),r}function r(e,t,n,r,i,s){function o(){}function u(){}o.prototype=e,u.prototype=e.subs;var a,f=new o;f.subs=new u,f.subsText={},f.ib(),r=r||{},f.stackSubs=r;for(a in t)r[a]||(r[a]=t[a]),f.subsText[a]=s;for(a in r)f.subs[a]=r[a];i=i||{},f.stackPartials=i;for(a in n)i[a]||(i[a]=n[a]);for(a in i)f.partials[a]=i[a];return f}function l(e){return String(e===null||e===undefined?"":e)}function c(e){return e=l(e),f.test(e)?e.replace(i,"&").replace(s,"<").replace(o,">").replace(u,"'").replace(a,"""):e}e.Template=function(e,t,n,r){e=e||{},this.r=e.code||this.r,this.c=n,this.options=r||{},this.text=t||"",this.partials=e.partials||{},this.subs=e.subs||{},this.ib()},e.Template.prototype={r:function(e,t,n){return""},v:c,t:l,render:function(t,n,r){retu

necolas

.
├── README.md
├── component.json
├── components (installed by Component(1))
├── components-data
│   ├── a-page.md
│   └── articles
├── components-local
│   ├── article
│   │   ├── article.css

necolas

See: A simple Git deployment strategt for static sites

necolas

import styles from './styles.css';
import testIDs from './testIDs';

export render = (text) => (
  <button className={styles.button} data-test-id={testsIDs.button}>
    <span className={styles.icon}></span>
    {text}
  </button>
);

necolas

about/index.css was changed. color: black -> color: blue.

Issues with output:

• Same hash
• Same chunkhash (messes with cache invalidation of CSS)
• Another different publicPath coming from file-loader in the extracted CSS.

Webpack