diff --git a/test/__snapshots__/camelCase-option.test.js.snap b/test/__snapshots__/camelCase-option.test.js.snap new file mode 100644 index 00000000..537f463e --- /dev/null +++ b/test/__snapshots__/camelCase-option.test.js.snap @@ -0,0 +1,202 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`camelCase option dashes: errors 1`] = `Array []`; + +exports[`camelCase option dashes: locals 1`] = ` +Object { + "btn--info_is-disabled_1": "jDvNwV-WRSMB9n2z9QrzR", + "btn-info_is-disabled": "_1XTfjK5gKYeSzbdZhEXRpF", + "btnInfo_isDisabled": "_1XTfjK5gKYeSzbdZhEXRpF", + "btnInfo_isDisabled_1": "jDvNwV-WRSMB9n2z9QrzR", + "foo": "bar", + "my-btn-info_is-disabled": "value", + "myBtnInfo_isDisabled": "value", + "simple": "_1penVf9PMtov2qLxmtsMjq", +} +`; + +exports[`camelCase option dashes: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + "._1XTfjK5gKYeSzbdZhEXRpF { + color: blue; +} + +.jDvNwV-WRSMB9n2z9QrzR { + color: blue; +} + +._1penVf9PMtov2qLxmtsMjq { + color: red; +} + +a { + color: yellow; +} +", + "", + ], +] +`; + +exports[`camelCase option dashes: warnings 1`] = `Array []`; + +exports[`camelCase option dashesOnly: errors 1`] = `Array []`; + +exports[`camelCase option dashesOnly: locals 1`] = ` +Object { + "btnInfo_isDisabled": "_1XTfjK5gKYeSzbdZhEXRpF", + "btnInfo_isDisabled_1": "jDvNwV-WRSMB9n2z9QrzR", + "foo": "bar", + "myBtnInfo_isDisabled": "value", + "simple": "_1penVf9PMtov2qLxmtsMjq", +} +`; + +exports[`camelCase option dashesOnly: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + "._1XTfjK5gKYeSzbdZhEXRpF { + color: blue; +} + +.jDvNwV-WRSMB9n2z9QrzR { + color: blue; +} + +._1penVf9PMtov2qLxmtsMjq { + color: red; +} + +a { + color: yellow; +} +", + "", + ], +] +`; + +exports[`camelCase option dashesOnly: warnings 1`] = `Array []`; + +exports[`camelCase option not specified: errors 1`] = `Array []`; + +exports[`camelCase option not specified: locals 1`] = ` +Object { + "btn--info_is-disabled_1": "jDvNwV-WRSMB9n2z9QrzR", + "btn-info_is-disabled": "_1XTfjK5gKYeSzbdZhEXRpF", + "foo": "bar", + "my-btn-info_is-disabled": "value", + "simple": "_1penVf9PMtov2qLxmtsMjq", +} +`; + +exports[`camelCase option not specified: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + "._1XTfjK5gKYeSzbdZhEXRpF { + color: blue; +} + +.jDvNwV-WRSMB9n2z9QrzR { + color: blue; +} + +._1penVf9PMtov2qLxmtsMjq { + color: red; +} + +a { + color: yellow; +} +", + "", + ], +] +`; + +exports[`camelCase option not specified: warnings 1`] = `Array []`; + +exports[`camelCase option only: errors 1`] = `Array []`; + +exports[`camelCase option only: locals 1`] = ` +Object { + "btnInfoIsDisabled": "_1XTfjK5gKYeSzbdZhEXRpF", + "btnInfoIsDisabled1": "jDvNwV-WRSMB9n2z9QrzR", + "foo": "bar", + "myBtnInfoIsDisabled": "value", + "simple": "_1penVf9PMtov2qLxmtsMjq", +} +`; + +exports[`camelCase option only: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + "._1XTfjK5gKYeSzbdZhEXRpF { + color: blue; +} + +.jDvNwV-WRSMB9n2z9QrzR { + color: blue; +} + +._1penVf9PMtov2qLxmtsMjq { + color: red; +} + +a { + color: yellow; +} +", + "", + ], +] +`; + +exports[`camelCase option only: warnings 1`] = `Array []`; + +exports[`camelCase option true: errors 1`] = `Array []`; + +exports[`camelCase option true: locals 1`] = ` +Object { + "btn--info_is-disabled_1": "jDvNwV-WRSMB9n2z9QrzR", + "btn-info_is-disabled": "_1XTfjK5gKYeSzbdZhEXRpF", + "btnInfoIsDisabled": "_1XTfjK5gKYeSzbdZhEXRpF", + "btnInfoIsDisabled1": "jDvNwV-WRSMB9n2z9QrzR", + "foo": "bar", + "my-btn-info_is-disabled": "value", + "myBtnInfoIsDisabled": "value", + "simple": "_1penVf9PMtov2qLxmtsMjq", +} +`; + +exports[`camelCase option true: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + "._1XTfjK5gKYeSzbdZhEXRpF { + color: blue; +} + +.jDvNwV-WRSMB9n2z9QrzR { + color: blue; +} + +._1penVf9PMtov2qLxmtsMjq { + color: red; +} + +a { + color: yellow; +} +", + "", + ], +] +`; + +exports[`camelCase option true: warnings 1`] = `Array []`; diff --git a/test/camelCase-option.test.js b/test/camelCase-option.test.js new file mode 100644 index 00000000..4e6c19dd --- /dev/null +++ b/test/camelCase-option.test.js @@ -0,0 +1,101 @@ +const { webpack, evaluated } = require('./helpers'); + +describe('camelCase option', () => { + it('true', async () => { + const config = { + loader: { + options: { + modules: true, + camelCase: true, + }, + }, + }; + const testId = './modules/camelCase.css'; + const stats = await webpack(testId, config); + const { modules } = stats.toJson(); + const module = modules.find((m) => m.id === testId); + const evaluatedModule = evaluated(module.source); + + expect(evaluatedModule).toMatchSnapshot('module (evaluated)'); + expect(evaluatedModule.locals).toMatchSnapshot('locals'); + expect(stats.compilation.warnings).toMatchSnapshot('warnings'); + expect(stats.compilation.errors).toMatchSnapshot('errors'); + }); + + it('not specified', async () => { + const config = { loader: { options: { modules: true } } }; + const testId = './modules/camelCase.css'; + const stats = await webpack(testId, config); + const { modules } = stats.toJson(); + const module = modules.find((m) => m.id === testId); + const evaluatedModule = evaluated(module.source); + + expect(evaluatedModule).toMatchSnapshot('module (evaluated)'); + expect(evaluatedModule.locals).toMatchSnapshot('locals'); + expect(stats.compilation.warnings).toMatchSnapshot('warnings'); + expect(stats.compilation.errors).toMatchSnapshot('errors'); + }); + + it('dashes', async () => { + const config = { + loader: { + options: { + modules: true, + camelCase: 'dashes', + }, + }, + }; + const testId = './modules/camelCase.css'; + const stats = await webpack(testId, config); + const { modules } = stats.toJson(); + const module = modules.find((m) => m.id === testId); + const evaluatedModule = evaluated(module.source); + + expect(evaluatedModule).toMatchSnapshot('module (evaluated)'); + expect(evaluatedModule.locals).toMatchSnapshot('locals'); + expect(stats.compilation.warnings).toMatchSnapshot('warnings'); + expect(stats.compilation.errors).toMatchSnapshot('errors'); + }); + + it('only', async () => { + const config = { + loader: { + options: { + modules: true, + camelCase: 'only', + }, + }, + }; + const testId = './modules/camelCase.css'; + const stats = await webpack(testId, config); + const { modules } = stats.toJson(); + const module = modules.find((m) => m.id === testId); + const evaluatedModule = evaluated(module.source); + + expect(evaluatedModule).toMatchSnapshot('module (evaluated)'); + expect(evaluatedModule.locals).toMatchSnapshot('locals'); + expect(stats.compilation.warnings).toMatchSnapshot('warnings'); + expect(stats.compilation.errors).toMatchSnapshot('errors'); + }); + + it('dashesOnly', async () => { + const config = { + loader: { + options: { + modules: true, + camelCase: 'dashesOnly', + }, + }, + }; + const testId = './modules/camelCase.css'; + const stats = await webpack(testId, config); + const { modules } = stats.toJson(); + const module = modules.find((m) => m.id === testId); + const evaluatedModule = evaluated(module.source); + + expect(evaluatedModule).toMatchSnapshot('module (evaluated)'); + expect(evaluatedModule.locals).toMatchSnapshot('locals'); + expect(stats.compilation.warnings).toMatchSnapshot('warnings'); + expect(stats.compilation.errors).toMatchSnapshot('errors'); + }); +}); diff --git a/test/camelCase.test.js b/test/camelCase.test.js deleted file mode 100644 index 9e07ea54..00000000 --- a/test/camelCase.test.js +++ /dev/null @@ -1,80 +0,0 @@ -const { test, testRaw } = require('./helpers'); - -describe('camelCase', () => { - const css = '.btn-info_is-disabled { color: blue; }'; - const cssMultipleDashes = '.btn--info_is-disabled { color: blue; }'; - const mixedCss = - '.btn-info_is-disabled { color: blue; } .simple { color: red; }'; - const exports = { - with: [[1, '._1L-rnCOXCE_7H94L5XT4uB { color: blue; }', '']], - without: [[1, '._1L-rnCOXCE_7H94L5XT4uB { color: blue; }', '']], - dashes: [[1, '._1L-rnCOXCE_7H94L5XT4uB { color: blue; }', '']], - multipleDashes: [[1, '._3JUlsKrl__OF70Fq391jEw { color: blue; }', '']], - withoutOnly: [ - [ - 1, - '._1L-rnCOXCE_7H94L5XT4uB { color: blue; } .KKtodWG-IuEaequFjAsoJ { color: red; }', - '', - ], - ], - dashesOnly: [ - [ - 1, - '._1L-rnCOXCE_7H94L5XT4uB { color: blue; } .KKtodWG-IuEaequFjAsoJ { color: red; }', - '', - ], - ], - }; - exports.with.locals = { 'btn-info_is-disabled': '_1L-rnCOXCE_7H94L5XT4uB' }; - exports.without.locals = { - btnInfoIsDisabled: '_1L-rnCOXCE_7H94L5XT4uB', - 'btn-info_is-disabled': '_1L-rnCOXCE_7H94L5XT4uB', - }; - exports.dashes.locals = { - btnInfo_isDisabled: '_1L-rnCOXCE_7H94L5XT4uB', - 'btn-info_is-disabled': '_1L-rnCOXCE_7H94L5XT4uB', - }; - exports.multipleDashes.locals = { - btnInfo_isDisabled: '_3JUlsKrl__OF70Fq391jEw', - 'btn--info_is-disabled': '_3JUlsKrl__OF70Fq391jEw', - }; - exports.withoutOnly.locals = { - btnInfoIsDisabled: '_1L-rnCOXCE_7H94L5XT4uB', - simple: 'KKtodWG-IuEaequFjAsoJ', - }; - exports.dashesOnly.locals = { - btnInfo_isDisabled: '_1L-rnCOXCE_7H94L5XT4uB', - simple: 'KKtodWG-IuEaequFjAsoJ', - }; - test('with', css, exports.with, '?modules'); - test('without', css, exports.without, '?modules&camelCase'); - test('dashes', css, exports.dashes, '?modules&camelCase=dashes'); - test( - 'multipleDashes', - cssMultipleDashes, - exports.multipleDashes, - '?modules&camelCase=dashes' - ); - // Remove this option in v1.0.0 and make the removal of the original classname the default behaviour. See #440. - test('withoutOnly', mixedCss, exports.withoutOnly, '?modules&camelCase=only'); - // Remove this option in v1.0.0 and make the removal of the original classname the default behaviour. See #440. - test( - 'dashesOnly', - mixedCss, - exports.dashesOnly, - '?modules&camelCase=dashesOnly' - ); - - testRaw( - 'withoutRaw', - '.a {}', - 'exports.locals = {\n\t"a": "_1buUQJccBRS2-2i27LCoDf"\n};', - '?modules&camelCase' - ); - testRaw( - 'dashesRaw', - '.a {}', - 'exports.locals = {\n\t"a": "_1buUQJccBRS2-2i27LCoDf"\n};', - '?modules&camelCase=dashes' - ); -}); diff --git a/test/fixtures/modules/camelCase.css b/test/fixtures/modules/camelCase.css new file mode 100644 index 00000000..a0c46e20 --- /dev/null +++ b/test/fixtures/modules/camelCase.css @@ -0,0 +1,20 @@ +.btn-info_is-disabled { + color: blue; +} + +.btn--info_is-disabled_1 { + color: blue; +} + +.simple { + color: red; +} + +a { + color: yellow; +} + +:export { + foo: bar; + my-btn-info_is-disabled: value; +}