Merge pull request #28 from larrybotha/refactor/entrypoints

package.json

@@ -23,7 +23,9 @@
     "commit": "git-cz",
     "clean": "rm -rf build && mkdir build",
     "prebuild": "npm run clean",
-    "build": "sass scss/style.scss --load-path=node_modules/normalize.css > build/style.css",
+    "build": "npm run build:style && npm run build:global",
+    "build:global": "sass scss/global-only.scss --load-path=node_modules/normalize.css > build/style.css",
+    "build:style": "sass scss/style.scss --load-path=node_modules/normalize.css > build/style.css",
     "build:watch": "nodemon -e scss --exec 'npm run build'",
     "test": "jest",
     "test:watch": "npm test -- --watch",

scss/_reset.scss

@@ -0,0 +1,11 @@
+/*------------------------------------*\
+  RESET STYLES
+\*------------------------------------*/
+/**
+ * Import resets
+ *
+ * normalize.css requires `includePaths: ['node_modules/normalize.css']` in
+ * your Sass config
+ */
+@import "normalize";
+@import "core/reset";

scss/custom/_index.scss

@@ -1,8 +1,17 @@
 /*------------------------------------*\
     CUSTOM STYLES
 \*------------------------------------*/
-// order matters
-@import "functions/index";
-@import "mixins/index";
-@import "global/index";
-@import "app/index";
+/**
+ * Import custom variables, mixins, and functions
+ */
+@import "support";
+
+/**
+ * Import custom global styles
+ */
+@import "global";
+
+/**
+ * Import custom styles
+ */
+@import "app";

scss/custom/_support.scss

@@ -0,0 +1,10 @@
+/*------------------------------------*\
+  CUSTOM SUPPORT SCSS
+\*------------------------------------*/
+/**
+ * This file should be imported after any core support files to ensure
+ * that variables, mixins, and functions defined here override core
+ * equivalents
+ */
+@import "variables";
+@import "tools";

scss/global.scss → scss/global-only.scss

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 /*------------------------------------*\
-  GLOBAL STYLES
+  GLOBAL ONLY STYLES ENTRYPOINT
 \*------------------------------------*/
 /**
  * Import only global styles
@@ -15,20 +15,18 @@
  */
 
 /**
- *  import functions and mixins
+ * Import resets
  */
-@import "support";
+@import "reset";
 
 /**
- * Import resets
- *
- * normalize.css requires `includePaths: ['node_modules/normalize.css']` in your Sass config
+ *  Import functions and mixins
  */
-@import "normalize";
-@import "core/reset";
+@import "core/support";
+@import "custom/support";
 
 /**
- * import global styles
+ * Import global styles
  */
-@import "core/global/index";
-@import "custom/global/index";
+@import "core/global";
+@import "custom/global";

scss/style.scss

@@ -1,12 +1,20 @@
+@charset "UTF-8";
+
+/*------------------------------------*\
+  STYLES ENTRYPOINT
+\*------------------------------------*/
 /**
- * Import everything:
- *
- * - tools
- * - global styles
- * - app styles
- *
- * This will be the most common entry point for your app's styles.
+ * Import resets
  */
-@import "support";
-@import "global";
-@import "custom/app/index";
+@import "reset";
+
+/**
+ * Import core support files and globals
+ */
+@import "core/support";
+@import "core/global";
+
+/**
+ * Import custom styles to override core
+ */
+@import "custom";

test/index.test.js

@@ -3,12 +3,12 @@ const path = require("path");
 
 const options = {
   ...require("./options"),
-  file: path.resolve(__dirname, "../scss/global.scss"),
+  file: path.resolve(__dirname, "../scss/global-only.scss"),
 };
 const entryPoints = [
   "style.scss",
-  "global.scss",
-  "_support.scss",
+  "global-only.scss",
+  "_reset.scss",
   "core/_global.scss",
   "core/_support.scss",
   "core/_reset.scss",

test/options.js

@@ -1,6 +1,6 @@
 const path = require("path");
 
 module.exports = {
-  file: path.resolve(__dirname, "../scss/global.scss"),
+  file: path.resolve(__dirname, "../scss/global-only.scss"),
   includePaths: ["node_modules/normalize.css"],
 };