Skip to content

Instantly share code, notes, and snippets.

Nicolas Gallagher necolas

Block or report user

Report or block necolas

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@necolas
necolas / production.css
Last active Aug 29, 2015
"atomic css" as compiled output
View production.css
.abcd {
align-items: center;
}
.efgh {
background: blue;
}
.ijkl {
color: red;
@necolas
necolas / Component.js
Created Mar 13, 2015
Leadfoot component objects example
View Component.js
'use strict';
/**
* Base component driver
*
* Related docs:
* https://theintern.github.io/leadfoot/Command.html
* https://theintern.github.io/leadfoot/Element.html
*
* @param {leadfoot/Command} remote
@necolas
necolas / intern.config.js
Created Sep 8, 2014
Auto-generating the intern test config
View intern.config.js
/**
* 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
necolas / webpack-pre-css-loader.js
Created Sep 8, 2014
webpack-pre-css-loader.js
View webpack-pre-css-loader.js
var path = require('path');
/**
* CSS transform dependencies
*/
var autoprefixer = require('autoprefixer-core');
var calc = require('rework-calc');
var color = require('rework-color-function');
var conformance = require('rework-suit-conformance');
@necolas
necolas / output-after-css-change.md
Created Aug 30, 2014
Webpack hashing and file-loader bugs
View output-after-css-change.md

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

View flight-groups.js
var TweetBox = defineComponent(function() {
this.attributes({
charLimit: 140
withGeoControl: false;
});
if (withGeoControl === true) {
// attach to a sub node
this.child(GeoControl).attachTo('.GeoControl');
}
@necolas
necolas / MyComponent.css
Created Apr 15, 2014
SUIT CSS spacing with variables
View MyComponent.css
:root {
--margin-MyComponent-part: var(--theme-margin-small);
}
.MyComponent {}
.MyComponent-part {
margin: var(--margin-MyComponent-part);
}
@necolas
necolas / generated-ie.css
Last active Aug 29, 2015
Generating isolated IE-specific stylesheet
View generated-ie.css
.a {
background: red;
/* dropped linear gradient based on IE CSS support (like what autoprefixer does) */
zoom: 1;
}
.b {
background: green;
}
@necolas
necolas / generated-ie-only.css
Last active Aug 29, 2015
Problem with extracting IE-specific CSS into separate stylesheet.
View generated-ie-only.css
.a {
background: red;
}
You can’t perform that action at this time.