es-css-modules - npm Package Compare versions

Comparing version 1.2.3 to 1.2.4

index.js

@@ -72,5 +72,5 @@ 'use strict';
           return Promise.resolve(value).then(function (value) {
-            return step("next", value);
+            step("next", value);
           }, function (err) {
-            return step("throw", err);
+            step("throw", err);
           });
@@ -124,10 +124,10 @@ }
 var getStyleImports = (() => {
-  var ref = _asyncToGenerator(function* (_ref) {
-    let files = _ref.jsFiles;
-    let recurse = _ref.recurse;
-    let parser = _ref.parser;
-    let parserOptions = _ref.parserOptions;
-    let resolveOptions = _ref.resolveOptions;
+  var _ref = _asyncToGenerator(function* (_ref2) {
+    let files = _ref2.jsFiles,
+        recurse = _ref2.recurse,
+        parser = _ref2.parser,
+        parserOptions = _ref2.parserOptions,
+        resolveOptions = _ref2.resolveOptions;
 
-    var _ref2 = yield (0, _getEsImportsExports2.default)({
+    var _ref3 = yield (0, _getEsImportsExports2.default)({
       files: files,
@@ -141,3 +141,3 @@ recurse: recurse,
 
-    const imports = _ref2.imports;
+    const imports = _ref3.imports;
 
@@ -161,3 +161,3 @@
   return function (_x) {
-    return ref.apply(this, arguments);
+    return _ref.apply(this, arguments);
   };
@@ -175,9 +175,9 @@ })();
 
-var patchGetScopedName = (Core, _ref3) => {
-  let removeUnusedClasses = _ref3.removeUnusedClasses;
-  let generateScopedName = _ref3.generateScopedName;
-  let file = _ref3.file;
-  return _ref4 => {
-    let styleImports = _ref4.styleImports;
-    let cssToCssModuleMap = _ref4.cssToCssModuleMap;
+var patchGetScopedName = (Core, _ref4) => {
+  let removeUnusedClasses = _ref4.removeUnusedClasses,
+      generateScopedName = _ref4.generateScopedName,
+      file = _ref4.file;
+  return (_ref5) => {
+    let styleImports = _ref5.styleImports,
+        cssToCssModuleMap = _ref5.cssToCssModuleMap;
 
@@ -203,3 +203,5 @@ // We mutate these objects, and return an object that will later be mutated
 
-      if (isClass && !isValidClassname(name)) {
+      if (file === filename && isClass && !isValidClassname(name)) {
+        // Must be current file
+        // `composes: otherwise-invalid-export from 'somewhere-else.css'` is valid
         // Throws within promise, goes to .catch(...)
@@ -231,13 +233,13 @@ throw new Error(`Class name ${ name } is invalid`);
 
-const defaultExport = _ref5 => {
-  var _ref6 = _slicedToArray(_ref5, 2);
+const defaultExport = (_ref6) => {
+  var _ref7 = _slicedToArray(_ref6, 2);
 
-  let exportName = _ref6[1];
+  let exportName = _ref7[1];
   return `export default '${ exportName }';\n`;
 };
-const constExport = _ref7 => {
-  var _ref8 = _slicedToArray(_ref7, 2);
+const constExport = (_ref8) => {
+  var _ref9 = _slicedToArray(_ref8, 2);
 
-  let importName = _ref8[0];
-  let exportName = _ref8[1];
+  let importName = _ref9[0],
+      exportName = _ref9[1];
   return `export const ${ importName } = '${ exportName }';\n`;
@@ -256,24 +258,23 @@ };
 var index = _postcss2.default.plugin('es-css-modules', function () {
-  var _ref9 = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+  var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  let moduleExportDirectory = _ref9.moduleExportDirectory;
-  let // removed
-  jsFiles = _ref9.jsFiles;
-  var _ref9$getJsExports = _ref9.getJsExports;
-  let getJsExports = _ref9$getJsExports === undefined ? saveJsExports : _ref9$getJsExports;
-  var _ref9$generateScopedN = _ref9.generateScopedName;
-  let generateScopedName = _ref9$generateScopedN === undefined ? generateHashedScopedName : _ref9$generateScopedN;
-  var _ref9$warnOnUnusedCla = _ref9.warnOnUnusedClasses;
-  let warnOnUnusedClasses = _ref9$warnOnUnusedCla === undefined ? true : _ref9$warnOnUnusedCla;
-  var _ref9$removeUnusedCla = _ref9.removeUnusedClasses;
-  let removeUnusedClasses = _ref9$removeUnusedCla === undefined ? true : _ref9$removeUnusedCla;
-  var _ref9$recurse = _ref9.recurse;
-  let recurse = _ref9$recurse === undefined ? true : _ref9$recurse;
-  var _ref9$parser = _ref9.parser;
-  let parser = _ref9$parser === undefined ? _getEsImportsExports.defaultParser : _ref9$parser;
-  var _ref9$parserOptions = _ref9.parserOptions;
-  let parserOptions = _ref9$parserOptions === undefined ? _getEsImportsExports.defaultParserOptions : _ref9$parserOptions;
-  var _ref9$resolveOptions = _ref9.resolveOptions;
-  let resolveOptions = _ref9$resolveOptions === undefined ? defaultResolveOptions : _ref9$resolveOptions;
-  let Loader = _ref9.Loader;
+  let moduleExportDirectory = _ref10.moduleExportDirectory,
+      jsFiles = _ref10.jsFiles;
+  var _ref10$getJsExports = _ref10.getJsExports;
+  let getJsExports = _ref10$getJsExports === undefined ? saveJsExports : _ref10$getJsExports;
+  var _ref10$generateScoped = _ref10.generateScopedName;
+  let generateScopedName = _ref10$generateScoped === undefined ? generateHashedScopedName : _ref10$generateScoped;
+  var _ref10$warnOnUnusedCl = _ref10.warnOnUnusedClasses;
+  let warnOnUnusedClasses = _ref10$warnOnUnusedCl === undefined ? true : _ref10$warnOnUnusedCl;
+  var _ref10$removeUnusedCl = _ref10.removeUnusedClasses;
+  let removeUnusedClasses = _ref10$removeUnusedCl === undefined ? true : _ref10$removeUnusedCl;
+  var _ref10$recurse = _ref10.recurse;
+  let recurse = _ref10$recurse === undefined ? true : _ref10$recurse;
+  var _ref10$parser = _ref10.parser;
+  let parser = _ref10$parser === undefined ? _getEsImportsExports.defaultParser : _ref10$parser;
+  var _ref10$parserOptions = _ref10.parserOptions;
+  let parserOptions = _ref10$parserOptions === undefined ? _getEsImportsExports.defaultParserOptions : _ref10$parserOptions;
+  var _ref10$resolveOptions = _ref10.resolveOptions;
+  let resolveOptions = _ref10$resolveOptions === undefined ? defaultResolveOptions : _ref10$resolveOptions,
+      Loader = _ref10.Loader;
 
@@ -316,6 +317,6 @@ let styleImportsPromise;
       file: file
-    })).then(_ref10 => {
-      let styleImports = _ref10.styleImports;
-      let cssToCssModuleMap = _ref10.cssToCssModuleMap;
-      let typesPerName = _ref10.typesPerName;
+    })).then((_ref11) => {
+      let styleImports = _ref11.styleImports,
+          cssToCssModuleMap = _ref11.cssToCssModuleMap,
+          typesPerName = _ref11.typesPerName;
       return new Promise((res, rej) => {
@@ -364,4 +365,4 @@ // They might have a css file that has global styles, but not import it. Allow fallback here
           return { tokensToExport: tokensToExport };
-        }).then(_ref11 => {
-          let tokensToExport = _ref11.tokensToExport;
+        }).then((_ref12) => {
+          let tokensToExport = _ref12.tokensToExport;
 
@@ -368,0 +369,0 @@ const styleExports = getStyleExports(tokensToExport);

package.json

 {
   "name": "es-css-modules",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "PostCSS plugin that combines CSS Modules and ES Imports",
@@ -27,9 +27,9 @@ "main": "index.js",
     "is-keyword-js": "^1.0.3",
-    "lodash": "4.13.1",
-    "postcss": "^5.0.21",
-    "postcss-remove-classes": "0.0.3",
+    "lodash": "^4.16.6",
+    "postcss": "^5.2.5",
+    "postcss-remove-classes": "^1.0.2",
     "string-hash": "^1.1.0"
   },
   "devDependencies": {
-    "ava": "^0.14.0",
+    "ava": "^0.16.0",
     "babel": "^6.5.2",
@@ -46,2 +46,4 @@ "babel-cli": "^6.8.0",
     "babel-plugin-transform-strict-mode": "^6.6.5",
+    "basscss-btn": "^1.1.1",
+    "basscss-btn-primary": "^1.1.0",
     "eslint": "^2.9.0",
@@ -48,0 +50,0 @@ "eslint-config-airbnb-base": "^2.0.0",

README.md

@@ -33,4 +33,6 @@ ![ES CSS Modules](https://raw.githubusercontent.com/jacobp100/es-css-modules/master/assets/logo-full.png)
 
-When processing this with ES CSS Modules, it will generate a `.m.css.js` file, so you can bundle it or run it in node as normal.
+When processing this with ES CSS Modules, it will generate a `.m.css.js` (or `.css.js`—see below) file, so you can bundle it or run it in node as normal.
 
+The use of the extension `.m.css` is optional, and you can use `.css` if you want, and it'll work the same. However, this can cause problems when using bundlers. In most bundlers, if you try to load `button.css` and that file exists, it'll load that file and ignore the file generated by ES CSS Modules! However, when you try to load `button.m.css`, which doesn't exist, it'll then try to load `button.m.css.js`, which is the file we want to load.
+
 # API
@@ -64,3 +66,3 @@
 
-You can configure how modules are resolved via `resolveOptions`, which is the same as [node-resolve](https://github.com/substack/node-resolve). Above the standard options, we modify the `extensions` to include `.css` files, and modifiy the `isFile` function to reject all `.css.js` files. If you need to load `.jsx` files, just add that to the `extensions` to the default resolve options---they're under the name `defaultResolveOptions`.
+You can configure how modules are resolved via `resolveOptions`, which is the same as [node-resolve](https://github.com/substack/node-resolve). Above the standard options, we modify the `extensions` to include `.css` files, and modifiy the `isFile` function to reject all `.css.js` files. If you need to load `.jsx` files, just add that to the `extensions` to the default resolve options—they're under the name `defaultResolveOptions`.
 
@@ -83,2 +85,18 @@ The complete options are as follows,
 
+# Development Environment
+
+You probably don't want to be using this for development. Instead, I'd recommend just using the regular CSS Modules via the default Webpack setup. If you're using the `.m.css`, this will cause problems, as it won't be loading the CSS files. You can use [superalias](https://github.com/jacobp100/webpack-superalias/tree/master) to fix this.
+
+```js
+// webpack.config.js
+const SuperAlias = require('webpack-superalias');
+
+module.exports = {
+  ...
+  plugins: [
+    new SuperAlias(path => path.replace(/\.m\.css($|\?)/, '.css'));
+  ]
+};
+```
+
 # Notes
@@ -88,4 +106,6 @@
 
-At present, a class and keyframes definition cannot have the same name until [this is fixed](https://github.com/css-modules/postcss-modules-scope/issues/82)
+Unlike the Webpack CSS Modules, this exports multiple files. You'll usually just want to concatenate these files (like Webpack), but feel free to do whatever works for you.
 
+At present, a class and keyframes definition cannot have the same name until [this is fixed](https://github.com/css-modules/postcss-modules-scope/issues/82).
+
 ![ES CSS Modules](https://raw.githubusercontent.com/jacobp100/es-css-modules/master/assets/logo-type.png)

src/patchGetScopedName.js

@@ -50,3 +50,5 @@ import { overEvery, overSome, equals, negate, includes, get } from 'lodash/fp';
 
-    if (isClass && !isValidClassname(name)) {
+    if (file === filename && isClass && !isValidClassname(name)) {
+      // Must be current file
+      // `composes: otherwise-invalid-export from 'somewhere-else.css'` is valid
       // Throws within promise, goes to .catch(...)
@@ -53,0 +55,0 @@ throw new Error(`Class name ${name} is invalid`);

test/index.js

@@ -19,2 +19,3 @@ import test from 'ava';
 const composesImport = join(baseDir, 'composes-import');
+const composesFromNpm = join(baseDir, 'composes-from-npm');
 const animations = join(baseDir, 'animations');
@@ -261,2 +262,25 @@ const animationsInvalidJsIdent = join(baseDir, 'animations-invalid-js-ident');
 
+test.serial('composes from npm', t => {
+  t.plan(3);
+
+  const button = join(composesFromNpm, 'styles/button.css');
+
+  const processor = postcss([
+    modulesEs({
+      jsFiles: join(composesFromNpm, 'App.js'),
+      getJsExports(name, jsFile) {
+        parseWithDefaultOptions(jsFile);
+        t.pass();
+      },
+    }),
+  ]);
+
+  return processor
+    .process(readFileSync(button, 'utf-8'), { from: button })
+    .then(({ css, messages }) => {
+      t.is(css.indexOf(UNUSED_EXPORT), -1);
+      t.is(messages.length, 0);
+    });
+});
+
 test.serial('animations', t => {
@@ -263,0 +287,0 @@ t.plan(4);

No alert changes

Improved metrics

Total package byte prevSize

450936

0.58%

Number of package files

64

3.23%

Lines of code

1422

2.97%

Number of lines in readme file

108

22.73%

Worsened metrics

Dev dependency count

19

11.76%

Dependency changes

• + Added

  lodash@4.17.21
  (transitive)

• + Added

  postcss-remove-classes@1.0.4
  (transitive)

• + Added

  postcss-selector-parser@2.2.3
  (transitive)

• - Removed

  lodash@4.13.1
  (transitive)

• - Removed

  postcss-remove-classes@0.0.3
  (transitive)

• - Removed

  postcss-selector-parser@1.3.3
  (transitive)

• Updated

  lodash@^4.16.6

• Updated

  postcss@^5.2.5

• Updated

  postcss-remove-classes@^1.0.2