🔧 chore(gui,paint): css var adjustments

packages/gui/package.json

@@ -10,8 +10,11 @@
     "url": "https://github.com/Clipteam/clipcc.git"
   },
   "exports": {
-    "types": "./dist/types/index.d.ts",
-    "default": "./dist/scratch-gui.js"
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/scratch-gui.js"
+    },
+    "./styles/*": "./dist/styles/*"
   },
   "scripts": {
     "build:types": "tsc --project ./tsconfig.dts.json",

packages/gui/src/components/gui/gui.css

@@ -1,7 +1,3 @@
-@import "../../css/colors.css";
-@import "../../css/units.css";
-@import "../../css/z-index.css";
-
 .page-wrapper {
     height: 100%;
 }

packages/gui/src/containers/paint-editor-wrapper.jsx

@@ -3,6 +3,8 @@ import React from 'react';
 import bindAll from 'lodash.bindall';
 import VM from 'clipcc-vm';
 import PaintEditor from 'clipcc-paint';
+import 'clipcc-paint/styles/colors.css';
+import 'clipcc-paint/styles/units.css';
 import {inlineSvgFonts} from 'clipcc-svg-renderer';
 
 import {connect} from 'react-redux';

packages/gui/src/playground/index.css

@@ -1,8 +1,12 @@
+@import "../css/colors.css";
+@import "../css/units.css";
+@import "../css/z-index.css";
+
 html,
 body,
 .app {
     /* probably unecessary, transitional until layout is refactored */
-    width: 100%; 
+    width: 100%;
     height: 100%;
     margin: 0;
 

packages/gui/webpack.config.js

@@ -289,6 +289,15 @@ module.exports = [
                             to: 'libraries/[name][ext]'
                         }
                     ]
+                }),
+                // Export necessary CSS files for external use.
+                new CopyWebpackPlugin({
+                    patterns: [
+                        {
+                            from: 'src/css/*.css',
+                            to: 'styles/[name][ext]'
+                        }
+                    ]
                 })
             ])
         })) : []

packages/paint/package.json

@@ -3,8 +3,11 @@
   "version": "3.2.0",
   "description": "Graphical User Interface for the Scratch 3.0 paint editor, which is used to make and edit sprites for use in projects.",
   "exports": {
-    "webpack": "./src/index.js",
-    "default": "./dist/scratch-paint.js"
+    ".": {
+      "webpack": "./src/index.js",
+      "default": "./dist/scratch-paint.js"
+    },
+    "./styles/*": "./dist/styles/*"
   },
   "scripts": {
     "build": "pnpm run clean && webpack --progress --color --bail",
@@ -59,6 +62,7 @@
     "babel-jest": "23.6.0",
     "babel-loader": "^10.1.1",
     "babel-plugin-react-intl": "3.0.1",
+    "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^6.7.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",

packages/paint/src/components/paint-editor/paint-editor.css

@@ -1,6 +1,3 @@
-@import "../../css/colors.css";
-@import "../../css/units.css";
-
 .editor-container {
     width: 100%;
     height: 100%;

packages/paint/src/css/units.css

@@ -17,7 +17,7 @@ ALSO EDITED ON 11/13/2017 TO ADD IN CONTANTS FOR LAYOUT FROM `layout-contents.js
     --clipcc-sprite-info-height: 6rem;
     --clipcc-stage-menu-height: 2.75rem;
 
-    --clipcc-library-header-height: 4.375rem;
+    --clipcc-library-header-height: 3.125rem;
 
     --clipcc-form-radius: calc(var(--clipcc-space) / 2);
 

packages/paint/src/playground/playground.css

@@ -1,3 +1,5 @@
+@import "../css/colors.css";
+@import "../css/units.css";
 
 body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

packages/paint/webpack.config.js

@@ -3,6 +3,7 @@ const path = require('path');
 
 // Plugins
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 
 const base = {
@@ -105,6 +106,17 @@ module.exports = [
             library: {
                 type: 'commonjs2'
             }
-        }
+        },
+        plugins: base.plugins.concat([
+            // Export necessary CSS files for external use.
+            new CopyWebpackPlugin({
+                patterns: [
+                    {
+                        from: 'src/css/*.css',
+                        to: 'styles/[name][ext]'
+                    }
+                ]
+            })
+        ])
     })
 ];