Skip to content

Commit

Permalink
fix(build): fix css minify and file naming of sass to css
Browse files Browse the repository at this point in the history
  • Loading branch information
tujoworker committed Oct 11, 2021
1 parent 922a4a0 commit bba0f50
Show file tree
Hide file tree
Showing 4 changed files with 173 additions and 63 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,35 +6,66 @@
import { runFactory } from '../makeLibStyles'
import isCI from 'is-ci'

jest.mock('ora', () => {
return jest.fn(() => ({
start: jest.fn(),
info: jest.fn(),
warn: jest.fn(),
succeed: jest.fn(),
fail: jest.fn(),
}))
})

if (isCI) {
jest.setTimeout(30e3)

beforeAll(async () => {
global.css = await runFactory(
'./src/components/button/style/dnb-button.scss',
{
returnResult: true,
}
)
})

describe('makeLibStyles transform main SASS to CSS', () => {
beforeAll(async () => {
global.css = await runFactory(
'./src/components/button/style/dnb-button.scss',
{
returnResult: true,
}
)
global.files = await runFactory(
'./src/components/button/style/dnb-button.scss',
{
returnFiles: true,
}
)
})

it('has to contain a button selector', () => {
expect(global.css).toMatch(new RegExp('.dnb-button\\s?{'))
expect(global.css[0]).toMatch(new RegExp('.dnb-button\\s?{'))
})

it('has to contain a icon selector as it is a dependency', () => {
expect(global.css).toMatch(new RegExp('.dnb-icon\\s?{'))
expect(global.css[0]).toMatch(new RegExp('.dnb-icon\\s?{'))
})

it('has to contain a polyfill for font-family', () => {
// because else we have font-family:var(--font-family-default)
expect(global.css).toMatch(
expect(global.css[0]).toMatch(
new RegExp('font-family:\\s?.*,\\s?sans-serif;')
)
})
// NB: New from 24. mars 2019 - we relay on the css style packages (e.g. basic)
// it('has to have correct path to fonts', () => {
// expect(global.css).toContain('"../../../assets/fonts/')
// })

it('should contain a non minified and a minified content', () => {
expect(global.css[0]).toContain(
'This file is only used to make components independent'
)
expect(global.css[1]).toContain(':root{--')
})

it('includes correct files', () => {
expect(global.files).toHaveLength(2)
expect(global.files[0]).toContain(
'/components/button/style/dnb-button.css'
)
expect(global.files[1]).toContain(
'/components/button/style/dnb-button.min.css'
)
})
})
} else {
it('skipping local tests', () => {})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,77 +7,119 @@ import { loadScss } from '../../../../src/core/jest/jestSetup'
import { runFactory } from '../makeMainStyle'
import isCI from 'is-ci'

jest.mock('ora', () => {
return jest.fn(() => ({
start: jest.fn(),
info: jest.fn(),
warn: jest.fn(),
succeed: jest.fn(),
fail: jest.fn(),
}))
})

if (isCI) {
jest.setTimeout(30e3)

beforeAll(async () => {
global.core = await runFactory('./src/style/dnb-ui-core.scss', {
returnResult: true,
})
global.components = await runFactory(
'./src/style/dnb-ui-components.scss',
{
returnResult: true,
}
)
global.elements = await runFactory(
'./src/style/dnb-ui-elements.scss',
{
returnResult: true,
}
)
global.theme = await runFactory(
'./src/style/themes/theme-ui/dnb-theme-ui.scss',
{
describe('makeMainStyle transforms "core" SASS to CSS', () => {
beforeAll(async () => {
global.core = await runFactory('./src/style/dnb-ui-core.scss', {
returnResult: true,
}
)
})
})
})

describe('makeMainStyle transforms "core" SASS to CSS', () => {
it('has to have valid core css', () => {
const css = loadScss(null, { data: global.core })
const css = loadScss(null, { data: global.core[0] })
expect(/^Error/.test(css)).toBe(false)
})

it('has to have correct core path to fonts', () => {
expect(global.core).toMatch(new RegExp('("|\\()../assets/fonts/'))
expect(global.core[0]).toMatch(new RegExp('("|\\()../assets/fonts/'))
})
})

describe('makeMainStyle transforms "components" SASS to CSS', () => {
beforeAll(async () => {
global.components = await runFactory(
'./src/style/dnb-ui-components.scss',
{
returnResult: true,
}
)
global.files = await runFactory(
'./src/style/dnb-ui-components.scss',
{
returnFiles: true,
}
)
})

it('has to have valid components css', () => {
const css = loadScss(null, { data: global.components })
const css = loadScss(null, { data: global.components[0] })
expect(/^Error/.test(css)).toBe(false)
})

it('has to contain a button selector', () => {
expect(global.components).toMatch(new RegExp('.dnb-button\\s?{'))
expect(global.components[0]).toMatch(new RegExp('.dnb-button\\s?{'))
})

it('has proper animation names after the cssnano transform', () => {
expect(global.components).not.toMatch(/animation:[a-z] /)
expect(global.components[0]).not.toMatch(/animation:[a-z] /)
})

it('should contain a non minified and a minified content', () => {
expect(global.components[0]).toContain(
'ATTENTION: This file is auto generated'
)
expect(global.components[1]).toMatch(/^:root{--/)
})

it('includes correct files', () => {
expect(global.files).toHaveLength(2)
expect(global.files[0]).toContain('/style/dnb-ui-components.css')
expect(global.files[1]).toContain('/style/dnb-ui-components.min.css')
})
})

describe('makeMainStyle transforms "elements" SASS to CSS', () => {
beforeAll(async () => {
global.elements = await runFactory(
'./src/style/dnb-ui-elements.scss',
{
returnResult: true,
}
)
})

it('has to have valid elements css', () => {
const css = loadScss(null, { data: global.elements })
const css = loadScss(null, { data: global.elements[0] })
expect(/^Error/.test(css)).toBe(false)
})
})

describe('makeMainStyle transforms "theme" SASS to CSS', () => {
beforeAll(async () => {
global.theme = await runFactory(
'./src/style/themes/theme-ui/dnb-theme-ui.scss',
{
returnResult: true,
}
)
})

it('has to have valid theme css', () => {
const css = loadScss(null, { data: global.theme })
const css = loadScss(null, { data: global.theme[0] })
expect(/^Error/.test(css)).toBe(false)
})

it('has to have correct custom properties', () => {
expect(global.theme).toMatch(
expect(global.theme[0]).toMatch(
new RegExp('--color-sea-green:\\s?#007272;')
)
expect(global.theme).toMatch(
expect(global.theme[0]).toMatch(
new RegExp('color:\\s?var\\(--color-sea-green\\);')
)
expect(global.theme).toMatch(new RegExp('color:\\s?#007272;'))
expect(global.theme).not.toContain('fuchsia')
expect(global.theme[0]).toMatch(new RegExp('color:\\s?#007272;'))
expect(global.theme[0]).not.toContain('fuchsia')
})
})
} else {
Expand Down
34 changes: 27 additions & 7 deletions packages/dnb-eufemia/scripts/prepub/tasks/makeLibStyles.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,10 @@ export default async function makeLibStyles() {
}
}

export const runFactory = (src, { returnResult = false } = {}) =>
export const runFactory = (
src,
{ returnResult = false, returnFiles = false } = {}
) =>
new Promise((resolve, reject) => {
log.start(`> PrePublish: converting sass to css | ${src}`)

Expand All @@ -45,11 +48,16 @@ export const runFactory = (src, { returnResult = false } = {}) =>
const dest = src.replace('./src/', '').split('/**/')[0]
const files = [src, '!**/__tests__/**', '!**/*_not_in_use*/**/*']

let stream = gulp
const stream = gulp
.src(files, {
cwd: ROOT_DIR,
})
.pipe(transform('utf8', transformSass()))
.pipe(
rename({
extname: '.css',
})
)
.pipe(
transform(
'utf8',
Expand All @@ -63,12 +71,12 @@ export const runFactory = (src, { returnResult = false } = {}) =>
)
)
.pipe(cloneSink)
transform('utf8', transformCssnano({ reduceIdents: false }))
.pipe(transform('utf8', transformCssnano({ reduceIdents: false })))
.pipe(rename({ suffix: '.min' }))
.pipe(cloneSink.tap())

if (!returnResult) {
stream = stream
if (!returnResult && !returnFiles) {
stream
.pipe(
gulp.dest(`./build/cjs/${dest}/`, {
cwd: ROOT_DIR,
Expand All @@ -89,6 +97,9 @@ export const runFactory = (src, { returnResult = false } = {}) =>
)
}

const collectedFiles = []
const collectedResults = []

stream
.pipe(
transform(
Expand All @@ -97,8 +108,17 @@ export const runFactory = (src, { returnResult = false } = {}) =>
)
)
.pipe(
returnResult
? transform('utf8', (result) => resolve(result))
returnResult || returnFiles
? transform('utf8', (result, file) => {
if (returnFiles) {
collectedFiles.push(file.path)
resolve(collectedFiles)
} else if (returnResult) {
collectedResults.push(result)
resolve(collectedResults)
}
return result
})
: gulp.dest(`./build/${dest}/`, {
cwd: ROOT_DIR,
})
Expand Down
29 changes: 23 additions & 6 deletions packages/dnb-eufemia/scripts/prepub/tasks/makeMainStyle.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,15 @@ export default async function makeMainStyle() {

export const runFactory = (
src,
{ returnResult = false, importOnce = true } = {}
{ returnResult = false, returnFiles = false, importOnce = true } = {}
) =>
new Promise((resolve, reject) => {
log.start('> PrePublish: transforming main style')

try {
const cloneSink = clone.sink()

let stream = gulp
const stream = gulp
.src(src, {
cwd: ROOT_DIR,
})
Expand All @@ -75,6 +75,11 @@ export const runFactory = (
})
)
)
.pipe(
rename({
extname: '.css',
})
)
.pipe(
transform(
'utf8',
Expand All @@ -86,8 +91,8 @@ export const runFactory = (
.pipe(rename({ suffix: '.min' }))
.pipe(cloneSink.tap())

if (!returnResult) {
stream = stream
if (!returnResult && !returnFiles) {
stream
.pipe(
gulp.dest('./build/cjs/style', {
cwd: ROOT_DIR,
Expand All @@ -108,13 +113,25 @@ export const runFactory = (
)
}

const collectedFiles = []
const collectedResults = []

stream
.pipe(
transform('utf8', transformPaths('../../assets/', '../assets/'))
)
.pipe(
returnResult
? transform('utf8', (result) => resolve(result))
returnResult || returnFiles
? transform('utf8', (result, file) => {
if (returnFiles) {
collectedFiles.push(file.path)
resolve(collectedFiles)
} else if (returnResult) {
collectedResults.push(result)
resolve(collectedResults)
}
return result
})
: gulp.dest('./build/style', {
cwd: ROOT_DIR,
})
Expand Down

0 comments on commit bba0f50

Please sign in to comment.