babel-plugin-transform-import-css - npm Package Compare versions

Comparing version 1.0.0-alpha.6 to 1.0.0-alpha.7

css-import-visitor.js

@@ -14,3 +14,3 @@ const { readFileSync } = require('fs');
     errorBoundary(node.source.value, () => {
-      if (!node.source.value.endsWith('.css')) return;
+      if (!node.source.value.endsWith(opts.ext || '.css')) return;
 
@@ -17,0 +17,0 @@ const { src } = requireResolve(node.source.value, path.resolve(file.opts.filename));

helpers.js

@@ -13,6 +13,2 @@ const t = require('@babel/types');
 
-function jssPathname(cssPathname) {
-  return cssPathname.replace(/\.css$/, '.jss.js');
-}
-
 function constAst(idAst, valueAst) {
@@ -22,19 +18,2 @@ return babelTemplate('const ID = VALUE')({ ID: idAst, VALUE: valueAst });
 
-// find options for this plugin
-function retreiveOptions(options, pluginApi) {
-  const isBabel6 = Array.isArray(options.plugins[0]);
-
-  // TODO: recheck
-  // we have to use this hack because plugin.key does not have to be 'css-modules-transform'
-  // so we will identify it by comparing manipulateOptions
-  return isBabel6
-    ? options.plugins.filter(
-      ([plugin]) => plugin.manipulateOptions === pluginApi.manipulateOptions
-    )[0][1]
-
-    : options.plugins.filter(
-      (plugin) => plugin.manipulateOptions === pluginApi.manipulateOptions
-    )[0].options;
-}
-
 module.exports = {
@@ -44,6 +23,4 @@ jsToAst,
   babelTemplate,
-  jssPathname,
   constAst,
   postcss,
-  retreiveOptions,
 };

index.js

@@ -9,3 +9,2 @@ // node >= 8
   jsToAst, jsStringToAst, constAst, postcss,
-  // retreiveOptions, jssPathname,
 } = require('./helpers');
@@ -36,3 +35,3 @@
           const postcssOptions = { generateScopedName: options.generateScopedName };
-          const { code, classesMap } = postcss.process(css, src, postcssOptions);
+          const { code, classesMap } = postcss.process(css, src, postcssOptions, options.configPath);
 
@@ -55,6 +54,2 @@ // const jssObject = cssToJss({ code });
 
-// function writeJssFile(jssObject, fromSrc) {
-//   promisify(writeFile)(jssPathname(fromSrc), `module.exports = ${ JSON.stringify(jssObject, null, 2) }`, 'utf8').catch(console.error);
-// }
-
 function classesMapConstAst({ importNode, classesMap }) {
@@ -68,10 +63,4 @@ // XXX: class-names API extending with jssObject (css-in-js object generated on source css)
 
-// function jssCallAst({ src }) {
-//   // TODO: create common jssEmptyPreset
-//   // TODO: target path (not src) OR do not write to separate jss.js file
-//   return jsStringToAst(`require('jss').create(jssEmptyPreset()).createStyleSheet(require('${ jssPathname(src) }'))`);
-// }
-
 function putStyleIntoHeadAst({ code }) {
   return jsStringToAst(`require('load-styles')(\`${ code }\`)`);
 }

package.json

 {
   "name": "babel-plugin-transform-import-css",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "description": "Injects imported styles (css-modules) into js",
@@ -26,2 +26,3 @@ "main": "index.js",
     "postcss-icss-selectors": "^2.0.3",
+    "postcss-load-config": "^2.0.0",
     "postcss-modules-extract-imports": "^2.0.0",
@@ -28,0 +29,0 @@ "postcss-modules-resolve-imports": "^1.3.0",

postcss.js

@@ -13,2 +13,4 @@ const genericNames = require('generic-names');
 const ResolveImports = require('postcss-modules-resolve-imports');
+const getPostcssrcPlugins = require('postcss-load-config/src/plugins');
+const getPostcssrcOptions = require('postcss-load-config/src/options');
 
@@ -18,6 +20,7 @@ const PWD = process.cwd();
 module.exports = {
-  process (css, fromSrc, options) {
+  process (css, fromSrc, options, configPath) {
     // TODO: load options, plugins from .postcssrc / postcss.config.js
-    const { plugins, ...configOptions } = loadConfig();
+    const { plugins, ...configOptions } = loadConfig(configPath);
     const runner = postcss(getPlugins(plugins, options));
+    // source maps don't needed here because we doesn't transform the css
     const lazyResult = runner.process(css, { ...configOptions, ...options, map: false, from: fromSrc });
@@ -33,4 +36,4 @@
 
-function getPlugins(plugins, { generateScopedName } = {}) {
-  const extensions = ['.css'];
+function getPlugins(plugins, { generateScopedName, ext } = {}) {
+  const extensions = [ext || '.css'];
   const resolveOpts = {}, prepend = [], append = plugins || [], mode = undefined, hashPrefix = undefined;
@@ -67,13 +70,20 @@ const scopedName = normalizeScopedName(generateScopedName, hashPrefix);
 
-function loadConfig() {
-  // TODO: custom config path
-  if (fs.existsSync(path.resolve(PWD, '.postcssrc'))) {
-    return JSON.parse(fs.readFileSync(path.resolve(PWD, '.postcssrc'), 'utf8'));
+function loadConfig(configPath) {
+  const { conf, confPath } = loadRawConf(configPath) || {};
+  if (!conf) return {};
+  return { ...conf, plugins: getPostcssrcPlugins(conf, confPath), options: getPostcssrcOptions(conf, confPath) };
+}
+
+function loadRawConf(configPath) {
+  const jsConfPath = /\.js$/.test(configPath) ? configPath : path.resolve(PWD, 'postcss.config.js');
+  if (fs.existsSync(jsConfPath)) {
+    const conf = require(jsConfPath);
+    return { conf, confPath: jsConfPath };
   }
 
-  if (fs.existsSync(path.resolve(PWD, 'postcss.config.js'))) {
-    return require(path.resolve(PWD, 'postcss.config.js'));
+  const jsonConfPath = /rc$|\.json$/.test(configPath) ? configPath : path.resolve(PWD, '.postcssrc')
+  if (fs.existsSync(jsonConfPath)) {
+    const conf = JSON.parse(fs.readFileSync(jsonConfPath, 'utf8'));
+    return { conf, confPath: jsonConfPath };
   }
-
-  return {};
 }

README.md

@@ -50,9 +50,20 @@ Injects class map imported from css-modules into js.
 # Api
-- `generateScopedName` *optional* css-modules scope template
+- `generateScopedName` — css-modules scope template. **Default**: `[name]__[local]___[hash:base64:5]`
+- `configPath` — postcss config path. **Default**: _auto detect_
+- `ext` — postcss files' extension. Typical use: `ext: '.pcss'`. **Default**: `'.css'`
 
 # Use Cases
 
-Bundling the css with js/react components.
+Bundling the css with npm packed library of js/react components.
 It is good for portability.
 
+# TODO
+- [x] babel@7
+- [x] `configPath` and `ext` options
+- [ ] Compatibility with mini-css-extract-plugin and extract-text-webpack-plugin.
+  babel-plugin-transform-import-css should skip `require('load-styles')(css)` inserting in that cases.
+- [ ] Support postcss configs in package.json
+- [ ] More flexible postcss config loader.
+  (asynchronous `postcss-load-config` lib can't be used due to synchronous nature of the babel).
+
 # Alternatives
@@ -59,0 +70,0 @@ - [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules)

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10626

increased by1.75%

Number of lines in readme file

84

increased by15.07%

Worsened metrics

Dependency count

12

increased by9.09%

Lines of code

177

decreased by-9.23%

Dependency changes

• + Addedpostcss-load-config@^2.0.0

• + Addedargparse@1.0.10(transitive)

• + Addedcaller-callsite@2.0.0(transitive)

• + Addedcaller-path@2.0.0(transitive)

• + Addedcallsites@2.0.0(transitive)

• + Addedcosmiconfig@5.2.1(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedesprima@4.0.1(transitive)

• + Addedimport-cwd@2.1.0(transitive)

• + Addedimport-fresh@2.0.0(transitive)

• + Addedimport-from@2.1.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-directory@0.3.1(transitive)

• + Addedjs-yaml@3.14.1(transitive)

• + Addedjson-parse-better-errors@1.0.2(transitive)

• + Addedparse-json@4.0.0(transitive)

• + Addedpostcss-load-config@2.1.2(transitive)

• + Addedresolve-from@3.0.0(transitive)

• + Addedsprintf-js@1.0.3(transitive)