diff --git a/README.md b/README.md index b8033ee0..3a76398b 100644 --- a/README.md +++ b/README.md @@ -109,15 +109,15 @@ module.exports = { ## Options -| Name | Type | Default | Description | -| :-------------------------------------------: | :-------------------------: | :-----: | :------------------------------------------------- | -| **[`url`](#url)** | `{Boolean\|Function}` | `true` | Enable/Disable `url()` handling | -| **[`import`](#import)** | `{Boolean\|Function}` | `true` | Enable/Disable @import handling | -| **[`modules`](#modules)** | `{Boolean\|String\|Object}` | `false` | Enable/Disable CSS Modules and setup their options | -| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `false` | Enable/Disable Sourcemaps | -| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Number of loaders applied before CSS loader | -| **[`exportLocalsStyle`](#exportlocalsstyle)** | `{String}` | `asIs` | Setup style of exported classnames | -| **[`onlyLocals`](#onlylocals)** | `{Boolean}` | `false` | Export only locals | +| Name | Type | Default | Description | +| :-----------------------------------------: | :-------------------------: | :-----: | :------------------------------------------------- | +| **[`url`](#url)** | `{Boolean\|Function}` | `true` | Enable/Disable `url()` handling | +| **[`import`](#import)** | `{Boolean\|Function}` | `true` | Enable/Disable @import handling | +| **[`modules`](#modules)** | `{Boolean\|String\|Object}` | `false` | Enable/Disable CSS Modules and setup their options | +| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `false` | Enable/Disable Sourcemaps | +| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Number of loaders applied before CSS loader | +| **[`localsConvention`](#localsconvention)** | `{String}` | `asIs` | Setup style of exported classnames | +| **[`onlyLocals`](#onlylocals)** | `{Boolean}` | `false` | Export only locals | ### `url` @@ -763,7 +763,7 @@ module.exports = { This may change in the future when the module system (i. e. webpack) supports loader matching by origin. -### `exportLocalsStyle` +### `localsConvention` Type: `String` Default: `undefined` @@ -801,7 +801,7 @@ module.exports = { test: /\.css$/i, loader: 'css-loader', options: { - exportLocalsStyle: 'camelCase', + localsConvention: 'camelCase', }, }, ], diff --git a/src/index.js b/src/index.js index c51bd6d0..05edffa5 100644 --- a/src/index.js +++ b/src/index.js @@ -64,7 +64,7 @@ export default function loader(content, map, meta) { icssParser({ loaderContext: this, importPrefix, - exportLocalsStyle: options.exportLocalsStyle, + localsConvention: options.localsConvention, }) ); diff --git a/src/options.json b/src/options.json index 6a4fba82..02983dea 100644 --- a/src/options.json +++ b/src/options.json @@ -84,7 +84,7 @@ } ] }, - "exportLocalsStyle": { + "localsConvention": { "anyOf": [ { "type": "string", diff --git a/src/plugins/postcss-icss-parser.js b/src/plugins/postcss-icss-parser.js index a0305568..003e3326 100644 --- a/src/plugins/postcss-icss-parser.js +++ b/src/plugins/postcss-icss-parser.js @@ -67,7 +67,7 @@ export default postcss.plugin( result.messages.push({ pluginName, - export: getExportItemCode(name, value, options.exportLocalsStyle), + export: getExportItemCode(name, value, options.localsConvention), type: 'export', item: { name, value }, }); diff --git a/src/utils.js b/src/utils.js index 1ddb4451..10a3cada 100644 --- a/src/utils.js +++ b/src/utils.js @@ -253,7 +253,7 @@ function getModuleCode(result, sourceMap, onlyLocals) { )}, ""${sourceMap && result.map ? `,${result.map}` : ''}]);\n`; } -function getExportItemCode(key, value, localsStyle) { +function getExportItemCode(key, value, localsConvention) { let targetKey; const items = []; @@ -261,7 +261,7 @@ function getExportItemCode(key, value, localsStyle) { items.push(`\t${JSON.stringify(k)}: ${JSON.stringify(value)}`); } - switch (localsStyle) { + switch (localsConvention) { case 'camelCase': addEntry(key); targetKey = camelCase(key); diff --git a/test/__snapshots__/exportLocalsStyle-option.test.js.snap b/test/__snapshots__/exportLocalsStyle-option.test.js.snap deleted file mode 100644 index 71c37fe5..00000000 --- a/test/__snapshots__/exportLocalsStyle-option.test.js.snap +++ /dev/null @@ -1,241 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`exportLocalsStyle option asIs: errors 1`] = `Array []`; - -exports[`exportLocalsStyle option asIs: locals 1`] = ` -Object { - "btn--info_is-disabled_1": "_1cmsy2E5swY7Ysn8h7qDun", - "btn-info_is-disabled": "qysDcl74sBAzry5FpDPQi", - "foo": "bar", - "my-btn-info_is-disabled": "value", - "simple": "f42SiWmkrcnocxM5cvNJw", -} -`; - -exports[`exportLocalsStyle option asIs: module (evaluated) 1`] = ` -Array [ - Array [ - 1, - ".qysDcl74sBAzry5FpDPQi { - color: blue; -} - -._1cmsy2E5swY7Ysn8h7qDun { - color: blue; -} - -.f42SiWmkrcnocxM5cvNJw { - color: red; -} - -a { - color: yellow; -} -", - "", - ], -] -`; - -exports[`exportLocalsStyle option asIs: warnings 1`] = `Array []`; - -exports[`exportLocalsStyle option camelCase: errors 1`] = `Array []`; - -exports[`exportLocalsStyle option camelCase: locals 1`] = ` -Object { - "btn--info_is-disabled_1": "_1cmsy2E5swY7Ysn8h7qDun", - "btn-info_is-disabled": "qysDcl74sBAzry5FpDPQi", - "btnInfoIsDisabled": "qysDcl74sBAzry5FpDPQi", - "btnInfoIsDisabled1": "_1cmsy2E5swY7Ysn8h7qDun", - "foo": "bar", - "my-btn-info_is-disabled": "value", - "myBtnInfoIsDisabled": "value", - "simple": "f42SiWmkrcnocxM5cvNJw", -} -`; - -exports[`exportLocalsStyle option camelCase: module (evaluated) 1`] = ` -Array [ - Array [ - 1, - ".qysDcl74sBAzry5FpDPQi { - color: blue; -} - -._1cmsy2E5swY7Ysn8h7qDun { - color: blue; -} - -.f42SiWmkrcnocxM5cvNJw { - color: red; -} - -a { - color: yellow; -} -", - "", - ], -] -`; - -exports[`exportLocalsStyle option camelCase: warnings 1`] = `Array []`; - -exports[`exportLocalsStyle option camelCaseOnly: errors 1`] = `Array []`; - -exports[`exportLocalsStyle option camelCaseOnly: locals 1`] = ` -Object { - "btnInfoIsDisabled": "qysDcl74sBAzry5FpDPQi", - "btnInfoIsDisabled1": "_1cmsy2E5swY7Ysn8h7qDun", - "foo": "bar", - "myBtnInfoIsDisabled": "value", - "simple": "f42SiWmkrcnocxM5cvNJw", -} -`; - -exports[`exportLocalsStyle option camelCaseOnly: module (evaluated) 1`] = ` -Array [ - Array [ - 1, - ".qysDcl74sBAzry5FpDPQi { - color: blue; -} - -._1cmsy2E5swY7Ysn8h7qDun { - color: blue; -} - -.f42SiWmkrcnocxM5cvNJw { - color: red; -} - -a { - color: yellow; -} -", - "", - ], -] -`; - -exports[`exportLocalsStyle option camelCaseOnly: warnings 1`] = `Array []`; - -exports[`exportLocalsStyle option dashes: errors 1`] = `Array []`; - -exports[`exportLocalsStyle option dashes: locals 1`] = ` -Object { - "btn--info_is-disabled_1": "_1cmsy2E5swY7Ysn8h7qDun", - "btn-info_is-disabled": "qysDcl74sBAzry5FpDPQi", - "btnInfo_isDisabled": "qysDcl74sBAzry5FpDPQi", - "btnInfo_isDisabled_1": "_1cmsy2E5swY7Ysn8h7qDun", - "foo": "bar", - "my-btn-info_is-disabled": "value", - "myBtnInfo_isDisabled": "value", - "simple": "f42SiWmkrcnocxM5cvNJw", -} -`; - -exports[`exportLocalsStyle option dashes: module (evaluated) 1`] = ` -Array [ - Array [ - 1, - ".qysDcl74sBAzry5FpDPQi { - color: blue; -} - -._1cmsy2E5swY7Ysn8h7qDun { - color: blue; -} - -.f42SiWmkrcnocxM5cvNJw { - color: red; -} - -a { - color: yellow; -} -", - "", - ], -] -`; - -exports[`exportLocalsStyle option dashes: warnings 1`] = `Array []`; - -exports[`exportLocalsStyle option dashesOnly: errors 1`] = `Array []`; - -exports[`exportLocalsStyle option dashesOnly: locals 1`] = ` -Object { - "btnInfo_isDisabled": "qysDcl74sBAzry5FpDPQi", - "btnInfo_isDisabled_1": "_1cmsy2E5swY7Ysn8h7qDun", - "foo": "bar", - "myBtnInfo_isDisabled": "value", - "simple": "f42SiWmkrcnocxM5cvNJw", -} -`; - -exports[`exportLocalsStyle option dashesOnly: module (evaluated) 1`] = ` -Array [ - Array [ - 1, - ".qysDcl74sBAzry5FpDPQi { - color: blue; -} - -._1cmsy2E5swY7Ysn8h7qDun { - color: blue; -} - -.f42SiWmkrcnocxM5cvNJw { - color: red; -} - -a { - color: yellow; -} -", - "", - ], -] -`; - -exports[`exportLocalsStyle option dashesOnly: warnings 1`] = `Array []`; - -exports[`exportLocalsStyle option not specified: errors 1`] = `Array []`; - -exports[`exportLocalsStyle option not specified: locals 1`] = ` -Object { - "btn--info_is-disabled_1": "_1cmsy2E5swY7Ysn8h7qDun", - "btn-info_is-disabled": "qysDcl74sBAzry5FpDPQi", - "foo": "bar", - "my-btn-info_is-disabled": "value", - "simple": "f42SiWmkrcnocxM5cvNJw", -} -`; - -exports[`exportLocalsStyle option not specified: module (evaluated) 1`] = ` -Array [ - Array [ - 1, - ".qysDcl74sBAzry5FpDPQi { - color: blue; -} - -._1cmsy2E5swY7Ysn8h7qDun { - color: blue; -} - -.f42SiWmkrcnocxM5cvNJw { - color: red; -} - -a { - color: yellow; -} -", - "", - ], -] -`; - -exports[`exportLocalsStyle option not specified: warnings 1`] = `Array []`; diff --git a/test/__snapshots__/localsConvention-option.test.js.snap b/test/__snapshots__/localsConvention-option.test.js.snap new file mode 100644 index 00000000..4925e0ac --- /dev/null +++ b/test/__snapshots__/localsConvention-option.test.js.snap @@ -0,0 +1,241 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`localsConvention option asIs: errors 1`] = `Array []`; + +exports[`localsConvention option asIs: locals 1`] = ` +Object { + "btn--info_is-disabled_1": "aF9yrid0BHOaiL3bSWCyJ", + "btn-info_is-disabled": "_2HovG-ymIjf-Q-jdQr_LQ-", + "foo": "bar", + "my-btn-info_is-disabled": "value", + "simple": "_2UqJ0qi8H2Q5R46tr_dUvz", +} +`; + +exports[`localsConvention option asIs: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + "._2HovG-ymIjf-Q-jdQr_LQ- { + color: blue; +} + +.aF9yrid0BHOaiL3bSWCyJ { + color: blue; +} + +._2UqJ0qi8H2Q5R46tr_dUvz { + color: red; +} + +a { + color: yellow; +} +", + "", + ], +] +`; + +exports[`localsConvention option asIs: warnings 1`] = `Array []`; + +exports[`localsConvention option camelCase: errors 1`] = `Array []`; + +exports[`localsConvention option camelCase: locals 1`] = ` +Object { + "btn--info_is-disabled_1": "aF9yrid0BHOaiL3bSWCyJ", + "btn-info_is-disabled": "_2HovG-ymIjf-Q-jdQr_LQ-", + "btnInfoIsDisabled": "_2HovG-ymIjf-Q-jdQr_LQ-", + "btnInfoIsDisabled1": "aF9yrid0BHOaiL3bSWCyJ", + "foo": "bar", + "my-btn-info_is-disabled": "value", + "myBtnInfoIsDisabled": "value", + "simple": "_2UqJ0qi8H2Q5R46tr_dUvz", +} +`; + +exports[`localsConvention option camelCase: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + "._2HovG-ymIjf-Q-jdQr_LQ- { + color: blue; +} + +.aF9yrid0BHOaiL3bSWCyJ { + color: blue; +} + +._2UqJ0qi8H2Q5R46tr_dUvz { + color: red; +} + +a { + color: yellow; +} +", + "", + ], +] +`; + +exports[`localsConvention option camelCase: warnings 1`] = `Array []`; + +exports[`localsConvention option camelCaseOnly: errors 1`] = `Array []`; + +exports[`localsConvention option camelCaseOnly: locals 1`] = ` +Object { + "btnInfoIsDisabled": "_2HovG-ymIjf-Q-jdQr_LQ-", + "btnInfoIsDisabled1": "aF9yrid0BHOaiL3bSWCyJ", + "foo": "bar", + "myBtnInfoIsDisabled": "value", + "simple": "_2UqJ0qi8H2Q5R46tr_dUvz", +} +`; + +exports[`localsConvention option camelCaseOnly: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + "._2HovG-ymIjf-Q-jdQr_LQ- { + color: blue; +} + +.aF9yrid0BHOaiL3bSWCyJ { + color: blue; +} + +._2UqJ0qi8H2Q5R46tr_dUvz { + color: red; +} + +a { + color: yellow; +} +", + "", + ], +] +`; + +exports[`localsConvention option camelCaseOnly: warnings 1`] = `Array []`; + +exports[`localsConvention option dashes: errors 1`] = `Array []`; + +exports[`localsConvention option dashes: locals 1`] = ` +Object { + "btn--info_is-disabled_1": "aF9yrid0BHOaiL3bSWCyJ", + "btn-info_is-disabled": "_2HovG-ymIjf-Q-jdQr_LQ-", + "btnInfo_isDisabled": "_2HovG-ymIjf-Q-jdQr_LQ-", + "btnInfo_isDisabled_1": "aF9yrid0BHOaiL3bSWCyJ", + "foo": "bar", + "my-btn-info_is-disabled": "value", + "myBtnInfo_isDisabled": "value", + "simple": "_2UqJ0qi8H2Q5R46tr_dUvz", +} +`; + +exports[`localsConvention option dashes: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + "._2HovG-ymIjf-Q-jdQr_LQ- { + color: blue; +} + +.aF9yrid0BHOaiL3bSWCyJ { + color: blue; +} + +._2UqJ0qi8H2Q5R46tr_dUvz { + color: red; +} + +a { + color: yellow; +} +", + "", + ], +] +`; + +exports[`localsConvention option dashes: warnings 1`] = `Array []`; + +exports[`localsConvention option dashesOnly: errors 1`] = `Array []`; + +exports[`localsConvention option dashesOnly: locals 1`] = ` +Object { + "btnInfo_isDisabled": "_2HovG-ymIjf-Q-jdQr_LQ-", + "btnInfo_isDisabled_1": "aF9yrid0BHOaiL3bSWCyJ", + "foo": "bar", + "myBtnInfo_isDisabled": "value", + "simple": "_2UqJ0qi8H2Q5R46tr_dUvz", +} +`; + +exports[`localsConvention option dashesOnly: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + "._2HovG-ymIjf-Q-jdQr_LQ- { + color: blue; +} + +.aF9yrid0BHOaiL3bSWCyJ { + color: blue; +} + +._2UqJ0qi8H2Q5R46tr_dUvz { + color: red; +} + +a { + color: yellow; +} +", + "", + ], +] +`; + +exports[`localsConvention option dashesOnly: warnings 1`] = `Array []`; + +exports[`localsConvention option not specified: errors 1`] = `Array []`; + +exports[`localsConvention option not specified: locals 1`] = ` +Object { + "btn--info_is-disabled_1": "aF9yrid0BHOaiL3bSWCyJ", + "btn-info_is-disabled": "_2HovG-ymIjf-Q-jdQr_LQ-", + "foo": "bar", + "my-btn-info_is-disabled": "value", + "simple": "_2UqJ0qi8H2Q5R46tr_dUvz", +} +`; + +exports[`localsConvention option not specified: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + "._2HovG-ymIjf-Q-jdQr_LQ- { + color: blue; +} + +.aF9yrid0BHOaiL3bSWCyJ { + color: blue; +} + +._2UqJ0qi8H2Q5R46tr_dUvz { + color: red; +} + +a { + color: yellow; +} +", + "", + ], +] +`; + +exports[`localsConvention option not specified: warnings 1`] = `Array []`; diff --git a/test/__snapshots__/validate-options.test.js.snap b/test/__snapshots__/validate-options.test.js.snap index f77d9bce..c50930a9 100644 --- a/test/__snapshots__/validate-options.test.js.snap +++ b/test/__snapshots__/validate-options.test.js.snap @@ -162,8 +162,8 @@ options.sourceMap should be boolean exports[`validate options 16`] = ` "CSS Loader Invalid Options -options.exportLocalsStyle should be equal to one of the allowed values -options.exportLocalsStyle should match some schema in anyOf +options.localsConvention should be equal to one of the allowed values +options.localsConvention should match some schema in anyOf " `; diff --git a/test/fixtures/modules/exportLocalsStyle.css b/test/fixtures/modules/localsConvention.css similarity index 100% rename from test/fixtures/modules/exportLocalsStyle.css rename to test/fixtures/modules/localsConvention.css diff --git a/test/exportLocalsStyle-option.test.js b/test/localsConvention-option.test.js similarity index 86% rename from test/exportLocalsStyle-option.test.js rename to test/localsConvention-option.test.js index 151a1fbb..5c8d7dda 100644 --- a/test/exportLocalsStyle-option.test.js +++ b/test/localsConvention-option.test.js @@ -1,9 +1,9 @@ import { webpack, evaluated } from './helpers'; -describe('exportLocalsStyle option', () => { +describe('localsConvention option', () => { it('not specified', async () => { const config = { loader: { options: { modules: true } } }; - const testId = './modules/exportLocalsStyle.css'; + const testId = './modules/localsConvention.css'; const stats = await webpack(testId, config); const { modules } = stats.toJson(); const module = modules.find((m) => m.id === testId); @@ -20,11 +20,11 @@ describe('exportLocalsStyle option', () => { loader: { options: { modules: true, - exportLocalsStyle: 'asIs', + localsConvention: 'asIs', }, }, }; - const testId = './modules/exportLocalsStyle.css'; + const testId = './modules/localsConvention.css'; const stats = await webpack(testId, config); const { modules } = stats.toJson(); const module = modules.find((m) => m.id === testId); @@ -41,11 +41,11 @@ describe('exportLocalsStyle option', () => { loader: { options: { modules: true, - exportLocalsStyle: 'camelCase', + localsConvention: 'camelCase', }, }, }; - const testId = './modules/exportLocalsStyle.css'; + const testId = './modules/localsConvention.css'; const stats = await webpack(testId, config); const { modules } = stats.toJson(); const module = modules.find((m) => m.id === testId); @@ -62,11 +62,11 @@ describe('exportLocalsStyle option', () => { loader: { options: { modules: true, - exportLocalsStyle: 'camelCaseOnly', + localsConvention: 'camelCaseOnly', }, }, }; - const testId = './modules/exportLocalsStyle.css'; + const testId = './modules/localsConvention.css'; const stats = await webpack(testId, config); const { modules } = stats.toJson(); const module = modules.find((m) => m.id === testId); @@ -83,11 +83,11 @@ describe('exportLocalsStyle option', () => { loader: { options: { modules: true, - exportLocalsStyle: 'dashes', + localsConvention: 'dashes', }, }, }; - const testId = './modules/exportLocalsStyle.css'; + const testId = './modules/localsConvention.css'; const stats = await webpack(testId, config); const { modules } = stats.toJson(); const module = modules.find((m) => m.id === testId); @@ -104,11 +104,11 @@ describe('exportLocalsStyle option', () => { loader: { options: { modules: true, - exportLocalsStyle: 'dashesOnly', + localsConvention: 'dashesOnly', }, }, }; - const testId = './modules/exportLocalsStyle.css'; + const testId = './modules/localsConvention.css'; const stats = await webpack(testId, config); const { modules } = stats.toJson(); const module = modules.find((m) => m.id === testId); diff --git a/test/validate-options.test.js b/test/validate-options.test.js index 2f7def7b..e9885dbf 100644 --- a/test/validate-options.test.js +++ b/test/validate-options.test.js @@ -93,12 +93,12 @@ it('validate options', () => { expect(() => validate({ sourceMap: false })).not.toThrow(); expect(() => validate({ sourceMap: 'true' })).toThrowErrorMatchingSnapshot(); - expect(() => validate({ exportLocalsStyle: 'camelCase' })).not.toThrow(); - expect(() => validate({ exportLocalsStyle: 'camelCaseOnly' })).not.toThrow(); - expect(() => validate({ exportLocalsStyle: 'dashes' })).not.toThrow(); - expect(() => validate({ exportLocalsStyle: 'dashesOnly' })).not.toThrow(); + expect(() => validate({ localsConvention: 'camelCase' })).not.toThrow(); + expect(() => validate({ localsConvention: 'camelCaseOnly' })).not.toThrow(); + expect(() => validate({ localsConvention: 'dashes' })).not.toThrow(); + expect(() => validate({ localsConvention: 'dashesOnly' })).not.toThrow(); expect(() => - validate({ exportLocalsStyle: 'unknown' }) + validate({ localsConvention: 'unknown' }) ).toThrowErrorMatchingSnapshot(); expect(() => validate({ importLoaders: false })).not.toThrow();