Removing GOVUK Frontend specific integration, sharing the kit major version to extensions.

CHANGELOG.md

@@ -4,8 +4,9 @@
 
 ### Breaking changes
 - [#1589: Create management pages](https://github.com/alphagov/govuk-prototype-kit/issues/1589) Providing pages for the user to manage their prototype.
+- [#1615: Removing GOVUK Frontend specific integration](https://github.com/alphagov/govuk-prototype-kit/pull/1615) GOV.UK Frontend now integrates in the same way as any other plugin can.  We're allowing SASS settings to be set before the plugins run if they're put in app/assets/sass/settings.scss.
 - [#1572: Set up router](https://github.com/alphagov/govuk-prototype-kit/pull/1572) Providing a way for users who want to set up routers now that the kit is a package.
-- [#1550: Allow extensions to add filters](https://github.com/alphagov/govuk-prototype-kit/issues/1550) Adding the ability for extensions to add filters, providing an API for filters
+- [#1550: Allow extensions to add filters](https://github.com/alphagov/govuk-prototype-kit/issues/1550) Adding the ability for extensions to add filters, providing an API for filters.
 - [#1522: Create govuk-branded.html template](https://github.com/alphagov/govuk-prototype-kit/pull/1522) This changes the way layouts are used, it also means you'll need to import nunjucks macros before using them (code snippets from the design system have the import in them).
 - [#1533: Generate Starter Files](https://github.com/alphagov/govuk-prototype-kit/pull/1533) This is a major change to the way the kit is used including:
   - The kit is used as an NPM Module

__tests__/spec/sanity-checks.js

@@ -68,7 +68,7 @@ describe('The Prototype Kit', () => {
 
     it('should allow known assets to be loaded from node_modules', (done) => {
       request(app)
-        .get('/govuk/assets/images/favicon.ico')
+        .get('/extension-assets/govuk-frontend/govuk/assets/images/favicon.ico')
         .expect('Content-Type', /image\/x-icon/)
         .expect(200)
         .end(function (err, res) {

internal_docs/releasing.md

@@ -31,6 +31,8 @@ v8.0.0 // After implementing backwards incompatible changes
 
 4. Checkout a new branch called release-[new version number].
 
+5. If the major version has changed make sure it's updated for the plugins in `GOVUKPrototypeKit.majorVersion` (JS) and `$govuk-prototype-kit-major-version` (SASS).
+
 5. Update the [CHANGELOG.md](/CHANGELOG.md) by:
 
   - changing the 'Unreleased' heading to the new version-number and release-type - for example, '12.0.1 (Fix release)'

lib/assets/javascripts/kit.js

@@ -1,4 +1,5 @@
 window.GOVUKPrototypeKit = {
+  majorVersion: 13,
   documentReady: function (fn) {
     if (document.readyState !== 'loading') {
       // IE9 support
@@ -14,7 +15,3 @@ window.GOVUKPrototypeKit = {
 if (window.console && window.console.info) {
   window.console.info('GOV.UK Prototype Kit - do not use for production')
 }
-
-window.GOVUKPrototypeKit.documentReady(function () {
-  window.GOVUKFrontend.initAll()
-})

lib/assets/sass/prototype.scss

@@ -1,9 +1,5 @@
-// global styles for <a> and <p> tags
-$govuk-global-styles: true;
-$govuk-new-link-styles: true;
-
-// We can't mount GOV.UK Frontend's assets at root as it's done automatically by the extensions framework.
-$govuk-assets-path: '/govuk/assets/';
+// SASS settings should be brought in before plugins so the user can configure settings for their plugins
+@import ".tmp/sass/user/settings";
 
 // Import GOV.UK Frontend and any extension styles if extensions have been configured
 @import ".tmp/sass/extensions";
@@ -16,4 +12,4 @@ $govuk-assets-path: '/govuk/assets/';
 @import "patterns/task-list";
 
 // SASS that is user defined
-@import "app/assets/sass/application";
+@import ".tmp/sass/user/application";

lib/build/tasks.js

@@ -41,6 +41,8 @@ function generateAssetsSync ({ verbose } = {}) {
   clean()
   sassExtensions()
   autoImportComponentsSync()
+  proxyUserSassIfItExists('application.scss')
+  proxyUserSassIfItExists('settings.scss')
 
   generateCss(appSassPath, appCssPath, appSassOptions)
   generateCss(libSassPath, appCssPath, libSassOptions)
@@ -62,16 +64,32 @@ function clean () {
   del.sync(['public/**', '.port.tmp'])
 }
 
+function ensureTempDirExists (dir = tempPath) {
+  fse.ensureDirSync(dir, { recursive: true })
+  fse.writeFileSync(path.join(tempPath, '.gitignore'), '*')
+}
+
 function sassExtensions () {
-  let fileContents = '$govuk-extensions-url-context: "/extension-assets"; '
+  let fileContents = '$govuk-extensions-url-context: "/extension-assets"; $govuk-prototype-kit-major-version: 13; '
   fileContents += extensions.getFileSystemPaths('sass')
     .map(filePath => `@import "${filePath.split(path.sep).join('/')}";`)
     .join('\n')
-  fse.ensureDirSync(tempSassPath, { recursive: true })
-  fse.writeFileSync(path.join(tempPath, '.gitignore'), '*')
+  ensureTempDirExists(tempSassPath)
   fse.writeFileSync(path.join(tempSassPath, '_extensions.scss'), fileContents)
 }
 
+function proxyUserSassIfItExists (filename) {
+  const userFilePath = path.join(projectDir, 'app', 'assets', 'sass', filename)
+  const proxyFilePath = path.join(tempSassPath, 'user', filename)
+  const proxyFileLines = []
+  if (fse.existsSync(userFilePath)) {
+    proxyFileLines.push(`@import "${userFilePath.split(path.sep).join('/')}";`)
+  }
+  ensureTempDirExists(path.dirname(proxyFilePath))
+
+  fse.writeFileSync(path.join(proxyFilePath), proxyFileLines.join(EOL))
+}
+
 function generateCss (sassPath, cssPath, options = {}) {
   const { filesToSkip = [], filesToRename = {} } = options
   if (!fse.existsSync(sassPath)) return

lib/extensions/extensions.js

@@ -140,14 +140,10 @@ setExtensionsByType()
 // The hard-coded reference to govuk-frontend allows us to soft launch without a breaking change.  After a hard launch
 // govuk-frontend assets will be served on /extension-assets/govuk-frontend
 const getPublicUrl = config => {
-  if (config.item.endsWith('assets') && config.packageName === 'govuk-frontend') {
-    return '/govuk/assets'
-  } else {
-    return ['', 'extension-assets', config.packageName]
-      .concat(config.item.split('/').filter(filterOutParentAndEmpty))
-      .map(encodeURIComponent)
-      .join('/')
-  }
+  return ['', 'extension-assets', config.packageName]
+    .concat(config.item.split('/').filter(filterOutParentAndEmpty))
+    .map(encodeURIComponent)
+    .join('/')
 }
 
 const getFileSystemPath = config => {

lib/extensions/extensions.test.js

@@ -127,7 +127,7 @@ describe('extensions', () => {
         assets: ['/ghi', '/jkl']
       })
       expect(extensions.getPublicUrls('assets')).toEqual([
-        '/govuk/assets',
+        '/extension-assets/govuk-frontend/govuk/assets',
         '/extension-assets/another-frontend/abc',
         '/extension-assets/another-frontend/def',
         '/extension-assets/hmrc-frontend/ghi',
@@ -145,7 +145,7 @@ describe('extensions', () => {
       expect(extensions.getPublicUrls('assets')).toEqual([
         '/extension-assets/another-frontend/abc',
         '/extension-assets/another-frontend/def',
-        '/govuk/assets',
+        '/extension-assets/govuk-frontend/govuk/assets',
         '/extension-assets/hmrc-frontend/ghi',
         '/extension-assets/hmrc-frontend/jkl'
       ])
@@ -161,7 +161,7 @@ describe('extensions', () => {
       expect(extensions.getPublicUrls('assets')).toEqual([
         '/extension-assets/hmrc-frontend/ghi',
         '/extension-assets/hmrc-frontend/jkl',
-        '/govuk/assets',
+        '/extension-assets/govuk-frontend/govuk/assets',
         '/extension-assets/another-frontend/abc',
         '/extension-assets/another-frontend/def'
       ])
@@ -185,7 +185,7 @@ describe('extensions', () => {
       })
       expect(extensions.getPublicUrlAndFileSystemPaths('assets')).toEqual([
         {
-          publicUrl: '/govuk/assets',
+          publicUrl: '/extension-assets/govuk-frontend/govuk/assets',
           fileSystemPath: path.join(rootPath, 'node_modules', 'govuk-frontend', 'govuk', 'assets')
         },
         {
@@ -224,7 +224,7 @@ describe('extensions', () => {
           fileSystemPath: path.join(rootPath, 'node_modules', 'another-frontend', 'def')
         },
         {
-          publicUrl: '/govuk/assets',
+          publicUrl: '/extension-assets/govuk-frontend/govuk/assets',
           fileSystemPath: path.join(rootPath, 'node_modules', 'govuk-frontend', 'govuk', 'assets')
         },
         {
@@ -255,7 +255,7 @@ describe('extensions', () => {
           fileSystemPath: path.join(rootPath, 'node_modules', 'hmrc-frontend', 'jkl')
         },
         {
-          publicUrl: '/govuk/assets',
+          publicUrl: '/extension-assets/govuk-frontend/govuk/assets',
           fileSystemPath: path.join(rootPath, 'node_modules', 'govuk-frontend', 'govuk', 'assets')
         },
         {

lib/nunjucks/govuk-prototype-kit/layouts/govuk-branded.html

@@ -1,4 +1,4 @@
-{%- set assetPath = '/govuk/assets' -%}
+{%- set assetPath = '/extension-assets/govuk-frontend/govuk/assets' -%}
 
 {% extends "govuk/template.njk" %}