Next-dev and snapshot tests: transform ecmascript with styled_compone…

…nts (#44)

To do:
* [x] The transform doesn't seem to be running properly yet. Fix this.

crates/next-core/src/next_client/context.rs

@@ -89,6 +89,7 @@ pub async fn get_client_module_options_context(
         // we try resolve it once at the root and pass down a context to all
         // the modules.
         enable_react_refresh,
+        enable_styled_components: true,
         enable_styled_jsx: true,
         enable_typescript_transform: true,
         preset_env_versions: Some(env),

crates/turbo-tasks/src/primitives.rs

@@ -15,6 +15,9 @@ impl StringVc {
     }
 }
 
+#[turbo_tasks::value(transparent)]
+pub struct U64(u64);
+
 #[turbo_tasks::value(transparent)]
 pub struct OptionString(Option<std::string::String>);
 

crates/turbopack-ecmascript/Cargo.toml

@@ -20,6 +20,7 @@ regex = "1.5.4"
 serde = "1.0.136"
 serde_json = "1.0.85"
 serde_regex = "1.1.0"
+styled_components = "0.52.1"
 styled_jsx = "0.29.1"
 tokio = "1.11.0"
 turbo-tasks = { path = "../turbo-tasks" }

crates/turbopack-ecmascript/src/parse.rs

@@ -19,8 +19,12 @@ use swc_core::{
         visit::VisitMutWith,
     },
 };
-use turbo_tasks::{primitives::StringVc, Value, ValueToString};
-use turbo_tasks_fs::{FileContent, FileSystemPath};
+use turbo_tasks::{
+    primitives::{StringVc, U64Vc},
+    Value, ValueToString,
+};
+use turbo_tasks_fs::{FileContent, FileSystemPath, FileSystemPathVc};
+use turbo_tasks_hash::{DeterministicHasher, Xxh3Hash64Hasher};
 use turbopack_core::{
     asset::{AssetContent, AssetVc},
     code_builder::{EncodedSourceMap, EncodedSourceMapVc},
@@ -137,14 +141,24 @@ pub async fn parse(
     let content = source.content();
     let fs_path = &*source.path().await?;
     let fs_path_str = &*source.path().to_string().await?;
+    let file_path_hash = *hash_file_path(source.path()).await? as u128;
     let ty = ty.into_value();
     Ok(match &*content.await? {
         AssetContent::File(file) => match &*file.await? {
             FileContent::NotFound => ParseResult::NotFound.cell(),
             FileContent::Content(file) => match String::from_utf8(file.content().to_vec()) {
                 Ok(string) => {
                     let transforms = &*transforms.await?;
-                    parse_content(string, fs_path, fs_path_str, source, ty, transforms).await?
+                    parse_content(
+                        string,
+                        fs_path,
+                        fs_path_str,
+                        file_path_hash,
+                        source,
+                        ty,
+                        transforms,
+                    )
+                    .await?
                 }
                 // FIXME: report error
                 Err(_err) => ParseResult::Unparseable.cell(),
@@ -158,6 +172,7 @@ async fn parse_content(
     string: String,
     fs_path: &FileSystemPath,
     fs_path_str: &str,
+    file_path_hash: u128,
     source: AssetVc,
     ty: EcmascriptModuleAssetType,
     transforms: &[EcmascriptInputTransform],
@@ -262,6 +277,7 @@ async fn parse_content(
                 top_level_mark,
                 unresolved_mark,
                 file_name_str: fs_path.file_name(),
+                file_name_hash: file_path_hash,
             };
             for transform in transforms.iter() {
                 transform.apply(&mut parsed_program, &context).await?;
@@ -290,3 +306,11 @@ async fn parse_content(
     }
     Ok(result.cell())
 }
+
+#[turbo_tasks::function]
+async fn hash_file_path(file_path_vc: FileSystemPathVc) -> Result<U64Vc> {
+    let file_path = &*file_path_vc.await?;
+    let mut hasher = Xxh3Hash64Hasher::new();
+    hasher.write_bytes(file_path.file_name().as_bytes());
+    Ok(U64Vc::cell(hasher.finish()))
+}

crates/turbopack-ecmascript/src/transform/mod.rs

@@ -30,6 +30,7 @@ pub enum EcmascriptInputTransform {
     },
     CommonJs,
     PresetEnv(EnvironmentVc),
+    StyledComponents,
     StyledJsx,
     TypeScript,
     ClientDirective(StringVc),
@@ -46,6 +47,7 @@ pub struct TransformContext<'a> {
     pub unresolved_mark: Mark,
     pub source_map: &'a Arc<SourceMap>,
     pub file_name_str: &'a str,
+    pub file_name_hash: u128,
 }
 
 impl EcmascriptInputTransform {
@@ -58,6 +60,7 @@ impl EcmascriptInputTransform {
             top_level_mark,
             unresolved_mark,
             file_name_str,
+            file_name_hash,
         }: &TransformContext<'_>,
     ) -> Result<()> {
         match *self {
@@ -127,6 +130,13 @@ impl EcmascriptInputTransform {
                     inject_helpers()
                 ));
             }
+            EcmascriptInputTransform::StyledComponents => {
+                program.visit_mut_with(&mut styled_components::styled_components(
+                    FileName::Anon,
+                    file_name_hash,
+                    serde_json::from_str("{}")?,
+                ));
+            }
             EcmascriptInputTransform::StyledJsx => {
                 // Modeled after https://github.com/swc-project/plugins/blob/ae735894cdb7e6cfd776626fe2bc580d3e80fed9/packages/styled-jsx/src/lib.rs
                 let real_program = std::mem::replace(program, Program::Module(Module::dummy()));

crates/turbopack/src/module_options/mod.rs

@@ -24,6 +24,7 @@ impl ModuleOptionsVc {
         let ModuleOptionsContext {
             enable_react_refresh,
             enable_styled_jsx,
+            enable_styled_components,
             enable_typescript_transform,
             preset_env_versions,
             ref custom_ecmascript_app_transforms,
@@ -38,6 +39,10 @@ impl ModuleOptionsVc {
         if enable_styled_jsx {
             transforms.push(EcmascriptInputTransform::StyledJsx)
         }
+        if enable_styled_components {
+            transforms.push(EcmascriptInputTransform::StyledComponents)
+        }
+
         transforms.push(EcmascriptInputTransform::React {
             refresh: enable_react_refresh,
         });

crates/turbopack/src/module_options/module_options_context.rs

@@ -5,6 +5,7 @@ use turbopack_ecmascript::EcmascriptInputTransform;
 #[derive(Default)]
 pub struct ModuleOptionsContext {
     pub enable_react_refresh: bool,
+    pub enable_styled_components: bool,
     pub enable_styled_jsx: bool,
     pub enable_typescript_transform: bool,
     pub preset_env_versions: Option<EnvironmentVc>,

crates/turbopack/tests/snapshot.rs

@@ -143,6 +143,7 @@ async fn run(resource: &'static str) -> Result<()> {
             TransitionsByNameVc::cell(HashMap::new()),
             env,
             ModuleOptionsContext {
+                enable_styled_components: true,
                 preset_env_versions: Some(env),
                 ..Default::default()
             }

crates/turbopack/tests/snapshot/integration/styled_components/input/index.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+const MyButton = styled.button`
+  background: blue;
+`;
+
+console.log(MyButton);

crates/turbopack/tests/snapshot/integration/styled_components/output/05161_hoist-non-react-statics_dist_hoist-non-react-statics.cjs.js.16ec6995fb521e87.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sections": [
+    {"offset": {"line": 4, "column": 0}, "map": {"version":3,"sources":["/[project]/node_modules/.pnpm/[email protected]/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js"],"sourcesContent":["'use strict';\n\nvar reactIs = require('react-is');\n\n/**\n * Copyright 2015, Yahoo! Inc.\n * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.\n */\nvar REACT_STATICS = {\n  childContextTypes: true,\n  contextType: true,\n  contextTypes: true,\n  defaultProps: true,\n  displayName: true,\n  getDefaultProps: true,\n  getDerivedStateFromError: true,\n  getDerivedStateFromProps: true,\n  mixins: true,\n  propTypes: true,\n  type: true\n};\nvar KNOWN_STATICS = {\n  name: true,\n  length: true,\n  prototype: true,\n  caller: true,\n  callee: true,\n  arguments: true,\n  arity: true\n};\nvar FORWARD_REF_STATICS = {\n  '$$typeof': true,\n  render: true,\n  defaultProps: true,\n  displayName: true,\n  propTypes: true\n};\nvar MEMO_STATICS = {\n  '$$typeof': true,\n  compare: true,\n  defaultProps: true,\n  displayName: true,\n  propTypes: true,\n  type: true\n};\nvar TYPE_STATICS = {};\nTYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;\nTYPE_STATICS[reactIs.Memo] = MEMO_STATICS;\n\nfunction getStatics(component) {\n  // React v16.11 and below\n  if (reactIs.isMemo(component)) {\n    return MEMO_STATICS;\n  } // React v16.12 and above\n\n\n  return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;\n}\n\nvar defineProperty = Object.defineProperty;\nvar getOwnPropertyNames = Object.getOwnPropertyNames;\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\nvar getPrototypeOf = Object.getPrototypeOf;\nvar objectPrototype = Object.prototype;\nfunction hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {\n  if (typeof sourceComponent !== 'string') {\n    // don't hoist over string (html) components\n    if (objectPrototype) {\n      var inheritedComponent = getPrototypeOf(sourceComponent);\n\n      if (inheritedComponent && inheritedComponent !== objectPrototype) {\n        hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);\n      }\n    }\n\n    var keys = getOwnPropertyNames(sourceComponent);\n\n    if (getOwnPropertySymbols) {\n      keys = keys.concat(getOwnPropertySymbols(sourceComponent));\n    }\n\n    var targetStatics = getStatics(targetComponent);\n    var sourceStatics = getStatics(sourceComponent);\n\n    for (var i = 0; i < keys.length; ++i) {\n      var key = keys[i];\n\n      if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {\n        var descriptor = getOwnPropertyDescriptor(sourceComponent, key);\n\n        try {\n          // Avoid failures from read-only properties\n          defineProperty(targetComponent, key, descriptor);\n        } catch (e) {}\n      }\n    }\n  }\n\n  return targetComponent;\n}\n\nmodule.exports = hoistNonReactStatics;\n"],"names":[],"mappings":"AAAA;AAEA,IAAI,UAAU;AAMd,IAAI,gBAAgB;IAClB,mBAAmB,IAAI;IACvB,aAAa,IAAI;IACjB,cAAc,IAAI;IAClB,cAAc,IAAI;IAClB,aAAa,IAAI;IACjB,iBAAiB,IAAI;IACrB,0BAA0B,IAAI;IAC9B,0BAA0B,IAAI;IAC9B,QAAQ,IAAI;IACZ,WAAW,IAAI;IACf,MAAM,IAAI;AACZ;AACA,IAAI,gBAAgB;IAClB,MAAM,IAAI;IACV,QAAQ,IAAI;IACZ,WAAW,IAAI;IACf,QAAQ,IAAI;IACZ,QAAQ,IAAI;IACZ,WAAW,IAAI;IACf,OAAO,IAAI;AACb;AACA,IAAI,sBAAsB;IACxB,YAAY,IAAI;IAChB,QAAQ,IAAI;IACZ,cAAc,IAAI;IAClB,aAAa,IAAI;IACjB,WAAW,IAAI;AACjB;AACA,IAAI,eAAe;IACjB,YAAY,IAAI;IAChB,SAAS,IAAI;IACb,cAAc,IAAI;IAClB,aAAa,IAAI;IACjB,WAAW,IAAI;IACf,MAAM,IAAI;AACZ;AACA,IAAI,eAAe,CAAC;AACpB,YAAY,CAAC,QAAQ,UAAU,CAAC,GAAG;AACnC,YAAY,CAAC,QAAQ,IAAI,CAAC,GAAG;AAE7B,SAAS,WAAW,SAAS,EAAE;IAE7B,IAAI,QAAQ,MAAM,CAAC,YAAY;QAC7B,OAAO;IACT,CAAC;IAGD,OAAO,YAAY,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI;AAChD;AAEA,IAAI,iBAAiB,OAAO,cAAc;AAC1C,IAAI,sBAAsB,OAAO,mBAAmB;AACpD,IAAI,wBAAwB,OAAO,qBAAqB;AACxD,IAAI,2BAA2B,OAAO,wBAAwB;AAC9D,IAAI,iBAAiB,OAAO,cAAc;AAC1C,IAAI,kBAAkB,OAAO,SAAS;AACtC,SAAS,qBAAqB,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE;IACzE,IAAI,OAAO,oBAAoB,UAAU;QAEvC,IAAI,iBAAiB;YACnB,IAAI,qBAAqB,eAAe;YAExC,IAAI,sBAAsB,uBAAuB,iBAAiB;gBAChE,qBAAqB,iBAAiB,oBAAoB;YAC5D,CAAC;QACH,CAAC;QAED,IAAI,OAAO,oBAAoB;QAE/B,IAAI,uBAAuB;YACzB,OAAO,KAAK,MAAM,CAAC,sBAAsB;QAC3C,CAAC;QAED,IAAI,gBAAgB,WAAW;QAC/B,IAAI,gBAAgB,WAAW;QAE/B,IAAK,IAAI,IAAI,GAAG,IAAI,KAAK,MAAM,EAAE,EAAE,EAAG;YACpC,IAAI,MAAM,IAAI,CAAC,EAAE;YAEjB,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAC,aAAa,SAAS,CAAC,IAAI,KAAK,CAAC,CAAC,iBAAiB,aAAa,CAAC,IAAI,KAAK,CAAC,CAAC,iBAAiB,aAAa,CAAC,IAAI,GAAG;gBAC7I,IAAI,aAAa,yBAAyB,iBAAiB;gBAE3D,IAAI;oBAEF,eAAe,iBAAiB,KAAK;gBACvC,EAAE,OAAO,GAAG,CAAC;YACf,CAAC;QACH;IACF,CAAC;IAED,OAAO;AACT;AAEA,OAAO,OAAO,GAAG"}},
+    {"offset": {"line": 85, "column": 0}, "map": {"version": 3, "names": [], "sources": [], "mappings": "A"}}]
+}