Upgrade to TailwindCSS v2.0

.eslintrc.js

@@ -8,7 +8,8 @@ module.exports = {
   plugins: [],
   extends: ['@underline/eslint-config-ember-typescript'],
   rules: {
-    '@typescript-eslint/no-empty-interface': 'off'
+    '@typescript-eslint/no-empty-interface': 'off',
+    'ember/no-empty-glimmer-component-classes': 'off'
   },
   overrides: [
     {

.github/workflows/ci.yml

@@ -21,9 +21,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: 10.x
+          node-version: 12.x
       - name: Install yarn
         run: npm install -g yarn
       - name: Install dependencies
@@ -55,7 +55,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
           node-version: 12.x
       - name: Install yarn
@@ -82,7 +82,7 @@ jobs:
         with:
           ssh-private-key: ${{ secrets.DEPLOY_KEY }}
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
           node-version: 12.x
       - name: Install yarn

.template-lintrc.js

@@ -6,6 +6,7 @@ module.exports = {
     quotes: 'double',
     'no-curly-component-invocation': {
       allow: ['demo.example', 'nav.item', 'nav.subnav']
-    }
+    },
+    'eol-last': false
   }
 };

package.json

@@ -13,8 +13,8 @@
     "try:one": "yarn workspaces run try:one"
   },
   "devDependencies": {
-    "@underline/eslint-config-ember-typescript": "^0.9.3",
-    "@underline/eslint-config-node": "^0.9.0",
+    "@underline/eslint-config-ember-typescript": "^0.10.1",
+    "@underline/eslint-config-node": "^0.10.0",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^2.14.0",
     "eslint": "^7.11.0",

packages/buttons/package.json

@@ -39,13 +39,13 @@
     "@types/ember__test-helpers": "^1.7.3",
     "@types/qunit": "^2.9.5",
     "@types/rsvp": "^4.0.3",
-    "autoprefixer": "^9.8.0",
+    "autoprefixer": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^1.6.0",
     "ember-cli": "~3.22.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-inject-live-reload": "^2.0.2",
-    "ember-cli-postcss": "^6.0.1",
+    "ember-cli-postcss": "^7.0.0",
     "ember-cli-typescript-blueprints": "^3.0.0",
     "ember-cli-uglify": "^3.0.0",
     "ember-disable-prototype-extensions": "^1.1.3",
@@ -57,7 +57,7 @@
     "ember-try": "^1.4.0",
     "loader.js": "^4.7.0",
     "qunit-dom": "^1.5.0",
-    "tailwindcss": "^1.9.5",
+    "tailwindcss": "^2.0.2",
     "typescript": "^4.0.3"
   },
   "engines": {

packages/buttons/tailwind/default-options.js

@@ -3,7 +3,7 @@ const defaultTheme = require('tailwindcss/resolveConfig')(
 ).theme;
 
 const defaultConfig = {
-  borderRadius: defaultTheme.borderRadius.default,
+  borderRadius: defaultTheme.borderRadius.DEFAULT,
   default: {
     contrastColor: defaultTheme.colors.white,
     color: defaultTheme.colors.gray[700],
@@ -102,7 +102,7 @@ function defaultOptions({ config }) {
         paddingBottom: defaultTheme.spacing[3],
         paddingLeft: defaultTheme.spacing[4],
         borderRadius: config.borderRadius,
-        borderWidth: defaultTheme.borderWidth.default,
+        borderWidth: defaultTheme.borderWidth.DEFAULT,
         borderColor: defaultTheme.colors.transparent,
         '&.focus-visible:focus': {
           outline: 'none',
@@ -115,7 +115,7 @@ function defaultOptions({ config }) {
       },
       variants: {
         xs: {
-          fontSize: defaultTheme.fontSize.sm,
+          fontSize: defaultTheme.fontSize.sm[0],
           paddingTop: defaultTheme.spacing[1],
           paddingRight: defaultTheme.spacing[2],
           paddingBottom: defaultTheme.spacing[1],
@@ -134,7 +134,7 @@ function defaultOptions({ config }) {
           paddingLeft: defaultTheme.spacing[4]
         },
         xl: {
-          fontSize: defaultTheme.fontSize.xl,
+          fontSize: defaultTheme.fontSize.xl[0],
           paddingTop: defaultTheme.spacing[5],
           paddingRight: defaultTheme.spacing[6],
           paddingBottom: defaultTheme.spacing[5],

packages/buttons/tests/dummy/app/templates/application.hbs

@@ -4,11 +4,13 @@
       @frontile/buttons
     </h2>
 
-    <a href="/tests?hidepassed" class="px-4 py-2 text-teal-600 border border-teal-600 rounded hover:bg-teal-700 hover:text-white">
+    <a
+      href="/tests?hidepassed"
+      class="px-4 py-2 text-gray-800 border rounded hover:bg-gray-700 hover:text-white"
+    >
       Go to Tests
     </a>
   </div>
 
   {{outlet}}
-
-</div>
+</div>

packages/changeset-form/addon/components/changeset-form/fields/checkbox-group.ts

@@ -11,9 +11,7 @@ interface ChangesetFormFieldsGroupArgs {
   onChange?: (value: unknown, event: Event) => void;
 }
 
-export default class ChangesetFormFieldsCheckboxGroup extends Component<
-  ChangesetFormFieldsGroupArgs
-> {
+export default class ChangesetFormFieldsCheckboxGroup extends Component<ChangesetFormFieldsGroupArgs> {
   constructor(owner: unknown, args: ChangesetFormFieldsGroupArgs) {
     super(owner, args);
 

packages/changeset-form/addon/components/changeset-form/fields/checkbox.ts

@@ -8,9 +8,7 @@ interface ChangesetFormFieldsCheckboxArgs extends BaseArgs {
   onChange?: (value: unknown, event: Event) => void;
 }
 
-export default class ChangesetFormFieldsCheckbox extends Base<
-  ChangesetFormFieldsCheckboxArgs
-> {
+export default class ChangesetFormFieldsCheckbox extends Base<ChangesetFormFieldsCheckboxArgs> {
   get fullFieldName(): string {
     return this.args._groupName
       ? `${this.args._groupName}.${this.args.fieldName}`

packages/changeset-form/addon/components/changeset-form/fields/input.ts

@@ -5,9 +5,7 @@ interface ChangesetFormFieldsInputArgs extends BaseArgs {
   onInput?: (value: string, event: InputEvent) => void;
 }
 
-export default class ChangesetFormFieldsInput extends Base<
-  ChangesetFormFieldsInputArgs
-> {
+export default class ChangesetFormFieldsInput extends Base<ChangesetFormFieldsInputArgs> {
   @action handleInput(value: string, event: InputEvent): void {
     this.args.changeset.set(this.args.fieldName, value);
 

packages/changeset-form/addon/components/changeset-form/fields/radio.ts

@@ -5,9 +5,7 @@ interface ChangesetFormFieldsRadioArgs extends BaseArgs {
   onChange?: (value: unknown, event: Event) => void;
 }
 
-export default class ChangesetFormFieldsRadio extends Base<
-  ChangesetFormFieldsRadioArgs
-> {
+export default class ChangesetFormFieldsRadio extends Base<ChangesetFormFieldsRadioArgs> {
   @action handleChange(value: unknown, event: Event): void {
     event.preventDefault();
 

packages/changeset-form/addon/components/changeset-form/fields/select.ts

@@ -8,9 +8,7 @@ interface ChangesetFormFieldsSelectArgs extends BaseArgs {
   onClose?: (select: Select, event: Event) => void;
 }
 
-export default class ChangesetFormFieldsSelect extends Base<
-  ChangesetFormFieldsSelectArgs
-> {
+export default class ChangesetFormFieldsSelect extends Base<ChangesetFormFieldsSelectArgs> {
   @action
   handleChange(selection: unknown, select: Select, event?: Event): void {
     this.args.changeset.set(this.args.fieldName, selection);

packages/changeset-form/addon/components/changeset-form/fields/textarea.ts

@@ -5,9 +5,7 @@ interface ChangesetFormFieldsTextareaArgs extends BaseArgs {
   onInput?: (value: string, event: InputEvent) => void;
 }
 
-export default class ChangesetFormFieldsTextarea extends Base<
-  ChangesetFormFieldsTextareaArgs
-> {
+export default class ChangesetFormFieldsTextarea extends Base<ChangesetFormFieldsTextareaArgs> {
   @action handleInput(value: string, event: InputEvent): void {
     this.args.changeset.set(this.args.fieldName, value);
 

packages/changeset-form/package.json

@@ -41,13 +41,13 @@
     "@types/ember__test-helpers": "^1.7.3",
     "@types/qunit": "^2.9.5",
     "@types/rsvp": "^4.0.3",
-    "autoprefixer": "^9.8.0",
+    "autoprefixer": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^1.6.0",
     "ember-cli": "~3.22.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-inject-live-reload": "^2.0.1",
-    "ember-cli-postcss": "^6.0.1",
+    "ember-cli-postcss": "^7.0.0",
     "ember-cli-typescript-blueprints": "^3.0.0",
     "ember-cli-uglify": "^3.0.0",
     "ember-disable-prototype-extensions": "^1.1.3",
@@ -59,7 +59,7 @@
     "ember-try": "^1.4.0",
     "loader.js": "^4.7.0",
     "qunit-dom": "^1.5.0",
-    "tailwindcss": "^1.9.5",
+    "tailwindcss": "^2.0.2",
     "typescript": "^4.0.3"
   },
   "engines": {

packages/changeset-form/tests/integration/components/changeset-form/fields/checkbox-test.ts

@@ -5,22 +5,22 @@ import hbs from 'htmlbars-inline-precompile';
 import { Changeset } from 'ember-changeset';
 import { run } from '@ember/runloop';
 
-module('Integration | Component | ChangesetForm::Fields::Checkbox', function (
-  hooks
-) {
-  setupRenderingTest(hooks);
+module(
+  'Integration | Component | ChangesetForm::Fields::Checkbox',
+  function (hooks) {
+    setupRenderingTest(hooks);
 
-  hooks.beforeEach(async function beforeEach(this: {
-    set: (key: string, val: unknown) => void;
-  }) {
-    const model = {
-      blue: true,
-      green: false,
-      red: false
-    };
-    this.set('changeset', Changeset(model));
+    hooks.beforeEach(async function beforeEach(this: {
+      set: (key: string, val: unknown) => void;
+    }) {
+      const model = {
+        blue: true,
+        green: false,
+        red: false
+      };
+      this.set('changeset', Changeset(model));
 
-    await render(hbs`
+      await render(hbs`
         <ChangesetForm::Fields::Checkbox
           @changeset={{this.changeset}}
           @fieldName="blue"
@@ -40,35 +40,36 @@ module('Integration | Component | ChangesetForm::Fields::Checkbox', function (
           data-test-checkbox-red
         />
     `);
-  });
+    });
 
-  test('it renders with initial model value', async function (assert) {
-    assert.dom('[data-test-checkbox-blue]').isChecked();
-    assert.dom('[data-test-checkbox-green]').isNotChecked();
-    assert.dom('[data-test-checkbox-red]').isNotChecked();
-  });
+    test('it renders with initial model value', async function (assert) {
+      assert.dom('[data-test-checkbox-blue]').isChecked();
+      assert.dom('[data-test-checkbox-green]').isNotChecked();
+      assert.dom('[data-test-checkbox-red]').isNotChecked();
+    });
 
-  test('it updates the changeset on input', async function (assert) {
-    await click('[data-test-checkbox-blue]');
-    await click('[data-test-checkbox-green]');
-    await click('[data-test-checkbox-red]');
+    test('it updates the changeset on input', async function (assert) {
+      await click('[data-test-checkbox-blue]');
+      await click('[data-test-checkbox-green]');
+      await click('[data-test-checkbox-red]');
 
-    assert.equal(this.changeset.get('blue'), false);
-    assert.equal(this.changeset.get('green'), true);
-    assert.equal(this.changeset.get('red'), true);
-  });
+      assert.equal(this.changeset.get('blue'), false);
+      assert.equal(this.changeset.get('green'), true);
+      assert.equal(this.changeset.get('red'), true);
+    });
 
-  test('it receives original input values on rollback', async function (assert) {
-    await click('[data-test-checkbox-green]');
+    test('it receives original input values on rollback', async function (assert) {
+      await click('[data-test-checkbox-green]');
 
-    assert.dom('[data-test-checkbox-blue]').isChecked();
-    assert.dom('[data-test-checkbox-red]').isNotChecked();
+      assert.dom('[data-test-checkbox-blue]').isChecked();
+      assert.dom('[data-test-checkbox-red]').isNotChecked();
 
-    run(() => {
-      this.changeset.rollback();
+      run(() => {
+        this.changeset.rollback();
+      });
+      assert.dom('[data-test-checkbox-blue]').isChecked();
+      assert.dom('[data-test-checkbox-green]').isNotChecked();
+      assert.dom('[data-test-checkbox-red]').isNotChecked();
     });
-    assert.dom('[data-test-checkbox-blue]').isChecked();
-    assert.dom('[data-test-checkbox-green]').isNotChecked();
-    assert.dom('[data-test-checkbox-red]').isNotChecked();
-  });
-});
+  }
+);