diff --git a/src/generators/postcss.js b/src/generators/postcss.js index f6ff8bc4..4e30cb8d 100644 --- a/src/generators/postcss.js +++ b/src/generators/postcss.js @@ -1,4 +1,3 @@ -const path = require('path') const {get} = require('lodash') const postcss = require('postcss') const postcssImport = require('postcss-import') @@ -7,10 +6,8 @@ const mergeLonghand = require('postcss-merge-longhand') module.exports = { process: async (css = '', maizzleConfig = {}) => { - const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css')) - return postcss([ - postcssImport({path: path.dirname(userFilePath)}), + postcssImport(), postcssNested(), maizzleConfig.env === 'local' ? () => {} : mergeLonghand(), ...get(maizzleConfig, 'build.postcss.plugins', []) diff --git a/src/generators/tailwindcss.js b/src/generators/tailwindcss.js index 5c1bd2a0..0d9089f6 100644 --- a/src/generators/tailwindcss.js +++ b/src/generators/tailwindcss.js @@ -89,19 +89,23 @@ module.exports = { const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css')) const userFileExists = await fs.pathExists(userFilePath) + const toProcess = [ + postcssNested(), + tailwindcss(config), + maizzleConfig.env === 'local' ? () => {} : mergeLonghand(), + ...get(maizzleConfig, 'build.postcss.plugins', []) + ] + if (userFileExists) { css = await fs.readFile(path.resolve(userFilePath), 'utf8') + css + toProcess.unshift( + postcssImport({path: path.dirname(userFilePath)}) + ) } else { - css = `@import "tailwindcss/components"; @import "tailwindcss/utilities"; ${css}` + css = `@tailwind components; @tailwind utilities; ${css}` } - return postcss([ - postcssImport({path: path.dirname(userFilePath)}), - postcssNested(), - tailwindcss(config), - maizzleConfig.env === 'local' ? () => {} : mergeLonghand(), - ...get(maizzleConfig, 'build.postcss.plugins', []) - ]) + return postcss([...toProcess]) .process(css, {from: undefined}) .then(result => result.css) .catch(error => { diff --git a/test/expected/transformers/atimport-in-style.html b/test/expected/transformers/atimport-in-style.html deleted file mode 100644 index 81dde632..00000000 --- a/test/expected/transformers/atimport-in-style.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - -
test
- - diff --git a/test/expected/transformers/preserve-transform-css.html b/test/expected/transformers/preserve-transform-css.html deleted file mode 100644 index 5165609e..00000000 --- a/test/expected/transformers/preserve-transform-css.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - -
test
- - diff --git a/test/expected/useConfig.html b/test/expected/useConfig.html deleted file mode 100644 index c4b16b30..00000000 --- a/test/expected/useConfig.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - test> - - -
build_production
- - diff --git a/test/fixtures/transformers/atimport-in-style.html b/test/fixtures/transformers/atimport-in-style.html deleted file mode 100644 index 6ecb87e9..00000000 --- a/test/fixtures/transformers/atimport-in-style.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - -
test
- - diff --git a/test/fixtures/transformers/preserve-transform-css.html b/test/fixtures/transformers/preserve-transform-css.html deleted file mode 100644 index 8c72f951..00000000 --- a/test/fixtures/transformers/preserve-transform-css.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - -
test
- - diff --git a/test/fixtures/useConfig.html b/test/fixtures/useConfig.html deleted file mode 100644 index ca47b2d1..00000000 --- a/test/fixtures/useConfig.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - test> - - -
{{ page.build.templates.destination.path }}
- - diff --git a/test/test-tostring.js b/test/test-tostring.js index 7ff57175..53a543d1 100644 --- a/test/test-tostring.js +++ b/test/test-tostring.js @@ -1,32 +1,18 @@ const test = require('ava') const Maizzle = require('../src') -const path = require('path') -const fs = require('fs') - -const readFile = (dir, filename) => fs.promises - .readFile(path.join(__dirname, dir, `${filename}.html`), 'utf8') - .then(html => html.trim()) - -const fixture = file => readFile('fixtures', file) -const expected = file => readFile('expected', file) - const renderString = (string, options = {}) => Maizzle.render(string, options).then(({html}) => html) -test('compiles HTML string if no options are passed', async t => { - const source = await fixture('basic') - - const html = await renderString(source) - - t.is(html, source) -}) - test('uses environment config file(s) if available', async t => { - const source = await fixture('useConfig') + const source = `
{{ page.mail }}
` - const html = await renderString(source, {maizzle: {env: 'maizzle-ci'}}) + const html = await renderString(source, { + maizzle: { + mail: 'puzzle' + } + }) - t.is(html, await expected('useConfig')) + t.is(html, '
puzzle
') }) test('throws if first argument is not an HTML string', async t => { @@ -129,7 +115,28 @@ test('prevents overwriting page object', async t => { }) test('preserves css in marked style tags (tailwindcss)', async t => { - const source = await fixture('transformers/preserve-transform-css') + const source = ` + + + + +
test
+ + ` + const html = await renderString(source, { // So that we don't compile twice tailwind: { @@ -137,12 +144,19 @@ test('preserves css in marked style tags (tailwindcss)', async t => { } }) - t.is(html, await expected('transformers/preserve-transform-css')) + t.true(html.includes('[data-ogsc] .inexistent')) + t.true(html.includes('div > u + .body .gmail-android-block')) + t.true(html.includes('u + #body a')) }) test('@import css files in marked style tags', async t => { - const source = await fixture('transformers/atimport-in-style') + const source = `` const html = await renderString(source) - t.is(html, await expected('transformers/atimport-in-style')) + t.is(html, ``) }) diff --git a/test/test-transformers.js b/test/test-transformers.js index 00e719a1..f8fbe1cf 100644 --- a/test/test-transformers.js +++ b/test/test-transformers.js @@ -287,31 +287,22 @@ test('filters (tailwindcss)', async t => { ` ) - const expected = `` - - t.is(html, expected) + t.true(html.replace(/\s/g, '').includes(`div{display:none}`)) }) test('filters (postcss)', async t => { const html = await Maizzle.withFilters( - `` + `` ) - const expected = `` - - t.is(html, expected) + t.is(html.replace(/\n {2,}/g, ''), '') }) test('url parameters', async t => {