Skip to content

Instantly share code, notes, and snippets.

@necolas
necolas / Composite-Link.js
Created September 19, 2018 23:02
Next.js links with React Native for Web
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>
);
/**
* 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
necolas / production.css
Last active December 29, 2024 13:09
"atomic css" as compiled output
.abcd {
align-items: center;
}
.efgh {
background: blue;
}
.ijkl {
color: red;
@necolas
necolas / generated-ie.css
Last active December 29, 2024 13:09
Generating isolated IE-specific stylesheet
.a {
background: red;
/* dropped linear gradient based on IE CSS support (like what autoprefixer does) */
zoom: 1;
}
.b {
background: green;
}
@necolas
necolas / createOrderedCSSStyleSheet.js
Last active December 29, 2024 13:08
OrderedCSSStyleSheet: control the insertion order of CSS
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
*/
type Groups = { [key: number]: Array<string> };
@necolas
necolas / input.css
Last active December 29, 2024 13:08
Transparent CSS preprocessing
/**
* Input CSS
* No custom syntax. Just write "future" CSS without vendor prefixed properties or values.
* Use a subset of CSS variables (not dynamic or scoped).
* Specify a level of browser support: IE 8+, etc.
* Tool takes browser support and specific declarations to generate vendor-specific variants.
* This source code is just CSS and works in any browser with adequate support.
* One day, perhaps you'll have no need to preprocess this code.
*/
@necolas
necolas / _mixin-better.scss
Created April 13, 2012 15:52
Sass grid construction
// 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
necolas / ie-cc-1.html
Created May 20, 2011 12:15
Conditional classes test cases: DRYer and Compat View icon is not displayed in IE8/9. If X-UA-Compatible header is set using a server config then ie-cc-serverconfig.html is all that is needed.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<!--[if lt IE 7]><html class="no-js ie6"><![endif]-->
<!--[if IE 7]><html class="no-js ie7"><![endif]-->
@necolas
necolas / stylesheet-injector.js
Created November 5, 2010 09:49
Create and append style sheets to document <head> using JavaScript
(function() {
var css = [
'/css/default.css',
'/css/section.css',
'/css/custom.css'
],
i = 0,
link = document.createElement('link'),
head = document.getElementsByTagName('head')[0],
tmp;