New line stripped from first line of Codebuild build spec when deploying with Serverless Framework

Question

I am deploying a build spec for AWS codebuild using Serverless Framework. When I deploy, the new line after the first line is absent in the build spec. This resource previously deployed without a problem and I cannot see anything I have done to break it. Is this a problem on my end or a bug with Serverless/CloudFormation?

Below is the CloudFormation template and the resulting build spec copied from the AWS console.

    Resources:
      CodeBuild:
        Type: 'AWS::CodeBuild::Project'
        Properties:
          Name: sls-retrobase-frontend-CodeBuild-${opt:stage}
          ServiceRole: !GetAtt CodeBuildRole.Arn
          Artifacts:
            Type: CODEPIPELINE
            Name: sls-retrobase
          Environment:
            Type: LINUX_CONTAINER    
            ComputeType: BUILD_GENERAL1_SMALL
            Image: "aws/codebuild/amazonlinux2-x86_64-standard:3.0"
          Source:
            Type: CODEPIPELINE
            BuildSpec: !Sub
              - >
                  version: 0.2
                  phases:
                    pre_build:
                      commands:
                        - echo List directory files...
                        - ls
                        - echo Installing source NPM dependencies...
                        - npm install
                    build:
                      commands:
                        - echo List active directory...
                        - ls
                        - echo Inserting Api Url into config.json from environment 
                        - node makeConfig.js ${apiUrl} ${auth0Audience} ${auth0Domain} ${auth0ClientId}
                        - echo Build started on `date`
                        - npm run build
                    post_build:
                      commands:
                        - echo List build directory...
                        - ls ./build
                        - aws s3 cp --recursive --acl public-read ./build s3://${Website}
                  artifacts:
                    files:
                      - '**/*'
              - apiUrl: !Join ['', [ "https://", !Ref QueryRestApi, ".execute-api.us-east-1.amazonaws.com/${opt:stage}/sls-retrobase-${opt:stage}"]]
                websiteUrl: !GetAtt Website.WebsiteURL
                auth0Audience: '***'
                auth0Domain: '***'
                auth0ClientId: '***'

build spec:

    version: 0.2 phases:
    pre_build:
        commands:
        - echo List directory files...
        - ls
        - echo Installing source NPM dependencies...
        - npm install
    build:
        commands:
        - echo List active directory...
        - ls
        - echo Inserting Api Url into config.json from environment 
        - node makeConfig.js https://h0suk54yw0.execute-api.us-east-1.amazonaws.com/test/sls-retrobase-test https://sls-retrobase https://dev-y33gimcf.eu.auth0.com/ Xn6SDc43vE8P0sQHkVLtiBSBVFT5rJMU
        - echo Build started on `date`
        - npm run build
    post_build:
        commands:
        - echo List build directory...
        - ls ./build
        - aws s3 cp --recursive --acl public-read ./build s3://serverless-retrobase-resources-test-website-7cvhqlgbkfj7
    artifacts:
    files:
        - '**/*'

Answer 1

This is probably because of your use of >. Please change it to |:

            BuildSpec: !Sub
              - |
                version: 0.2
                phases:

Alternatively, fix your spaces when using >. > and your code are not aligned.