gajus / gajus/babel-plugin-react-css-modules

`exclude` won't work with `require.context`

Open
#65 3 comments 0 reactions 0 assignees View on GitHub
question
Dominant language
JavaScript
Stars
2k
Forks
159
PR merge metrics
No merged PRs in 30d

Description

Hi,

I'll try to open a PR if I get no where, but I'd like to exclude a file from being transformed, but that file is required via `require.context`. when debugging, here is the output of `stats` when it tries to go over the file (config.js) that uses `require.context`:

```
PluginPass {
_c: Map {},
dynamicData: {},
plugin:
Plugin {
_c: Map {},
dynamicData: {},
initialized: true,
raw: {},
key: 'react-css-modules',
manipulateOptions: [Function: manipulateOptions],
post: undefined,
pre: undefined,
visitor:
{ _exploded: {},
_verified: {},
ImportDeclaration: [Object],
JSXElement: [Object],
Program: [Object] } },
key: 'react-css-modules',
file:
File {
_c: Map {},
dynamicData: {},
pipeline: Pipeline {},
log:
Logger {
filename: '/Users/mshertzberg/Gizmodo/kinja-components/.storybook/config.js',
file: [Circular] },
opts:
{ filename: '/Users/mshertzberg/Gizmodo/kinja-components/.storybook/config.js',
filenameRelative: '/Users/mshertzberg/Gizmodo/kinja-components/.storybook/config.js',
inputSourceMap: undefined,
env: [Object],
mode: undefined,
retainLines: false,
highlightCode: true,
suppressDeprecationMessages: false,
presets: [],
plugins: [Object],
ignore: [],
only: undefined,
code: true,
metadata: true,
ast: true,
extends: undefined,
comments: true,
shouldPrintComment: undefined,
wrapPluginVisitorMethod: undefined,
compact: 'auto',
minified: false,
sourceMap: false,
sourceMaps: false,
sourceMapTarget: 'config.js',
sourceFileName: '.storybook/config.js',
sourceRoot: '/Users/mshertzberg/Gizmodo/kinja-components',
babelrc: false,
sourceType: 'module',
auxiliaryCommentBefore: undefined,
auxiliaryCommentAfter: undefined,
resolveModuleSource: undefined,
getModuleId: undefined,
moduleRoot: '/Users/mshertzberg/Gizmodo/kinja-components',
moduleIds: false,
moduleId: undefined,
passPerPreset: false,
parserOpts: false,
generatorOpts: false,
basename: 'config' },
parserOpts:
{ sourceType: 'module',
sourceFileName: '/Users/mshertzberg/Gizmodo/kinja-components/.storybook/config.js',
plugins: [Object] },
pluginVisitors: [ [Object] ],
pluginPasses: [ [Object] ],
metadata: { usedHelpers: [], marked: [], modules: [Object] },
dynamicImportTypes: {},
dynamicImportIds: {},
dynamicImports: [],
declarations: {},
usedHelpers: {},
path:
NodePath {
parent: [Object],
hub: [Object],
contexts: [Object],
data: {},
shouldSkip: false,
shouldStop: false,
removed: false,
state: undefined,
opts: [Object],
skipKeys: {},
parentPath: null,
context: [Object],
container: [Object],
listKey: undefined,
inList: false,
parentKey: 'program',
key: 'program',
node: [Object],
scope: [Object],
type: 'Program',
typeAnnotation: null },
ast:
Node {
type: 'File',
start: 0,
end: 722,
loc: [Object],
program: [Object],
comments: [],
tokens: [Object] },
code: 'import \'preact/devtools\';\nimport {\n\tconfigure,\n\taddDecorator,\n\twithCentered,\n\twithKnobs,\n\tsetOptions\n} from \'../config/storybook\';\nimport { StyletronHOC } from \'../config/styletron\';\n\nfunction loadStories() {\n\tconst req = require.context(\'../components\', true, /story.js$/);\n\treq.keys().forEach(filename => req(filename));\n}\n\naddDecorator(getStory => {getStory()});\naddDecorator(withCentered);\naddDecorator(withKnobs);\n\nsetOptions({\n\tname: \'kinja-components\',\n\turl: \'https://github.com/gawkermedia/kinja-components\',\n\tgoFullScreen: false,\n\tshowLeftPanel: true,\n\tshowDownPanel: true,\n\tshowSearchBox: false,\n\tdownPanelInRight: true,\n\tsortStoriesByKind: true\n});\n\nconfigure(loadStories, module);\n',
shebang: '',
hub: Hub { file: [Circular], options: undefined },
scope:
Scope {
uid: 16,
parent: null,
hub: [Object],
parentBlock: [Object],
block: [Object],
path: [Object],
labels: [Object],
references: [Object],
bindings: [Object],
globals: [Object],
uids: {},
data: {},
crawling: false } },
opts:
{ generateScopedName: '[hash:base64:10]',
webpackHotModuleReloading: true,
exclude: 'story',
filetypes: { '.scss': 'postcss-scss' } } }
```

I would imagine this requires a PR to implement?

Thanks.

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the issue from .storybook/config.js, focusing on the require.context call and the shown exclude option. Inspect how exclusion is applied when files are loaded through that context. Done means the intended excluded file is not transformed while the other context-loaded files continue to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.