Replace ember-cli-tailwind with postcss and tailwindcss (#412)

* Remove ember-cli-tailwind

* Use @apply instead of @extend for tailwind classes

* Replace ember-cli-tailwind with postcss and tailwindcss

Author: josemarluedke

.eslintrc.js

@@ -1,28 +1,23 @@
 module.exports = {
   globals: {
-    server: true,
+    server: true
   },
   root: true,
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module'
   },
-  plugins: [
-    'ember'
-  ],
-  extends: [
-    'eslint:recommended',
-    'plugin:ember/recommended'
-  ],
+  plugins: ['ember'],
+  extends: ['eslint:recommended', 'plugin:ember/recommended'],
   env: {
     browser: true
   },
   rules: {
-    'no-unused-vars': ["error", { "args": "none" }],
-    'no-console': ["error", { allow: ["warn", "error"] }],
+    'no-unused-vars': ['error', { args: 'none' }],
+    'no-console': ['error', { allow: ['warn', 'error'] }],
 
     // ember-keyboard uses events
-    'ember/no-on-calls-in-components': 'off',
+    'ember/no-on-calls-in-components': 'off'
   },
   overrides: [
     // node files
@@ -31,6 +26,7 @@ module.exports = {
         '.eslintrc.js',
         '.template-lintrc.js',
         'ember-cli-build.js',
+        'addon/styles/tailwind.js',
         'index.js',
         'testem.js',
         'blueprints/*/index.js',
@@ -53,9 +49,13 @@ module.exports = {
         node: true
       },
       plugins: ['node'],
-      rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
-        // add your custom rules and overrides for node files here
-      })
+      rules: Object.assign(
+        {},
+        require('eslint-plugin-node').configs.recommended.rules,
+        {
+          // add your custom rules and overrides for node files here
+        }
+      )
     },
 
     // test files
@@ -73,12 +73,12 @@ module.exports = {
         describe: true,
         it: true,
         beforeEach: true,
-        afterEach: true,
+        afterEach: true
       },
       files: ['tests-node/**/*.js'],
       rules: {
         'node/no-unpublished-require': 'off'
-      },
+      }
     }
   ]
 };

addon/components/docs-header/search-box/styles.scss

@@ -1,9 +1,9 @@
 input[data-search-box-input]::placeholder {
-  @extend .docs-text-black;
-  @extend .docs-font-bold;
-  @extend .docs-opacity-100;
+  @apply .docs-text-black;
+  @apply .docs-font-bold;
+  @apply .docs-opacity-100;
 
   &:focus {
-    @extend .docs-text-grey;
+    @apply .docs-text-grey;
   }
 }

addon/components/modal-dialog/styles.scss

@@ -1,3 +1,3 @@
 .ember-modal-dialog {
-  @extend .docs-z-50;
+  @apply .docs-z-50;
 }

addon/styles/addon.scss

@@ -1,13 +1,26 @@
 // Global settings
 $site-container: 1400px;
 
-@import 'tailwind';
+@tailwind preflight;
+@tailwind components;
+@tailwind utilities;
+
+@import './components/docs-brand-colors';
+@import './components/docs-btn';
+@import './components/docs-container';
+@import './components/docs-md';
+
+@import './utilities/masks';
+@import './utilities/nudge';
+@import './utilities/overflow-momentum';
+
 @import 'pod-styles.scss';
 @import 'syntax';
 
 // Figure out how to do this in tailwind
 .docs-fill-current {
-  &, & * {
+  &,
+  & * {
     fill: currentColor;
   }
 }
@@ -17,31 +30,31 @@ $site-container: 1400px;
 }
 
 html {
-  @extend .docs-min-h-screen;
-  @extend .docs-flex;
-  @extend .docs-flex-col;
+  @apply .docs-min-h-screen;
+  @apply .docs-flex;
+  @apply .docs-flex-col;
 }
 
 body {
-  @extend .docs-antialiased;
-  @extend .docs-font-sans;
-  @extend .docs-text-base;
-  @extend .docs-leading-normal;
-  @extend .docs-text-grey-darkest;
-  @extend .docs-bg-brand;
-
-  @extend .docs-flex-1;
-  @extend .docs-flex;
-  @extend .docs-flex-col;
+  @apply .docs-antialiased;
+  @apply .docs-font-sans;
+  @apply .docs-text-base;
+  @apply .docs-leading-normal;
+  @apply .docs-text-grey-darkest;
+  @apply .docs-bg-brand;
+
+  @apply .docs-flex-1;
+  @apply .docs-flex;
+  @apply .docs-flex-col;
 }
 
 body > .ember-view {
-  @extend .docs-flex-1;
-  @extend .docs-flex;
-  @extend .docs-flex-col;
+  @apply .docs-flex-1;
+  @apply .docs-flex;
+  @apply .docs-flex-col;
 
-  @extend .docs-mt-1;
-  @extend .docs-bg-white;
+  @apply .docs-mt-1;
+  @apply .docs-bg-white;
 }
 
 pre {

addon/styles/components/_docs-brand-colors.scss

@@ -0,0 +1,34 @@
+/*
+  We use CSS Custom Properties so addons can customize their brand theme, but we need to provide a fallback for browsers that don't support them yet (IE). This is the way we do it.
+
+  If we get access to the PostCSS pipeline in the future we could use a plugin like this: https://github.com/postcss/postcss-custom-properties
+*/
+.docs-bg-brand {
+  @apply docs-bg-brand-var;
+}
+.hover\:docs-bg-brand:hover {
+  @apply docs-bg-brand-var ;
+}
+.focus\:docs-bg-brand:focus {
+  @apply docs-bg-brand-var;
+}
+
+.docs-text-brand {
+  @apply docs-text-brand-var;
+}
+.hover\:docs-text-brand:hover {
+  @apply docs-text-brand-var;
+}
+.focus\:docs-text-brand:focus {
+  @apply docs-text-brand-var;
+}
+
+.docs-border-brand {
+  @apply docs-border-brand-var;
+}
+.hover\:docs-border-brand:hover {
+  @apply docs-border-brand-var;
+}
+.focus\:docs-border-brand:focus {
+  @apply docs-border-brand-var;
+}