Merge pull request #229 from ember-learn/fix-styles

Revert ember-cli-tailwind upgrade

Author: samselikoff

addon/tailwind/config/tailwind.js

@@ -1,15 +1,13 @@
+'use strict';
+
 import colors from './colors';
 import screens from './screens';
 import fonts from './fonts';
 import textSizes from './text-sizes';
 import fontWeights from './font-weights';
 import leading from './line-height';
 import tracking from './letter-spacing';
-import textColors from './text-colors';
-import backgroundColors from './background-colors';
-import backgroundSize from './background-size';
 import borderWidths from './border-widths';
-import borderColors from './border-colors';
 import borderRadius from './border-radius';
 import width from './width';
 import height from './height';
@@ -27,18 +25,18 @@ import svgFill from './svg-fill';
 import svgStroke from './svg-stroke';
 
 export default {
+
   colors,
   screens,
   fonts,
   textSizes,
   fontWeights,
   leading,
   tracking,
-  textColors,
-  backgroundColors,
-  backgroundSize,
+  textColors: colors,
+  backgroundColors: colors,
   borderWidths,
-  borderColors,
+  borderColors: Object.assign({ default: colors['grey-light'] }, colors),
   borderRadius,
   width,
   height,
@@ -103,26 +101,6 @@ export default {
     zIndex: ['responsive'],
   },
 
-  /*
-  |-----------------------------------------------------------------------------
-  | Plugins                                https://tailwindcss.com/docs/plugins
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you can register any plugins you'd like to use in your
-  | project. Tailwind's built-in `container` plugin is enabled by default to
-  | give you a Bootstrap-style responsive container component out of the box.
-  |
-  | Be sure to view the complete plugin documentation to learn more about how
-  | the plugin system works.
-  |
-  */
-
-  plugins: [
-  ],
-
-  /*
-  |-----------------------------------------------------------------------------
-
   /*
   |-----------------------------------------------------------------------------
   | Advanced Options         https://tailwindcss.com/docs/configuration#options

addon/tailwind/modules.css

@@ -1,32 +1,62 @@
 /**
-* This injects Tailwind's base styles, which is a combination of
-* Normalize.css and some additional base styles.
-*
-* You can see the styles here:
-* https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
-*/
-@import "tailwindcss/preflight";
+ * This injects Tailwind's base styles, which is a combination of
+ * Normalize.css and some additional base styles.
+ *
+ * You can see the styles here:
+ * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
+ *
+ * If using `postcss-import`, you should import this line from it's own file:
+ *
+ * @import "./tailwind-preflight.css";
+ *
+ * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
+ */
+@import "./tailwind-preflight.css";
 
 /**
-* This injects any component classes registered by plugins.
-*/
-@import "tailwindcss/components";
+ * Here you would add any of your custom component classes; stuff that you'd
+ * want loaded *before* the utilities so that the utilities could still
+ * override them.
+ *
+ * Example:
+ *
+ * .btn { ... }
+ * .form-input { ... }
+ *
+ * Or if using a preprocessor or `postcss-import`:
+ *
+ * @import "components/buttons";
+ * @import "components/forms";
+**/
 
-/**
-* Here you would add any of your custom component classes; stuff that you'd
-* want loaded *before* the utilities so that the utilities could still
-* override them.
-*/
 @import "./components/*.css";
 
+
 /**
-* This injects all of Tailwind's utility classes, generated based on your
-* config file.
-*/
-@import "tailwindcss/utilities";
+ * This injects all of Tailwind's utility classes, generated based on your
+ * config file.
+ *
+ * If using `postcss-import`, you should import this line from it's own file:
+ *
+ * @import "./tailwind-utilities.css";
+ *
+ * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
+ */
+
+@import "./tailwind-utilities.css";
 
 /**
-* Here you would add any custom utilities you need that don't come out of the
-* box with Tailwind.
-*/
+ * Here you would add any custom utilities you need that don't come out of the
+ * box with Tailwind.
+ *
+ * Example :
+ *
+ * .bg-pattern-graph-paper { ... }
+ * .skew-45 { ... }
+ *
+ * Or if using a preprocessor or `postcss-import`:
+ *
+ * @import "utilities/background-patterns";
+ * @import "utilities/skew-transforms";
+**/
 @import "./utilities/*.css";

addon/tailwind/tailwind-preflight.css

@@ -0,0 +1 @@
+@tailwind preflight;

addon/tailwind/tailwind-utilities.css

@@ -0,0 +1 @@
+@tailwind utilities;

addon/tailwind/utilities/your-utility.css

@@ -33,6 +33,9 @@ module.exports = {
         'node_modules/ember-cli-addon-docs/public',
         'tests/dummy/public'
       ]
+    },
+    'ember-cli-tailwind': {
+      buildTarget: 'addon'
     }
   },
 

index.js

@@ -41,7 +41,7 @@
     "ember-cli-htmlbars-inline-precompile": "^1.0.2",
     "ember-cli-sass": "7.1.3",
     "ember-cli-string-helpers": "^1.7.0",
-    "ember-cli-tailwind": "^0.6.0",
+    "ember-cli-tailwind": "^0.4.1",
     "ember-code-snippet": "^2.2.0",
     "ember-component-css": "^0.3.5",
     "ember-concurrency": "^0.8.16",

package.json

@@ -1,5 +1,5 @@
 import { module, test } from 'qunit';
-import { visit, currentURL } from '@ember/test-helpers';
+import { visit, find, currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 
 module('Acceptance | boot test', function(hooks) {
@@ -10,4 +10,13 @@ module('Acceptance | boot test', function(hooks) {
 
     assert.equal(currentURL(), '/');
   });
+
+  test('styles are properly loaded', async function(assert) {
+    await visit('/');
+
+    let title = find('h1');
+    let fontSize = window.getComputedStyle(title).getPropertyValue("font-size");
+
+    assert.equal(fontSize, '60px');
+  });
 });

test-apps/new-addon/tests/acceptance/smoke-test-test.js

@@ -1,3 +1,7 @@
-<h2 id="title">Welcome to Ember</h2>
+{{docs-hero
+  logo='ember'
+  slimHeading='New'
+  strongHeading='Addon'
+  byline='A simple addon.'}}
 
-{{outlet}}
+{{outlet}}