Packages: Move Custom CSS Properties to new calypso-css-custom-properties package

assets/stylesheets/directly.scss

@@ -33,7 +33,7 @@
 // QUIT AND RESTART YOUR BROWSER NORMALLY WHEN YOU'RE DONE MAKING LOCAL CSS CHANGES.
 
 @import 'shared/mixins/mixins';
-@import 'shared/colors';
+@import '~@automattic/calypso-css-custom-properties/src/shared/colors';
 @import 'shared/extends-forms';
 @import 'shared/forms';
 @import 'shared/typography';

assets/stylesheets/editor.scss

@@ -1,6 +1,5 @@
-
-@import 'shared/colors';
-@import 'shared/color-schemes';
+@import '~@automattic/calypso-css-custom-properties/src/shared/colors';
+@import '~@automattic/calypso-css-custom-properties/src/shared/color-schemes';
 @import 'shared/typography';
 @import 'shared/mixins/breakpoints';
 

assets/stylesheets/shared/_utils.scss

@@ -1,7 +1,6 @@
-
 @import '../shared/functions'; // functions that we've used from Compass, ported over
 @import '../shared/functions/functions'; // sass functions for z-index, etc.
-@import '../shared/colors'; // import all of our wpcom colors
+@import '~@automattic/calypso-css-custom-properties/src/shared/colors'; // import all of our wpcom colors
 @import '../shared/typography'; // all the typographic rules, variables, etc.
 @import '../shared/variables'; // other variables
 @import '../shared/mixins/mixins'; // sass mixins for gradients, bordius radii, etc.

assets/stylesheets/shared/functions/_functions.scss

@@ -1,4 +1,3 @@
-
-@import 'hex-to-rgb';
+@import '~@automattic/calypso-css-custom-properties/src/shared/functions/_hex-to-rgb';
 @import 'overflow-gradient';
 @import 'z-index';

assets/stylesheets/style.scss

@@ -1,11 +1,10 @@
-
 // External Dependencies
 @import 'vendor';
 
 // Shared
 @import 'shared/reset'; // css reset before the rest of the styles are defined
 @import 'shared/utils'; // utilities that are used by all CSS but don't produce any code
-@import 'shared/color-schemes'; // import color schemes
+@import '~@automattic/calypso-css-custom-properties/src/shared/color-schemes'; // import color schemes
 @import 'shared/animation'; // all UI animation
 @import 'shared/forms'; // form styling
 @import 'shared/welcome'; // welcome messages

package.json

@@ -77,7 +77,6 @@
     "classnames": "2.2.6",
     "click-outside": "2.0.2",
     "clipboard": "2.0.4",
-    "color-studio": "github:automattic/color-studio#1.0.1",
     "component-closest": "1.0.1",
     "component-file-picker": "0.2.1",
     "cookie": "0.3.1",
@@ -228,7 +227,6 @@
     "postcss": "postcss -r",
     "prebuild": "npm run -s install-if-deps-outdated",
     "build": "npm run build-css && npm run build-packages && run-p -s build-devdocs:* build-server build-client-if-prod build-client-if-desktop",
-    "prebuild-css": "node bin/build-custom-properties-css.js",
     "build-css": "run-p -s build-css:*",
     "build-css:debug": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js --include-path client --source-map \"public/style-debug.css.map\" assets/stylesheets/style.scss public/style-debug.css && npm run -s postcss -- public/style-debug.css && rtlcss public/style-debug.css public/style-debug-rtl.css",
     "build-css:directly": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js --include-path client assets/stylesheets/directly.scss public/directly.css --output-style compressed && npm run -s postcss -- public/directly.css",
@@ -288,6 +286,7 @@
   },
   "devDependencies": {
     "@automattic/babel-plugin-i18n-calypso": "file:./packages/babel-plugin-i18n-calypso",
+    "@automattic/calypso-css-custom-properties": "file:./packages/calypso-css-custom-properties",
     "@babel/plugin-transform-react-jsx": "7.3.0",
     "@wordpress/babel-plugin-makepot": "2.1.3",
     "babel-eslint": "10.0.1",

packages/calypso-css-custom-properties/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+	rules: {
+		'import/no-extraneous-dependencies': [ 'error', { packageDir: __dirname } ],
+	},
+};

packages/calypso-css-custom-properties/.gitignore

@@ -0,0 +1 @@
+src/__color-studio

packages/calypso-css-custom-properties/README.md

@@ -0,0 +1,11 @@
+# Calypso CSS Custom Properties
+
+This package contains a number of CSS custom properties (i.e. variables) for use in Calypso.
+Most of them are synonyms for colors defined by the [Color Studio](https://automattic.github.io/color-studio/).
+
+## Build Steps
+
+```
+npm ci
+npm run build
+```

packages/calypso-css-custom-properties/bin/build-custom-properties-css.js

@@ -0,0 +1,14 @@
+/* eslint-disable import/no-nodejs-modules */
+const { dirname, join } = require( 'path' );
+const { existsSync, mkdirSync, writeFileSync } = require( 'fs' );
+const { renderSync } = require( 'node-sass' );
+
+const INPUT_FILE = join( __dirname, '..', 'src', 'custom-properties.scss' );
+const OUTPUT_FILE = join( __dirname, '..', 'dist', 'custom-properties.css' );
+
+if ( ! existsSync( dirname( OUTPUT_FILE ) ) ) {
+	mkdirSync( dirname( OUTPUT_FILE ), { recursive: true } );
+}
+
+const output = renderSync( { file: INPUT_FILE } );
+writeFileSync( OUTPUT_FILE, output.css );

packages/calypso-css-custom-properties/bin/postinstall.js

@@ -0,0 +1,12 @@
+/* eslint-disable import/no-nodejs-modules */
+const { dirname, join } = require( 'path' );
+const { copyFileSync, existsSync, mkdirSync } = require( 'fs' );
+
+const srcFile = 'color-variables.scss';
+const target = join( __dirname, '..', 'src', '__color-studio', srcFile );
+
+if ( ! existsSync( dirname( target ) ) ) {
+	mkdirSync( dirname( target ), { recursive: true } );
+}
+
+copyFileSync( require.resolve( 'color-studio/dist/' + srcFile ), join( target ) );

packages/calypso-css-custom-properties/package.json

@@ -0,0 +1,39 @@
+{
+	"name": "@automattic/calypso-css-custom-properties",
+	"version": "1.0.0-alpha.0",
+	"description": "Calypso Shared Style Bits",
+	"author": "Automattic",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"calypso",
+		"wordpress",
+		"sass",
+		"css"
+	],
+	"homepage": "https://github.com/Automattic/wp-calypso/tree/master/packages/calypso-css-custom-properties/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Automattic/wp-calypso.git"
+	},
+	"bugs": {
+		"url": "https://github.com/Automattic/wp-calypso/issues"
+	},
+	"engines": {
+		"node": "^10.13.0",
+		"npm": "^6.1.0"
+	},
+	"main": "dist/custom-properties.css",
+	"dependencies": {
+		"color-studio": "github:automattic/color-studio#1.0.1"
+	},
+	"devDependencies": {
+		"node-sass": "^4.11.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build": "node bin/build-custom-properties-css.js",
+		"postinstall": "node bin/postinstall.js"
+	}
+}

assets/stylesheets/shared/_colors.scss → packages/calypso-css-custom-properties/src/shared/_colors.scss

@@ -1,5 +1,5 @@
 // The Muriel Color Palette
-@import '~color-studio/dist/color-variables';
+@import '../__color-studio/color-variables';
 
 // TODO: where possible we should replace the colors below with the Muriel Color Palette.
 // The goals is to eventually have a single source of truth for colors across all our products.

postcss.config.js

@@ -1,9 +1,7 @@
-const path = require( 'path' );
-
 module.exports = ( { options: { preserveCssCustomProperties = true } } ) => ( {
 	plugins: {
 		'postcss-custom-properties': {
-			importFrom: [ path.join( __dirname, 'public', 'custom-properties.css' ) ],
+			importFrom: [ require.resolve( '@automattic/calypso-css-custom-properties' ) ],
 			preserve: preserveCssCustomProperties,
 		},
 		autoprefixer: {},

webpack.config.js

@@ -44,19 +44,6 @@ const shouldCheckForCycles = process.env.CHECK_CYCLES === 'true';
 const codeSplit = config.isEnabled( 'code-splitting' );
 const isCalypsoClient = process.env.CALYPSO_CLIENT === 'true';
 
-/**
- * Plugin that generates the `public/custom-properties.css` file before compilation
- */
-class BuildCustomPropertiesCssPlugin {
-	apply( compiler ) {
-		compiler.hooks.compile.tap( 'BuildCustomPropertiesCssPlugin', () =>
-			execSync( 'node ' + path.join( __dirname, 'bin', 'build-custom-properties-css.js' ), {
-				cwd: __dirname,
-			} )
-		);
-	}
-}
-
 /*
  * Create reporter for ProgressPlugin (used with EMIT_STATS)
  */
@@ -370,7 +357,6 @@ function getWebpackConfig( {
 					},
 				} ),
 			shouldEmitStats && new webpack.ProgressPlugin( createProgressHandler() ),
-			new BuildCustomPropertiesCssPlugin(),
 			new MomentTimezoneDataPlugin( {
 				startYear: 2000,
 			} ),