@penskemediacorp/larva-css 1.7.0-alpha.0 → 1.7.0

package/gulpfile.js

@@ -1,95 +1,123 @@
-const path = require('path');
-const { task, src, watch, series, dest } = require('gulp');
-const sass = require('gulp-sass');
-const concat = require('gulp-concat');
-const gulpStylelint = require('gulp-stylelint');
-const rename = require('gulp-rename');
+/**
+ * Things that are different from AMH:
+ * - path resolved to src/ not src/scss
+ * - no need to concat
+ * - remove lrvCssDir
+ *
+ * Potential improvement: make the config object dynamic, determine the
+ * dest file according to the changed file.
+ */
 
-const sassOpts = {
-	includePaths: [
-		path.join( __dirname, './node_modules' )
-	]
-};
+const Fiber = require( 'fibers' );
+const gulp = require( 'gulp' );
+const path = require( 'path' );
+const sass = require( 'gulp-sass' );
+const concat = require( 'gulp-concat' );
+const gulpStylelint = require( 'gulp-stylelint' );
+const del = require( 'del' );
+const { mkdirpSync, existsSync } = require( 'fs-extra' );
 
-function styles( done ) {
-	// Generic
-	src('./src/*generic/*.common.inline.scss')
-		.pipe(gulpStylelint({
-			failAfterError: false,
-			reporters: [{
-				formatter: 'string',
-				console: true,
-			}]
-		}))
-		.pipe(sass( sassOpts ).on( 'error', sass.logError) )
-		.pipe(concat('generic.common.inline.css'))
-		.pipe(dest('./build/css/'));
+const { generateAFontScss } = require( './lib/generators' );
 
-	src('./src/*generic/*.common.async.scss')
-		.pipe(sass( sassOpts ).on('error', sass.logError))
-		.pipe(concat('generic.common.async.css'))
-		.pipe(dest('./build/css/'));
+sass.compiler = require( 'sass' );
 
-	// Algorithms
-	// TODO: make this more DRY
-	src('./src/**/a-*.common.inline.scss')
-		.pipe(gulpStylelint({
-			failAfterError: false,
-			reporters: [{
-				formatter: 'string',
-				console: true,
-			}]
-		}))
-		.pipe(sass( sassOpts ).on('error', sass.logError))
-		.pipe(concat('algorithms.common.inline.css'))
-		.pipe(dest('./build/css/'));
+const sassOpts = {
+	includePaths: [ path.resolve( './node_modules' ), path.resolve( './src' ) ],
+	outputStyle: 'compressed',
+	fiber: Fiber,
+};
 
-	src('./src/**/a-*.common.async.scss')
-		.pipe(gulpStylelint({
-			failAfterError: false,
-			reporters: [{
-				formatter: 'string',
-				console: true,
-			}]
-		}))
-		.pipe(sass( sassOpts ).on('error', sass.logError))
-		.pipe(concat('algorithms.common.async.css'))
-		.pipe(dest('./build/css/'));
+const cssDest = './build/css/';
+const scssDest = './src/_generated';
 
-	// Utilities
-	src('./src/**/u-*.common.inline.scss')
-		.pipe(sass( sassOpts ).on('error', sass.logError))
-		.pipe(concat('utilities.common.inline.css'))
-		.pipe(dest('./build/css/'));
+const cssFiles = {
+	generic_inline: {
+		css: {
+			orig: [ './src/01-generic/*.common.inline.scss' ],
+			file: 'generic.common.inline.css',
+		},
+	},
+	algorithms_async: {
+		css: {
+			orig: [ './src/**/a-*.common.async.scss' ],
+			file: 'algorithms.common.async.css',
+		},
+	},
+	algorithms_inline: {
+		css: {
+			orig: [ './src/**/a-*.common.inline.scss' ],
+			file: 'algorithms.common.inline.css',
+		},
+	},
+	utilities_async: {
+		css: {
+			orig: [ './src/**/u-*.common.async.scss' ],
+			file: 'utilities.common.async.css',
+		},
+	},
+	utilities_inline: {
+		css: {
+			orig: [ './src/**/u-*.common.inline.scss' ],
+			file: 'utilities.common.inline.css',
+		},
+	},
+	js_async: {
+		css: {
+			orig: [ './src/**/js-*.common.async.scss' ],
+			file: 'js.common.async.css',
+		},
+	},
+	js_inline: {
+		css: {
+			orig: [ './src/**/js-*.common.inline.scss' ],
+			file: 'js.common.inline.css',
+		},
+	},
+};
 
-	src('./src/**/u-*.common.async.scss')
-		.pipe(sass( sassOpts ).on('error', sass.logError))
-		.pipe(concat('utilities.common.async.css'))
-		.pipe(dest('./build/css/'));
+const generateScssFromTokens = ( done ) => {
+	mkdirpSync( scssDest );
+	generateAFontScss( scssDest );
+	done();
+};
 
-	// JS
-	src('./src/**/js-*.common.inline.scss')
-		.pipe(sass( sassOpts ).on('error', sass.logError))
-		.pipe(concat('js.common.inline.css'))
-		.pipe(dest('./build/css/'));
+const clean = ( done ) => {
+	const dirs = [ scssDest, cssDest ];
 
-	src('./src/**/js-*.common.async.scss')
-		.pipe(sass( sassOpts ).on('error', sass.logError))
-		.pipe(concat('js.common.async.css'))
-		.pipe(dest('./build/css/'));
+	dirs.forEach( ( dir ) => {
+		if ( existsSync( dir ) ) {
+			del.sync( [ dir ] );
+		}
+	} );
 
-	
-	// If we want to handle JS-related CSS on a module-by-module basis
-	// src('./src/**/js-*.scss')
-	// 	.pipe(sass( sassOpts ).on('error', sass.logError))
-	// 	.pipe(rename({
-	// 		dirname: 'js',
-	// 	}))
-	// 	.pipe(dest('./build/css/'));
+	done();
+};
+
+const styles = ( done ) => {
+	mkdirpSync( cssDest );
 
+	Object.keys( cssFiles ).forEach( ( val ) => {
+		gulp.src( cssFiles[ val ].css.orig )
+			.pipe(
+				gulpStylelint( {
+					failAfterError: false,
+					reporters: [
+						{
+							formatter: 'string',
+							console: true,
+						},
+					],
+				} )
+			)
+			.pipe( sass( sassOpts ).on( 'error', sass.logError ) )
+			.pipe( concat( cssFiles[ val ].css.file ) )
+			.pipe( gulp.dest( cssDest ) );
+	} );
 	done();
-}
+};
+
+exports.watch = function () {
+	gulp.watch( './src/**/*.scss', styles );
+};
 
-exports.default = function() {
-	watch( './src/**/*.scss', series( styles ) );
-}
+exports.default = gulp.series( clean, generateScssFromTokens, styles );

package/lib/generators.js

@@ -0,0 +1,93 @@
+/**
+ * External dependencies.
+ */
+const fs = require( 'fs-extra' );
+const path = require( 'path' );
+const { kebabify } = require( '../../larva-tokens/lib/utils' );
+const fontData = require( '../../larva-tokens/lib/font-data' );
+
+const { allSelectors, tokenProperties } = fontData;
+
+/**
+ * Transform properties into CSS-friendly format.
+ *
+ * @return Array of properties in kebab-case.
+ */
+const properties = tokenProperties.map( ( property ) => kebabify( property ) );
+
+/**
+ * Form a ruleset for the selector that builds custom properties
+ * that correspond to tokens for the style.
+ *
+ * @param {string} selector
+ * @return {string} CSS ruleset for the selector.
+ */
+const ruleset = ( selector ) => {
+	let css = '';
+
+	const nameSlugs = selector.split( '-' );
+	const family = nameSlugs[ 3 ];
+	const tokenBase = [ ...nameSlugs ].slice( 3, nameSlugs.length ).join( '-' );
+
+	css += `\n\t// Define this token locally; it can be defined via larva-tokens, if needed in the future.
+	--font-family: var( --font-family-${ family } );
+
+	font-family: var( --font-family );`;
+
+	css += '\n';
+
+	properties.forEach( ( property ) => {
+		css += `\t${ property }: var( --${ tokenBase }-${ property }-mobile );\n`;
+	} );
+
+	css += '\n';
+	css += '\t@media (min-width: $screen-desktop) {';
+	css += '\n';
+
+	properties.forEach( ( property ) => {
+		css += `\t\t${ property }: var( --${ tokenBase }-${ property }-desktop );\n`;
+	} );
+	css += '\t}\n';
+	css += '\t@media (min-width: $screen-desktop-xl) {';
+	css += '\n';
+
+	properties.forEach( ( property ) => {
+		css += `\t\t${ property }: var( --${ tokenBase }-${ property }-desktop-xl );\n`;
+	} );
+	css += '\t}';
+
+	return css;
+};
+
+/**
+ * Build the CSS string with rulesets for each selector.
+ *
+ * @param {Array} selectors
+ * @return {string} CSS to be written to a file.
+ */
+const generate = ( selectors ) => {
+	let css = '';
+
+	selectors.forEach( ( selector ) => {
+		css += `\n.${ selector } {`;
+		css += ruleset( selector );
+		css += `\n}\n`;
+	} );
+
+	return css;
+};
+
+const generateAFontScss = ( directory ) => {
+	let css = '// Generated css from larva-tokens/lib/generators.js\n';
+
+	css += generate( allSelectors );
+
+	fs.writeFileSync( path.join( directory, `_a-font.scss` ), css );
+	console.log( 'Generated _a-font.scss.' ); // eslint-disable-line no-console
+};
+
+module.exports = {
+	generate,
+	ruleset,
+	generateAFontScss,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-css",
-  "version": "1.7.0-alpha.0",
+  "version": "1.7.0",
   "description": "Larva CSS.",
   "author": "laras126 <laras126@gmail.com>",
   "homepage": "https://github.com/penske-media-corp/pmc-larva#readme",
@@ -15,15 +15,23 @@
   },
   "scripts": {
     "test": "../../node_modules/.bin/jest",
-    "watch": "node node_modules/@penskemediacorp/larva/lib/watch.js"
+    "build": "./node_modules/.bin/gulp",
+    "dev": "./node_modules/.bin/gulp watch"
   },
   "bugs": {
     "url": "https://github.com/penske-media-corp/pmc-larva/issues"
   },
   "devDependencies": {
-    "@penskemediacorp/larva-scss": "^1.5.3-alpha.0",
-    "node-sass": "^4.12.0",
-    "stylelint": "^10.1.0"
+    "@penskemediacorp/larva-scss": "^1.1.2",
+    "@penskemediacorp/larva-tokens": "^1.0.0",
+    "del": "^6.0.0",
+    "fibers": "^5.0.1",
+    "fs-extra": "^9.1.0",
+    "gulp": "^4.0.2",
+    "gulp-concat": "^2.6.1",
+    "gulp-sass": "^4.1.0",
+    "gulp-stylelint": "^13.0.0",
+    "sass": "^1.32.8"
   },
-  "gitHead": "316e0dfc58c0dae2674a686b547c1a4e992ef323"
+  "gitHead": "cf6bd59be49f53f8591ef4d8c845b3b9a06b3e12"
 }

package/src/01-generic/elements.common.inline.scss

@@ -1,6 +1,34 @@
+@import 'setup';
 
-* {
+html {
+	// Use whitespace and initial in custom properties to invalidate values
+	// for simplification of media queries.
+	// Explanation::
+	// https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/
+	// Reduced example:
+	// https://codepen.io/laras126/pen/ExZbvPY
+
+	--ON: initial;
+	--OFF: /*! whitespace toggle */;
+
+	--is-desktop: var( --OFF );
+	--is-desktopxl: var( --OFF );
+
+	@include pmc-breakpoint( desktop ) {
+		--is-desktop: var( --ON );
+	}
+
+	@include pmc-breakpoint( desktop-xl ) {
+		--is-desktopxl: var( --ON );
+	}
+}
+
+*,
+::before,
+::after {
 	box-sizing: border-box;
+	border-width: 0;
+	border-style: solid;
 }
 
 img {
@@ -24,4 +52,8 @@ figure {
 
 svg {
 	fill: currentColor;
+}
+
+cite {
+	font-style: normal;
 }

package/src/01-generic/forms.common.inline.scss

@@ -0,0 +1,10 @@
+@import 'setup';
+
+::placeholder {
+	color: #{map-get( $TOKENS-MAP, color-grey-light )};
+}
+
+button {
+	padding-left: 0;
+	padding-right: 0;
+}

package/src/01-generic/side-skins.common.inline.scss

@@ -0,0 +1,10 @@
+@import 'setup';
+
+// For side skin ads. This is added to `body` or to `html`.
+// If the elements inside have been build responsively, everything
+// should automatically adjust for the skins.
+.has-side-skins {
+	max-width: $screen-desktop;
+	margin-left: auto;
+	margin-right: auto;
+}

package/src/01-generic/typography.common.inline.scss

@@ -1,30 +1,40 @@
-@import '@penskemediacorp/larva-scss/dist/tokens';
+@import 'setup';
 
 body {
 
-	// @todo: this is outside the system and it should use the font-family mixin.
-	// That mixin needs to support `&.wf-active`, right now it only supports `.wf-active &`.
-	// stylelint-disable property-blacklist
-	font-family: Helvetica, sans-serif;
+	// stylelint-disable property-disallowed-list
+	font-family: map-get( $TOKENS-MAP, font-family-basic );
+	font-family: var( --font-family-basic, #{map-get( $TOKENS-MAP, font-family-basic )} );
 
 	margin: $spacer-0;
-
-	// stylelint-enable property-blacklist
+	// stylelint-enable property-disallowed-list
 
 	line-height: $line-height-normal;
 }
 
+// Apply the webfont when fonts are loaded.
+.wf-active body {
+
+	@each $token, $value in $TOKENS-MAP {
+		$token-str: quote( $token );
+
+		// example: font-family-primary
+		// each will have a corresponding `fancy` variation.
+		@if str-index( $token-str, 'font-family' ) and not str-index( $token-str, 'fancy' ) {
+			--#{$token}: var( --#{$token}-fancy );
+		}
+	}
+
+}
+
 strong {
-	font-weight: $font-weight-bold;
+	font-weight: map-get( $semantic-font-weights, bold );
 }
 
 a {
-	color: map-get( $semantic-color-list, brand-red );
+	color: map-get( $TOKENS-MAP, brand-primary );
+	color: var( --color-brand-primary, #{map-get( $TOKENS-MAP, color-brand-primary )} );
 	text-decoration: none;
-
-	&:hover {
-		color: map-get( $semantic-color-list, brand-red-dark );
-	}
 }
 
 h1,

package/src/02-algorithms/a-buy-now/a-buy-now.common.inline.scss

@@ -0,0 +1,112 @@
+@import 'setup';
+
+.lrv-a-buy-now {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: relative;
+
+	@include pmc-breakpoint( tablet ) {
+		display: block;
+	}
+}
+
+.lrv-a-buy-now__image {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	background-color: $color-white;
+	max-width: pmc-rem(300);
+
+	@include pmc-breakpoint( tablet ) {
+		width: pmc-rem(190); // 160 + 30
+		left: 0;
+		padding: 0 pmc-rem(30) 0 0;
+	}
+
+	@include pmc-breakpoint( desktop ) {
+		width: pmc-rem(245); // 185 + 30 + 30
+		left: pmc-rem(94);
+		padding: 0 pmc-rem(30);
+	}
+}
+
+.lrv-a-buy-now__button {
+	margin-top: pmc-rem(16);
+
+	@include pmc-breakpoint( tablet ) {
+		margin-top: 0;
+		position: absolute;
+		top: 50%;
+		left: pmc-rem(190);
+		transform: translateY(-50%);
+	}
+
+	@include pmc-breakpoint( desktop ) {
+		left: pmc-rem(339);
+	}
+}
+
+.lrv-a-buy-now__hr {
+	display: none;
+	margin: 0;
+	padding: 0;
+	border-top: pmc-rem(0.5) solid #000;
+	position: relative;
+
+	@include pmc-breakpoint( tablet ) {
+		display: block;
+	}
+}
+
+.lrv-a-buy-now__hr--top {
+	top: 0;
+
+	@include pmc-breakpoint( tablet ) {
+		top: pmc-rem(37);
+	}
+
+	@include pmc-breakpoint( desktop ) {
+		top: pmc-rem(50);
+	}
+}
+
+.lrv-a-buy-now__hr--bottom {
+	bottom: 0;
+
+	@include pmc-breakpoint( tablet ) {
+		bottom: pmc-rem(37);
+	}
+
+	@include pmc-breakpoint( desktop ) {
+		bottom: pmc-rem(50);
+	}
+}
+
+// Optional span.
+.lrv-a-buy-now__span {
+	display: none;
+	position: absolute;
+	right: 0;
+
+	@include pmc-breakpoint( tablet ) {
+		display: block;
+		bottom: pmc-rem(16);
+	}
+
+	@include pmc-breakpoint( desktop ) {
+		bottom: pmc-rem(29);
+	}
+}
+
+// Used when image is not present.
+.lrv-a-buy-now__p {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.lrv-a-buy-now__p .lrv-a-buy-now__button {
+	position: inherit;
+	transform: none;
+}

package/src/02-algorithms/a-carousel-grid/a-carousel-grid.common.inline.scss

@@ -0,0 +1,66 @@
+@import 'setup';
+
+.lrv-a-carousel-grid {
+    --grid-overlay: initial;
+
+    display: grid;
+    grid-template-columns: 1fr;
+
+    @include pmc-breakpoint( tablet ) {
+        grid-gap: var(--spacing-050);
+        grid-template-columns: 2fr 1fr;
+    }
+}
+
+.lrv-a-carousel-grid__overlay {
+    --grid-overlay: grid;
+
+    @include pmc-breakpoint( tablet ) {
+        grid-template-columns: 1fr;
+    }
+}
+
+.lrv-a-carousel-grid__overlay--primary {
+
+    @include pmc-breakpoint( desktop ) {
+        display: var(--grid-overlay);
+        grid-template-columns: 1fr 1.5rem 2fr;
+        align-items: center;
+        grid-auto-flow: column;
+        height: 100%;
+    }
+}
+
+.lrv-a-carousel-grid__overlay--primary-img {
+
+    @include pmc-breakpoint( desktop ) {
+        grid-column: 2/4;
+        grid-row: 1;
+    }
+}
+
+.lrv-a-carousel-grid__overlay--primary-content {
+
+    @include pmc-breakpoint( desktop ) {
+        grid-column: 1/3;
+        grid-row: 1;
+        padding: 1.875rem;
+        z-index: 1;
+        background-color: #fff;
+    }
+}
+
+.lrv-a-carousel-grid__overlay--secondary {
+
+    @include pmc-breakpoint( desktop ) {
+        display: var(--grid-overlay);
+        grid-template-columns: repeat(3,1fr);
+        grid-gap: var(--spacing-125);
+    }
+}
+
+.lrv-a-carousel-grid__overlay--secondary-card {
+    display: var(--grid-overlay);
+    grid-template-columns: 6.25rem 1fr;
+    grid-gap: var(--spacing-1);
+}

package/src/02-algorithms/a-children-border/a-children-border.common.inline.scss

@@ -0,0 +1,43 @@
+@import 'setup';
+
+:root {
+	--a-children-border-color: #{ map-get( $TOKENS-MAP, color-black ) };
+}
+
+.lrv-a-children-border--grey {
+	--a-children-border-color: #{ map-get( $TOKENS-MAP, border-color-grey ) };
+}
+
+.lrv-a-children-border--grey-light {
+	--a-children-border-color: #{ map-get( $TOKENS-MAP, border-color-grey-light ) };
+}
+
+// stylelint-disable selector-max-compound-selectors
+.lrv-a-children-border-vertical {
+	& > * + * {
+		border-top: var(--a-children-border-width, 1px) solid var(--a-children-border-color, '');
+	}
+}
+
+.lrv-a-children-border-vertical\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		& > * + * {
+			border-top: var(--a-children-border-width, 1px) solid var(--a-children-border-color, '');
+		}
+	}
+}
+
+.lrv-a-children-border-horizontal {
+	& > * + * {
+		border-left: var(--a-children-border-width, 1px) solid var(--a-children-border-color, '');
+	}
+}
+
+.lrv-a-children-border-horizontal\@desktop {
+	@include pmc-breakpoint(desktop) {
+		& > * + * {
+			border-left: var(--a-children-border-width, 1px) solid var(--a-children-border-color, '');
+		}
+	}
+}
+// stylelint-enable selector-max-compound-selectors

package/src/02-algorithms/a-children-link-color/a-children-link-color.common.inline.scss

@@ -0,0 +1,15 @@
+@import 'setup';
+
+.lrv-a-children-link-color-black {
+	& > a {
+		color: map-get( $TOKENS-MAP, color-black );
+		color: var( --color-black );
+	}
+}
+
+.lrv-a-children-link-color-brand-primary\:hover {
+	& > a:hover {
+		color: map-get( $TOKENS-MAP, color-brand-primary );
+		color: var( --color-brand-primary );
+	}
+}