feat: support for @nativescript/theme v2

src/add-ns/_ns-files/__sourceDir__/app.css

@@ -1,12 +1,5 @@
-/*
-In NativeScript, the app.css file is where you place CSS rules that
-you would like to apply to your entire application. Check out
-http://docs.nativescript.org/ui/styling for a full list of the CSS
-selectors and properties you can use to style UI components.
+@import "~@nativescript/theme/css/core.css";
+@import "~@nativescript/theme/css/blue.css";
 
-/*
-In many cases you may want to use the NativeScript core theme instead
-of writing your own CSS rules. For a full list of class names in the theme
-refer to http://docs.nativescript.org/ui/theme.
-*/
-@import '~nativescript-theme-core/css/core.light.css';
+/* Place any CSS rules you want to apply on both iOS and Android here.
+This is where the vast majority of your CSS code goes. */

src/add-ns/index.ts

@@ -363,7 +363,7 @@ const addDependencies = () => (tree: Tree, context: SchematicContext) => {
   // @UPGRADE: Update all versions whenever {N} version updates
   const depsToAdd = {
     'nativescript-angular': '~8.20.0',
-    'nativescript-theme-core': '~1.0.4',
+    '@nativescript/theme': '~2.2.0',
     'reflect-metadata': '~0.1.12',
     'tns-core-modules': '~6.2.0',
     'tslib': '1.10.0',

src/add-ns/index_spec.ts

@@ -78,7 +78,7 @@ describe('Add {N} schematic', () => {
             const { dependencies, devDependencies } = packageJson;
             expect(dependencies).toBeDefined();
             expect(dependencies['nativescript-angular']).toBeDefined();
-            expect(dependencies['nativescript-theme-core']).toBeDefined();
+            expect(dependencies['@nativescript/theme']).toBeDefined();
             expect(dependencies['tns-core-modules']).toBeDefined();
             expect(dependencies['reflect-metadata']).toBeDefined();
 

src/ng-new/application/_files/__sourcedir__/home/home.component.html

@@ -1,6 +1,6 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <StackLayout<% if (theme) { %> class="p-20"<% } %>>
   <Label text="Tap the button"<% if (theme) { %> class="h1 text-center"<% } %>></Label>
-  <Button text="TAP" (tap)="onTap()"<% if (theme) { %> class="btn btn-primary btn-active"<% } %>></Button>
+  <Button text="TAP" (tap)="onTap()"<% if (theme) { %> class="-primary"<% } %>></Button>
   <Label [text]="getMessage()"<% if (theme) { %> class="h2 text-center"<% } %> textWrap="true"></Label>
 </StackLayout>

src/ng-new/application/_files/package.json

@@ -16,7 +16,7 @@
     "@angular/platform-browser-dynamic": "~8.2.0",
     "@angular/router": "~8.2.0",
     "nativescript-angular": "~8.20.0",<% if(theme) { %>
-    "nativescript-theme-core": "~1.0.4",
+    "@nativescript/theme": "~2.2.0",
     <% } %>"reflect-metadata": "~0.1.12",
     "rxjs": "~6.4.0",
     "tns-core-modules": "~6.2.0",

src/ng-new/shared/_files/package.json

@@ -29,7 +29,7 @@
     "@angular/router": "~8.2.0",
     "core-js": "^2.6.9",
     "nativescript-angular": "~8.20.0",<% if(theme) { %>
-    "nativescript-theme-core": "~1.0.4",
+    "@nativescript/theme": "~2.2.0",
     <% } %>"reflect-metadata": "~0.1.12",
     "rxjs": "~6.4.0",
     "tns-core-modules": "~6.2.0",

src/styling/_css-files/app.css

@@ -1,3 +1,4 @@
 <% if (theme) { %> 
-@import '~nativescript-theme-core/css/core.light.css';
+@import '~@nativescript/theme/css/core.css';
+@import '~@nativescript/theme/css/blue.css';
 <% } %>

src/styling/_scss-files/app.android.scss

@@ -1,10 +1,3 @@
-// Import app variables
-@import 'app-variables';
-<% if (theme) { %> 
-// Import the theme’s main ruleset - both index and platform specific.
-@import '~nativescript-theme-core/scss/index';
-@import '~nativescript-theme-core/scss/platforms/index.android';
-<% } %>
 // Import common styles
 @import 'app-common';
 

src/styling/_scss-files/app.ios.scss

@@ -1,10 +1,3 @@
-// Import app variables
-@import 'app-variables';
-<% if (theme) { %> 
-// Import the theme’s main ruleset - both index and platform specific.
-@import '~nativescript-theme-core/scss/index';
-@import '~nativescript-theme-core/scss/platforms/index.ios';
-<% } %>
 // Import common styles
 @import 'app-common';
 

src/styling/index_spec.ts

@@ -65,7 +65,7 @@ describe('Styling Schematic', () => {
 
       expect(getFileContent(tree, stylingFile))
         .not
-        .toMatch(new RegExp('@import "~nativescript-theme-core/css/core.light.css";'));
+        .toMatch(new RegExp('@import "~@nativescript/theme/css/core.css";'));
     });
   });
 
@@ -85,7 +85,7 @@ describe('Styling Schematic', () => {
       expect(tree.exists(`${appPath}/${sourceDir}/app.android.scss`));
       expect(tree.exists(`${appPath}/${sourceDir}/app.ios.scss`));
       expect(tree.exists(`${appPath}/${sourceDir}/_app-common.scss`));
-      expect(tree.exists(`${appPath}/${sourceDir}/_app-variables.scss`));
+      expect(tree.exists(`${appPath}/${sourceDir}/_app-variables.scss`)).toBe(false);
     });
 
     it('should add scss dependencies to package.json', () => {
@@ -109,21 +109,11 @@ describe('Styling Schematic', () => {
 
       expect(getFileContent(tree, `${appPath}/${sourceDir}/app.android.scss`))
         .not
-        .toMatch(new RegExp('@import \'~nativescript-theme-core/scss/index\';'));
-      expect(getFileContent(tree, `${appPath}/${sourceDir}/app.android.scss`))
-        .not
-        .toMatch(new RegExp('@import \'~nativescript-theme-core/scss/platforms/index.android\';'));
+        .toMatch(new RegExp('@import "~@nativescript/theme/css/core.css;'));
 
       expect(getFileContent(tree, `${appPath}/${sourceDir}/app.ios.scss`))
         .not
-        .toMatch(new RegExp('@import \'~nativescript-theme-core/scss/index\';'));
-      expect(getFileContent(tree, `${appPath}/${sourceDir}/app.ios.scss`))
-        .not
-        .toMatch(new RegExp('@import \'~nativescript-theme-core/scss/platforms/index.ios\';'));
-
-      expect(getFileContent(tree, `${appPath}/${sourceDir}/_app-variables.scss`))
-        .not
-        .toMatch(new RegExp('@import \'~nativescript-theme-core/scss/light\';'));
+        .toMatch(new RegExp('@import "~@nativescript/theme/css/core.css";'));
     });
   });
 });