diff --git a/.eslintrc b/.eslintrc index 23e639e7..273b5c61 100644 --- a/.eslintrc +++ b/.eslintrc @@ -11,13 +11,15 @@ }, "overrides": [ { - "files": ["test/**", "www/*.js"], + "files": ["test/**", "www/**"], "env": { "jest": true }, "rules": { "global-require": "off", "no-console": "off", + "react/react-in-jsx-scope": "off", + "import/extensions": "off", "import/no-extraneous-dependencies": [ "error", { "devDependencies": true } diff --git a/docs/cross-file-dependencies.md b/docs/cross-file-dependencies.md deleted file mode 100644 index c21f72d4..00000000 --- a/docs/cross-file-dependencies.md +++ /dev/null @@ -1,64 +0,0 @@ -# Cross File Dependencies - -astroturf allows targeting other styled components, or stylesheet modules. - -**ButtonToolbar.js** - -```js -import styled from 'astroturf/react'; - -import Button from './Button'; - -const ButtonToolbar = styled('div')` - display: inline-flex; - align-items: center;' - - & > ${Button} { - margin-right: 3rem; - } -`; -``` - -Under the hood this makes use of the css-modules `composes` feature to import -css classes from other files and compose them into the new class selector. - -Rather than try and track exports of style sheets and styled components directly, -`astroturf` uses a simple naming convention to map imports to styles in other modules. -In particular, the imported _name_ of a styled component should be the exactly the -same as the name assigned to the component in it's host file. - -Take the import of `Button` in the example above. The implementation of `Button.js` looks -something like this: - -**Button.js** - -```js -import styled from 'astroturf/react'; - -const Button = styled('button')` - /* ... */ -`; - -export default Button; -``` - -Notice that the styled component here is assigned to the variable named `Button`. -astroturf uses this information to identify the extracted style by the name `Button`. -In order to reference this componennt in `ButtonToolbar` it's _important_ that it's -imported as the same name. - -so this will work: - -```js -import Button from './Button'; -``` - -Whereas this: - -```js -import MyButton from './Button'; -``` - -will not work, because `Button.js` has no style identified by the name: `MyButton`. -The same logic also applies to named exports, and even allows aliasing, e.g. -`import { Button as BaseButton } from './Button'` would work. diff --git a/package.json b/package.json index 0c022d5a..cb439a7f 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "build:pick": "cherry-pick --cwd=lib --input-dir=../src/runtime --cjs-dir=cjs --esm-dir=esm", "build:runtime": "4c build src/runtime --no-copy-files --no-types", "build:tools": "4c build -d lib --no-esm -- --ignore \"**/runtime/**\"", - "build": "yarn build:tools && yarn build:runtime && yarn build:pick && yarn copy:types", + "build": "yarn build:tools && yarn build:runtime && yarn build:pick && yarn copy:types && yarn file-butler prepare-publish-dir lib", "deploy-docs": "yarn --cwd www build --prefix-paths && gh-pages -d www/public", "release": "4c release", "start": "yarn --cwd ./example start" @@ -60,38 +60,39 @@ "__file_snapshots__" ] }, - "author": "4Catalyzer", + "author": "Jason Quense", "license": "MIT", "bugs": { "url": "https://github.com/4Catalyzer/astroturf/issues" }, "homepage": "https://github.com/4Catalyzer/astroturf#readme", "dependencies": { - "@babel/code-frame": "^7.16.0", - "@babel/core": "^7.16.5", - "@babel/generator": "^7.16.5", - "@babel/helper-module-imports": "^7.16.0", - "@babel/plugin-transform-react-jsx": "^7.16.5", - "@babel/template": "^7.16.0", - "@babel/traverse": "^7.16.5", - "@babel/types": "^7.16.0", - "@modular-css/processor": "^27.0.3", + "@babel/code-frame": "^7.18.6", + "@babel/core": "^7.19.6", + "@babel/generator": "^7.20.0", + "@babel/helper-module-imports": "^7.18.6", + "@babel/plugin-transform-react-jsx": "^7.19.0", + "@babel/template": "^7.18.10", + "@babel/traverse": "^7.20.0", + "@babel/types": "^7.20.0", + "@modular-css/processor": "^28.1.4", "common-tags": "^1.8.2", "cosmiconfig": "^7.0.1", "css-loader": "^5.1.3", "fast-levenshtein": "^3.0.0", "find-cache-dir": "^3.3.2", "globby": "^11.0.0", - "json5": "^2.2.0", + "json5": "^2.2.1", "lodash": "^4.17.21", - "magic-string": "^0.25.7", + "magic-string": "^0.26.7", "picocolors": "^1.0.0", - "postcss": "^8.4.5", + "postcss": "^8.4.18", "postcss-nested": "^5.0.6", - "postcss-scss": "^4.0.2", - "resolve": "^1.20.0", + "postcss-scss": "^4.0.5", + "resolve": "^1.22.1", + "unique-slug": "^4.0.0", "webpack-virtual-modules": "^0.3.2", - "yargs": "^17.3.0" + "yargs": "^17.6.0" }, "peerDependencies": { "webpack": ">=5" diff --git a/src/cli.ts b/src/cli.ts index 1d8e2018..f15fd61a 100644 --- a/src/cli.ts +++ b/src/cli.ts @@ -243,7 +243,7 @@ export async function handler({ files, outFile, configFile }) { await writeFile( file, - replaceStyleTemplates({}, file, content, changeset).code, + replaceStyleTemplates(file, content, changeset, false).code, ); } diff --git a/src/getLocalIdent.ts b/src/getLocalIdent.ts new file mode 100644 index 00000000..e01d68e7 --- /dev/null +++ b/src/getLocalIdent.ts @@ -0,0 +1,17 @@ +import path from 'path'; + +import slug from 'unique-slug'; + +export function getLocalIdent( + loaderContext, + _localIdentName, + localName, + options, +) { + const query = new URLSearchParams(loaderContext.resourceQuery || ''); + return query.get('styleId') + ? `${slug( + path.relative(options.context, loaderContext.resourcePath), + )}${query.get('styleId')}_${localName}` + : null; +} diff --git a/src/inline-loader.ts b/src/inline-loader.ts index a0d4c55c..35c1486f 100644 --- a/src/inline-loader.ts +++ b/src/inline-loader.ts @@ -18,12 +18,16 @@ import replaceComposes from './utils/replaceComposes'; const cacheDir = findCacheDir({ name: 'astroturf-loader' }); -mkdirSync(cacheDir, { recursive: true }); +try { + mkdirSync(cacheDir, { recursive: true }); +} catch (error) { + console.error('astroturf/loader could not create cache directory', error); +} const inMemoryStyleCache = new Map>(); const hash = (name: string) => - `${crypto.createHash('md4').update(name).digest('hex')}.cache`; + `${crypto.createHash('sha1').update(name).digest('hex')}.cache`; const cache = { async set(source: string, newStyles: Style[]) { @@ -33,7 +37,11 @@ const cache = { styles.set(style.identifier, style); }); - await fs.writeFile(`${cacheDir}/${hash(source)}`, serialize(styles)); + try { + await fs.writeFile(`${cacheDir}/${hash(source)}`, serialize(styles)); + } catch { + /* ignore */ + } }, async get(source: string): Promise | undefined> { @@ -43,7 +51,7 @@ const cache = { try { styles = deserialize(await fs.readFile(`${cacheDir}/${hash(source)}`)); inMemoryStyleCache.set(source, styles!); - } catch (err) { + } catch { /* ignore */ } } @@ -68,15 +76,17 @@ module.exports = async function loader( ); if (loaderOpts.style) { - const styleId = this.resourceQuery.slice(1); + const styleId = new URLSearchParams(this.resourceQuery || '').get( + 'styleId', + ); const styles = await cache.get(resourcePath); - let style = styles?.get(styleId); + let style = styles?.get(styleId!); if (!style) { await loadModule(resourcePath); - style = inMemoryStyleCache.get(resourcePath)?.get(styleId); + style = inMemoryStyleCache.get(resourcePath)?.get(styleId!); } if (!style) { @@ -86,6 +96,7 @@ module.exports = async function loader( ), ); } + if (!this._module.matchResource) this._module.matchResource = style.absoluteFilePath; @@ -95,7 +106,7 @@ module.exports = async function loader( function getLoaderRequest(from: string, to: string, id: string) { const cssBase = basename(to); - const file = `${cssBase}!=!astroturf/inline-loader?style=1!${from}?${id}`; + const file = `${cssBase}!=!astroturf/inline-loader?style=1!${from}?styleId=${id}`; return file; } @@ -196,10 +207,10 @@ module.exports = async function loader( await cache.set(resourcePath, styles); const result = replaceStyleTemplates( - this, resourcePath, content, changeset, + this.sourceMap, ); cb(null, result.code, result.map as any); diff --git a/src/plugin.ts b/src/plugin.ts index bff7f3a7..dbf3d5c6 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -61,6 +61,7 @@ export default function plugin(): PluginObj { enter(path: NodePath, state: any) { state.styleImports = new ImportInjector(path); state.defaultedOptions = defaults(state.opts, { + nesting: 'auto', extension: '.module.css', cssTagName: 'css', styledTagName: 'styled', diff --git a/src/types.ts b/src/types.ts index 3fedfa35..453c3f02 100644 --- a/src/types.ts +++ b/src/types.ts @@ -25,6 +25,7 @@ export interface ResolvedOptions { configFile?: string | boolean; writeFiles: boolean; allowGlobal: boolean; + nesting: boolean | 'auto'; cssTagName: string | false; styledTagName: string | false; diff --git a/src/utils/buildTaggedTemplate.ts b/src/utils/buildTaggedTemplate.ts index 50386be5..f547567f 100644 --- a/src/utils/buildTaggedTemplate.ts +++ b/src/utils/buildTaggedTemplate.ts @@ -371,8 +371,10 @@ export default function buildTaggedTemplate(opts: Options) { css = `${allImports.trim()}\n\n${css}`.trim(); if ( - location !== 'STYLESHEET' && - opts.style.absoluteFilePath.endsWith('.css') + opts.pluginOptions.nesting === true || + (opts.pluginOptions.nesting === 'auto' && + location !== 'STYLESHEET' && + opts.style.absoluteFilePath.endsWith('.css')) ) { try { css = processCss(css, opts.style.absoluteFilePath).css; diff --git a/src/utils/loaders.ts b/src/utils/loaders.ts index 96e134b7..6b33ada3 100644 --- a/src/utils/loaders.ts +++ b/src/utils/loaders.ts @@ -148,11 +148,10 @@ export function collectStyles( } export function replaceStyleTemplates( - loaderContext: any, filename: string, src: string, locations: { start?: number; end?: number; code?: string }[], - // content: Map, + sourceMap = true, ) { locations = sortBy(locations, (i) => i.start || 0); @@ -170,8 +169,12 @@ export function replaceStyleTemplates( return { code: magic.toString(), - map: loaderContext.sourceMap - ? magic.generateMap({ includeContent: true, source: filename }) + map: sourceMap + ? magic.generateMap({ + includeContent: true, + source: filename, + hires: true, + }) : null, }; } diff --git a/src/vfs-loader.ts b/src/vfs-loader.ts index fcfef439..adb7c69d 100644 --- a/src/vfs-loader.ts +++ b/src/vfs-loader.ts @@ -141,10 +141,10 @@ module.exports = async function loader( }); const result = replaceStyleTemplates( - this, resourcePath, content, changeset, + this.sourceMap, ); cb(null, result.code, result.map as any); diff --git a/src/vite-plugin.ts b/src/vite-plugin.ts new file mode 100644 index 00000000..f6fa42d0 --- /dev/null +++ b/src/vite-plugin.ts @@ -0,0 +1,97 @@ +// import { createFilter } from '@rollup/pluginutils'; + +import { collectStyles, replaceStyleTemplates } from './utils/loaders'; + +function astroturf({ ...rest }: any = {}) { + // const filter = createFilter(include || /\.(jsx?|tsx?)/i, exclude); + const cssLookup = new Map(); + const pathMap = new Map(); + const sourceMetadata = new Map(); + + function filter(file) { + return !!file.match(/\.(jsx?|tsx?)/i); + } + + function transform(content, filename) { + const metadata = collectStyles(content, filename, undefined as any, rest); + + const { code, map } = replaceStyleTemplates( + filename, + content, + metadata.changeset, + true, + ); + + sourceMetadata.set(filename, metadata); + + metadata.styles.forEach(({ absoluteFilePath, requirePath, value }) => { + cssLookup.set(absoluteFilePath, value); + pathMap.set(requirePath, absoluteFilePath); + }); + + return { + code, + map, + styles: metadata.styles, + }; + } + + return { + name: 'astroturf', + + load(id) { + return cssLookup.get(id) || cssLookup.get(process.cwd() + id); + }, + + resolveId(importee) { + importee = importee.split('?')[0]; + const id = cssLookup.get(importee) || pathMap.get(importee); + return id; + }, + + async handleHotUpdate(hmr) { + if (!filter(hmr.file)) return undefined; + + // console.log("ff", hmr, hmr.modules); + const prev = sourceMetadata.get(hmr.file); + + if (!prev) return undefined; + + const module = hmr.modules.find((m) => m.file === hmr.file); + const affectedModules = new Set(hmr.modules); + + const content = await hmr.read(); + const { styles } = transform(content, hmr.file); + + try { + module.importedModules?.forEach((m) => { + if ( + styles.find( + (s) => + s.absoluteFilePath === m.file || + s.absoluteFilePath === process.cwd() + m.file, + ) + ) { + affectedModules.add(m); + } + }); + } catch (err) { + console.log(err); + } + + return [...affectedModules]; + }, + + transform(content, id) { + if (!filter(id) || !content.includes('astroturf')) { + return undefined; + } + + const { code, map } = transform(content, id); + + return { code, map }; + }, + }; +} + +export default astroturf; diff --git a/test/__file_snapshots__/integration-js.js b/test/__file_snapshots__/integration-js.js index 5fdb741a..5590fddc 100644 --- a/test/__file_snapshots__/integration-js.js +++ b/test/__file_snapshots__/integration-js.js @@ -13,15 +13,15 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var astroturf_react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! astroturf/react */ "../src/runtime/react.js"); -/* harmony import */ var Button_styles_module_css_astroturf_inline_loader_style_1_integration_Button_js_styles__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! Button-styles.module.css!=!astroturf/inline-loader?style=1!./integration/Button.js?styles */ "Button-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?styles"); -/* harmony import */ var Button_module_css_astroturf_inline_loader_style_1_integration_Button_js_Button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! Button.module.css!=!astroturf/inline-loader?style=1!./integration/Button.js?Button */ "Button.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?Button"); +/* harmony import */ var Button_styles_module_css_astroturf_inline_loader_style_1_integration_Button_js_styleId_styles__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! Button-styles.module.css!=!astroturf/inline-loader?style=1!./integration/Button.js?styleId=styles */ "Button-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?styleId=styles"); +/* harmony import */ var Button_module_css_astroturf_inline_loader_style_1_integration_Button_js_styleId_Button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! Button.module.css!=!astroturf/inline-loader?style=1!./integration/Button.js?styleId=Button */ "Button.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?styleId=Button"); -const styles = Button_styles_module_css_astroturf_inline_loader_style_1_integration_Button_js_styles__WEBPACK_IMPORTED_MODULE_1__["default"]; +const styles = Button_styles_module_css_astroturf_inline_loader_style_1_integration_Button_js_styleId_styles__WEBPACK_IMPORTED_MODULE_1__["default"]; const Button = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_0__["default"])('button', null, { displayName: "Button", - styles: Button_module_css_astroturf_inline_loader_style_1_integration_Button_js_Button__WEBPACK_IMPORTED_MODULE_2__["default"] + styles: Button_module_css_astroturf_inline_loader_style_1_integration_Button_js_styleId_Button__WEBPACK_IMPORTED_MODULE_2__["default"] }); /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Button); @@ -44,15 +44,13 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var widget__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! widget */ "./integration/shared/widget/index.js"); /* harmony import */ var withConfig__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! withConfig */ "./integration/shared/withConfig/index.js"); /* harmony import */ var _Button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Button */ "./integration/Button.js"); -/* harmony import */ var main_styles_module_css_astroturf_inline_loader_style_1_integration_main_js_styles__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! main-styles.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?styles */ "main-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styles"); -/* harmony import */ var main_FancyBox_module_css_astroturf_inline_loader_style_1_integration_main_js_FancyBox__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! main-FancyBox.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?FancyBox */ "main-FancyBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?FancyBox"); -/* harmony import */ var main_FancierBox_module_css_astroturf_inline_loader_style_1_integration_main_js_FancierBox__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! main-FancierBox.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?FancierBox */ "main-FancierBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?FancierBox"); -/* harmony import */ var main_CssProp1_div_module_css_astroturf_inline_loader_style_1_integration_main_js_CssProp1_div__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! main-CssProp1_div.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?CssProp1_div */ "main-CssProp1_div.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?CssProp1_div"); -/* harmony import */ var main_CssProp2_span_module_css_astroturf_inline_loader_style_1_integration_main_js_CssProp2_span__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! main-CssProp2_span.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?CssProp2_span */ "main-CssProp2_span.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?CssProp2_span"); +/* harmony import */ var main_styles_module_css_astroturf_inline_loader_style_1_integration_main_js_styleId_styles__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! main-styles.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?styleId=styles */ "main-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=styles"); +/* harmony import */ var main_FancyBox_module_css_astroturf_inline_loader_style_1_integration_main_js_styleId_FancyBox__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! main-FancyBox.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?styleId=FancyBox */ "main-FancyBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=FancyBox"); +/* harmony import */ var main_FancierBox_module_css_astroturf_inline_loader_style_1_integration_main_js_styleId_FancierBox__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! main-FancierBox.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?styleId=FancierBox */ "main-FancierBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=FancierBox"); +/* harmony import */ var main_CssProp1_div_module_css_astroturf_inline_loader_style_1_integration_main_js_styleId_CssProp1_div__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! main-CssProp1_div.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?styleId=CssProp1_div */ "main-CssProp1_div.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=CssProp1_div"); +/* harmony import */ var main_CssProp2_span_module_css_astroturf_inline_loader_style_1_integration_main_js_styleId_CssProp2_span__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! main-CssProp2_span.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?styleId=CssProp2_span */ "main-CssProp2_span.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=CssProp2_span"); /** @jsxRuntime classic*/ - /** @jsx _j */ - /** @jsxFrag _j.F */ @@ -66,21 +64,22 @@ __webpack_require__.r(__webpack_exports__); + const width = 75; -const styles = main_styles_module_css_astroturf_inline_loader_style_1_integration_main_js_styles__WEBPACK_IMPORTED_MODULE_6__["default"]; +const styles = main_styles_module_css_astroturf_inline_loader_style_1_integration_main_js_styleId_styles__WEBPACK_IMPORTED_MODULE_6__["default"]; const FancyBox = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_1__["default"])('div', null, { displayName: "FancyBox", - styles: main_FancyBox_module_css_astroturf_inline_loader_style_1_integration_main_js_FancyBox__WEBPACK_IMPORTED_MODULE_7__["default"] + styles: main_FancyBox_module_css_astroturf_inline_loader_style_1_integration_main_js_styleId_FancyBox__WEBPACK_IMPORTED_MODULE_7__["default"] }); const FancierBox = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_1__["default"])('div', null, { displayName: "FancierBox", - styles: main_FancierBox_module_css_astroturf_inline_loader_style_1_integration_main_js_FancierBox__WEBPACK_IMPORTED_MODULE_8__["default"] + styles: main_FancierBox_module_css_astroturf_inline_loader_style_1_integration_main_js_styleId_FancierBox__WEBPACK_IMPORTED_MODULE_8__["default"] }); function MyComponent() { return (0,astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__["default"])(astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__["default"].F, null, (0,astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__["default"])("div", { - css: [main_CssProp1_div_module_css_astroturf_inline_loader_style_1_integration_main_js_CssProp1_div__WEBPACK_IMPORTED_MODULE_9__["default"], null, [foo && main_CssProp1_div_module_css_astroturf_inline_loader_style_1_integration_main_js_CssProp1_div__WEBPACK_IMPORTED_MODULE_9__["default"].cssProp1DivVariant0]] + css: [main_CssProp1_div_module_css_astroturf_inline_loader_style_1_integration_main_js_styleId_CssProp1_div__WEBPACK_IMPORTED_MODULE_9__["default"], null, [foo && main_CssProp1_div_module_css_astroturf_inline_loader_style_1_integration_main_js_styleId_CssProp1_div__WEBPACK_IMPORTED_MODULE_9__["default"].cssProp1DivVariant0]] }, (0,astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__["default"])("div", null, "hey "), (0,astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__["default"])("span", { - css: [main_CssProp2_span_module_css_astroturf_inline_loader_style_1_integration_main_js_CssProp2_span__WEBPACK_IMPORTED_MODULE_10__["default"]] + css: [main_CssProp2_span_module_css_astroturf_inline_loader_style_1_integration_main_js_styleId_CssProp2_span__WEBPACK_IMPORTED_MODULE_10__["default"]] }, "yo"))); } /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FancierBox); @@ -98,12 +97,12 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var astroturf_react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! astroturf/react */ "../src/runtime/react.js"); -/* harmony import */ var Widget_module_css_astroturf_inline_loader_style_1_integration_shared_widget_index_js_Widget__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! Widget.module.css!=!astroturf/inline-loader?style=1!./integration/shared/widget/index.js?Widget */ "Widget.module.css!=!../src/inline-loader.ts?style=1!./integration/shared/widget/index.js?Widget"); +/* harmony import */ var Widget_module_css_astroturf_inline_loader_style_1_integration_shared_widget_index_js_styleId_Widget__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! Widget.module.css!=!astroturf/inline-loader?style=1!./integration/shared/widget/index.js?styleId=Widget */ "Widget.module.css!=!../src/inline-loader.ts?style=1!./integration/shared/widget/index.js?styleId=Widget"); const Widget = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_0__["default"])('div', null, { displayName: "Widget", - styles: Widget_module_css_astroturf_inline_loader_style_1_integration_shared_widget_index_js_Widget__WEBPACK_IMPORTED_MODULE_1__["default"] + styles: Widget_module_css_astroturf_inline_loader_style_1_integration_shared_widget_index_js_styleId_Widget__WEBPACK_IMPORTED_MODULE_1__["default"] }); /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Widget); @@ -120,21 +119,21 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var astroturf_react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! astroturf/react */ "../src/runtime/react.js"); -/* harmony import */ var index_Doodad_module_scss_astroturf_inline_loader_style_1_integration_shared_withConfig_index_js_Doodad__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! index-Doodad.module.scss!=!astroturf/inline-loader?style=1!./integration/shared/withConfig/index.js?Doodad */ "index-Doodad.module.scss!=!../src/inline-loader.ts?style=1!./integration/shared/withConfig/index.js?Doodad"); +/* harmony import */ var index_Doodad_module_scss_astroturf_inline_loader_style_1_integration_shared_withConfig_index_js_styleId_Doodad__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! index-Doodad.module.scss!=!astroturf/inline-loader?style=1!./integration/shared/withConfig/index.js?styleId=Doodad */ "index-Doodad.module.scss!=!../src/inline-loader.ts?style=1!./integration/shared/withConfig/index.js?styleId=Doodad"); const Doodad = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_0__["default"])('div', null, { displayName: "Doodad", - styles: index_Doodad_module_scss_astroturf_inline_loader_style_1_integration_shared_withConfig_index_js_Doodad__WEBPACK_IMPORTED_MODULE_1__["default"] + styles: index_Doodad_module_scss_astroturf_inline_loader_style_1_integration_shared_withConfig_index_js_styleId_Doodad__WEBPACK_IMPORTED_MODULE_1__["default"] }); /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Doodad); /***/ }), -/***/ "Button.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?Button": -/*!******************************************************************************************!*\ - !*** Button.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?Button ***! - \******************************************************************************************/ +/***/ "Button.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?styleId=Button": +/*!**************************************************************************************************!*\ + !*** Button.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?styleId=Button ***! + \**************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -146,10 +145,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "Button-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?styles": -/*!*************************************************************************************************!*\ - !*** Button-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?styles ***! - \*************************************************************************************************/ +/***/ "Button-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?styleId=styles": +/*!*********************************************************************************************************!*\ + !*** Button-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?styleId=styles ***! + \*********************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -161,10 +160,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "main-CssProp1_div.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?CssProp1_div": -/*!*********************************************************************************************************!*\ - !*** main-CssProp1_div.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?CssProp1_div ***! - \*********************************************************************************************************/ +/***/ "main-CssProp1_div.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=CssProp1_div": +/*!*****************************************************************************************************************!*\ + !*** main-CssProp1_div.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=CssProp1_div ***! + \*****************************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -176,10 +175,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "main-CssProp2_span.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?CssProp2_span": -/*!***********************************************************************************************************!*\ - !*** main-CssProp2_span.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?CssProp2_span ***! - \***********************************************************************************************************/ +/***/ "main-CssProp2_span.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=CssProp2_span": +/*!*******************************************************************************************************************!*\ + !*** main-CssProp2_span.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=CssProp2_span ***! + \*******************************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -191,10 +190,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "main-FancierBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?FancierBox": -/*!*****************************************************************************************************!*\ - !*** main-FancierBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?FancierBox ***! - \*****************************************************************************************************/ +/***/ "main-FancierBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=FancierBox": +/*!*************************************************************************************************************!*\ + !*** main-FancierBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=FancierBox ***! + \*************************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -206,10 +205,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "main-FancyBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?FancyBox": -/*!*************************************************************************************************!*\ - !*** main-FancyBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?FancyBox ***! - \*************************************************************************************************/ +/***/ "main-FancyBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=FancyBox": +/*!*********************************************************************************************************!*\ + !*** main-FancyBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=FancyBox ***! + \*********************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -221,10 +220,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "main-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styles": -/*!*********************************************************************************************!*\ - !*** main-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styles ***! - \*********************************************************************************************/ +/***/ "main-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=styles": +/*!*****************************************************************************************************!*\ + !*** main-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styleId=styles ***! + \*****************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -236,10 +235,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "Widget.module.css!=!../src/inline-loader.ts?style=1!./integration/shared/widget/index.js?Widget": -/*!*******************************************************************************************************!*\ - !*** Widget.module.css!=!../src/inline-loader.ts?style=1!./integration/shared/widget/index.js?Widget ***! - \*******************************************************************************************************/ +/***/ "Widget.module.css!=!../src/inline-loader.ts?style=1!./integration/shared/widget/index.js?styleId=Widget": +/*!***************************************************************************************************************!*\ + !*** Widget.module.css!=!../src/inline-loader.ts?style=1!./integration/shared/widget/index.js?styleId=Widget ***! + \***************************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -251,10 +250,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "index-Doodad.module.scss!=!../src/inline-loader.ts?style=1!./integration/shared/withConfig/index.js?Doodad": -/*!******************************************************************************************************************!*\ - !*** index-Doodad.module.scss!=!../src/inline-loader.ts?style=1!./integration/shared/withConfig/index.js?Doodad ***! - \******************************************************************************************************************/ +/***/ "index-Doodad.module.scss!=!../src/inline-loader.ts?style=1!./integration/shared/withConfig/index.js?styleId=Doodad": +/*!**************************************************************************************************************************!*\ + !*** index-Doodad.module.scss!=!../src/inline-loader.ts?style=1!./integration/shared/withConfig/index.js?styleId=Doodad ***! + \**************************************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); diff --git a/test/__file_snapshots__/issue-365-js.js b/test/__file_snapshots__/issue-365-js.js index 9b409cdd..ba582435 100644 --- a/test/__file_snapshots__/issue-365-js.js +++ b/test/__file_snapshots__/issue-365-js.js @@ -9,26 +9,26 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var astroturf_react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! astroturf/react */ "../src/runtime/react.js"); -/* harmony import */ var issue_365_mixins_module_css_astroturf_inline_loader_style_1_Users_jquense_src_astroturf_test_integration_issue_365_js_mixins__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! issue-365-mixins.module.css!=!astroturf/inline-loader?style=1!./integration/issue-365.js?mixins */ "issue-365-mixins.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?mixins"); -/* harmony import */ var issue_365_BlockStyled_module_css_astroturf_inline_loader_style_1_Users_jquense_src_astroturf_test_integration_issue_365_js_BlockStyled__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! issue-365-BlockStyled.module.css!=!astroturf/inline-loader?style=1!./integration/issue-365.js?BlockStyled */ "issue-365-BlockStyled.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?BlockStyled"); +/* harmony import */ var issue_365_mixins_module_css_astroturf_inline_loader_style_1_Users_jasonquense_code_astroturf_test_integration_issue_365_js_styleId_mixins__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! issue-365-mixins.module.css!=!astroturf/inline-loader?style=1!./integration/issue-365.js?styleId=mixins */ "issue-365-mixins.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?styleId=mixins"); +/* harmony import */ var issue_365_BlockStyled_module_css_astroturf_inline_loader_style_1_Users_jasonquense_code_astroturf_test_integration_issue_365_js_styleId_BlockStyled__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! issue-365-BlockStyled.module.css!=!astroturf/inline-loader?style=1!./integration/issue-365.js?styleId=BlockStyled */ "issue-365-BlockStyled.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?styleId=BlockStyled"); -const mixins = issue_365_mixins_module_css_astroturf_inline_loader_style_1_Users_jquense_src_astroturf_test_integration_issue_365_js_mixins__WEBPACK_IMPORTED_MODULE_1__["default"].cls2; +const mixins = issue_365_mixins_module_css_astroturf_inline_loader_style_1_Users_jasonquense_code_astroturf_test_integration_issue_365_js_styleId_mixins__WEBPACK_IMPORTED_MODULE_1__["default"].cls2; const Block = /*#__PURE__*/React.createElement(BlockStyled, { active: false }); const BlockStyled = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_0__["default"])("div", null, { displayName: "BlockStyled", - styles: issue_365_BlockStyled_module_css_astroturf_inline_loader_style_1_Users_jquense_src_astroturf_test_integration_issue_365_js_BlockStyled__WEBPACK_IMPORTED_MODULE_2__["default"] + styles: issue_365_BlockStyled_module_css_astroturf_inline_loader_style_1_Users_jasonquense_code_astroturf_test_integration_issue_365_js_styleId_BlockStyled__WEBPACK_IMPORTED_MODULE_2__["default"] }); /***/ }), -/***/ "issue-365-BlockStyled.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?BlockStyled": -/*!*****************************************************************************************************************!*\ - !*** issue-365-BlockStyled.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?BlockStyled ***! - \*****************************************************************************************************************/ +/***/ "issue-365-BlockStyled.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?styleId=BlockStyled": +/*!*************************************************************************************************************************!*\ + !*** issue-365-BlockStyled.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?styleId=BlockStyled ***! + \*************************************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -40,10 +40,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "issue-365-mixins.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?mixins": -/*!*******************************************************************************************************!*\ - !*** issue-365-mixins.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?mixins ***! - \*******************************************************************************************************/ +/***/ "issue-365-mixins.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?styleId=mixins": +/*!***************************************************************************************************************!*\ + !*** issue-365-mixins.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?styleId=mixins ***! + \***************************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); diff --git a/test/__file_snapshots__/loader__css-prop.js b/test/__file_snapshots__/loader__css-prop.js index 99da6903..9d33b626 100644 --- a/test/__file_snapshots__/loader__css-prop.js +++ b/test/__file_snapshots__/loader__css-prop.js @@ -3,11 +3,11 @@ /** @jsxFrag _j.F */ import _j from "astroturf/jsx"; import React from "react"; -import _CssProp1_button from "css-prop-CssProp1_button.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?CssProp1_button"; -import _CssProp2_button from "css-prop-CssProp2_button.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?CssProp2_button"; -import _CssProp3_button from "css-prop-CssProp3_button.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?CssProp3_button"; -import _CssProp4_button from "css-prop-CssProp4_button.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?CssProp4_button"; -import _CssProp5_span from "css-prop-CssProp5_span.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?CssProp5_span"; +import _CssProp1_button from "css-prop-CssProp1_button.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?styleId=CssProp1_button"; +import _CssProp2_button from "css-prop-CssProp2_button.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?styleId=CssProp2_button"; +import _CssProp3_button from "css-prop-CssProp3_button.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?styleId=CssProp3_button"; +import _CssProp4_button from "css-prop-CssProp4_button.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?styleId=CssProp4_button"; +import _CssProp5_span from "css-prop-CssProp5_span.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?styleId=CssProp5_span"; function Button() { return