support transforming css within a file by range

egoist · Apr 4, 2018 · 038ff6b · 038ff6b
1 parent 69707cf
commit 038ff6b
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 8 deletions.
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,5 @@
 import path from 'path'
+import queryString from 'querystring'
 import fs from 'fs-extra'
 import { createFilter } from 'rollup-pluginutils'
 import Concat from 'concat-with-sourcemaps'
@@ -16,7 +17,19 @@ function inferOption(option, defaultValue) {
   return option ? {} : defaultValue
 }
 
-const SCOPED_REGEXP = /\?scoped=(.+)$/
+const QUERY_REGEXP = /\?(.+)$/
+
+function hasQuery(str) {
+  return QUERY_REGEXP.test(str)
+}
+
+function parseQuery(str) {
+  return queryString.parse(QUERY_REGEXP.exec(str)[1])
+}
+
+function stripQuery(str) {
+  return str.replace(QUERY_REGEXP, '')
+}
 
 export default (options = {}) => {
   const filter = createFilter(options.include, options.exclude)
@@ -58,22 +71,31 @@ export default (options = {}) => {
     name: 'postcss',
 
     resolveId(id, importer) {
-      if (importer && SCOPED_REGEXP.test(id)) {
+      if (importer && hasQuery(id)) {
         return path.resolve(path.dirname(importer), id)
       }
     },
 
-    load(id) {
-      if (SCOPED_REGEXP.test(id)) {
-        return fs.readFile(id.replace(SCOPED_REGEXP, ''), 'utf8')
+    async load(id) {
+      if (hasQuery(id)) {
+        const { start, end, file } = parseQuery(id)
+        const bareId = stripQuery(id)
+        const content = await fs.readFile(
+          file ? path.resolve(path.dirname(bareId), file) : bareId,
+          'utf8'
+        )
+        return start && end ?
+          content.slice(Number(start), Number(end)) :
+          content
       }
     },
 
     async transform(code, id) {
       let scoped
-      if (SCOPED_REGEXP.test(id)) {
-        scoped = SCOPED_REGEXP.exec(id)[1]
-        id = id.replace(SCOPED_REGEXP, '')
+      if (hasQuery(id)) {
+        const query = parseQuery(id)
+        scoped = query.scoped
+        id = stripQuery(id)
       }
 
       if (!filter(id) || !loaders.isSupported(id)) {

diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
@@ -854,6 +854,44 @@ console.log(css, css$1);
 "
 `;
 
+exports[`vue range: js code 1`] = `
+"'use strict';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css = \\"\\\\n.foo {\\\\n  color: red;\\\\n}\\\\n\\";
+styleInject(css);
+
+var css$1 = \\".foo {\\\\n  color: red; }\\\\n  .foo .bar {\\\\n    color: yellow; }\\\\n\\";
+styleInject(css$1);
+"
+`;
+
 exports[`vue scopedId: js code 1`] = `
 "'use strict';
 

diff --git a/test/fixtures/vue/range/foo.vue b/test/fixtures/vue/range/foo.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="foo">foo</div>
+</template>
+
+<style>
+.foo {
+  color: red;
+}
+</style>
+
+<style lang="scss">
+.foo {
+  color: red;
+  .bar {
+    color: yellow;
+  }
+}
+</style>
+
diff --git a/test/fixtures/vue/range/index.js b/test/fixtures/vue/range/index.js
@@ -0,0 +1,2 @@
+import './style.css?start=60&end=84&file=./foo.vue'
+import './style.scss?start=113&end=169&file=./foo.vue'
diff --git a/test/index.test.js b/test/index.test.js
@@ -295,6 +295,10 @@ snapshotMany('vue', [
   {
     title: 'scopedId',
     input: 'vue/scoped-id/index.js'
+  },
+  {
+    title: 'range',
+    input: 'vue/range/index.js'
   }
 ])